Where to place JavaScript code in the HTML file

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.

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 JS code to run. Sometimes we want to execute a script when a page loads other times when the user triggers an events

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:

Where to place JavaScript code in the HTML file

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:

JavaScripts in the Body Section of a HTML File

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:

JavaScripts in both Head and Body Section of a HTML File

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

If we want to reuse single scripts 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!')
}

That’s it for today. Here, in this, I try to explain Where to place JavaScript code in the HTML file. I hope you enjoy this article.

Leave a Reply

Your email address will not be published. Required fields are marked *