JavaScript Application Cookbook

Step 2: Displaying Products

With the application loaded, one of the first things the user will want to do is view the inventory. The user can navigate from category to category with the “Previous Category” and “Next Category” links or from product to product with the “Previous Product” and “Next Product” links. Here’s how it works. Recall lines 235-248 in inventory.js:

categorySet = new Array(
    new category("Appliances", "Kitchen machines to make life easier"),
    new category("Buildings", "Architectural structures you can't " +
       "resist"),
    new category("Clothing", "Fashionably questionable apparel for " +
       "the 21st century"),
    new category("Electronics", "Nifty gizmos that drain your wallet"),
    new category("Food", "The best product to order over the Net"),
    new category("Hardware", "All kinds of general purpose " +
       "construction tools"),
    new category("Music", "The hottest new instruments from places " +
       "you've never heard of")
       );

            

categorySethas seven category objects. The first one is referenced as categorySet[0], the next categorySet[1], and so forth. No matter what product a user is viewing, Shopping Bag knows the number (in this case, 0-6) of the category to which it belongs. If the user decides to move to the previous category, Shopping Bag subtracts 1 from the current category number, and shows the first product in that category. If Shopping Bag is in category and the user wants to move to the previous category, Shopping Bag starts back at the top category number (in this case, ...