In this article, we are going to learn how can we add JavaScript to an HTML document. 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.
These are the basic approaches for doing this:
Add JavaScript Code inside the Head Section
JavaScript code is placed inside the head section of an HTML page and the function is invoked when a button is clicked.
Example: This example shows showing the addition of a script file inside the head section.
html
<!DOCTYPE html>
<html>
<head>
<title>
Add JavaScript Code inside Head Section
</title>
<script>
function myFun() {
document.getElementById("demo")
.innerHTML = "Content changed!";
}
</script>
</head>
<body>
<h2>
Add JavaScript Code
inside Head Section
</h2>
<h3 id="demo" style="color:green;">
GeeksforGeeks
</h3>
<button type="button" onclick="myFun()">
Click Here
</button>
</body>
</html>
|
Output:
Add JavaScript Code inside Body Section
JavaScript Code is placed inside the body section of an HTML page and the function is invoked when a button is clicked.
Example: This example shows showing the addition of a script file inside the body section.
html
<!DOCTYPE html>
<html>
<head>
<title>
Add JavaScript Code inside Body Section
</title>
</head>
<body>
<h2>
Add JavaScript Code
inside Body Section
</h2>
<h3 id="demo" style="color:green;">
GeeksforGeeks
</h3>
<button type="button" onclick="myFun()">
Click Here
</button>
<script>
function myFun() {
document.getElementById("demo")
.innerHTML = "Content changed!";
}
</script>
</body>
</html>
|
Output:
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.
Javascript
function myFun () {
document.getElementById('demo')
.innerHTML = 'Paragraph Changed'
}
|
HTML
<!DOCTYPE html>
<html>
<head>
<title>
External JavaScript
</title>
<script src="script.js"></script>
</head>
<body>
<h2>
External JavaScript
</h2>
<h3 id="demo" style="color:green;">
GeeksforGeeks
</h3>
<button type="button" onclick="myFun()">
Click Here
</button>
</body>
</html>
|
Output:
Advantages of External JavaScript
- Cached JavaScript files can speed up page loading.
- It makes JavaScript and HTML easier to read and maintain.
- It separates the HTML and JavaScript code.
- It focuses on code reusability which is one JavaScript Code that can run in various HTML files.
External JavaScript References
We can reference an external script in three ways in javascript:
src = "https://www.geeksforgeek.org/js/script.js"
src = "/js/script.js"
src = "script.js"
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
29 Nov, 2023
Like Article
Save Article