How To Add JavaScript In HTML Document? (2024) -

JavaScript 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.

Add JavaScript Code inside Head Section

JavaScript code is placed inside the head section of an HTML page and the function is invoked when a button is clicked.

Example: 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:black;">
        codeconfig.in
    </h3>
    <button type="button" onclick="myFun()">
        Click Here
    </button>
</body>
</html>

Output:

Javascript

Add JavaScript Code inside Body Section

JavaScript Code is placed inside the body section of an HTML page and the function is invoked when a button is clicked.

Example:

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:black;">
        CodeConfig.in
    </h3>
    <button type="button" onclick="mytest()">
        Click Here
    </button>
    <script>
        function mytest() {
            document.getElementById("demo")
                .innerHTML = "Content changed!";
        }
    </script>
</body>
</html>

Output:

JavaScript

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: Script.js

JavaScript

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

Example: html

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

Output:

41 CodeConfig where to put javascript in an html document - https://codeconfig.in

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://codeconfig.in/js/script.js"

By using a file path:

src = "/js/script.js"

Without using any path:

src = "script.js"

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, CodeConfig.in Courses are your key to success. We provide top-quality content at no cost, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!