To illustrate the technique, I'll show examples of how to externalize "footer links" and footnotes (such as copyright notices).
First, I'll explain how to externalize "footer links," those navigation links at the top, bottom, or side of most Web pages that let you easily switch from page to page. Good design says that those links should look and work the same from page to page. That's simple enough; you can always copy and paste. But if you copy the code that defines your footer links to every page in your Web site, you'll create a maintenance problem; if you need to add a new link or want to make a small change to the look and feel, you'll have to change every page.
Figure 1: This function defines how to write footer (navigation) links.
The purpose of document.write is to write text to an HTML document, which is then displayed by the browser. It will also write HTML tags, which the browser will then interpret and parse out correctly on the screen. Notice the first document.write: document.write("
"). If you are familiar with HTML, you know that this is an instruction to place a "horizontal rule" on the screen. The second document.write starts a new paragraph (
) and defines anchor tags for the navigation links. This is the same code you would use in the HTML document.
One important thing about document.write: It cannot be broken across lines. So if you have very much text, you may want to break it up using variables, but there is no harm in extending the code in one long line.
Notice in Figure 1 that every document.write ends with a semi-colon (;), and the text and HTML tags to be written are within double quotes. If you have trouble getting your code to work, that's the first thing to check: Do you have a double quote where you shouldn't? If this is the case, try single quotes or the HTML equivalent: "
Calling the Function
To call the function from your HTML document, place the function name between the tags as shown in Figure 2. If you were passing variables to the function, you would place them within the parentheses; in this case, there are none. Again, notice the semi-colon after the function name.
Another Way to Do the Same Thing
Figure 3: You can use SSI to externalize HTML code.
First let me point out that, to format my example page, I'm using an external style sheet. Though it's beyond the scope of this article to explain style sheets, think of them as a way to put all of your HTML formatting options, (e.g., fonts, font color, point size, paragraph spacing, link attributes, etc.) into one place and "copy" or "include" them in.
Behind the Scenes
Figure 5: The footnote functions creates a new browser window and displays text based on an input variable.
After the new window has been defined, you use the document.write object to set up the new document with HEAD, TITLE, and BODY tags. Then, you write the footnote, using the statement newWin.document.write(foot[nbr]); The function's input variable is used to extract the array element to be written.
Wrapping It Up
Author's Note: A special thank you to Ted Holt and Joe Pluta for their help with this article.