Scribd
Upload
197 views

External JavaScript JS File - Advantages, Disadvantages, Syntax, Attributes - Knowledge Hills

The document discusses placing JavaScript code in external files and the advantages and disadvantages of doing so. It covers how to link an external JavaScript file in HTML using the <script> tag src attribute. It also covers the defer and async attributes for external scripts and their effects on page loading.

Uploaded by

admin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
197 views

External JavaScript JS File - Advantages, Disadvantages, Syntax, Attributes - Knowledge Hills

The document discusses placing JavaScript code in external files and the advantages and disadvantages of doing so. It covers how to link an external JavaScript file in HTML using the <script> tag src attribute. It also covers the defer and async attributes for external scripts and their effects on page loading.

Uploaded by

admin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

5.09.

2020 External JavaScript JS File - Advantages, Disadvantages, Syntax, Attributes - Knowledge Hills

☰
(http://knowledgehills.com)

External JavaScript JS File – Advantages, Disadvantages, Syntax,


Attributes
You can place your JavaScript code in an external file with .js extension. External scripts are useful for code reuse. When
the same code is used in multiple sites or html pages, it makes sense to have the javaScript code separated into its own js
file.

Step 1. Save below code in myScript.js file

// begin myscript.js file


function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
// end myscript.js file

Step 2. To use an external script in page, type the path of the script file in the src attribute of <script> tag as below. The src
attribute can be a relative path if the file is hosted on the same server where the html file is. Or it can be a fully qualified
url if the js file is hosted on a different web server.

<html>
<body>
<p id="div_id">Welcome to Javascript</p>
<script src="/Code-Samples/JavaScript/myScript.js"></script>
</body>
</html>

Download the code (/download.php?topic=JavaScript&file=external_js_code.html) Run the code (/sandbox.php?


topic=JavaScript&file=external_js_code.html)
Just like inline scripts, you can place an external script anywhere in page between <head> or <body> tags. The script
executes exactly the same no matter where it is located on the page.

External JavaScript Advantages


Placing JavaScript code in external js files has some advantages over inline scripts:
Separating HTML and JavaScript code will help manage the code base better
Designers can work along with coders parallel without code conflicts
Works well with modern source code version control systems such as GIT and SVN.
Each of these files will maintain history
http://knowledgehills.com/javascript/external-javascript-syntax-disadvantages.htm 1/3
5.09.2020 External JavaScript JS File - Advantages, Disadvantages, Syntax, Attributes - Knowledge Hills

Can be checked in, checked out by multiple programmers.


Code as well as HTML is easily readable
External JavaScript files are cached by browsers and can speed up page load times
With these small js files, you can use Google closure or YUI Compressor or other minifying tools to reduce the size
and make it not readable by humans.
Many popular JavaScript packages are available as hosted on content delivery networks (cdn) and you can simply
point to them using the URL in the src, thus avoiding copying the js file to local folder.
Take advantage of advanced tools such as CommonJS or RequireJS to load these scripts logically and modularly.

Disadvantages of external JavaScript


Typically all programmers use external JavaScript these days and it’s very safe and is a best practice. There are very few
issues (not really disadvantages) with external js files as listed below:
The browser has to make an extra http request to get the js code.
Code can be downloaded using the url of the js file. This can help coders to steal your code easily.
Dependency: If script1.js relies on script2.js and for some reason the script1.js download fails, then your
application will break/crash, though the chances of this happening is very slim.
Order of these includes must be maintained, otherwise you get into scope errors.
A small change to a common js file may cause unexpected results in some of the HTML files that use this js.
Example, if you add document.load() in a common js since a certain HTML1 that uses this common js needs it, that
may fix the issue in HTML1 but what about the other HTML files which also happen to include the same js?
When many HTML pages are using a common js file, you need to be extra careful to change the common js. You will
need to test all the HTML files that depend on this common js, every time you make a change to the js file.
Stackoverflow (http://stackoverflow.com/questions/34707187/what-are-some-advantages-and-disadvantages-for-
embedding-javascript-in-html-or-s) has few great insights on this topic.

Script tag Attributes


Normal HTML page execution starts line by line. When an external JavaScript <script> element is encountered, HTML
parsing is stopped until a JavaScript is download and ready for execution. This normal page execution can be changed
using defer and async attribute.

HTML defer attribute


When a defer attribute is used, JavaScript is downloaded parallelly with HTML parsing but  will be execute only a er full
HTML parsing is done.

<script src="/local-js-path/myScript.js" defer></script>

HTML async attribute


When async attribute is used,  JavaScript is downloaded as soon as the script is encountered and a er the download, it
will be executed asynchronously (parallelly) along with HTML parsing.

<script src="/local-js-path/myScript.js" async></script>

When to use which attributes


If your script is  independent of other scripts and is modular, use async.
If you are loading script1 and script2 with async, both will run parallelly along with HTML parsing, as soon
as they are downloaded and available.
If your script depends on another script then use defer for both 

http://knowledgehills.com/javascript/external-javascript-syntax-disadvantages.htm 2/3
5.09.2020 External JavaScript JS File - Advantages, Disadvantages, Syntax, Attributes - Knowledge Hills

When script1 and script2 are loaded in that order with defer, then script1 is guaranteed to execute first
Then script2 will execute a er script1 is fully executed
Must do this if script2 depends on script1
If your script is small enough and is depended by by another script  of type async then use your script with no
attributes and place it above all the async scripts.
<<< Adding JavaScript to html (http://knowledgehills.com/javascript/where-should-the-javascript-be-placed-inside-a-html-page.htm)
JavaScript Syntax >>> (http://knowledgehills.com/javascript/javascript-syntax.htm)

Copyright 2005-2016 KnowledgeHills (/). Privacy Policy (/privacy-policy). Contact (http://knowledgehills.com/contact-us) .

http://knowledgehills.com/javascript/external-javascript-syntax-disadvantages.htm 3/3

You might also like