Chapter 11
Real-Life Examples II
CONTENTS
This chapter includes several example JavaScript applications
that apply the techniques you learned in Part III, "Creating
Smart Web Pages." These include the following:
- Example 1: Nonscrolling Status Line Messages: A different
idea for displaying messages in the status line
- Example 2: An Improved Navigation Bar: Using dynamically
changed selection lists to allow the user to select a specific
page
- Example 3: Storing User Preferences: A page that remembers
a user's preference and shows either the frames or no-frames version
Chapter 8 "Improving a Web Page with JavaScript," introduced
a program to scroll messages in the browser's status line. Such
scrolling messages have become a bit of a cliché on the
Web, and they do have their disadvantages-for one, few users want
to watch for several minutes while a long message displays.
The following techniques are used in this example:
One alternative is to display messages that don't scroll in the
status line. This enables you to have several different tips,
advertisements, or other messages displayed, and enables the user
to read them quickly.
Listing 11.1 shows the nonscrolling message program integrated
into the FSC Software home page. You'll look at the program in
detail later.
Listing 11.1. (NOSCROLL.asp) Random, nonscrolling messages
in the status line.
<HTML>
<HEAD>
<TITLE>Fictional Software Company</TITLE>
<SCRIPT>
// messages to display in scrollbar
msg = new Array(4);
msg[0]="This is the first message."
msg[1]="This is the second message."
msg[2]="This is the third message."
msg[3]="This is the fourth message."
//flag to control message
var showmsg = true;
function NextMessage() {
if (!showmsg) {
window.setTimeout("NextMessage()",5000);
showmsg = true;
return;
}
index = Math.floor(msg.length * Math.random());
window.status = msg[index];
// set timeout for next update
window.setTimeout("NextMessage()",5000);
}
// Display the first status line message
NextMessage();
// 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.asp"
onMouseOver="LinkMessage('Information about the spreadsheet');return true;">
Fictional Spreadsheet 7.0</A>
<LI><A HREF="word.asp"
onMouseOver="LinkMessage('Information about the word processor');return true;">
Fictional Word Processor 6.0</A>
<LI><A HREF="data.asp"
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.asp"
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.asp"
onMouseOver="LinkMessage('Information about FSC Software Co.');return true;">
about our company</A> or order products with our friendly
<a href="order.asp"
onMouseOver="LinkMessage('Allows you to order products');return true;">
Order Form</A>.
<HR>
<I>1998 FSC - designed by the FSC staff</I>
</BODY>
</HTML>
Here's a summary of how key elements of this program work:
- An array, msg[], is created
to hold the various messages that will be displayed.
- Each element of the msg
array is assigned explicitly. This example has four messages,
but there could easily be more.
- Every five seconds, a new random index into the msg
array is created using the Math.random()
method. The resulting string is stored in window.status
to display it in the status line.
- This program also implements the "friendly links"
technique used in Chapter 8. The showmessage
flag is used to turn off the random messages when a link description
is being displayed.
| Note |
This program uses the Math.random() method, which was fully implemented in Netscape 3.0b3, although it worked in earlier UNIX versions. Be sure you're using the latest version to try this example.
|
This program is shown in action in Figure 11.1. I hope this not
only gives you an alternative way of displaying messages, but
the inspiration to come up with new and creative ways of your
own.
Figure 11.1 : Netscape's display of the nonscrolling
message example.
You created a navigation bar for the FSC home page in Chapter
8. In that example, each product had the same list of categories
available. What if there is a different list of pages for each
product? In this example, you'll use dynamic selection lists to
allow for different pages for each product.
This example uses the following techniques:
- Using selection lists for navigation (Chapter 8)
- Complex site organization and planning (Chapter 10)
Listing 11.2 shows the improved navigation bar in JavaScript and
HTML.
Listing 11.2. (NAVBAR2.asp) The HTML and JavaScript source
for the improved navigation bar.
<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 + ".asp";
}
function update() {
// update available categories depending on product
prod = document.navform.program.selectedIndex;
prodval = document.navform.program.options[prod].value;
if (prodval == "x")
{document.navform.category.options[0].text = "Select a Category:";
document.navform.category.options[0].value = "x";
document.navform.category.options[1].text = "(please select ";
document.navform.category.options[1].value = "x";
document.navform.category.options[2].text = " a product";
document.navform.category.options[2].value = "x";
document.navform.category.options[3].text = " first)";
document.navform.category.options[3].value = "x";
}
if (prodval == "w")
{document.navform.category.options[0].text = "Word Processor:";
document.navform.category.options[0].value = "x";
document.navform.category.options[1].text = "Technical Support";
document.navform.category.options[1].value = "tech";
document.navform.category.options[2].text = "Pricing Information";
document.navform.category.options[2].value = "price";
document.navform.category.options[3].text = "Tips and Tricks";
document.navform.category.options[3].value = "tips";
}
if (prodval == "s")
{document.navform.category.options[0].text = "Spreadsheet:";
document.navform.category.options[0].value = "x";
document.navform.category.options[1].text = "Technical Support";
document.navform.category.options[1].value = "tech";
document.navform.category.options[2].text = "Distributors";
document.navform.category.options[2].value = "dist";
document.navform.category.options[3].text = "Sample Formulas";
document.navform.category.options[3].value = "form";
}
if (prodval == "d")
{document.navform.category.options[0].text = "Database:";
document.navform.category.options[0].value = "x";
document.navform.category.options[1].text = "Technical Support";
document.navform.category.options[1].value = "tech";
document.navform.category.options[2].text = "Pricing Information";
document.navform.category.options[2].value = "price";
document.navform.category.options[3].text = "Sample Programs";
document.navform.category.options[3].value = "prog";
}
}
</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"
onChange="update();">
<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="x"> (Please select
<OPTION VALUE="x"> a product
<OPTION VALUE="x"> first)
</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.asp">Technical Support</A>
department for helpful information and tips. You can
also view more information <A HREF="company.asp">about
our company</A> or order products with our friendly
<a href="order.asp">Order Form</A>.
<HR>
<I>1998 FSC - designed by the FSC staff</I>
</BODY>
</HTML>
The program works as follows:
- The initial state of the selection lists provides instructions.
The Go button doesn't work until the user selects an option.
- An onChange event handler
is used to change the list of categories automatically when the
user selects a product.
- The update() function
handles the modification of the selection list. Both the text
property, which defines the value displayed on the screen, and
the value property, which
defines the returned value, are changed.
As you can see, this is a much more interactive use of JavaScript-and
a more practical one because you will rarely have exactly the
same list of pages for each product. This could easily be adapted
for a wide variety of uses.
Figure 11.2 shows this example in action. Here are a few observations
about this program:
Figure 11.2 : The improved navigation bar example, as
displayed by Netscape.
- The technique of changing selection lists was added in Netscape
3.0b4. This may not be available to all your users, and it will
cause an error on earlier versions.
- Notice that although you change the list of categories, there
are always four of them. I did this to keep things simple; you
could also add and delete options. To add an option, use the Option()
constructor to create a new object, assign its text
property, and assign it to the last element of the options
array. To delete items, assign their place in the array to null,
starting at the end of the options
array.
- Notice that you change the first option of the category when
a product is selected, to prompt the user and indicate the selection.
This makes it a bit more friendly than the original navigation
bar.
- There may be problems if you try to assign a value to a selection
list's text property that is longer than the value it replaces,
because Netscape allocates space for the list when the page is
first displayed. A solution is to be sure that one of the original
options is longer than any others you will use, or explicitly
refresh the page with the location.reload()
method.
This example is a useful application for cookies (Chapter 9).
You will use a cookie to indicate the user's preference and either
display a frames or no-frames version of the page.
This example illustrates the following techniques:
This example is a bit more complicated. Let's begin with the page
shown in Listing 11.3. This page is an introductory page that
will send users to the appropriate page-probably before they even
notice.
Listing 11.3. (SELFRAMES.asp) Introductory page for the user
preferences example.
<HTML>
<HEAD>
<TITLE>Frames or No Frames?</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function forward() {
// read cookie and send user to appropriate page
if (0 <= parseInt(document.cookie.indexOf('frames=yes', 0)))
window.location.href="frames.asp";
else
window.location.href="noframes.asp";
}
</SCRIPT>
</HEAD>
<BODY onLoad="window.setTimeout('forward();',1000);">
If you can read this, you're using a non-JavaScript browser. Please follow
one of the links below to access our page:
<UL>
<LI><a href="frames.asp">Frames version</a>
<LI><a href="noframes.asp">Non-Frames version</a>
</UL>
</BODY>
</HTML>
This program attempts to read the cookie for the current document
with the document.cookie
property. If it contains the keyword "frames=yes",
the user will be sent to the frames version; otherwise, the user
is sent to the no-frames page. (Thus, no frames is the default.)
Next, you will need the actual framed and non-framed pages. Listing
11.4 shows the page for the frames version, which includes an
option to switch to the no-frames version.
Listing 11.4. (FRAMES.asp) The frames version of the page.
<HTML>
<HEAD>
<TITLE>Our Home Page (Frames)</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function goNoFrames() {
// switch preference to non-frames version, and send the user there.
document.cookie = "frames=no; expires=Monday, 31-Dec-99 23:59:59 GMT";
window.location = "noframes.asp";
}
</SCRIPT>
</HEAD>
<BODY>
<H1>This is the Frames Page</H1>
<FORM name="form1">
<INPUT TYPE="button" VALUE="Non-Frames Version" onClick="goNoFrames();">
</FORM>
Welcome to the frames page! If you would like to see the non-frames
version, press the button above.
<HR>
The actual content of the page would be here...
<HR>
</BODY>
</HTML>
To simplify the example, I didn't actually use frames in this
page; that would require using a FRAMESET
document as the initial frames page and creating a second page
with the content.
The GoNoFrames() function,
accessed with the button on the page, enables the user to switch
to the no-frames page. This sets a cookie indicating the preference,
then updates window.location
to send the user there.
Similarly, Listing 11.5 shows the no-frames version. This page
includes an option to switch to the frames version, including
setting the cookie appropriately. Figure 11.3 shows the output
of this page.
Figure 11.3 : The No Frames Page for the preferences example.
Listing 11.5. (NOFRAMES.asp) The no-frames page for the preferences
example.
<HTML>
<HEAD>
<TITLE>Our Home Page (No frames)</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function goFrames() {
// switch preference to frames version, and send the user there.
document.cookie = "frames=yes; expires=Monday, 31-Dec-99 23:59:59 GMT";
window.location = "frames.asp";
}
</SCRIPT>
</HEAD>
<BODY>
<H1>This is the No Frames Page</H1>
<FORM name="form1">
<INPUT TYPE="button" VALUE="Frames Version" onClick="goFrames();">
</FORM>
Welcome to the non-frames page! If you would like to see the frames
version, press the button above.
<HR>
The actual content of the page would be here...
<HR>
</BODY>
</HTML>
Now comes the cool part-once users select one page or the other
using the button, they go to that page from then on whenever they
load SELFRAMES.asp. Users can change preferences at any time.
Here are a few observations about this example:
- A timeout is used to send the user to the new page by default
in SELFRAMES.asp if no cookie has been set. This timeout is required
so that the document is finished loading before the browser is
redirected to the next page. The timeout could probably be smaller
than the one I used.
- You could do this without using an initial page (SELFRAMES.asp)
by displaying HTML tags from the script at the beginning of the
page. These would include the <BODY>
or <FRAMESET> tags.
Needless to say, this would be a bit more complicated.
- The cookie set applies to the server that sent the document.
If you are using many pages on the server, you should use a more
specific name for the cookie to avoid conflicts. Alternatively,
the same preference could be used for all pages.
|
Learn HTML
