Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to 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.
6K+ Views
