JavaScript Tutorial & Demo 4: External JavaScript

Shikhar Jauhari

2 years ago

JavaScript Tutorial & Demo 4 External JavaScript

Using External JavaScript: The script tag allows you to save JavaScript in an external file and subsequently include it in your HTML files. We can generate an external JavaScript file and embed it in various HTML pages. It allows for code reuse because a single JavaScript file may be used in several HTML pages.

Table of Contents

Toggle

External Java Script Demo Example

<html>
   <head>
      <script type = "text/javascript" src = "extscr.js" ></script>
   </head>
   <body>
           ........
   </body>
</html>

The .js extension must be used to save an external JavaScript file. It is suggested that all JavaScript scripts be embedded into a single file. It improves the page’s performance.
Include a JavaScript file from another source.

Steps to include a JavaScript file

To incorporate JavaScript from an external file, do the following:

Creating a file with the extension.js, such as exscr.js, and storing it in the js subdirectory. It should be noted that while storing the JavaScript file under the js folder is not mandatory, but it is a good practice.

Then, in the <script> element’s src property, utilize the JavasScript source code file URL.

It is important to note that you can load a JavaScript file from a remote site. This enables you to serve JavaScript from several domains, such as a content delivery network (CDN), to speed up the website.

Using Multiple JavaScript files

When there are multiple JavaScript files on a page, the JavaScript engine evaluates them in the order they appear. Consider the following:

<script src="js/exscr.js"></script>
<script src="js/service.js"></script>

The exscr.js and service.js files will be interpreted sequentially by the JavaScript engine. Before understanding the service.js file, it finishes interpreting the exscr.js file.

Demo Example: External JavaScript

<!DOCTYPE html>
<html >
<head>
   <title>JavaScript External JavaScript Example</title>
</head>
<body>
 
   <!-- end of page content here-->
   <script src="js/exscr.js"></script>
   <script src="js/service.js"></script>
</body>
</html>

The async and defer properties

To modify how JavaScript code loads and executes, utilize one of the <script> element’s properties: async or defer.

These properties only apply to external script files.
If present, the async property directs the web browser to run the JavaScript file asynchronously if feasible.
The async property does not guarantee that the script files will run in the order they appear.

Demo Example: async

<script async src="exscr.js"></script>
<script async src="service.js"></script>

Because the service.js file may run before the exscr.js file, you must guarantee no dependence between them.

Demo Example: defer

If the defer attribute is present, it instructs the web browser to run the script file after processing the content.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>JavaScript defer demo</title>
    <script defer src="defer-script.js"></script>
</head>
<body>

        ...................                  
</body>
</html>

Even though we included the <script> element in the <head> section, the script will not run until the browser receives the ending tag <html>.

External JavaScript Benefits

It aids in the reusability of code across several HTML files and facilitates code readability.
It saves time since web browsers cache external js files, decreasing page loading time even further.
It allows site designers and developers to work with HTML and js files concurrently and independently, avoiding code conflicts.
The code becomes shorter since we need to indicate the location of the js file.

External JavaScript Drawbacks

Using the URL of the js file, the thief may get the coder’s code.
If two .js files are interdependent, a failure in one may influence the execution of the other dependent file.
The web browser must perform an additional HTTP request to obtain the js code.
A little to major modification in the js code may result in unexpected outcomes in all dependent files.
Each file dependent on the typically constructed external JavaScript file must be checked.
If it is only a few lines of code, it is preferable to use the internal JavaScript code.

Article Category: JavaScript Tutorials