====== Java Script Hello World ======
The following script will display 'Hello World' both in a popup window and in the browser's console. To execute the script, it must be run within a web browser.
You can view the console output by accessing the browser's developer tools.
===== HTML + JS code in the same file =====
Hello World!
Hello World! from JS in a script tag
The **document.querySelector** method is a very useful and commonly used function in JavaScript that returns the first element within the document that matches a specified selector or group of selectors. \\
The syntax looks like this:
const element = document.querySelector(selector);
Here, selector is a string containing one or more CSS selectors separated by commas. This method will return the first element that is a descendant of the document that matches the specified selectors. \\
__Example 1__:
You could use **document.querySelector** to select the element with the class "text":
const textElement = document.querySelector('.text');
console.log(textElement.textContent); // Outputs "Hello, World!"
Or you could select it by its parent's ID:
const textElement = document.querySelector('#container .text');
**#container .text** selector targets elements with the class text that are descendants of the element with the ID container. It doesn't matter how deeply nested the .text elements are within #container; they will be selected.
__Example 2__:
Hello World!
To select the text 'Hello World':
const textElement = document.querySelector('#container.text');
**#container.text** selector targets an element that has both the ID container and the class text. It's looking for a single element that matches both of these criteria.
If you want to select elements with the class text that are inside an element with the ID container, use **#container .text**. \\ If you want to select an element that has both the ID container and the class text, use **#container.text**.
In modern HTML (specifically, HTML5), it's no longer necessary to specify the **type attribute** when using JavaScript within a
However, since HTML5, this is considered unnecessary, and the following is completely acceptable and standard:
If you're writing HTML that must conform to older standards or you want to be explicitly clear about the type, you can still include the type attribute. However, for most modern web development, it can safely be omitted.
The **lang attribute** in the tag **doesn't default to "en"** or any other language value. If it's not specified, browsers and other user agents have no definitive way to know the language of the document. \\
Omitting the lang attribute might not cause any immediate or apparent issues, especially if the content is in English, since many tools and systems may assume English as a default. However, it's still considered best practice to include the lang attribute to explicitly declare the language. \\
This can be particularly important for accessibility tools like screen readers, which use the language information to determine the correct pronunciation rules. It's also useful for search engines, which may use the language information to serve the page to the right audience. \\
In summary, **while many systems might assume English as the default language if the lang attribute is omitted, it's still recommended to include it** to ensure that your HTML is semantically correct and accessible.
===== HTML + JS code in separated files =====
HTML code:
Hello World!
Hello World! from an imported script file
Java Script code:
alert('Hello world!');
const h1 = document.querySelector('h1');
console.log(h1.textContent);
See also [[java-script:script-tag-placement|where to place the script tag]].