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.
Within this segment, you will be instructed on how to insert the JavaScript code within the <head> and </head> markers.
Syntax
Example
<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
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>
Output:
2. i) Include the JavaScript code in the <body> tag.
This section will guide you on incorporating JavaScript code between the <body> and </body> tags.
Syntax
Example
<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
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>
Output:
ii) Include the JavaScript code after the <body> tag.
In this unit, you will discover how to integrate the JavaScript code following the <body> marker.
Syntax
Example
<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
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>
Output:
Link the Separate file of JavaScript in HTML
Within this segment, you will be guided on how to incorporate a JavaScript code file into an HTML document.
Syntax
Example
<html>
<head>
<script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"Your JavaScript Code Run which is used after the Body tag");
}
In an HTML document, the code utilizes the src attribute within the <script> tag to designate the corresponding JavaScript file.
Example
<!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="https://placehold.co/400x300/3498db/ffffff?text=Sample+Image">
</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>
Output: