HTML Tutorial
HTML Attributes
- html-global-attributes
- html-event-attributes
HTML Tags List
HTML5 Advance
HTML API
HTML Color Names
- html-color-names
HTML Misc
MCQ
- html-mcq
Interview Questions
- html-interview-questions

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 … tag.
Include the JavaScript code between the … tag and after the closing of the body tag.
Link the separate file of JavaScript in HTML

Include the JavaScript Code in tag.

In this section, you will learn to include the JavaScript code between the and 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 tag is put between the and 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:

2. i) Include the JavaScript code in the tag.

In this section, you will learn about how to include the JavaScript code in-between the and 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 tag is put in-between of the and 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:

ii) Include the JavaScript code after the tag.

In this section, you will learn to include the JavaScript code after the 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 tag is put after the … 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:

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

HTML Tutorial

HTML Attributes

HTML Tags List

HTML5 Advance

HTML API

HTML Color Names

HTML Misc

MCQ

Interview Questions

Add JavaScript to HTML

Include the JavaScript Code in tag.

2. i) Include the JavaScript code in the tag.

ii) Include the JavaScript code after the tag.

Link the Separate file of JavaScript in HTML

Hot Tutorials

Contact US