In the previous tutorial, we learned three ways to insert JavaScript into a single HTML page. Now, we will learn how to include an external JavaScript file in an HTML page.
JavaScript code can also be included in an external file. This external file is known as source file and is created with .js extension in the local drive or web server as a separate file.
This source file contains only JavaScript statements and does not contain HTML <script> … </script> tags. However, <script> . . . </script> tag pair is placed inside the HTML web page that calls the source file.
The web browser automatically reads the script code written in .js file and considers the code as if it is written between opening <script> tag and closing </script> tag.
Why do we need to create External JavaScript File?
There is no mandatory rule for creating a .js file within the web server. If JavaScript code that we want to add to an HTML page is fairly short, it is usually preferred to add JavaScript code to an HTML page.
But if JavaScript is too long, we should create an external JavaScript file with a .js extension and place it into an HTML document.
There are the following a few more causes to create an external JavaScript file that is as follows:
a) To add clarity to an HTML file: If JavaScript code is too long and it is included in an HTML file, it will give cluttered look and would also be difficult to understand code in the future.
Therefore, if you want your HTML document to be neat and clean, then you should create an external JavaScript file with .js extension inside the web server and link it with an HTML web page.
b) To share JavaScript code across multiple HTML pages: Many times, we create a script that we need to share across multiple web pages of the website. In this case, we should create an external JavaScript file that helps in sharing a common source file.
For example, we can easily add JavaScript code using script tag for animated, fancy drop-down navigation menus to a single web page.
Now suppose we want the same fancy navigation menus on every web page of the website. What will you do?
If you think to add copy and paste JavaScript program code into each page of the site then it is an awful idea for several reasons.
First, we will have to do a lot of work for copying and pasting the same code over and over again. Especially, when we have a website with hundreds of pages.
Second, after a few years, suppose we decide to change or enhance JavaScript code for making drop-down menus more attractive.
In this case, we will need to locate every web page where we had placed JavaScript and update the code. This task will be more tedious and boring.
So, we should develop an external JavaScript file so that we can easily change the code whenever we require it.
Third, If we place long JavaScript code on each web page of the site then the whole code of web page will be longer. Due to which it will be slower and take more time to download.
c) To hide JavaScript file: Usually, we can see HTML source code of a web page using a browser. JavaScript programmers spend a considerable amount of time writing JavaScript code into a file.
Therefore, they will want to prefer that their code cannot be viewed and modified by others. If we place JavaScript code in a source file or .js file, viewers can only see the location of the source file but not its code.
Due to these reasons, we should prefer to use an external JavaScript file. An external JavaScript source file is a simple text file that ends with the file extension .js.
The source file only contains Javascript code and can be linked to a web page via src attribute of <script> tag.
Syntax to include External JavaScript File in HTML Page
The third and the most popular method to include JavaScript in HTML page is by using the src attribute of the script tag. The complete syntax to define an external JavaScript file in the <script> tag is as follows:
<script src = "javascriptfile_name.js"></script> For example: <script src = "myFirstJavascriptfile.js"></script>
Remember that the extension of the external JavaScript file must be .js, just as the extension of an HTML file must be .htm or .html. The .js, apparently, stands for JavaScript.
The src attribute of <script> tag works same as src attribute of <img> tag. It points to the location of JavaScript source file.
Let’s take a simple example program where we will connect a JavaScript source file to an HTML web page. We can simply connect it inside the script tag by indicating its location in the src attribute.
Look at the following source code to connect the JavaScript source file into an HTML page.
Program code 1:
<DOCTYPE html>
<html>
<head>
<title>How to add External JavaScript File to HTML Page</title>
</head>
<body>
<script src = "myScript.js"></script> // myScript is the name of JavaScript file.
</body>
</html>
External JavaScript File:
document.write("I love JavaScript Programming!");Creating an external JavaScript file is identical to creating an HTML file or another type of file. If you do not know how to create an external JavaScript file in notepad++ or visual studio code, go to these tutorials.
- How to write JavaScript in Notepad++ without IDE
- How to write JavaScript in Visual Studio Code Editor
Here, we have explained step by step to create an external JavaScript file in notepad++ or using VS code editor.
Output of code:
I love JavaScript Programming!
In the preceding example program, we have saved an external javascript file with .js in the same folder as .html code it is running.
By default, the browser looks for any externally referenced file in the same folder as .html file is running.
If you save an external javascript file in a separate folder then you will have to specify the complete path of file (including drive and folder names) like this:
<head>
<script src = "C:\JavascriptFiles\myScript.js"></script>
</head>
Let’s take another example program where we will connect multiple external javascript files to an HTML web page. JavaScript files will display three messages on the browser. Look at the program code below:
Program code 2:
<DOCTYPE html>
<html>
<head>
<title>Adding Multiple External JavaScript Files to HTML Page</title>
</head>
<body>
<script src = "myScript.js"></script>
<br>
<script src = "myScript2.js"></script>
<br>
<script src = "myScript3.js"></script>
</body>
</html>
External JavaScript Files:
myScript.js: document.write("JavaScript Programming!");
myScript2.js: document.write("Hello JavaScript!");
myScript3.js: document.write("JavaScript World!");
Output of code:
JavaScript Programming!
Hello JavaScript!
JavaScript World!
Placing External JavaScript File on Web Server or CDN as a Separate File
We can also place an external javaScript file on the web server and link to the website. It helps to reduce latency of the website and improve the website loading times.
For example, if you are receiving a lot of traffic on the web, placing JavaScript files in a Content Delivery Network (also called Content Distribution Network) helps to reduce latency of the website and improve website’s performance.
To attach an external JavaScript file located on the web server to a website, we will have to specify a URL (Uniform Resource Locator) for the src attribute of <script> tag. This can be done like this:
<head>
<script src = "https://www.scientecheasy.com/myScript.js"></script>
</head>
A URL is a path to the file located on the web server. There are three types of path:
- Absolute path
- Root-relative path
- Document-relative path
a) Absolute path: An absolute path is like a postal address that contains all the information required for web browser to locate a file anywhere in the world. It consists of http://, hostname, folder, and name of the file.
For example: http://www.scientecheasy.com/javascript/myScript.js.
b) Root-relative path: A root-relative path is an address where a file is located relative to top-level folder or root folder of the site. It does not include http:// or domain name.
A root-relative path begins with a / (slash) indicating the root folder of the site. For example, /javascript/myScript.js indicates that the file myScript.js is located inside a folder named javascript, which is itself located in the root folder of the site.
An easy way to create a root-relative path is that first take an absolute path and strip off https:// and host name. For example, https://www.scientecheasy.com/index.html can be written as root-relative URL is /index.html.
Note: We can keep JavaScript files anywhere inside the root folder (or any subfolder inside the root) of website. Many web developers create a special directory (such as js (meaning JavaScript)) or libs (meaning libraries)) for keeping external JavaScript file in the site’s root folder.
c) Document-relative path: A document-relative path is a path from the web page to the JavaScript file. If we have multiple levels of folders on the website’s main directory, we’ll have to use different paths to point to the same JavaScript file.
For example, suppose we have a javaScript file named myScript.js located in a folder named scripts in the main directory of website. The document relative path to that file will look like this: scripts/myScript.js.
If folder scripts is located inside another folder named javaS, the path to the same file would be different, like this: ../scripts/myScript.js.
The ../ means climb up out of javaS folder, while /scripts/myScript.js means go to scripts folder and get the file myScript.js.
Important Tips to Use the Best URL Type
Here, there are some important tips on which URL type should be to use. They are as follows:
1. If the file is not located on the same sever as website, must use an absolute path because it is only the type that can point to another website.
2. Root relative path is the best for JavaScript file stored on the same sever as website is hosted. Since they always begins at the root folder, the URL for a JavaScript file will be the same for every page on the website, even when web pages are located in folders and subfolders on the site.
3. Document relative path is the best to use when we are using local host in own computer without aid of web server.
First, create an external JavaScript file, link it to an HTML web page, and then check the JavaScript in a web browser simply by opening HTML web page.
Advantage of including External JavaScript File over Inline JavaScript Code
There are several advantages of using an external JavaScript file over inline JavaScript code. They are as follows:
1. Using external JavaScript file helps to keep HTML file neater and less cluttered.
2. Including external JavaScript files makes life easier because we can modify JavaScript code in only one place when we want something changes or make a bug fix.
3. The biggest advantage of including external javaScript file in HTML web page is code reusability.
4. Since web browser cache all externally linked JavaScript files according to specific settings, therefore, we can link the same .js file from multiple HTML web pages.
The browser download the file only once that reduces the loading time of web page and also reduces bandwidth usage.
Hope that this tutorial has covered almost all the important points related to how to include external JavaScript file in HTML page. I hope that you will have understood the basic concepts to link external javaScript with HTML document.
Thanks for reading!!!
Next ⇒ What is Scripting Language⇐ Prev Next ⇒