How To Add JavaScript to HTML


In this tutorial, we will discuss how to include a JavaScript code into websites, webpages, both inline into a HTML based file as well as an independent file

This tutorial will show how to include JavaScript into websites, web pages, both inline into a HTML based file as well as a separate file.

Adding JavaScript to an HTML Document

 

You can easily add JavaScript code to a HTML document by making use of a committed HTML tag <script> that wraps around JavaScript.

The <script> tag can be put in the <head> area of your HTML, in the <body> segment, or after the </body> close tag, contingent upon when you need the JavaScript to stack.

Normally, JavaScript code can go within the record <head> segment to keep them contained and out of the primary substance of your HTML based document.

Although, in case your script needs to keep running at a certain point of time within page’s layput - you should put it at the point where it ought to be called, for the most part inside the <body> area.

Let’s contemplate the following empty HTMl document with a browser title of today’s date.

Let’s consider the following blank HTML document with a browser title of Today's Date:

 

index.html

<!DOCTYPE html>
<html lang="en-US">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Today's Date</title>
</head>

<body>

</body>

</html>

At the present time, this document just contains HTML markup. Suppose we might want to add the accompanying JavaScript code to the document:

let d = newDate();
alert("Today's date is " + d);

This will empower the site page to show an alert with the present date paying little respect to when the user loads the website.

Keeping in mind the end goal to accomplish this, we will include a <script> tag alongside some JavaScript code into the HTML document.

index.html

<!DOCTYPE html>
<html lang="en-US">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Today's Date</title>
   <script>
       let d = newDate();
       alert("Today's date is " + d);
   </script>
</head>

<body>

</body>

</html>

Once you save the file and load the web page, you will get an alert message stating similar to:

 

Working with a Different JavaScript File

Keeping in mind the end goal to accommodate bigger scripts or scripts that will be utilized over a few pages, JavaScript code for the most part lives in at least one js records that are referenced inside HTML documents, correspondingly to how external resources like CSS are referenced.

Various advantages of using different JavaScript file contain:

  • Isolating the HTML markup and JavaScript code to make both more direct

  • Isolate file makes maintenance effortless.

  • At the point when JavaScript files are cached, pages stack all the more rapidly


To show how to interface a JavaScript document to a HTML based document, we should make a little web project. It will comprise of script.js in the js/ directory, style.css in the css/directory, and a primary index.html in the root of the project we are creating.

project/
├── css/
|   └── style.css
├── js/
|   └── script.js
└── index.html



We can begin with our old HTML format from the area above:

 

index.html

<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Today's Date</title>
</head>

<body>

</body>

</html>

At this point, we should move our JavaScript code that will  demonstrate the date as a <h1> header to the script.js record:

script.js

let d = newDate();
document.body.innerHTML = "<h1>Today's particular date is " + d + "</h1>"

We can add a source to this content to or beneath the <body> area, with the accompanying line of code:

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

The <script> tag is indicating the script.js record in the js/directory  of our web project.

We should take a look at this line with regards to our HTML file, for this situation, underneath the <body> area:

 

index.html

<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Today's Date</title>
</head>

<body>

</body>

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

</html>

At last, we should alter the style.css file by including a background color and some style to the <h1> header:

style.css

body {
   background-color:#0000A0;
}

h1 {
   color:#800080;
   font-family:Verdana, Georgia, Times New Roman;
}

 

We can mention that CSS file within the <head> area of our HTML document:

index.html

<!DOCTYPE html>
<html lang="en-US">

<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Today's Date</title>
   <link rel="stylesheet" href="/css/style.css">
</head>

<body>

</body>

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

</html>

Presently, with the JavaScript and CSS in place  we can stack the index.html page into our preferred web browser . We should see a page that seems to be like the following:

Since we've put the JavaScript in a file, we can call it similarly from extra pages and update them all in a solitary area.