Since the primary use of JavaScript in these tutorials is for web development, this article will introduce two methods for including JavaScript within a web document.
Internal vs external
There are two forms of JavaScript, internal and external, or inline and external.
Both types methods of using scripts have advantages and disadvantages and will be discussed further in this article.
External scripts
An external script is a script that is not included in the web document and is found in a different file altogether. In relation to a website, this allows a developer to write one script file and reference it on every page on the website.
An external script has the main benefit that it is updated once and it is updated across a whole website. It can also be cached by the user's browser, reducing the number of times it needs to be downloaded by the client's browser. Another major benefit is that the code can be managed much better since it is separate from the content (HTML). As well as this, a fourth benefit of external scripts is that they can be stored on a completely separate server, for instance a content delivery network (CDN) so that it can be downloaded faster.
There are disadvantages to this form of script too. The main issue is that it adds one extra download to every webpage that is visited. This adds one more HTTP request unless the script is cached.
An external script is included in a HTML document as a HTML element, specifically the
<script> tag:
<html> <head> <title>Sample</title> <script src="script.js"></script> </head> <body> <p>Hello world</p> </body> </html>
Whilst it is often the case that scripts are included in the <head>
element, it is perfectly normal to include scripts anywhere within the HTML. It is now often the case that
scripts are included at the end of the webpage so not to slow the loading time of the page and to ensure
that they are executed when the page has loaded.
Inline scripts
An inline script is a script included directly in a web document. There are two methods of inline scripts, as an inline element and as an inline event on an element.
Inline scripts carry a few advantages and disadvantages. The most obvious advantage is that a script is limited to the page it is included in and therefore can be tailored to that page. For instance, a specific tool on a website could have JavaScript code limited to that page only since it only appears once on a website. Another major advantage of an inline script is that it is downloaded at the same time as the HTML, therefore no further download requests are needed. Inline scripts also can be used for debugging purposes, especially if the script is cached on the browser or by a content delivery network.
The main disadvantage of an inline script is that it cannot be cached and therefore must be downloaded each and every time the user visits the page. Inline scripts obviously should be specific to the webpage that they are included on otherwise they are consuming unncessary resources on the client's computer.
Inline JavaScript event
An event is something that occurs when something else occurs. HTML specifies attributes on almost all elements that allow events to be bound to a JavaScript function. For instance, when a user clicks on a button with a JavaScript event, a function can be called:
<html> <head> <title>Sample</title> </head> <body> <p>Hello world</p> <button onclick="//Some JavaScript">Click here</button> </body> </html>
Inline JavaScript
An inline JavaScript will be executed only when the browser reaches it. This can be in the
<head> or the <body>
element.
Inline JavaScript is embedded through the <script> tag,
just as the external JavaScript is. However, since it is inline, it will not need a source to obtain
the file and it will instead include the JavaScript in the tag:
<html> <head> <title>Sample</title> <script> //Some JavaScript here </script> </head> <body> <p>Hello world</p> </body> </html>
This code will be executed when the browser works it's way to the location of the tag.
