This is an old revision of the document!

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-js.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
</head>
<body>
    <h1>Hello World! from JS in a script tag</h1>
    <script>
        alert('Hello world!');
        const h1 = document.querySelector('h1');
        console.log(h1.textContent);
    </script>
</body>
</html>

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:

<div id="container">
  <p class="text">Hello, World!</p>
</div>

You could use document.querySelector to select the <p> 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:

<div id="container" class="text">Hello World!</div>

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 <script> tag. Browsers that support HTML5 will default to JavaScript if the type attribute is omitted.

In previous versions of HTML, it was common to see the type attribute set like this:

<script type="text/javascript">
  // Your JavaScript code here
</script>

However, since HTML5, this is considered unnecessary, and the following is completely acceptable and standard:

<script>
  // Your JavaScript code here
</script>

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 <html> 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.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
</head>
<body>
    <h1>Hello World! from an imported script file</h1>
    <script src="./hello-script.js"></script>
</body>
</html>

Java Script code:

hello-script.js

alert('Hello world!');
const h1 = document.querySelector('h1');
console.log(h1.textContent);

Med Java

Table of Contents

Java Script Hello World

HTML + JS code in the same file

HTML + JS code in separated files