Add JavaScript to HTML
BLUF: Mastering Add JavaScript to HTML is a fundamental step in becoming a web developer. This guide covers the structure, syntax, and best practices for using this HTML element effectively.
Key Lesson: Add JavaScript to HTML
Web structure starts with solid HTML. Learn how Add JavaScript to HTML contributes to accessible and semantic web pages in the tutorial below.
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:
