What is External JavaScript ?
JavaScript code is placed in a separate file from the HTML code is called an external javascript file.
Both internal javascript code and external javascript code are written in the same way.
External javascript files should be saved with the extension “.js” .
External javascript code should also be placed inside the HTML <head></head> tags
How external javascript files are included ?
This is included inside the <script></script> tag, and the file name is specified in the “src” attribute.
When the “src” attribute is set, then only the web browser knows that it needs to load external code.
Example 1 :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="myjsfile.js">
</script>
</head>
<body>
<input type="button" value="click me" onclick="showAlert();">
</body>
</html>
myjsfile.js file
function showAlert(){
alert("Hi, Good Morning");
}
Output :
What are the possible ways of using the “src” attribute ?
There are two possible ways.
1. Relative URL :
When the external js file is present in some other location inside the server, the code will be
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="/js/myjsfile.js">
</script>
</head>
<body>
<input type="button" value="click me" onclick="showAlert();">
</body>
</html>
2. Absolute URL :
When our HTML web-page is referring JavaScript file from other external websites, i mean external URL’s then the code will be
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="www.example.com/js/myjsfile.js">
</script>
</head>
<body>
<input type="button" value="click me" onclick="showAlert();">
</body>
</html>
NOTE :
While using External Javascript url, Its always recommended to declare it inside the <head></head> tag.
It is not recommended to declare it inside the <body></body> tag.
When to Use Internal and External JavaScript Code?
If the JavaScript code is used in many HTML web pages, then it is better to keep your code in a separate file.
Suppose if you want to make some changes in the code, we just have to change only one file which makes code maintenance easy.
And If the code is too long, then it is also better to keep the code in a separate file. This will help while debugging.
Javascript advanced course !!!
Click to Learn More about – Javascript online learning
What are the advantages of External JavaScript?
1. External JavaScript is highly beneficial if identical codes are used in several web-pages.
2. We can include the external file one time, and all the webpages refers that common “.js” file.
3. If there is any changes to be done in the javascript code, we can modify the changes in one file and the changes will get reflected in all the webpages.
4. Storing Javascript in external files also makes it easier to maintain websites
5. If a user loads first HTML page containing the same external JavaScript references, the second HTML page will load faster, because the user’s browser will have cached the file locally.