Where to Put Javascript Script in HTML
You can add Javascript script in the <head>…</head> section or in the <body>…</body> section of your HTML website.
Add the script in the head section if you want it to be loaded first. Otherwise, put the script tag as the last item just before the closing body tag(</body>).
Script in the Head Section
You can add Javascript as a code block in the Head section.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Javascript in Head</title>
<script>
window.onload=function(){
document.getElementById("boldedtext").addEventListener("click", function() {
this.style.fontWeight = "bold";
});
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="boldedtext">click me to make me bolded</p>
</body>
</html>
The key is to use the window.onload that waits until the whole webpage is created before loading Javascript.
Script in the Body
Javascript can also be added in the body section of the HTML web page. You can put javascript after adding the HTML element to be manipulated by Javascript.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Javascript in Body</title>
</head>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="boldedtext">click me to make me bolded</p>
<script>
document.getElementById("boldedtext").addEventListener("click", function() {
this.style.fontWeight = "bold";
});
</script>
</body>
</html>
The best practice is to add Javascript as the last item of the body section.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
</head>
<body>
<div id="show-message">
<h1>Hello </h1>
</div>
<script>
'use strict';
var showMessage = new Vue({
el: '#show-message',
data: {
message: 'World'
}
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
In the above example, Vuejs script tag is in the head while Bootstrap script is in the body.
The modern way to Add Script in HTML
With async and defer, you can prevent Javascript from affecting the speed of loading and rendering a web page on a browser.
With async, your Javascript files are downloaded concurrently together with your other parts of the websites.
defer tells the script to wait until the other script files are downloaded before it can be downloaded and parsed.
<script async src="/scripts/bootstrap.min.js"> </script>
<script defer src="/scripts/popper.min.js"> </script>
