This article attempts to explain how the use of JavaScript functions can make coding HTML a little cleaner and a little easier. %% use insertnewsletterStoryad %%
My hope is to give you a few simple functions you can use immediately and to spark your interest in finding creative ways to make maintaining Web pages more manageable. You don't have to understand a lot about JavaScript to implement these techniques, but you may want to refer to a JavaScript reference guide for more detail. One book I'd suggest is Web Design in a Nutshell by Jennifer Niederst (O'Reilly & Associates).

If you're an RPG programmer like me, you've probably experimented with ways of making programs more modular and thus easier to maintain. By now, I suppose you've begun using ILE and have seen the benefits of reusable code. But what about HTML and free-form script languages like JavaScript? How do you carry over to the Web world the efficiencies you've discovered in the RPG world ?

At one time or another, I'm sure you have used RPG "/COPY members" or ILE service programs. The idea behind both of those is that you define or write something once and then copy it to or call it from many other programs. You can implement a similar feature in HTML by using simple JavaScript functions. The technique I show here is similar to using server-side includes (SSIs); I'll briefly explain the differences.

To illustrate the technique, I'll show examples of how to externalize "footer links" and footnotes (such as copyright notices).

Footer Links

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.

Using the /COPY example, you can define the footer navigation links in one simple JavaScript function and add a function call (/COPY in) to any pages where you want the links. Then, when you need to make a change, you make it one time, to the function, and the next time the function is called (when the page is loaded), the change is implemented. Let's look at the syntax of the function and the syntax needed to call it.

Figure 1 defines the function to write footer links. Notice that, in the first line, "// footer links" is a comment. The second line defines the function name as "footerlinks." Any parameters passed in would be listed between the parentheses (). The actual JavaScript code sits between the curly brackets { }.

Figure 1: This function defines how to write footer (navigation) links.

The JavaScript code part of the function consists of the write method of the document object (called "document.write") and the HTML tags to define the anchor 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.

Figure 2: Here's an example JavaScript function call from HTML.

That's all there is to it. This is an extremely easy script and one you can implement quickly without knowing a lot about JavaScript. For other examples of this technique, download the sample code. There, you'll find a sample HTML page illustrating more JavaScript functions.

Externalizing Functions

Let's talk about where to store your JavaScript code. You may have noticed JavaScript functions defined at the beginning of HTML documents, and this is perfectly acceptable. In my opinion, however, you lose modularity when you do this; it's better to define functions in an external *.js file. I understand browser compatibility may have kept you from externalizing functions, but give the external *.js file a try before you resort to defining scripts internally.

In my example page, I've stored the JavaScript functions in an external file called commonscripts.js, which is nothing more than a text file with the .js extension. The downloadable code has this file; you can use it as a reference or adopt it as your own and add to it. To include or /COPY the commonscripts.js file into your document, use HTML's SCRIPT tag and place it between theandtags:

Another Way to Do the Same Thing

Server Side Includes (SSIs) are another way to externalize sections of HTML. Unlike in my example, you don't need JavaScript to use SSI. I'm oversimplifying this a bit, but to use SSI, you put the HTML you want to externalize into a separate document (usually with an .shtml suffix) and add an include in the main document, as shown in Figure 3.

Figure 3: You can use SSI to externalize HTML code.

SSI has predefined variables you can use to get the current date and time and variables to give information about a document (name, last modified). There is also a set of IF/ELSE commands.   To use SSI, you need to consult with your system administrator to see if it's available. You should also review your Web server's documentation.  SSI or JavaScript: the decision is yours. Choose what works best for your situation.

Footnotes

Building on what you've learned so far, let's look at a unique way to add footnotes (such as copyright information) and/or definitions to an HTML page. This technique uses a JavaScript function similar to the previous one, but you'll add an input variable and an array to hold footnotes, and then you'll call the function from an anchor link.

In the downloadable code, there is an example page called javascript_tip1.htm. Open the document and view the code to get a better understanding of what you're trying to accomplish.

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.

When you open the example document ( javascript_tip1.htm ), notice that at the end of the first sentence there is a superscript 1 to denote the footnote. Clicking the footnote calls the JavaScript "footnote" function, passing in the parameter 1, which causes a new browser window to open and the footnote to display. See Figure 4.

Figure 4: Call a JavaScript function from an anchor link.

Behind the Scenes

Looking at the example document (javascript_tip1.htm, available in the downloadable code), you'll notice I took a few lines from "Old Mother Hubbard" and added my commentary in the footnotes.

The "footnote" function is listed in Figure 5 and has two parts. The first part of the function defines an array to hold the footnote text and, as in the first example, also includes any HTML tags needed to mark the text. The statement "foot = new Array( 5 );" creates a new JavaScript array with five elements.

Note that JavaScript array indexes start with zero, so the first footnote would be index zero. To make this easier to manage, I don't use the first index (that is, index zero). By starting with index 1, I am able to associate footnote 1 with array index 1.

Figure 5: The footnote functions creates a new browser window and displays text based on an input variable.

The second part of the function defines a new browser window using the window.open object. I'm sure you've seen or used this before, so I won't go into detail. The parameters for window.open allow us to stipulate the size of the new window and to define it without a menu or scroll bar. (A good JavaScript reference would give you more information on all the properties of the window object.)

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.

This technique is a good way to externalize information into one area so it can be called from multiple documents. Maintaining one JavaScript array is easier than maintaining multiple documents.

Wrapping It Up

I hope these examples encourage you to find more ways to use JavaScript (or SSI). I'd love to hear your ideas on streamlining HTML and lessening Web site maintenance.

Author's Note: A special thank you to Ted Holt and Joe Pluta for their help with this article.

Jeff Kinzer is the Senior Programmer/Analyst for ACH Food Companies, Inc. in Memphis, Tennessee. Jeff has nearly 15 years experience with midrange systems and personal computers. You can contact Jeff at This email address is being protected from spambots. You need JavaScript enabled to view it.

Also Read

Open Source Starter Guide for IBM i Developers: Language Basics

Open Source Starter Guide for IBM i Developers: Ruby and IBM i, An Introduction

Open Source Starter Guide for IBM i Developers: i Object!