Open In App
Related Articles

How to Add JavaScript in HTML Document ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

In this article, we are going to learn how can we add JavaScript to an HTML document. JavasScript code is inserted between <script> and </script> tags when used in an HTML document. Scripts can be placed inside the body or the head section of an HTML page or inside both the head and body. We can also place JavaScript outside the HTML file which can be linked by specifying its source in the script tag.

These are the basic approaches for doing this:

Add JavaScript Code inside the Head Section

JavaScript code is placed inside the head section of an HTML page and uses the <script> element. Insert the <script> tag between the opening <head> and closing </head> tags, and place your JavaScript code inside. This ensures the script is loaded and executed when the page loads.

Example: This example shows showing the addition of a script file inside the head section.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Add JavaScript Code inside Head Section
    </title>
 
    <script>
        function myFun() {
            document.getElementById("demo")
                .innerHTML = "Content changed!";
        }
    </script>
</head>
 
<body>
    <h2>
        Add JavaScript Code
        inside Head Section
    </h2>
 
    <h3 id="demo" style="color:green;">
        GeeksforGeeks
    </h3>
 
    <button type="button" onclick="myFun()">
        Click Here
    </button>
</body>
 
</html>

                    

Output: 

Add_JS_head

Add JavaScript Code inside Body Section

JavaScript Code is placed inside the body section of an HTML page and in this also we use <script> </script> tag inside and above the closing tag of </body>.

Example: This example shows showing the addition of a script file inside the body section.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Add JavaScript Code inside Body Section
    </title>
</head>
 
<body>
    <h2>
        Add JavaScript Code
        inside Body Section
    </h2>
 
    <h3 id="demo" style="color:green;">
        GeeksforGeeks
    </h3>
 
    <button type="button" onclick="myFun()">
        Click Here
    </button>
 
    <script>
        function myFun() {
            document.getElementById("demo")
                .innerHTML = "Content changed!";
        }
    </script>
</body>
 
</html>

                    

Output: 

Add_JS_body

External JavaScript

JavaScript can also be used in external files. The file extension of the JavaScript file will be .js. To use an external script put the name of the script file in the src attribute of a script tag. External scripts cannot contain script tags. 

Example: This example shows showing the linking of an external script file inside the head section.

Javascript

function myFun () {
    document.getElementById('demo')
        .innerHTML = 'Paragraph Changed'
}

                    

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        External JavaScript
    </title>
    <script src="script.js"></script>
</head>
 
<body>
    <h2>
        External JavaScript
    </h2>
 
    <h3 id="demo" style="color:green;">
        GeeksforGeeks
    </h3>
 
    <button type="button" onclick="myFun()">
        Click Here
    </button>
</body>
 
</html>

                    

 Output:

External_JS

Advantages of External JavaScript

  • Cached JavaScript files can speed up page loading.
  • It makes JavaScript and HTML easier to read and maintain.
  • It separates the HTML and JavaScript code.
  • It focuses on code reusability which is one JavaScript Code that can run in various HTML files.

External JavaScript References

We can reference an external script in three ways in javascript:

  • By using a full URL:
src = "https://www.geeksforgeek.org/js/script.js"
  • By using a file path:
src = "/js/script.js"
  • Without using any path:
src = "script.js"


Last Updated : 28 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads