WRITING JAVASCRIPT INTO HTML
JavasScript code is inserted between <script> and </script> tags when used in an
HTML document.
Scripts can be placed inside the body or the head section of an HTML page or
inside both the head and body. We can also place JavaScript outside the HTML file
which can be linked by specifying its source in the script tag.
Example:
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript Code inside Head Section
</title>
</head>
<body>
<h2>
Adding JavaScript in HTML Document
</h2>
<h3 id="demo" style="color: green"> Hello
</h3>
<button type="button" onclick="myFun()"> Click Here
</button>
</body>
</html>
Examples of Adding JavaScript in HTML Document
JavaScript inside <head> Tag
JavaScript code is placed inside the <head> section of an HTML page and uses the
<script> element. This ensures the script is loaded and executed when the page
loads.
Example: This example shows the addition of a script file inside the head section.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript Code inside Head Section
</title>
<script>
function myFun()
{
[Link]("demo").innerHTML = "Content changed!";
}
</script>
</head>
<body>
<h2>
Add JavaScript Code inside Head Section
</h2>
<h3 id="demo" style="color:green;">Hello
</h3>
<button type="button" onclick="myFun()">
Click Here
</button>
</body>
</html>
JavaScript inside <body> Tag
JavaScript Code is placed inside the body section of an HTML page and in this
also we use <script> </script> tag inside and above the closing tag of </body>.
Example: This example shows showing the addition of a script file inside the body
section.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript Code inside Body Section
</title>
</head>
<body>
<h2>
Add JavaScript Code
inside Body Section
</h2>
<h3 id="demo" style="color:green;"> Hello
</h3>
<button type="button" onclick="myFun()">
Click Here
</button>
<script>
function myFun()
{
[Link]("demo") .innerHTML = "Content changed!";
}
</script>
</body>
</html>
External JavaScript
JavaScript can also be used in external files.
The file extension of the JavaScript file will be .js
To use an external script put the name of the script file in the src
attribute of a <script> tag.
External scripts cannot contain script tags.
Example: This example shows showing the linking of an external script file inside
the head section.
<!DOCTYPE html>
<html>
<head>
<title>
External JavaScript
</title>
<script src="[Link]"></script>
</head>
<body>
<h2>
External JavaScript
</h2>
<h3 id="demo" style="color:green;"> Hello
</h3>
<button type="button" onclick="myFun()">
Click Here
</button>
</body>
</html>
External JavaScript References
We can reference an external script in three ways:
By using a full URL: src = "[Link]
By using a file path: src = "/js/[Link]"
Without using any path: src = "[Link]"