Include JavaScript in HTML
The JavaScript code can be inserted in 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 enclosed inside the script tag as JavaScript code.
The script tag can contain either scripting statements or refer to an external JavaScript file. The script tag provides a src attribute that allows us to add a reference to an external script file.
JavaScript is the default scripting language for most of the browsers.
Script tag Attributes and its Uses
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 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. |
charset |
charset |
It specifies the type of character encoding used in the script |
defer |
|
It specifies whether the browser continues parsing the web page or not. |
src |
URL |
It specifies the uniform source locator(URL) of a file that contains the script. |
Now that we know about the <script> tag which is used to include JavaScript code in a webpage, let's see the various different ways in which we can do so.
JavaScript in HTML Webpage
You can use script tag inside an HTML web page to add JavaScript code in the following ways:
-
In the HEAD element (<head>...</head>)
-
In the BODY element (<body>...</body>)
-
To include an External JavaScript File
Let's cover all of this one by one along with code examples to help you understand them.
1. Script tag with JavaScript Code in <head> Element
Let's put the script tag inside the HTML head element. The script placed inside the head element is loaded with the webpage and gets executed if any defined event occurs.
The code given below shows how to use the <script> tag inside the <head> element of an HTML document to add some JavaScript code.
1. Script tag with JavaScript Code in <body> Element
You can place a script tag inside the body element of an HTML document too. The script tag inside the body element runs when a web page starts loading in a web browser. Below is the code to show you how to place a <script> element inside the <body> element of an HTML document:
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 document. In addition, sometimes there is a need to use the same JavaScript code in several web pages. In such cases, we can store 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 Syntax:
This is the way by which we can add an external JavaScript file to our HTML file:
<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 the code look 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 of it. This will make your webpage loading fast.
JavaScript Code in External File Example:
The code given below shows you how to link an external JavaScript file with an HTML document.
<html>
<head>
<title>my first JavaScript</title>
<script src="jsfile.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 stored in a file with name jsfile.js
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
In large projects, JavaScript code can be huge and there can be multiple external JavaScript files included in each HTML page using multiple <script> tags. Yes, we can use multiple <script> tags to include as many external JavaScript files as we want.
For example, if we have 3 JavaScript file, with names, one.js, two.js and three.js and we have to include all of these in our HTML page. We will use 3 <script> tags in this case,
<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 we put the above code in our HTML page. Should we put it inside the HEAD section of HTML code, or should we put it in the BODY section of our HTML page?
Well, if we put it in the HEAD section, then when our webpage will load, all the JavaScript files will be loaded first which can slow down our 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>
Conclusion:
So this tutorial covers all the ways to include JavaScript code into 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.
