Beginner JavaScript – Chapter 1 – Including JavaScript on Web Pages
Note:
As stated in my initial post, this is part of a series of JavaScript-related posts. As I am becoming knowledgeable in JavaScript, I am posting out what I’ve learned, to re-enforce my knowledge, as well as maybe helpful other web designers/developers in learning JavaScript. If I have mis-stated anything, please feel free to post it in the comments. You’ll help me, and others in learning JavaScript. Thanks!
Before you write your Javascript, you have to know how best to incorporate it into your pages. Officially, there are three methods.
- In-line
- Embedded
- External
Inline “was” one of the more popular methods of including JavaScript on a page. However, in keeping the web standards approach in mind (seperation of content, design & functionality), we’ll focus on the last two.
Embedded
Embedding JavaScript is a necessary evil. There are many cases when you will need to embed Javascript into a page. To do so, you start with the script tag:
<script> </script>The script tag should include the type attribute. This tells the browser what type of script is within the script tags.
<script type="text/javascript"> </script>You then place your JavaScript within the script tags:
<script type="text/javascript">
alert('Hello World!');
</script>
Where you place your embedded Javascript will determine when it will become activated or available.
External
Javascript referenced from external Javascript files is the preferred method of including Javascript on a page for several reasons:
- Makes the same Javascript available to multiple pages, without duplicating.
- Loads once, cached in the browser for every other page load on the site.
To externally load JavaScript into your page, you first create the Javascript file to reference. A Javascript file has an extension of .js and is just a plain text file. Once the external JavaScript file is created, you can reference it via the following code:
<script type="text/javascript" src="myjavascriptfile.js"></script>
Note that the path related to the src attribute can be relative or absolute. If the Javascript is located on an external server, the src path would be absolute.
Note: If you are using a common/shared Javascript files, such as jQuery or another JavaScript library, consider referencing that file from a CDN (content delivery network). A CDN is a system of computers containing copies of data placed at various nodes of a network. When properly designed and implemented, a CDN can improve access to the data it caches by increasing access bandwidth and redundancy and reducing access latency. Two of the more popular CDNs are hosted by Google and Microsoft.
When referencing an external JavaScript file, you should place the reference to all external JavaScript at the bottom of the page, just before the closing
