View Discussion
Improve Article
Save Article
View Discussion
Improve Article
Save Article
JavaScript in body or head: Scripts can be placed inside the body or the head section of an HTML page or inside both head and body.
JavaScript in head: A JavaScript function is placed inside the head section of an HTML page and the function is invoked when a button is clicked.
Examples:
<!DOCTYPE html>
<html>
<head>
<script>
function gfg() {
document.getElementById("demo").innerHTML = "Geeks For Geeks";
}
</script>
</head>
<body>
<h2>JavaScript in Head</h2>
<p id="demo" style="color:green;">geeksforgeeks.</p>
<button type="button" title="gfg()">click it</button>
</body>
</html>
Output:
Before clicking the
button
After clicking the button
JavaScript in body: A JavaScript function is placed inside the body section of an HTML page and the function is invoked when a button is clicked.
Example:
<!DOCTYPE html>
<html>
<center>
<body>
<h2>JavaScript in Body</h2>
<p id="demo">geeksforgeeks.</p>
<button type="button" title="gfg()">Try it</button>
<script>
function gfg() {
document.getElementById("demo").innerHTML = "Geeks For Geeks";
}
</script>
</body>
</center>
</html>
Output:
Before clicking the button
After click on button
External JavaScript: JavaScript can also be used as external files. JavaScript files have file
extension .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:
<!DOCTYPE html>
<html>
<center>
<body>
<h2>External JavaScript</h2>
<p id="demo">Geeks For Geeks.</p>
<button type="button" title="myFunction()">Try it</button>
<script src="myScript.js"></script>
</body>
<center>
</html>
Output before clicking:
Output after clicking:
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 re usability that is one JavaScript Code can run in various HTML files.