Teach with us

How to include JavaScript in HTML Documents?

JavascriptWeb DevelopmentFront End Technology

In this tutorial, we will learn how to include JavaScript in HTML Documents.

To include JavaScript in HTML Documents, use the <script> tag. JavaScript can be implemented using JavaScript statements that are placed within the <script>... </script>.

You can place the <script> tags, containing your JavaScript, anywhere within your web page, but it is normally recommended that you should keep it within the <head> tags.

We will discuss the following three approaches to include JavaScript in HTML documents −

  1. Embedding code (within head or body)
  2. Inline Code (inside any element)
  3. External file (outside the HTML file)

By Embedding code

We can embed the JavaScript code into HTML pages in two ways −

Inside head tag

User can write the JavaScript code inside the <head> tag. For that we have to create an element <script>…..</script> inside the head tag.

Syntax

<head>
<script>
   // Write your JavaScript Code Here
</script>
</head>

In the above syntax, we used the script tag inside the head tag to write JavaScript code.

Example

In the example below, we learned how to embed the JavaScript code inside the head tag using the script tag in the HTML file.

<html>
<head>
   <script>
      //script tag inside the head tag
      //parachange function that called by the onclick event
      function parachange() {
         document.getElementById('para').innerHTML = 'The line has
         changed.'
      }
   </script>
</head>
<body>
   <h3>Including JavaScript in HTML document in <i>Head tag</i></h3>
   <p id="para">The is a line</p>
   <button type="button" onclick="parachange()">Click Here</button>
</body>
</html>

Users can see that after clicking the button, the paragraph line has changed inside the p tag for the click event. This onclick event happens by calling the function "parachange," which is written inside the script tag which is written inside the head tag.

Inside body tag

We can also wrap around the JavaScript code inside the <body> tag. For that we have to create an element <script>…. </script> inside the body tag.

Syntax

<body>
<script>
   //Write your JavaScript Code Here
</script>
</body>

In the above syntax, we used the script tag inside the body tag to write JavaScript code.

Example

In the example below, we learned how users could embed the JavaScript code inside the body tag using the script element in the HTML file.

<html>
<head> </head>
<body>
   <h3>Including JavaScript in HTML document in <i>Body tag</i></h3>
   <p id="para">The is a line</p>
   <button type="button" onclick="parachange()">Click Here</button>
   <script>
      //script tag inside the body tag
         function parachange() {
         document.getElementById('para').innerHTML = 'The line has
         changed.'
      }
   </script>
</body>
</html>

Users can see that after clicking the button, the paragraph line has changed inside the p tag for the click event. This onclick event happens by calling the function "parachange" which is written inside the script tag, which is written inside the body tag.

Using Inline Code

We can also write JS code inside the elements without using the script tag. In general, we used this inline code in case the user has to call any function on a particular event (like onclick, onmouseover, etc.)

Syntax

<button type="button" onclick="alert('Hello world!');Click Here</button>
<!-- it can be elements other than button too -->

In the above syntax, we used the JavaScript inline of a button inside the onclick.

Example

In the example below, we learned how users could embed the JavaScript code inside the button tag using an onclick attribute in an HTML file.

<html>
<body>
   <h3>Including JavaScript in HTML document inside <i>element</i></h3>
   <p>
      <button onclick="alert('Hello world!');">Click Here</button>
   </p>
</body>
</html>

Users can see that after clicking the "click here" button, the event is activated and shows the alert message "Hello world!"

Using External File

Users can create a separate file, write JavaScript Code outside the HTML file, and add that path link inside the <script> tag. It is very helpful when we have to add the same JS code on multiple pages. This process also makes the code simpler and more understandable.

First, we have to make a JavaScript file where we can write the code (without any tag) and then save it with the .js extension. Then add the file's path inside the script tag as the "src" attribute in the HTML file.

Syntax

<script src="./file.js"></script>

In the above syntax, we attached the javascript files path in the script tag's src attribute.

Example

In the below example, we learned about how users can embed the external JavaScript file inside the src attribute of the script tag.

<html>
<body>
   <h2>Including JavaScript in HTML document using <i>external
   file</i></h2>
   <p id="para">The is a line</p>
   <button type="button" onclick="parachange()">Click Here</button>
   <script src="./file.js"></script>
</body>
</html>

Inside the file.js file, the definition of the parachange() function called by the onclick event will be written

#file.js

function parachange() {
   document.getElementById("para").innerHTML = "The line has
   changed.";
}

Users can see that after clicking the button, the paragraph line has changed inside the p tag for the onclick event. This onclick event happens by calling the function "parachange()" that is written in the external file.

We have learned how to include JavaScript in HTML documents. As we can see, there are many ways that users can follow, including JavaScript along with HTML. So, we can conclude that if the code is only about any event, then we can write it within the inline tag, or if there are a small number of lines, then we can add it to the body or head tag. But if there are a large number of lines or the codes have to use repetitively, then the user can write JavaScript code using an external file.

raja
Shubham Vora
Updated on 15-Sep-2022 12:15:18

Previous Page Print Page Next Page  
Advertisements