Use External JS Files in an HTML File

What is JavaScript?

JavaScript is a client-side scripting language which is used to create a dynamic webpage. It is integrated with the HTML code. JavaScript code is inserted between <script> and </script> tags as shown below.

<script>
   document.getElementById("demoId").innerHTML = "JavaScript Example";
</script>

JavaScript is a programming language that adds rich interactivity to your website (for example: games, responses when buttons are pressed or data entered in forms, dynamic styling, animation etc..).

In its most common form, JavaScript resides inside HTML documents, and can provide levels of interactivity to web pages that are not achievable with simple HTML.

  • Key differences between Java and JavaScript: Java is an OOP programming language while Java Script is an OOP scripting language.

  • JS is shortened for JavaScript. It was invented by Brendan Eich. It is incredibly versatile.

  • JavaScript is used in PDF documents, site-specific browsers, and desktop widgets also. It includes Application Programming Interfaces(API's), built-in Functions, third-party frameworks and libraries.

Advantages of JavaScript

  • It runs very fast.

  • It is simple to learn and implement.

  • JavaScript used everywhere.

  • Lots of frameworks (Angular, Reactjs, JQuery).

Disadvantages of JavaScript

  • JavaScript runs on the user's computer and it can we easily modified or changed by the user.

  • Some browser not supported some features of JavaScript.

Internal JavaScript

Internal JavaScript means, we can write the code of JavaScript inside the <script>tag , it can be placed either in head section or body section.

Example

Generally, this method is used rarely because it makes the code more complex, So external method is mostly preferred in which JavaScript is stored in separate file.

<!DOCTYPE html>
<html>
<body>
   <h1>Displaying Script Element</h1>
   <p id="sample"></p>
   <script>
      document.getElementById("sample").innerHTML = "Welcome To TutorialsPoint!";
   </script> 
</body>
</html>

External JavaScript

External JavaScript means, write the code in another file having a .js extension and then try to link the file inside the <head> or <body> section.

Example

Let us see a sample example to show the usage of external JavaScript.

<script src=" https://releases.jquery.com/git/jquery-git.slim.js" crossorigin="anonymous">
</script>

We use External JavaScript files for the following reasons −

  • It facilitates the reuse of code across several HTML files.

  • It provides for easier code reading.

  • It saves time since web browsers cache external js files, reducing page load time even further.

  • It allows site designers and developers to work with HTML and js files in parallel and independently, avoiding code conflicts.

  • The code becomes shorter since we simply need to indicate the location of the js file.

Example

Following example demonstrates the usage of external java script files −

<!DOCTYPE html>
<html>
<head>
   <title>Wage Calculator</title>
   <script>
      function salCal() {
         //declare variables 
         var rate,hour,salary;
         //get the rate of wage from textbox1
         rate = document.getElementById("t1").value;
         //get the hour from textbox2
         hour = document.getElementById("t2").value;
         //formula to calculate salary
         salary = rate*hour;
         //display salary
         document.getElementById("sal").innerHTML = "The salary is::"+salary;
      }  
   </script>
</head>
<body>
   <h3> Fill the information below to see how much of a salary a hourly wage equals</h3> Enter the hourly rate: <input type="text" id="t1">
   <br>
   <br> Enter hours per week: <input type="text" id="t2">
   <br><br>
   <button type="button" onclick="salCal()">Check</button>
   <h4 id="sal"></h4>
</body>
</html>

After entering the values in text, the following output will be displayed −

Advantages of External JavaScript

If the identical code is used on several pages of a website, external JavaScript files are beneficial. We have to include simply a reference to the external code in HTML page. Suppose, if the JavaScript code changes, only one file is going to be edited; storing JavaScript in external files makes easy to maintain websites.

Updated on: 2023-10-04T17:30:46+05:30

6K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements