Previous Page
Next Page

Using External Scripts

The problem with using scripts on the HTML page, as in the last example, is that the script is only available to that particular page. That's why those kinds of scripts are sometimes called internal scripts. But often, you'll want multiple HTML pages to share a script. You do this by including a reference to an external script, that is, a separate file that just contains JavaScript. This external file is called a .js file, because whatever it's called, the file name should end with the suffix .js. Individual pages call the .js file simply by adding a new attribute, src, to the script tag.

This saves a lot of code on every page and, more important, makes it easier to maintain your site. When you need to make changes to a script, you just change the .js file, and all HTML pages that reference that file automatically get the benefit of your changes.

In this first example of an external script, Script 2.2 contains the HTML with the reference to the external file, and Script 2.3 is the external JavaScript file.

Script 2.2. The simple HTML puts a reference to the external JavaScript file inside the script tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>My second script</title>
     <script language="Javascript" type="text/javascript" src="script02.js">
     </script>
</head>
<body bgcolor="#FFFFFF">
     <h1 id="helloMessage">
     </h1>
</body>
</html>

Script 2.3. Your first external JavaScript file.

window.onload = writeMessage;
function writeMessage() {
     document.getElementById("helloMessage"). innerHTML = "Hello, world!";
}

To use an external script:

1.
<script language="Javascript" type="text/javascript" src="script02.js">

This line is in Script 2.2. Adding the src attribute to the script tag causes browsers that support JavaScript 1.1 and later to look for that file. The resulting Web pages will look just as though the scripts were in their usual place inside the page's script tags, when really the script resides in the external .js file.

By itself, this line is all we need to do to use an external script. Next, let's work through what is in that script.

2.
window.onload = writeMessage;

Moving to Script 2.3, the first part of this line, window.onload, is an event handler, which we discussed in Chapter 1. After the equals sign there is the name of a function, writeMessage. In English, this line can be read as "When the window finishes loading, tell the writeMessage function to run."

3.
function writeMessage() {

This line creates the writeMessage() function.

4.
document.getElementById ("helloMessage").innerHTML = "Hello, world!";

If you'll refer back to Script 2.2, you'll see that there is an <h1> tag there with an id of helloMessage. You'll learn more about ids later, but for now, suffice it to say that an id is a unique identifier on a page for whatever it is attached to. In other words, on a given page, there can be only one element with a particular id. That makes it easy for JavaScript to retrieve and operate on the element by using its getElementById() method. The innerHTML property simply takes the string that is on the right-hand side of the equals sign and drops it directly into the page, just as if we'd written it into the HTML itself. So, reading the JavaScript line from right to left in English, we could say "Take the string "Hello, world!" and put it into the document, inside the element on the page that is named helloMessage." The result looks like Figure 2.2, which looks an awful lot like Figure 2.1.

Figure 2.2. The result of moving your JavaScript to an external file looks eerily unchanged from the previous example. But it's still a better way of doing things.

[View full size image]


Tips

  • Browsers that support external JavaScript files include: Microsoft Internet Explorer 4 and later, Netscape 3 and later, and just about every other browser that's shipped since then, including modern browsers like Firefox and Safari.

  • Using external JavaScript files is sometimes used to try to hide JavaScript from users. It doesn't work if the user is technically savvy enough to check their browser cache fileseverything that the browser has seen is stored there.

  • In Script 2.1 (and previous editions of this book), we used a technique for inserting information into the HTML page called document.write(). In this edition, we've mostly replaced that approach with setting innerHTML, because it is more versatile. Some people object to the use of the innerHTML property because it hasn't been blessed by the W3C. But even those people with issues agree that it's the simplest cross-browser way to work, so that's what we're primarily showing in this book. The "official" way to add or change an HTML page is covered in Chapter 12, "Objects and the DOM."

  • If you've seen functions before, you might be expecting the writeMessage reference in step 2 to instead be writeMessage(). It's not, because the two mean different things: a function shown with parentheses means that the function is being called, right then and there. When it's without parentheses, (as it is here) we're assigning it to the event handler, to be run later when that event happens.



Previous Page
Next Page