JavaScript Hello World Example

Summary: This tutorial helps you get started with JavaScript by showing you how to embed JavaScript code into an HTML page.

To insert JavaScript into an HTML page, you use the <script> element. There are two ways to use the <script> element in an HTML page:

  • Embed JavaScript code directly into the HTML page.
  • Reference an external JavaScript code file.

Embed JavaScript code on an HTML page

Placing JavaScript code inside the <script> element directly is not recommended and should be used only for proof of concept or testing purposes.

The JavaScript code in the <script> element is interpreted from top to bottom. For example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Hello World Example</title>
    <script>
        alert('Hello, World!');
    </script>
</head>
<body>
</body>
</html>Code language: HTML, XML (xml)

In the <script> element, we use the alert() function to display the Hello, World! message.

Include an external JavaScript file

To include a JavaScript from an external file:

  • First, create a file whose extension is .js, for example, app.js and place it in the js directory. Note that while placing the JavaScript file in the js directory is not required, it is considered good practice.
  • Then, use the URL to the JavasScript source code file in the src attribute of the <script> element.

The following shows the contents of the app.js file:

alert('Hello, World!');Code language: JavaScript (javascript)

The following displays the contents of the helloworld.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Hello World Example</title>
    <script src="js/app.js"></script>
</head>
<body>

</body>
</html>Code language: HTML, XML (xml)

If you launch the helloworld.html file in the web browser, you will see an alert that displays the Hello, World! message.

Note that you can load a JavaScript file from a remote server. This enables you to serve up JavaScript from various domains e.g., content delivery network (CDN) to enhance page loading speed.

When you have multiple JavaScript files on a page, the JavaScript engine interprets the files in the order in which they appear. For example:

<script src="js/service.js"></script>
<script src="js/app.js"></script>Code language: HTML, XML (xml)

In this example, the JavaScript engine will interpret the service.js and the app.js files sequentially. It completes interpreting the service.js file first before moving on to the app.js file.

For a page that includes many external JavaScript files, the blank page may be displayed during the rendering phase.

To prevent this, you include the JavaScript file just before the </body> tag as shown in this example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Hello World Example</title>
</head>
<body>
 
   <!-- end of page content here-->
   <script src="js/service.js"></script>
   <script src="js/app.js"></script>
</body>
</html>Code language: HTML, XML (xml)

The async and defer attributes

To modify how the browser load and execute JavaScript files, you use one of two attributes of the <script> element: async and defer. These attributes take effect only on the external script files.

async attribute

The async attribute instructs the web browser to execute the JavaScript file asynchronously. However, it does not guarantee that the script files will execute in the order in which they appear. For example:

<script async src="service.js"></script>
<script async src="app.js"></script>Code language: HTML, XML (xml)

The app.js file might execute before the service.js file. Therefore, you must ensure that there is no dependency between them.

defer attribute

The defer attribute requests the web browser to execute the script file after the HTML document has been parsed.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript defer demonstration</title>
    <script defer src="defer-script.js"></script>
</head>
<body>
</body>
</html>Code language: HTML, XML (xml)

Even though we place the <script> element in the <head> section, the script will wait until the browser receives the closing </html> tag to start executing.

Summary

  • Use <script> element to include a JavaScript file in an HTML page.
  • The async attribute of the <script> element instructs the web browser to fetch the JavaScript file in parallel and then parse and execute it as soon as the JavaScript file becomes available.
  • The defer attribute of the <script> element allows the web browser to execute the JavaScript file after the document has been parsed.
Was this tutorial helpful ?