Include JavaScript in HTML
The JavaScript code can be inserted into an HTML file by using the HTML <script> tag. When an HTML document is loaded with the <script> tag in the web browser, the browser processes the content inside the script tag as JavaScript code, or if the src attribute is set in the <script> tag, then the browser will load the external JavaScript file mentioned in the <script> tag.
The <script> tag can contain either JavaScript code or the path of an external JavaScript file. The script tag provides a src attribute in which the path of the external script file can be provided.
Script tag Attributes and its Use
Following is the basic syntax of using a <script> tag:
<script src="JS_FILE_URL" type="..."></script>
Similarly, we can use the <script> tag to directly add the JavaScript code too, like this:
<script type="text/javascript">
// JS code here
</script>
There are five attributes of script tag which are listed below in the table:
| Attributes |
Values |
Description |
async |
|
It specifies whether the script should be executed/loaded asynchronously or not. |
type |
-
text/ECMAScript
-
text/javascript
-
application/ECMAScript
-
application/javascript
-
text/VBScript
|
It specifies the Multipurpose Internet Mail Extensions (MIME) type of script. Generally, text/javascript value is used for this attribute. |
charset |
charset |
It specifies the type of character encoding used in the script. (You can ignore this one) |
defer |
|
It specifies whether the browser should load the JavaScript code or the external script file immediately, or defer it until the entire webpage is loaded. |
src |
URL |
It specifies the URL of a JavaScript file(with extension .js) |
Now that we know about the <script> tag and how it is used to include JavaScript code in a webpage, let's see the various ways in which we can use this tag.
JavaScript in HTML Webpage
You can use a script tag inside an HTML web page to add JavaScript code in the following ways:
-
In the HEAD section of the HTML page (<head>...</head>)
-
In the BODY section of the HTML page (<body>...</body>)
-
By including an External JavaScript File
Let's cover all of this one by one along with code examples to help you understand them.
1. JavaScript code in <head>
Let's put the script tag inside the HTML head section. The JavaScript code placed inside the head section is loaded with the webpage and gets executed immediately.
The code given below shows how to use the <script> tag inside the <head> tag of an HTML document to add some JavaScript code.
2. JavaScript Code in <body>
You can place a script tag inside the body of an HTML document too. The script tag inside the body tag runs when a webpage starts loading in a web browser. Here is an example,
3. JavaScript Code in an External File
Whenever we put lengthy JavaScript code in an HTML document, it affects the readability and maintainability of the HTML code. In addition, sometimes there is a need to use the same JavaScript code in several web pages. In such cases, you can keep the JavaScript code in an external file and save that file with the .js extension. All JavaScript code files should have an extension .js and nothing else.
To link the external file, we can provide its location (URL) in the src attribute of the script tag.
Including External JavaScript file:
This is the way by which we can add an external JavaScript file to our HTML code:
<script src="jsfile.js" type="text/javascript"></script>
The type attribute is optional in the code example above.
Advantages of External JavaScript File:
Using an external JavaScript file has its own merits.
-
It separates the HTML and JavaScript code and makes your code clean and easy to understand.
-
External JavaScript code can be reused in multiple HTML webpages.
-
External JavaScript code can be cached in the browser. Once cached the browser will not load the JavaScript file again and again and will use the cached version. This will make your webpage load fast.
JavaScript Code in External File Example:
The code given below shows you how to link an external JavaScript file with an HTML document.
This is the HTML code:
<html>
<head>
<title>my first JavaScript</title>
<script src="myscript.js"></script>
</head>
<body>
<p id="script">this is the old text</p>
<button type="button" onclick="text()">Click this button to use JavaScript</button>
</body>
</html>
The JavaScript code is stored in a file with the name myscript.js, as shown below:
function text()
{
document.getElementById("script").innerHTML = "This text has been written inside the JavaScript.";
}
In the code above, we have defined a simple function in JavaScript, we will learn about JavaScript functions in upcoming tutorials.
Including JavaScript in HTML Page: Best Practice
You should always prefer to keep your JavaScript code in separate JavaScript files with a .js extension. You can also have multiple JavaScript files to keep related functionality in the same files.
In large projects, JavaScript code can be huge and there can be multiple external JavaScript files. Don't worry, you can include multiple JS files in the HTML page using multiple <script> tags. Yes, you can use <script> tags to include as many external JavaScript files as you want.
For example, if you have 3 JavaScript files, with names, one.js, two.js, and three.js and you have to include all of these in your HTML page. The you will use 3 <script> tags like this,
<script src="one.js" type="text/javascript"></script>
<script src="two.js" type="text/javascript"></script>
<script src="three.js" type="text/javascript"></script>
Now the question is, where should you put the above code in the HTML page? Should it be inside the HEAD section of the HTML code, or should it be in the BODY section of the HTML page?
Well, if you put it in the HEAD section, then when the webpage loads the JavaScript files, all the files will be loaded first and then the HTML code in the body will be executed, which can slow down the webpage loading, which is not good.
So, we should load the external JavaScript files used in a webpage, at last, means either just before the closing </body> tag or after the closing </body> tag, so that first our complete webpage loads, and then the external JavaScript files are loaded. This way, even if we have large JavaScript files, our webpage will not slow down because of it.
<html>
<head>
...
</head>
<body>
<!-- body of HTML page -->
</body>
<script src="one.js" type="text/javascript"></script>
<script src="two.js" type="text/javascript"></script>
<script src="three.js" type="text/javascript"></script>
</html>
Wait Wait! There is one more thing.
Using Async/Defer Attributes
You can also use the async or the defer attribute in the <script> tag to load the external JavaScript file smartly.
If you use the async attribute in the <script> tag, then the JavaScript file will be loaded asynchronously. This means that the browser will send the request to load the JavaScript file, and then keep on loading the rest of the HTML page. The browser will not wait for the JavaScript file.
<html>
<head>
<script async src="myscript.js" type="text/javascript"></script>
</head>
<body>
<!-- body of HTML page -->
</body>
</html>
In the case of the defer attribute, when the browser encounters a <script> tag with the defer attribute, it will defer or delay the loading of the JavaScript file until the complete webpage is loaded. After the webpage is loaded then the browser will send the request for loading the JavaScript file.
<html>
<head>
<script defer src="myscript.js" type="text/javascript"></script>
</head>
<body>
<!-- body of HTML page -->
</body>
</html>
If you use any of these attributes, you can keep the <script> tag inside the head section without affecting the performance of your webpage.
Conclusion
So this tutorial covers all the ways to include JavaScript code into an HTML web page and the best practices too. In the next tutorial, we will learn how we can get an output from JavaScript code so that we can start doing some coding and see JavaScript code running.
