Although JavaScript is useful for forms, it can also be useful for an ordinary Web page. It can add user-friendliness, convenience, and eye-catching gadgets to liven up a page.
In this chapter, you will look at some of the ways JavaScript can improve a Web page. You'll start with a simple Web page, then add interactive features with JavaScript.
Let's begin with an example of a typical Web page. Once again let's use FSC (the Fictional Software Company) as an example. FSC has a simple set of Web pages that introduce the company and include detailed information about each of the products.
Although the FSC pages are functional and include good information about the company and its products, they're not about to win any awards. In this chapter and the next, you'll learn how JavaScript can make the page more friendly and exciting.
The main FSC Web page is shown in Figure 8.1. It includes a logo at the top, three paragraphs of information, and a simple bulleted list of links to the various subpages. This page is defined using the HTML in Listing 8.1.
Figure 8.1 : A simple Web page using only HTML.
Listing 8.1. (FSchOME.htm) The HTML document for the initial FSC Web page.
<HTML> <HEAD><TITLE>Fictional Software Company</TITLE></HEAD> <BODY> <IMG SRC="fsclogo.gif" alt="Fictional Software Company"> <HR> Welcome to our web page! Fictional Software Company specializes in creating innovative, user-friendly software applications with descriptions filled with industry buzzwords. <P>We have a wide range of products (3 of them) to meet the needs of you and your company. Follow the links below for more information. <P> <UL> <LI><A HREF="spread.html">Fictional Spreadsheet 7.0</A> <LI><A HREF="word.html">Fictional Word Processor 6.0</A> <LI><A HREF="data.html">Fictional Database 7.0</A> </UL> <P> Unlike other software companies, our products have absolutely no bugs, and always work perfectly on all computers. Nevertheless, you may run into problems in rare cases, usually your own fault. If this happens, visit our <A HREF="support.html">Technical Support</A> department for helpful information and tips. You can also view more information <A HREF="company.html">about our company</A> or order products with our friendly <a href="order.html">Order Form</A>. <HR> <I>(c)1998 FSC - designed by the FSC staff</I> </BODY> </HTML>
The various links on the page send you to the company's other pages. One describes each of the company's products, another contains information about the company, and another gives technical support information. A link is also provided to the order form, which was created in Chapter 6 "Using Interactive Forms."
More recently, FSC decided to add more detailed information to its pages. The main page remains the same, but each product's page is now a menu of links to subpages with various categories of information.
As it is, the pages can be difficult to navigate. For example, if you want to view the system requirements for the Fictional Word Processor product, you must select the product name from the main page, wait for the page to load, then select the "System Requirements" link.
With JavaScript, you can create a friendly interface to all the
pages on the main page-without taking much space. Let's use one
selection list to choose the product and another selection list
to choose the type of information about the product to view.
| Note |
In this example, the two selection lists stay the same because each product has the same categories of information available. You will learn a technique for changing the contents of a selection list in Chapter 11, "Real-Life Examples II." |
In writing a program, the programming isn't always the hardest part. You should define the task the program will perform and the data it will use in advance; this will make the actual task of writing the program simple.
In order to make the navigation bar programming task easier, let's choose simple, meaningful names for each of the subpages. This will make it easy to construct their names based on the value of the selection lists.
Assign a one-letter code to each product: w for the word processor, s for the spreadsheet, and d for the database. Then follow that with an underscore and a word indicating the type of information. Here are the categories of information and their corresponding codes:
For example, s_feat.html
is the features list for the spreadsheet program. Meaningful names
like this are a good idea in any HTML task, because they make
it easier to maintain the pages. When you're automating with JavaScript,
they can make a big difference.
| Note |
To try this example yourself, you'll need all the individual HTML files. This chapter does not present them, because they're simple HTML; however, the complete set of files is on the CD-ROM included with this book. |
Before you write the function to navigate the pages, you need to store the needed data. In this case, you need to store the three codes for the software products and the five codes for types of pages. You could create an array for each list, but that isn't necessary in this case.
Rather than creating an array, you can simply place the information in the HTML page itself, and it will be stored in the properties of the form object by the JavaScript interpreter. You will use the codes as the VALUE attribute of each option.
You will need to define an HTML selection list for each of the lists of information. In addition, the user needs a way to visit the page after selecting it; you will accomplish this with a "go" button next to the drop-down lists.
Listing 8.2 shows the HTML to add to the main page. It's included toward the end of the page, but it's generally self-contained and could be placed anywhere. Chapter 9includes an example of using this same navigation bar within a separate frame.
Listing 8.2. The HTML to define the table of contents.
<FORM name="navform"> <SELECT name="program"> <OPTION VALUE="x" SELECTED>Select a Product <OPTION VALUE="w">Fictional Word Processor <OPTION VALUE="s">Fictional Spreadsheet <OPTION VALUE="d">Fictional Database </SELECT> <SELECT name="category"> <OPTION VALUE="x" SELECTED>Select a Category <OPTION VALUE="tech">Technical Support <OPTION VALUE="sales">Sales and Availability <OPTION VALUE="feat">List of Features <OPTION VALUE="price">Pricing Information <OPTION VALUE="tips">Tips and Techniques </SELECT> <INPUT TYPE="button" NAME="go" VALUE="Go to Page" onClick="Navigate();"> </FORM>
In addition to the categories discussed, I have included an additional
option with the value x in
each selection list. These options will display an instructional
message to the user. Clicking on them will do nothing but will
provide the user with a hint about using the selection lists.
These are marked as the default selections, so the instructions
will be displayed until the user makes a selection.
| Tip |
When adding features with JavaScript, don't forget to explain their use, especially if you are using a technique used in few other pages. The user shouldn't have to spend any time figuring out how to use your page. |
You defined an onClick event handler for the "go" button, which calls the Navigate() function. Next, you need to create this function. This function will read the current value of both selection lists and construct a filename, then load that file in the browser.
Listing 8.3 shows the Navigate() function. You will look at the features of this function in detail next.
Listing 8.3. The function for navigating based on the selection lists.
function Navigate() {
prod = document.navform.program.selectedIndex;
cat = document.navform.category.selectedIndex;
prodval = document.navform.program.options[prod].value;
catval = document.navform.category.options[cat].value;
if (prodval == "x" || catval == "x") return;
window.location = prodval + "_" + catval + ".html";
}
To begin, this function sets two variables, prod and cat, to hold the currently selected index for each selection list. Next, prodval and catval are assigned to the corresponding value properties.
The if statement checks for the x value, meaning that the user hasn't yet selected an item, in both lists; if no value has been selected in either list, it returns without doing anything.
Finally, the new document filename is constructed by concatenating
the two codes, the underscore (_), and the html
suffix. This value is assigned to the window.location
property, which causes the new page to be loaded.
| Note |
Because changing the location property loads the new document, you can't do anything more in the current JavaScript program. In fact, the Navigate() function never returns. However, you could include JavaScript functions on the new page. |
Your final task is to combine the new navigation form and the Navigate() function with the Web page HTML. Listing 8.4 shows the revised Web page with the new features, and Figure 8.2 shows how the page looks in Netscape.
Figure 8.2 : The revised Web page with interactive table of contents.
Listing 8.4. (NAVBAR.htm) The complete HTML page with table of contents feature.
<HTML>
<HEAD>
<TITLE>Fictional Software Company</TITLE>
<SCRIPT>
function Navigate() {
prod = document.navform.program.selectedIndex;
cat = document.navform.category.selectedIndex;
prodval = document.navform.program.options[prod].value;
catval = document.navform.category.options[cat].value;
if (prodval == "x" || catval == "x") return;
window.location = prodval + "_" + catval + ".html";
}
</SCRIPT>
</HEAD>
<BODY>
<IMG SRC="fsclogo.gif" alt="Fictional Software Company">
<HR>
Welcome to our web page! Fictional Software Company
specializes in creating innovative, user-friendly software
applications with descriptions filled with industry
buzzwords.
<P>
We have a wide range of products (3 of them) to meet
the needs of you and your company. Follow the links
below for more information.
<P>
<FORM name="navform">
<SELECT name="program">
<OPTION VALUE="x" SELECTED>Select a Product
<OPTION VALUE="w">Fictional Word Processor
<OPTION VALUE="s">Fictional Spreadsheet
<OPTION VALUE="d">Fictional Database
</SELECT>
<SELECT name="category">
<OPTION VALUE="x" SELECTED>Select a Category
<OPTION VALUE="tech">Technical Support
<OPTION VALUE="sales">Sales and Availability
<OPTION VALUE="feat">List of Features
<OPTION VALUE="price">Pricing Information
<OPTION VALUE="tips">Tips and Techniques
</SELECT>
<INPUT TYPE="button" NAME="go" VALUE="Go to Page"
onClick="Navigate();">
</FORM>
<P>
Unlike other software companies, our products have
absolutely no bugs, and always work perfectly on all
computers. Nevertheless, you may run into problems in
rare cases, usually your own fault. If this happens,
visit our <A HREF="support.html">Technical Support</A>
department for helpful information and tips. You can
also view more information <A HREF="company.html">about
our company</A> or order products with our friendly
<a href="order.html">Order Form</A>.
<HR>
<I>(c)1998 FSC - designed by the FSC staff</I>
</BODY>
</HTML>
| Note |
The one thing missing in this Web page is a way to navigate the pages for non-JavaScript browsers. This could easily be done with normal links; in addition, the form you create could be used to call a CGI script to perform the same function (but a bit slower). You'll learn more about combining JavaScript and CGI in Chapter 17, "Combining JavaScript, CGI, and SSI." |
As discussed in Chapter 5 "Accessing Window Elements as Objects," you can change the value of the window.status property to display a message on the status line. You can use this feature to add features to a Web page, displaying helpful information about links or about the company.
Normally, as you move the mouse over each link in a Web page, the status line displays the URL of the link. You can improve on this with JavaScript by displaying a description of the link's destination instead.
You can accomplish this easily using onMouseOver event handlers. When the user moves the mouse over a link, this event will call a function to display the appropriate message on the status line. For example, the following HTML defines a link with a friendly status line:
<A HREF="order.html" onMouseOver="window.status='Allows you to order products';return true;"> Order form</A>
This simply sets the value of window.status to display the message. In addition, the true value is returned; this is necessary to override the normal action (displaying the URL) for the status line.
Listing 8.5 shows the result of adding onMouseOver functions to each of the links in the original version of the FSC Software page. The page is shown in action in Figure 8.3.
Figure 8.3 : Using event handlers to display link information in the status line.
Listing 8.5. (LINKDESC.htm) The FSC page with the addition of friendly links.
<HTML>
<HEAD>
<TITLE>Fictional Software Company</TITLE>
<SCRIPT>
function message(text) {
window.status = text;
return true;
}
</SCRIPT>
</HEAD>
<BODY>
<IMG SRC="fsclogo.gif" alt="Fictional Software Company">
<HR>
Welcome to our web page! Fictional Software Company
specializes in creating innovative, user-friendly software
applications with descriptions filled with industry
buzzwords.
<P>
We have a wide range of products (3 of them) to meet
the needs of you and your company. Follow the links
below for more information.
<P>
<UL>
<LI><A HREF="spread.html"
onMouseOver="window.status='Information about the spreadsheet';return true;">
Fictional Spreadsheet 7.0</A>
<LI><A HREF="word.html"
onMouseOver="window.status='Information about the word processor';return
true;">
Fictional Word Processor 6.0</A>
<LI><A HREF="data.html"
onMouseOver="window.status='Information about the database';return true;">
Fictional Database 7.0</A>
</UL>
<P>
Unlike other software companies, our products have
absolutely no bugs, and always work perfectly on all
computers. Nevertheless, you may run into problems in
rare cases, usually your own fault. If this happens,
visit our <A HREF="support.html"
onMouseOver="window.status='Technical Support for our products';return true;">
Technical Support</A>
department for helpful information and tips. You can
also view more information <A HREF="company.html"
onMouseOver="window.status='Information about FSC Software Co.';return true;">
about our company</A> or order products with our friendly
<a href="order.html"
onMouseOver="window.status='Allows you to order products';return true;">
Order Form</A>.
<HR>
<I>(c)1998 FSC - designed by the FSC staff</I>
</BODY>
</HTML>
| Note |
You might be tempted to make a function to avoid using such long statements as event handlers. Unfortunately, because the return true statement must be in the event handler itself, it wouldn't save much typing at all. You can still do it with a command such as return function() in the event handler. |
Currently, one of the most common uses of JavaScript is to display a scrolling message on the status line. This might be useful to point out features of the page or to let the user know about a current offer.
Scrolling a message is simple in JavaScript. First, you define a variable with the message to be scrolled, and another with a "spacer" that will be used between copies of the message. A third variable, pos, will be used to store the current position of the string on the status line:
var msg = "Welcome to Fictional Software Company. Watch for a new product coming next month!"; var spacer = "... ..."; pos = 0;
Next, you define a function that will be called periodically to scroll the message. Here is the ScrollMessage() function:
function ScrollMessage() {
window.status = msg.substring(pos, msg.length) + spacer + msg.substring(0,
pos);
pos++;
if (pos > msg.length) pos = 0;
// set timeout for next update
window.setTimeout("ScrollMessage()",200);
}
This function creates the value of the status line by adding three values:
It then increments the position indicator pos. If it has reached the end of the string, it resets pos to zero. Finally, the window.setTimeout() method is used to cause the ScrollMessage() function to execute again, using a timeout of one-fifth of a second.
This message-scrolling routine works fine, but it suffers from a failing common to most such routines: it obliterates anything else in the status line. This makes it hard to tell where the links go-in fact, it defeats the purpose of the friendly link messages created in the previous section.
To fix this, you'll define a new variable, showmsg. This variable will hold a Boolean value, initially true. When it is set to false, the ShowMessage() function will refrain from showing the message. Instead, it will set a timeout to show the message later. Here is the revised ShowMessage() function:
//flag to control message
var showmsg = true;
function ScrollMessage() {
if (!showmsg) {
window.setTimeout("ScrollMessage()",1500);
showmsg = true;
return;
}
window.status = msg.substring(pos, msg.length) + spacer + msg.substring(0,
pos);
pos++;
if (pos > msg.length) pos = 0;
// set timeout for next update
window.setTimeout("ScrollMessage()",200);
}
The additional code checks for a false value of the showmsg variable. If it is false, it uses the window.setTimeout() method to set a timeout for 1.5 seconds-plenty of time to read the description in the status bar.
To use this function, you will need to set showmsg to false in each one of the event handlers. To make this simpler, you use a function for the event handlers:
// Display a link help message
function LinkMessage(text) {
showmsg = false;
window.status = text;
}
This function sets the showmsg variable to false, then displays the message in the status line. To call the function, you use an event handler like this:
onMouseOver="LinkMessage('This is the message');return true;"
You will need to change each of the links to use the new event handler syntax. Listing 8.6 shows the revised version of the FSC page, complete with both a scrolling message and helpful link messages. Figure 8.4 shows this page in Netscape with the message scrolling.
Figure 8.4 : The scrolling message example in Netscape.
| Tip |
As an alternative to scrolling messages, Chapter 11 includes a routine that displays random, nonscrolling tips, messages, or advertisements in the status line. |
Listing 8.6. (SCROLMSG.htm) The FSC page with the scrolling message routine.
<HTML>
<HEAD>
<TITLE>Fictional Software Company</TITLE>
<SCRIPT>
// message to scroll in scrollbar
var msg = "Welcome to Fictional Software Company. Watch for a new product
coming next month!";
var spacer = "... ...";
// current message position
var pos = 0;
//flag to control message
var showmsg = true;
function ScrollMessage() {
if (!showmsg) {
window.setTimeout("ScrollMessage()",1500);
showmsg = true;
return;
}
window.status = msg.substring(pos, msg.length) + spacer + msg.substring(0,
pos);
pos++;
if (pos > msg.length) pos = 0;
// set timeout for next update
window.setTimeout("ScrollMessage()",200);
}
// Start the scrolling message
ScrollMessage();
// Display a link help message
function LinkMessage(text) {
showmsg = false;
window.status = text;
}
</SCRIPT>
</HEAD>
<BODY>
<IMG SRC="fsclogo.gif" alt="Fictional Software Company">
<HR>
Welcome to our web page! Fictional Software Company
specializes in creating innovative, user-friendly software
applications with descriptions filled with industry
buzzwords.
<P>
We have a wide range of products (3 of them) to meet
the needs of you and your company. Follow the links
below for more information.
<P>
<UL>
<LI><A HREF="spread.html"
onMouseOver="LinkMessage('Information about the spreadsheet');return true;">
Fictional Spreadsheet 7.0</A>
<LI><A HREF="word.html"
onMouseOver="LinkMessage('Information about the word processor');return true;">
Fictional Word Processor 6.0</A>
<LI><A HREF="data.html"
onMouseOver="LinkMessage('Information about the database');return true;">
Fictional Database 7.0</A>
</UL>
<P>
Unlike other software companies, our products have
absolutely no bugs, and always work perfectly on all
computers. Nevertheless, you may run into problems in
rare cases, usually your own fault. If this happens,
visit our <A HREF="support.html"
onMouseOver="LinkMessage('Technical Support for our products');return true;">
Technical Support</A>
department for helpful information and tips. You can
also view more information <A HREF="company.html"
onMouseOver="LinkMessage('Information about FSC Software Co.');return true;">
about our company</A> or order products with our friendly
<a href="order.html"
onMouseOver="LinkMessage('Allows you to order products');return true;">
Order Form</A>.
<HR>
<I>(c)1998 FSC - designed by the FSC staff</I>
</BODY>
</HTML>
There are some disadvantages to using the status line to display scrolling messages. For one thing, the user may want to view URLs rather than your descriptions. Also, the browser uses it to display status when loading documents.
Finally, the status line is at the bottom of the page-hardly the place for an important announcement. Some users habitually ignore the status line, and may not even see your message.
To solve these problems, you can use a text field as an alternative to the status line. You can display help for links in such a field or use it to scroll a message.
Changing the ScrollMessage() function to use a text field instead of the status line requires only a minor change. Here is the revised function:
function ScrollMessage() {
document.form1.text1.value = msg.substring(pos, msg.length) + spacer +
msg.substring(0, pos);
pos++;
if (pos > msg.length) pos = 0;
// set timeout for next update
window.setTimeout("ScrollMessage()",200);
}
You are now placing the current message value in the value property of the text1 form element. Notice that the check for the showmsg variable is no longer necessary, because the scrolling message will not conflict with the link descriptions (which are still in the status line).
You define the text field (in its own little form) with the HTML:
<FORM name="form1"> <INPUT TYPE="text" name="text1" SIZE="60"> </FORM>
One more change is necessary. Because the form1 element doesn't actually exist until it is defined in the Web page, you can no longer start the scrolling in the <HEAD> section of the document. It must start after the page is loaded.
An easy way to accomplish this is with the document's onLoad event handler. You use the following <BODY> tag to start the document and define the event handler:
<BODY onLoad = "ScrollMessage();">
| Note |
One disadvantage of using a text field in this way is that the user can modify the value. However, because you're updating the field every fifth of a second, the user can't affect it much. |
Listing 8.7 integrates the new function and the text field into the FSC home page. The status line is still used to display help about each of the links. Figure 8.5 shows Netscape's output of this page.
Figure 8.5 : Netscape shows the FSC home page with the scrolling text field.
Listing 8.7. (SCROLTXT.htm) The FSC page with the scrolling text field routine.
<HTML>
<HEAD>
<TITLE>Fictional Software Company</TITLE>
<SCRIPT>
// message to scroll in text field
var msg = "Welcome to Fictional Software Company. Watch for a new product
coming next month!";
var spacer = "... ...";
// current message position
var pos = 0;
//flag to control message
function ScrollMessage() {
document.form1.text1.value = msg.substring(pos, msg.length) + spacer +
msg.substring(0, pos);
pos++;
if (pos > msg.length) pos = 0;
// set timeout for next update
window.setTimeout("ScrollMessage()",200);
}
// Display a link help message
function LinkMessage(text) {
window.status = text;
}
</SCRIPT>
</HEAD>
<BODY onLoad = "ScrollMessage();">
<IMG SRC="fsclogo.gif" alt="Fictional Software Company">
<FORM name="form1">
<INPUT TYPE="text" name="text1" SIZE="55">
</FORM>
Welcome to our web page! Fictional Software Company
specializes in creating innovative, user-friendly software
applications with descriptions filled with industry
buzzwords.
<P>
We have a wide range of products (3 of them) to meet
the needs of you and your company. Follow the links
below for more information.
<P>
<UL>
<LI><A HREF="spread.html"
onMouseOver="LinkMessage('Information about the spreadsheet');return true;">
Fictional Spreadsheet 7.0</A>
<LI><A HREF="word.html"
onMouseOver="LinkMessage('Information about the word processor');return true;">
Fictional Word Processor 6.0</A>
<LI><A HREF="data.html"
onMouseOver="LinkMessage('Information about the database');return true;">
Fictional Database 7.0</A>
</UL>
<P>
Unlike other software companies, our products have
absolutely no bugs, and always work perfectly on all
computers. Nevertheless, you may run into problems in
rare cases, usually your own fault. If this happens,
visit our <A HREF="support.html"
onMouseOver="LinkMessage('Technical Support for our products');return true;">
Technical Support</A>
department for helpful information and tips. You can
also view more information <A HREF="company.html"
onMouseOver="LinkMessage('Information about FSC Software Co.');return true;">
about our company</A> or order products with our friendly
<a href="order.html"
onMouseOver="LinkMessage('Allows you to order products');return true;">
Order Form</A>.
<HR>
<I>(c)1998 FSC - designed by the FSC staff</I>
</BODY>
</HTML>
In this chapter, you learned some of the ways a Web page can be improved by using JavaScript, including the following:
To continue your studies of JavaScript, move on to one of the following chapters:
| What's wrong with the many popular scrolling message routines available on the Web? | |
| Most of them are victims of the memory leak bug in Netscape, because they reassign a string every time the text in the status bar moves. The example in this chapter avoids this problem. See Chapter 14, "Debugging JavaScript Programs," for details. | |
| Is there any way to use some kind of "floating hints" or "balloon help" with links instead of using the status bar? | |
| Not currently. This may be added in some fashion in a future implementation of JavaScript. | |
| Can the navigation bar in this chapter be used with browsers that don't support JavaScript? | |
| Yes. You could easily modify it to send the selections to a CGI script, which could send the user to the correct page. You'll take a closer look at CGI in Chapter 18. |