Sams Teach Yourself JavaScript in 24 Hours

Sams Teach Yourself JavaScript in 24 Hours

By Michael Moncur

Using Drop-Down Lists for Navigation

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, and then select the System Requirements link.

With JavaScript, you can create a friendly interface to all the pages on the main page without taking up much space. Let's use one drop-down list to choose a product and another drop-down list to choose the type of information to view about the product.

Naming the Pages

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, simplifying the actual task of writing the program.

To make programming the navigation bar easier, choose simple, meaningful names for the subpages. 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 make it easier to maintain HTML 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. You can download them from this book's Web site at http://www.jsworkshop.com/.

Creating the Data Structures and HTML

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 the 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 can do this with a Go button next to the drop-down lists.

The following shows the HTML to add to the main page. You'll include it toward the end of the page, but it's generally self-contained and could be placed anywhere:

<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, there's an additional option with the value x in each selection list. These are the default options and display instructions until another selection is made. Selecting the Go button while one of these options is selected does nothing.

Creating the Function for the Navigation Bar

You defined an onClick event handler for the Go button, which calls the Navigate() function. Next, you need to create this function. It will read the current value of both selection lists, construct a filename, and then load that file into the browser.

The following is the definition for the Navigate function. Next you will look at the features of this function in detail.

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")
        alert("Select a product and category.");
    else 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 both lists for the x value, meaning that the user hasn't yet selected an item. If no value has been selected in either list, it displays an alert message reminding the user to select both.

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 next page.

Share ThisShare This

Informit Network