Open In App

How to Add JavaScript in HTML Document?

Last Updated : 12 May, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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.

This basic HTML code includes JavaScript implementations using various approaches.

HTML
<!DOCTYPE html>
<html>

<head>
    <title>
        Add JavaScript Code inside Head
        Section
    </title>
</head>

<body>
    <h2>
        Adding JavaScript in HTML Document
    </h2>

    <h3 id="demo" style="color: green">
        GeeksforGeeks
    </h3>

    <button type="button" onclick="myFun()">
        Click Here
    </button>
</body>

</html>

Examples of Adding JavaScript in HTML Document

JavaScript inside <head> Tag

JavaScript code is placed inside the <head> section of an HTML page and uses the <script> element. This ensures the script is loaded and executed when the page loads.

Example: This example shows 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: 

JavaScript inside the <head> example output

JavaScript inside <body> Tag

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: 

JavaScript inside <Body> example output

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.

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>
JavaScript
/* Filename: script.js*/

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

Output:

External JavaScript example output

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"


Previous Article
Next Article

Similar Reads

How to fix “No character encoding declared at document level” in HTML Document ?
This article intends to solve the “No character encoding declared at document level” issue in your HTML program. So, before getting to the solution, we need to understand what this issue means. And for that first, we need to know about character encoding in HTML. What is character encoding in HTML? Character encoding is a system used to represent c
5 min read
How to add emoji in HTML document ?
Emojis are the characters from the Unicode character set that look like images or icons ????????????‍♂️. They can be sized, copied, or pasted like any other character in HTML. UTF-8 is the default charset that is used in HTML documents because it contains almost all of the characters and symbols. Emojis can be inserted in HTML documents by specifyi
3 min read
How to add copyright symbol to your HTML document ?
You can create an HTML copyright symbol using the &amp;copy; or &#169; symbol codes. These are often enclosed within a paragraph. The ampersand denotes that want to embed a special character onto the web page. There are three ways to add such symbols to an HTML document. Table of Content Using HEX CodeUsing HTML EntityUsing Decimal UnicodeUsing HEX
2 min read
HTML Course Structure of an HTML Document
INTRODUCTION HTML, or Hypertext Markup Language, structures web pages. Unlike programming languages, it isn't compiled or interpreted. Browsers render HTML directly, displaying content without typical errors. It's a markup language, not a programming one, making execution smooth without encountering compilation or interpretation issues. Course Navi
4 min read
How to get the entire HTML document as a string in JavaScript ?
In this article, we are given an HTML document, the task is to get the entire document as a string using JavaScript. Methods to get an Entire HTML document as a String: Table of Content JavaScript getElementsByTagName() MethodHTML DOM innerHTML Property Method 1: JavaScript getElementsByTagName() MethodThis method returns a set of all elements in t
2 min read
How to add footer for a document or section using HTML5 ?
In this article, we define a footer for a document or section by using the &lt;footer&gt; tag. This tag in HTML is used to define a footer of HTML document. This section contains the footer information (author information, copyright information, carriers, etc). The &lt;footer&gt; tag is used within the body tag. The footer tag is new in the HTML5.
1 min read
How are the JavaScript window and JavaScript document different from one another?
What is a JavaScript window? The window is at a root/top level at the JavaScript object hierarchy. It is a global/root object in JavaScript and it is the root object of the Document object model(DOM); What is a JavaScript document? A document is an object inside the window object and we use a document object for manipulation inside the document. Th
3 min read
HTML DOM document plugins Property
The HTML DOM plugins property returns an HTMLCollectionobject containing one or more embed elements or plugins of the current document. This is a read-only property. Syntax: objects = document.plugins Return value: An HTMLCollection object, or "null" object,if there are no embedded elements or plugins in the document. Example: This example shows ho
1 min read
How to convert an HTML element or document into image ?
This article is going to tell and guide the users to convert a div element into an image using AngularJS. The user will be generating an image from the webpage and also be able to convert a particular part of the HTML page into the picture. Also, the user needs an HTML tag and html2canvas JavaScript library. By using this, we can create the picture
3 min read
How to specify an URL to a document that explains the reason why the text was deleted in HTML ?
The purpose of this article is to learn to specify a URL to a document that will explain, why the text was deleted. The HTML cite attribute specifies a URL to a document that explains the reason why the text was changed or deleted or inserted. The &lt;del&gt; tag in HTML is used to delete the text and mark a portion of the text which has been delet
1 min read