How to Add and Use JavaScript Code in HTML

We use JavaScript Language to make HTML document interactive. JavaScript code helps us to manipulate the HTML document. This article is for beginners who want to know how to add JavaScript code to the HTML and make use of it.

There are two ways you can attach JavaScript to HTML file. Let’s look at those ways.

1. Using Script Tags in the HTML Document

Script tags allow us to put JavaScript code in the HTML File. Code for script tags is below.f

 
<script> /* JavaScript code goes here */ </script>

The best place to put JavaScript code is just before </body> tag. It will make sure that that HTML Document (HTML DOM) completely gets loaded and ready for manipulation. Script tags allow us to put JavaScript code in the HTML File. Code for script tags is below.

Note: Yes, you can put code into <head></head> section, BUT you have to write complex JavaScript code to let DOM load first and then execute your JavaScript code. You need to do this if you are using vanilla JavaScript.

If you are using jQuery, which is a JavaScript library, then it has the document.ready() function which you can use to execute JavaScript code after completion of DOM loading.

Also, it is necessary to put a JavaScript file or code in the head section if the entire application is using the code. Generally, we use the same header across the application so code will be available to all the files of the application, this is why we add a js file of libraries like jQuery, bootstrap in the header section of HTML.

So, as we are using vanilla JavaScript, we are placing JavaScript code before the closing of </body> tag.

Let’s look at a example.

 
<html>
  <head>
    <title>Tutorial Funda</title>
  </head>
  <body>
    <h1>Welcome To Tutorial Funda</h1>
      <p>
        This is the first content of website.
      </p>
      <script>
          alert("Hello World!");
      </script>
  </body>
 </html>

In the above code, you can see that we have put JavaScript code before ending </body> tag. The script tag in the code contains an alert function to which we have passed “Hello World!” message.

When you run this HTML code, you will get below pop up.

This is one way to link JavaScript with HTML. Let’s look at another way now.

2. Using JavaScript Files in a HTML Document

To put JavaScript code in a separate file is the most common and preferred way to link JavaScript to the HTML. There are two benefits of using this approach.

HTML documents get cleaner and clearer to read. It is easy for other developers to read your HTML file because of code separations.
As we write JavaScript code in the separate .js file (file with .js extension contains JavaScript Code), this JS file we can reuse in multiple HTML Documents.

Let’s see how to create a .js file and use it to HTML.

Step 1: Create .js File

It is very simple to create a .js file.

Note: In how to setup JavaScript Environment, we have explained each step to set up your first web application in Visual Studio Code.

Go to the project folder in VS Code. Click on the new file and give index.js name to the new file.

Step 2: Add Code to index.js File.

In approach 1, we have added an alert JavaScript code inside the HTML file. The same alert code we will add inside this newly created index.js file. Add the below code in the index.js file.

 
alert("Hello World");

Step 3: Link js file to the HTML

In the HTML file in the script’s tags src attribute you need to specify the path of index.js file.

Below code, you need to add in the index.html file.

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

In the above code ./ represents root folder. So index.js is in the inside root folder of your project.

Note: Suppose if index.js file were in the folder, then the path would be ./foldername/index.js

Go to the project folder in VS Code. Click on the new file and give index.js name to the new file.

Add above script tag into index.html file. It will look like this.

 
<html>
  <head>
    <title>Tutorial Funda</title>
  </head>
  <body>
    <h1>Welcome To Tutorial Funda</h1>
      <p>
        This is the first content of website.
      </p>
      <script src="./index.js"></script>
  </body>
</html>

Run the application. You will get the alert with the message “Hello World”.

That’s it, and this is how you link JavaScript to the HTML.

1. Using Script Tags in the HTML Document

2. Using JavaScript Files in a HTML Document

Step 1: Create .js File

Step 2: Add Code to index.js File.

Step 3: Link js file to the HTML

Subscribe Now!