What is External JavaScript?

September 20, 2022 | by Arround The Web | No comments

External JavaScript is simply writing the JavaScript part of the HTML webpage in a separate file and then linking that file using the “src” attribute of the <script> tag. Thus, the word “external” as the JavaScript is placed inside a file that is not part of the original HTML document. Alternatively, when the JavaScript part of a web page is written inside the same HTML document, inside the script tag, it is known as the Internal JavaScript.

To display the working of an external JavaScript, simply create a “.js” file and type the following lines inside that file:

function showAlert() {
alert("This Alert Is Written In External JavaScript");
}

For this example, the JavaScript file name is “script.js”.

Now, create a new HTML document, and in that HTML file, use a script tag to define the type of the script that is going to be used and then the link to the script file as:

This script tag for the external JavaScript can be placed in both the <head> tag and in the <body> tag, both have their own pros and cons.

After this, in the body tag, add the following lines:

<body>
<center>
<button onclick="showAlert()">Click for Alert</button>
</center>
</body>

Fire up the HTML document and observe the following output:

Now press the button for the alert using the function written in the external JavaScript:

It is clear from the screenshot above that the external JavaScript works perfectly fine.

Why use External JavaScript?

There are multiple reasons why one should use external JavaScript such as:

External JavaScript provides the facility to be used by multiple HTML documents, thus creating the reusability within multiple files
External JavaScript is often cached in the browser’s memory, thus speeding up the processes of revisiting an HTML document
Usage of external JavaScript can organize the code in a much better way than a regular Internal JavaScript
External JavaScript provides the concept of exports and import which the programmer can use to optimize the HTML document by limiting it to only load some aspects from the JavaScript code instead of the complete JavaScript file.

External JavaScript is far superior to internal JavaScript, especially when working with large-scale applications.

The Drawbacks of External JavaScript

There is only one major drawback of using external JavaScript: the browser has to make an additional request to the server for the JavaScript file. Other than this, there aren’t many significant drawbacks to external JavaScript.

Wrap up

Whenever the JavaScript part of a website or a web application is placed in a different file than the HTML and then linked inside the HTML document, it is known as External JavaScript. To use external JavaScript, create a file with the “.js” extension. After that, create a script tag in the HTML document and pass the path to that JavaScript file in the “src” attribute of the <script> tag.

Source: linuxhint.com