articles

Home / DeveloperSection / Articles / JavaScript Placement in HTML File

JavaScript Placement in HTML File

Danish Khan 6346 04-Oct-2012

Introduction:

In this article I am going to explain actually where to place Java Script in an HTML file. According to our need we can place it in head section, body section or in both or in an external file.  I am going to explain Placement of Java Script code in an HTML file.

There can be four choices:

1.       Java Script in <head> </head> section.

2.       Java Script in <body> section.

3.       Java Script in <head> and <body> both.

4.       JavaScript in an External file.

Java Script in <head> section:

When we want our Java Script code to execute upon some event, like on the button click, then we will be placing java script in the head section.

Java Script functions in the head section:
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title></title>
    <script type="text/javascript">
        function SayHi() {
            alert("Welcome! to the world of Java Script")
        }
    </script>
</head>
<body>
    <div>
        <input type="button" id="btnPress" value="Hello! Click on me" onclick="SayHi()"/>
    </div>
</body>
</html>
 At the button we will call the Java Script function as follows:
<body>

    <div>
        <input type="button" id="btnPress" value="Hello! Click on me" onclick="SayHi()"/>
    </div>
</body>
On the button click we will be getting an alert message box displaying the message:

JavaScript Placement in HTML File

Java Script in the body section:

If we want to execute Java Script as soon as the page loads, (to load some page content) then we will be writing the our script in the body section.

Example of Java Script in the body section:  
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title></title>
</head>
<body>
    <script type="text/javascript">
        document.write("Java Script in the body Section")
    </script>
</body>
</html> 
Output:

JavaScript Placement in HTML File

Java Script in head and body section:

We can use Java Script in the head section as well as the body section at the same time.

At the time when body part is loaded the Java Script is executed automatically, but the Java Script written at the head section is called when button is clicked or on some other event.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function SayHi() {
            alert("Welcome! Script at the Head Section")} </script> </head>

<body>

    <script type="text/javascript">
        alert("Java Script function called at the body section")
    </script>

    <div>
    <input type="button" id="btnSubmit" value="Hello! Click on me" onclick="SayHi()"/>
    </div>
</body>
</html>

 The code which is written in the head section will be only called when button is clicked. The Java Script code written in the body section will be called as soon as the body is loaded.

Calling Java Script function from the external file:

There are some cases when there is a need to share java script function between several web pages, Writing Java Script function for every html web page is a tedious task, so a external Java Script file can be created and we can include it whenever needed from any of our html web pages, this also provides reusability.

Here is an example of showing how to use external Java Script file in your Html Web Pages.

 
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <script type="text/javascript" src="ExternalScript.js"></script>
</head>
<body>
    <div>
       <input type="button" id="btnSubmit" value="Hello! Click on me" onclick="SayHi()"/>
    </div>
</body>
</html>

There is an external Java Script file which is saved with .js extension.  We only have


to call those functions in our html web page with the help of script function.


In external  Java Script file write the function and save the file with .js extension.

For eg. here I have saved the file as ExternalScript.js

function SayHi() {
    alert("External Java script function called")
}

 

JavaScript Placement in HTML File

Conclusion: 

Through this article we came to know where to place our Java Script code in our HTML file.


When to keep it in head section, when to keep it in body section or when to use


external file and use that external Java Script file in any of our html pages.


Updated 07-Sep-2019

Leave Comment

Comments

Liked By