How to Place JavaScripts in External Files

Every few days (on the WebDeveloper.com JavaScript forum), someone posts a recurring question, trying to figure out how to place their JavaScripts in an external file. The current method for doing so works, but it seems to confuse a lot of people. In this article we'll take a look at the reasons for placing scripts in an external file and how to go about doing it.

Reasons for Moving Scripts off the Page

Web developers have come to realize that Web pages work best when everything is separated 'unto itself.' For instance, a basic Web page contains the HTML markup needed for the structure of the page, while the CSS used to determine the page's appearance is located in a separate file with a link to it placed in the head section of the Web page.

Over the past few years a 'technique' has been developed called unobtrusive JavaScript. This removes all of the script from the Web page, except in a few isolated cases, just like CSS. While that is the preferred method, there are still older scripts out there that will need to be rewritten. Almost every single one of them can be moved off the Web page and placed into an external file. There may still be some JavaScript left on the page but, as I said, that can be taken care of when someone takes the time to rewrite them or when they are replaced with more efficient scripts.

There are several advantages for moving the scripts to an external file:

When editing the script, you only need to edit one file (unless there is JavaScript on the actual Web page.)
You can combine several scripts together to create a 'JavaScript library.'
The actual Web page is smaller in size, making it load faster.
Since the script is already in the cache, it doesn't have to be reloaded when a visitor goes to another page which uses the same scripts.
It separates the JavaScript from the search engine bots. (Believe me, your actual scripts will not get you higher rankings. In fact, they may hinder your rankings.)

This is not a new technique. Developers have been placing scripts in external files for years. There are a few things to remember, but for the most part, it's really not that hard.

You don't need to place all of your scripts in one large file. You could have more than one file, you could separate scripts up into different files based on what they do, you could have one file for snippets (e.g., popup window functions and e-mail scripts) and another for general ones (e.g., calendars and page details).

Moving Scripts off the Page

Let's take a script and see what we need to do to move the actual script to an external file. This script will open links in a popup window, using the size given in the link. It has two parts. The first part, which many people would place inside the head section on the Web page, is what we will be putting into the external file.

function newWin(link,w,h,s,r) {
  var winFeatures='width='+w+',height='+h+',scrollbars='+s+',resizable='+r;
  var bookWindow=window.open(link, "", winFeatures);
}

This next portion is placed in the body portion of the Web page (all on one line).

<a href="https://www.javascript.internet.com/"
  onclick="newWin(this.href,500,400,'yes','yes');
  return false;">Just a link</a>

The first thing to do is to open a new document in a text editor, such as MS Notepad or NoteTab Pro. (You can use a wordprocessor like MS Word but the file must be saved in a text format. It cannot contain any type of formatting.) Then copy the first portion into the file and save the file as "popUps.js" (w/o the quotes).

[Ed. Note: Word processors like MS Word contain their own formatting which often does not translate properly, hence the recommendation of a text only editor.]

It's very important that the external JavaScript file does not contain anything else besides the JavaScript. You can place comments in the file but nothing else. Comments on a single line must be precede with " // "; comments longer than one line should be enclosed in: " /* */ ." The example below shows how they are used.

// These comments are on a single line.
/* The comments are on several lines
   contained within the file. */

Next, place the following link in the head section of the HTML document:

<script type="text/javascript" src="popUps.js"></script>

Now, let's stop and take a look at what is happening here. The opening tag, <, tells the browser:

it has encountered a script;
it is in text format;
it is to be interpreted as javascript; and
the script is located in an external file located at the given URL.

Be careful when you reference the location of the JavaScript file. You can place them in a separate directory and then reference them all from there, e.g., /javascripts/popUps.js

The closing tag, </script>, tells the browser that the code is finished. Nothing should be written between the opening and closing tag.

An important tip to remember is that, when placed within the Web page itself, the script is enclosed in a different type of script tags.

There you have it. It's really not that hard, is it? There are a few other tips, though. Let's take a look at them.

[next]

Created: February 3, 2006

URL:

How to Place JavaScripts in External Files