Javascript is one of the most important parts of web development. You can add functionality to your website using javascript. In order to use the javascript in a web application, you need to import it inside an HTML file. There are two primary ways to insert javascript into your website. These are :
- Internal Javascript
- External Javascript
Internal Javascript
In this approach, you can write javascript code directly inside an HTML file. You need to use a script tag to do so.
e.g: <script> JS goes here </script>
External Javascript
In this approach, you can write javascript inside a separate file. The extension of this file is .js. In order to use this file, you need to import it inside the HTML. You can do this by using a script tag.
e.g: <script src="script.js"></script>
Now the main question is where should we actually import the javascript file?
You can place the javascript file either in the head section of the HTML or at the end of the body tag. The way you place the javascript file can affect the code execution.
Let's see this with the help of an example.
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="script.js"></script>
<title>Ecdysis</title>
</head>
<body>
<p id="text"></p>
</body>
</html>
// script.js
document.getElementById("text").innerHTML = "This is a paragraph tag";
HTML is parsed in the top to bottom manner. In the above example, we have written javascript to change the text of paragraph tag with id text. The above code won't work and it will return an error because HTML is executed in a top to bottom manner. As soon as control reaches the javascript file, the javascript will be executed before the P tag is actually rendered in the browser.
We can solve this error in two ways:
- Placing javascript at the end of the HTML
- Using Async and Defer
When we place javascript at the end of the HTML, it is executed after the entire HTML code is rendered in the browser. After the P tag is rendered then javascript is executed without getting any error.
Another method is to use async and defer. In this method, javascript will be in the head section only but we can add async or defer keywords inside the script tag to execute the JS without any error.
e.g: <script src="script.js" defer></script>
In async, when the javascript is encountered while parsing HTML the browser loads JS in parallel while parsing HTML. As soon as JS is completely loaded browser stops rendering HTML then it executes javascript code. After executing the javascript, it continues parsing HTML.
In defer, the browser loads javascript in parallel while parsing HTML but javascript code is executed after parsing the entire HTML code.
So by using async or defer, we can execute javascript safely by placing it inside the head section.
The best practice is to put all the javascript files in the head section of the HTML.
Top comments (0)