Add JavaScript to HTML

There are following three ways through which we can add the JavaScript code into the HTML document:

Include the JavaScript code in <head>…</head> tag.
Include the JavaScript code between the <Body> …</Body> tag and after the closing of the body tag.
Link the separate file of JavaScript in HTML

Include the JavaScript Code in <head> tag.

In this section, you will learn to include the JavaScript code between the <head> and </head> tag.

Syntax

  <html>  <head>  <script>  JavaScript Code  Statement 1  Statement 2  ……  Statement N  </script>  </head>  <body>  </body>  </html>  

In the above syntax, the JavaScript code written between the <script>……. </script> tag is put between the <head> and </head> tag in HTML file.

Example

  <!DOCTYPE html>  <html>  <head>  <meta name=”viewport” content=”width=device-width, initial-scale=1″>  <title>  Include JavaScript in head tag   </title>    <script>  function check()  {  /* The following statement is used to display a Confirm dialog box on a webpage with the statement which is enclosed in the brackets. */  confirm(“Your JavaScript Code Run”);   }  </script>  <style>  /* The following tag selector button use the different properties for the Button. */  button {    background-color: red;  padding: 16px 20px;    margin: 8px 0;    border: none;    cursor: pointer;    color: white;    width: 100%;    opacity: 0.9;  }  /* The following tag selector hover use the opacity property for the Button which select button when you mouse over it. */  button:hover {  opacity: 1;  }  </style>  </head>  <body>  <form>  <!– The following statement use the Button type which is used to call a function of JavaScript when this button is clicked. –>  <button type=”button” onclick=”check()”> Click Me for running a JavaScript Code </button>    </form>  </body>  </html>  

Test it Now

Output:

Add JavaScript to HTML

2. i) Include the JavaScript code in the <body> tag.

In this section, you will learn about how to include the JavaScript code in-between the <body> and </body> tag.

Syntax

  <html>  <head>  </head>  <body>    <script>  JavaScript Code  Statement 1  Statement 2  ……  Statement N  </script>  </body>  </html>  

In the above syntax, the JavaScript code written between the <script>……. </script> tag is put in-between of the <body> and </body> tag in HTML file.

Example

  <!DOCTYPE html>  <html>  <head>  <meta name=”viewport” content=”width=device-width, initial-scale=1″>  <title>  Include JavaScript in body tag   </title>  <style>  /* The following tag selector button use the different properties for the Button. */  button {    background-color: red;     padding: 16px 20px;    margin: 8px 0;    border: none;    cursor: pointer;   color: white;    width: 100%;    opacity: 0.9;  }  /* The following tag selector hover use the opacity property for the Button which select button when you mouse over it. */  button:hover {  opacity: 1;  }  </style>  </head>  <body>  <form>  <script>  function bdy_JS ()  {  /* The following statement is used to display a Confirm dialog box on a webpage with the statement which is enclosed in the brackets. */  confirm(“Your JavaScript Code Run which is used in the Body tag”);  }  </script>    <!– The following statement use the Button type which is used to call a function of JavaScript when this button is clicked. –>  <button type=”button” onclick=”bdy_JS()”> Click Me for running a JavaScript Code </button>  </form>  </body>  </html>  

Test it Now

Output:

Add JavaScript to HTML

ii) Include the JavaScript code after the <body> tag.

In this section, you will learn to include the JavaScript code after the <body> tag.

Syntax

  <html>  <head>  </head>  <body>  </body>  <script>  JavaScript Code  Statement 1  Statement 2  ……  Statement N  </script>    </html>  

In the above syntax, the JavaScript code written between the <script>……. </script> tag is put after the <body>…</body> tag in HTML file.

Example

  <!DOCTYPE html>  <html>  <head>  <meta name=”viewport” content=”width=device-width, initial-scale=1″>  <title>  Include JavaScript code after the body tag   </title>  <style>  /* The following tag selector button use the different properties for the Button. */  button {    background-color: red;    color: white;    margin: 8px 0;    border: none;    cursor: pointer;    width: 100%;    padding: 16px 20px;    opacity: 0.9;  }  /* The following tag selector hover use the opacity property for the Button which select button when you mouse over it. */  button:hover {  opacity: 1;  }  </style>  </head>  <body>  <form>  <!– The following statement use the Button type which is used to call a function of JavaScript when this button is clicked. –>  <button type=”button” onclick=”bdy_JS()”> Click Me for running a JavaScript Code </button>    </form>  </body>  <script>  function bdy_JS ()  {  /* The following statement is used to display a Confirm dialog box on a webpage with the statement which is enclosed in the brackets. */  confirm(“Your JavaScript Code Run which is used after the Body tag”);  }  </script>  </html>  

Test it Now

Output:

Add JavaScript to HTML

Link the Separate file of JavaScript in HTML

In this section, you will learn to include the file of JavaScript code in the HTML file.

Syntax

  <html>  <head>  <script src=”Name_of_JavaScript_file>  </script>  </head>  <body>  </body>  </html>  

In the above syntax, the src is an attribute of <script> tag used for specifying the name of the JavaScript file.

Example

The following code is written in JavaScript (inc), which is saved by .js extension.

  function funcjs ()  {  /* The following statement displays a Confirm dialog box on a webpage with the statement which is enclosed in the brackets. */  confirm(“Your JavaScript Code Run which is used after the Body tag”);  }  

The following code is written in an HTML file which uses the src attribute in the <script> tag to specify the above JavaScript file.

  <!DOCTYPE html>  <html>  <head>  <meta name=”viewport” content=”width=device-width, initial-scale=1″>  <title>  Include JavaScript file in head tag of HTML file   </title>  <script src=”inc.js”>  </script>  <style>  /* The following tag selector button use the different properties for the Button. */  button {    background-color: red;    color: white;  margin: 8px 0;    border: none;    cursor: pointer;    width: 100%;    padding: 16px 20px;    opacity: 0.9;  }  /* The following tag selector hover use the opacity property for the Button which select button when you mouse over it. */  button:hover {  opacity: 1;  }  </style>  </head>  <body>  <form>  <!– The following statement use the Button type which is used to call a function of JavaScript when this button is clicked. –>    <button type=”button” onclick=”funcjs()”> Click Me for running a JavaScript Code </button>  </form>  </body>  </html>  

Test it Now

Output:

Add JavaScript to HTML

Next TopicHTML Background Image

Add JavaScript to HTML

Add JavaScript to HTML

Include the JavaScript Code in <head> tag.

2. i) Include the JavaScript code in the <body> tag.

ii) Include the JavaScript code after the <body> tag.

Link the Separate file of JavaScript in HTML

Hibernate Lazy Collection

How to Change Font Size in Html

You may also like