Where to place JavaScript code in the HTML file

Back to: JavaScript Tutorial For Beginners and Professionals

Where to place JavaScript code in the HTML file

In this article, I am going to discuss Where to place JavaScript code in the HTML file in detail. Please read our previous article before proceeding to this article, where we discussed how to debug JavaScript code. As part of this article, we are going to discuss the following pointers.

Where to place JavaScript code in the HTML file?
Advantages of external JavaScript over inline JavaScript.

Where to place JavaScript code in the HTML file?

JavaScript code will be executed immediately while the page loads into the browser. This is not always what we want the JavaScript code to run. Sometimes we want to execute a script when a page loads other times when the user triggers an event. There are various ways to include JS code in our HTML file.

Scripts in <head>…</head> section of HTML
Scripts in <body>…</body> section of HTML
Scripts in <head>…</head> and <body>…</body> sections of HTML
Scripts in an external file and then include in <head>…</head> section of HTML

Scripts in <head>…</head> section of HTML:

If we want the JavaScript code should be executed when it is called or when an event is triggered then we should keep it in the head section.

Example:

<html>
<head>
    <script type="text/javascript">
        function message() {
            alert("script is in head section")
        }
    </script>
</head>

<body onload=message()>
</body>
</html>

Output:

Scripts in <body>…</body> section of HTML

If we want the script should be run when the page loads then we should keep the JavaScript program in the body section. If we place a script in the body section it will generate the content on the page.

Example:

<html>
<head>
</head>

<body>
    Hello
    <script type="text/javascript">
        document.write("script is in body section");
    </script>
</body>
</html>

Output:

Scripts in <head>…</head> and <body>…</body> sections of HTML

We can place an unlimited number of scripts in the HTML file in the head or body section. So we can have the script in both the body and the head section also.

Example:

<html>
<head>
    <script type="text/javascript">
        function message() {
            alert("script is in head section")
        }
    </script>
</head>

<body onload=message()>
    <script type="text/javascript">
        document.write("script is in head and body section");
    </script>
</body>
</html>

Output:

Scripts in an external file and then include in <head>…</head> section of HTML:

If we want to reuse a single script code on multiple pages then we can place the script in an external file. The script tag provides a method to store JavaScript in an external file and then include it into HTML files using the src attribute of the script tag. An external JavaScript file generally has a .js extension. It is good practice to places all JavaScript files into a single JS file.

The advantage of using an external JS file is that editing the script file has become easier as it can be done in one location, rather than editing the code in the script tags on each page containing the script.

Example: Using an external js file

<html>
<head>
    <script type="text/javascript" src="external.js">
    </script>
</head>
<body>
    <button onclick="alertMessage()" _value="Call JavaScript function from external.js" />
</body>
</html>

External JS file (external.js)

function alertMessage() {
  alert('Hello from exteranl.js!')
}

Advantages of external JavaScript over inline JavaScript:

You will get the following advantages of using external JavaScript files over the inline JavaScript

Maintainability and Reusability: You can refer to the external JavaScript files on multiple pages without having to duplicate the code on every page. That means you can reuse the same JavaScript code on multiple pages. If you need to change something, then you need to change only in one place. As a result, maintenance will become easier.

Separation of Concerns: As we are storing the JavaScript file in a separate .js file, so it adheres to the separation of concerns design principle. In general, it is always a good practice to separate HTML, CSS, and JavaScript as it makes it easier to work with them. As well as it also allows multiple developers to work simultaneously.

Performance: The external JavaScript file can be cached by the browser, whereas the inline JavaScript on the page is loaded every time the page loads. So, you will get better performance with the external JavaScript file.

That’s it for today. Here, in this, I try to explain Where to place JavaScript code in the HTML file. In the next article, I am going to discuss JavaScript Comments and Statements in detail with Examples. I hope you enjoy this Where to place JavaScript code in the HTML file article.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.

Where to place JavaScript code in the HTML file