We began our exploration of JavaScript in the previous chapter with a primary focus on client-side computation and data validation. If calculations can be done with JavaScript on the client side (in the browser), and the results presented immediately to the user, this avoids having to send the data to a server and then bring the results back for display. Also, data validation with JavaScript on the client side is one way to help prevent potentially malicious data from being sent to a web server.

In this chapter, we will look at another aspect of JavaScript usage. JavaScript can also help you improve the functionality as well as the appearance of your web pages. In particular, we will enhance our home page by dynamically adjusting its content with a rotating sequence of business-related images, and also with dropdown menu options. In fact, the dropdown menu feature will persist as we navigate to other pages on our website.

In this chapter we will discuss the following:

• How to create a rotating sequence of images (often called a “slide show”), along with the associated JavaScript

• How to use an onload event attribute for the body element, whose value will be a JavaScript function that activates our slide show when our home page loads

• How to create a JavaScript array of images for our rotating display

• How to use the JavaScript switch-statement for decision making when we decide what sequence of images to display, based on the day of the week

• How to use the JavaScript for-loop for repetition when we actually rotate our images

• How to create a dynamic dropdown menu, along with the associated CSS and JavaScript

• How to use the onmouseover and onmouseout event attributes, whose values will be JavaScript functions that cause a dropdown menu to appear or disappear

• How to use the new HTML5 pattern attribute to perform validation of form input data without resorting to JavaScript, and the required, attribute to ensure that input that is actually required is not omitted

• How to use the onchange attribute to provide immediate user notification when a checkbox is clicked

• How to provide a Body Mass Index (BMI) report to the user via a new web page that is “persistent”, rather than a popup window that has to be “dismissed” before returning to the browser

Recall that in neither of the previous two chapters did we have a complete version of our Nature’s Source website. However, in this chapter we will again have two versions of this sample site. The first version, found in the nature1 subdirectory, contains only enough files to display a revised home page and demonstrate both of the new features discussed in this chapter: the “slide show” of rotating images and the dropdown menus. In this version, none of the links on the home page are active.

In the second version, found in the nature2 subdirectory, the home page is the same as in the first version, except that now all links on the home page are active. Most of these just take you to pages with minimal content that you have seen in previous versions of the site. However, we also have two important links that provide the features we discussed in the previous two chapters: one that takes a user to the BMI calculator and a second that goes to our feedback form. In fact, because our menu bar with its dropdown menu options appears on all pages in nature2, all links are available on all pages.

Recall as well that with nature3 of Chapter 3, and nature2, nature3, and nature4 of Chapter 4, SSI was used for access to the “common” markup for each page of the given website. This will also be true for both nature1 and nature2 in this chapter. So, to view either site properly you must either go to the book’s website, or set up your own SSI-aware server to serve your own copy of the website. The latter choice is preferable, of course, since that will allow you to experiment and do the exercises more easily.

Let’s begin with a look at FIGURE 7.1, which shows a display of the home page for our sample Nature’s Source website in this chapter (either the nature1 version or the nature2 version).

When compared with the last similar version of our home page (as seen in Figure 4.29, for example), the only visible difference you see (aside from a different image) is the list of dropdown menu¹ options under the Products+Services menu item. However, there are actually two major enhancements in this version: in addition to the dropdown menus (also under Your Health, About Us, and Contact Us), the image now shown in the figure is just one of a sequence of six images that continually rotate as long as the page is displayed. In fact, there are two different groups of six images, one that displays during “weekdays” (Monday to Thursday) and shows indoor scenes, and the other that displays during “weekend days” (Friday to Sunday) and shows outdoor scenes. This chapter discusses the new JavaScript and CSS features that enable these enhancements.

The HyperText Markup Language (HTML) file producing the display in FIGURE 7.1 is ch07/nature1/index.html, shown in FIGURE 7.2. The only difference between this file and ch07/nature2/index.html is the comment in line 2. Note, first of all, the following features of the markup in this file and the files it includes, some of which we will need to discuss at length as we proceed:

1. As another version of our index.html document, it continues to make use of four external HTML files included via SSI (lines 1, 5, and 6 and 31 of Figure 7.2).

2. The included file document_head.html (shown in FIGURE 7.3) now contains two new script elements (lines 11 and 12) for access to the rotate.js and menus.js scripts to handle the image rotation and the dropdown menus. The script in rotate.js (FIGURE 7.5) will handle the rotating images, and the script in menus.js (FIGURE 7.7) will handle the dropdown menus. Note that we retain links to both of our CSS files, desktop.css and tablet.css, so both versions of the website in this chapter can still be viewed in either “desktop view” or “tablet view”.

3. The included file menus.html (shown in FIGURE 7.4) has been revised to accommodate the new dropdown menu feature that we discuss in detail later in this chapter, along with the new menu-related CSS shown in FIGURE 7.6.

4. We have introduced the onload event attribute (line 3 of Figure 7.2) to start our image rotation once the body of our home page has fully loaded.

5. We have revised the img element on our index page (lines 25–27 of Figure 7.2) to handle the sequence of rotating images, rather than a single static image.

The replacement of a static image on our home page with a “slide show” that consists of a continuous, cyclic display of a sequence of various images related to our business might be regarded in some quarters as somewhat frivolous. On the other hand, it might also help to grab and keep a visitor’s attention. It is worth keeping in mind that choosing how much activity to have on your home page (or any page) is both a key design decision and a bit of a balancing act. You can either attract and keep visitors or cause them to quickly abandon your site, depending on how much and what kind of dynamic activity they encounter when they first come to visit.

The general idea of our “slide show” is this. When the script in rotate.js of Figure 7.5 is run after the index.html page is loaded, the first thing that happens is a determination of the current date. An appropriate collection of images is then assembled, depending on whether it’s a weekday or a weekend. Then those images are displayed one after the other, with repetition when the end of the sequence is reached, until the user closes the page or clicks on a link to another page.

For this purpose, we have assembled, in the subdirectory images of the nature1 directory (as well as the nature2 subdirectory), two sets of images, one set showing indoor exercises and the other showing outdoor exercises. The images of outdoor exercises are named outdoor1.jpg to outdoor6.jpg. These outdoor images will be displayed on a weekend (Friday to Sunday). On the other hand, the images of indoor exercises will be displayed on weekdays. These image files are named indoor1.jpg to indoor6.jpg.

To understand how the slide show works, you need to examine both the index.html file of Figure 7.2, which contains the onload attribute and the revised img element, and the rotate.js script shown in Figure 7.5.

body onload="startRotation( )"

<img id="placeholder" src=""
   alt="Healthy Lifestyle"
   width="256px" height="256px">

var today = new Date( );

switch (expression)
{
   case value_1:
      statements;
      break;
   case value_2:
      statements;
      break;
      ...
   case value_n:
      statements;
      break;
   default:
      statements;
      break;
}

var prefix = "images/";

switch (today.getDay( ))
{
   case 0:
   case 5:
   case 6:
      prefix += "outdoor";
      break;
   default:
      prefix += "indoor";
}

prefix += "outdoor";

prefix = prefix + "outdoor";

imageArray = new Array(6);

for (initialization; condition; update)
{
   statements;
}

for (i=0; i<imageArray.length; i++)
    imageArray[i] = prefix + (i+1) + ".jpg";

In this section, we discuss the details of the second major new feature of our sample website in this chapter, the dropdown menu options. We are again dealing with the “stripped down” first version of the site found in the nature1 subdirectory. In this version, none of the links on our home page are active, but the dropdown feature is fully functional in all cases, which is all we need for our discussion. Section 7.4 discusses the more complete nature2 version of our site, in which all the links are active and lead to other pages, but there is no functionality to be seen there that we have not seen before, except for the enhancements to our BMI and feedback forms, which we also discuss in section 7.4.

To follow the discussion in this section, you will need to refer to four different files from this chapter:

• nature1/index.html (see Figure 7.2)

• nature1/common/menus.html (Figure 7.4)

• nature1/css/default.css (excerpt) (Figure 7.6)

• nature1/scripts/menu.js (Figure 7.7)

We pointed out at the beginning of the chapter that the nature1 version of our website in this chapter had no active links, since we were using it solely for demonstrating our slide show and drop-down menus. The nature2 version, on the other hand, is the most complete version of our site to date.

First, the home page looks the same as the home page for the nature1 version, except that all links are now active, so the nature2 directory includes an HTML document file to be displayed whenever the user clicks on any of the now-active links. With two exceptions, these pages contain essentially the same content as they did in Chapter 4, except that all pages have been modified to show the same main menu and footer (but not the rotating images) of the home page. The two exceptions are the Compute Your BMI dropdown submenu option found under the “high-level” menu option Your Health, and the Feedback Form dropdown submenu option found under the “high-level” Contact Us menu option. These two links bring up the latest versions of our BMI and feedback forms, and we will say more about them in a moment.

The contents of the images and scripts subdirectories are the same for both nature1 and nature2. The desktop.css and tablet.css style files for nature2 contain the full contents of those files for nature1, plus a few additional styles to help with the styling of the newly revised BMI calculator form and feedback form pages.

It would be useful at this point for you to make yourself thoroughly familiar with this up-to-date version of our sample site before we enhance it further with server-side processing using PHP in the next chapter. However, just before you do that, let’s take a moment to mention a few enhancements that we have applied to our two forms, which also invite some experimentation on your part.

7.4.1 What’s New in Our BMI Form?

Recall from the previous chapter that when a user successfully completed a BMI form and clicked the Compute your BMI button, the resulting report was presented in a JavaScript popup window, and that window had to be dismissed before the user could return to using the browser.

The report returned upon completion of the BMI form in nature2 of this chapter contains the same information as before, but is presented in a new web page, which therefore does not have to be dismissed before continuing to work in the browser. FIGURE 7.8 shows the result when the user has asked for a detailed report, and FIGURE 7.9 shows the relevant modified code from nature2/scripts/bmiCalculate.js that does the job.

A Firefox browser display of the BMI report produced as a separate web page instead of a JavaScript popup.

The JavaScript code segment that displays a BMI report as a new web page.

In this version of the script we call the window.open( ) JavaScript method (line 70 of Figure 7.9) rather than the alert( ) method. For our usage of the method we supply three parameters. The first parameter is the URL of the page to load. Since we are not loading any page, but instead just writing our report to an empty window, we supply an empty string for this value. The empty string for the second parameter is the default value and indicates that we want a brand new window (as opposed to replacing the contents of the current window, for example). The third parameter is the most interesting one. It too is a string, and contains a comma separated list of values. More values are possible, but we have used only four: the width and height of the new window, and the distance of the top left corner of our new window from the top and left sides of the browser window. All measurements are in pixels.

The other new feature of our BMI form is illustrated by the display in FIGURE 7.10. What is different this time around is that this popup message appears the moment the user clicks on the checkbox to request an email report. In other words, the user is spared the frustration of clicking on the check box, typing in an email address and then being told that email is not yet implemented. In fact, if you look closely you can see that the textbox where the email would be typed actually contains a similar message, so the user should not be clicking the checkbox in any case! As you can see in line 60 of FIGURE 7.11, this message shows up because it’s the string assigned to the value attribute of that textbox, and in fact no email address can be entered because we have given this textbox the readonly attribute (see line 61 of Figure 7.11).

A Firefox browser display showing the popup message that appears when the user clicks on the checkbox that requests the BMI report to be sent by email.

Implementing this latest feature requires some new markup, as well as some new JavaScript. The new markup is shown in Figure 7.11, and the new JavaScript in FIGURE 7.12. In Figure 7.11 we show the complete fieldset element containing the markup for dealing with email, so that we can see the context of the changes.

The HTML markup for the revised fieldset element of the BMI form that handles the user’s request for a BMI report via email.

The JavaScript function that handles the event that occurs when the user clicks on the checkbox that requests a BMI report via email.

Note that the input element with "type=checkbox" also has a new event attribute, namely onchange="handleBMIEmailRequest( )", and we can see the definition of this function in Figure 7.12. When called, this function displays the popup message window that we see in Figure 7.10, and then makes sure the checkbox is unchecked. So, when is the function called? It’s called the moment there is any “change” in the status of the corresponding input element, in other words the moment the user tries to get an emailed BMI report by clicking on the checkbox.

7.4.2 What’s New in Our Feedback Form?

Although in the previous chapter we mentioned the new HTML5 pattern attribute and how it could help with form data validation, we did not use it at that time since our focus then was on validating form data with JavaScript. In this chapter’s version of our feedback form, we remedy that omission by using the pattern attribute to validate first name, last name, email address, and phone number. We have already discussed the regular expressions involved, and you can see how these are used as values of the pattern attribute by studying the excerpt from the current feedback form markup shown in FIGURE 7.13 (lines 27, 33, 40–41, and 48). Note from that figure that we have given all of our input elements with type="text" the required attribute as well (lines 27, 33, 42, and 48). Thus we have implemented a “double whammy” in terms of validation: the required attribute insists that something go into the textbox, and the regular expression in the pattern attribute value insists that it be the “right thing”. Although the textbox for the feedback subject does not have a pattern attribute, it must not be left empty.

The HTML markup from the current version of our feedback form showing how we use a pattern attribute with a regular expression for its value to help us validate our form data, and also the use of the required attribute.

A Firefox browser display showing that all the empty input elements that have a required attribute are outlined in red, with an HTML5 generated request to fill in the first one. This occurs when we try to submit a completely empty form.

The effects of these changes can be seen in FIGURES 7.14 and 7.15. In Figure 7.14 we have clicked on the Send Feedback button when the form is empty. The result is that all the textboxes created by the input elements in our markup are outlined in red, indicating that they need to be filled in, and there is a popup message to that effect pointing at the first of those textboxes. All this has been achieved simply by giving each input element a required attribute. Compare that with what would be needed to achieve the same thing with JavaScript!

A Firefox browser display showing a feedback form that is correctly filled out except that the first name does not begin with a capital letter.

In Figure 7.15 all the required information has been entered and we have again clicked on the Send Feedback button. This time there is a problem with the first name, since our regular expression (line 27 of Figure 7.13) requires that it start with a capital letter. Thus the textbox is again outlined in red and, though it is not shown in the figure, if you hover your cursor over the textbox you will see the advisory popup message given as the value of the title attribute of that input element (see line 26 of Figure 7.13):

"Initial capital, then lowercase and no spaces"

Our use of the pattern and required attributes in our HTML markup in feedbackForm.html means that we have a much simpler version of the file feedbackFormValidate.js (see FIGURE 7.16), which now contains only two short functions. The first is feedbackFormValidate( ). Once all the input data has been validated, this function simply displays a message saying everything is OK in a new browser window, much like our revised BMI report was presented in the revised version of our BMI form discussed above.

The limited JavaScript code now needed for our feedback form validation, which is much less than we used previously because we are now using the pattern attribute.

The second function is handleFeedbackEmailRequest( ). The user’s request for an email response in this form is handled somewhat differently from the way it was handled in the BMI form. In this case, the user is actually allowed to enter an email address because even though email itself is not yet implemented, we still want to validate it with our regular expression, and the user is so advised by a popup message when the checkbox is checked.

In this chapter you have seen how JavaScript can be used to provide a simple “slide show” of rotating images on our home page, and, in conjunction with CSS styles, to create a drop-down menu of options for navigating around our website that appears on every page of the website.

In the case of the rotating images, you saw how the value of the onload event attribute of the body element of a page could be set to a JavaScript function that is invoked when the page is fully loaded. In our case, this arrangement caused a sequence of images to be displayed in a rotational order that repeated until the page was closed.

In the case of the dropdown menus, you saw how the values of the onmouseover and onmouseout event attributes of an element can be set to JavaScript functions that are triggered to execute and either show or hide menu options, depending on whether the user’s mouse is hovering over an element or has moved away from it. The new CSS concepts we found useful in this context were the display, visibility, and position properties.

In the course of these discussions we also learned more about some basic JavaScript features, including the Date and Array data types, the switch-statement, the for-loop, and the set-Interval( ) function.

We also updated our BMI and feedback forms with some enhancements. The results from submitting these forms were displayed in a new web page, thus eliminating the alert( ) popups. Much of the JavaScript validation was replaced by use of the new HTML5 pattern attribute, and we also made good use of the required and readonly attributes for input elements, as well as the onchange event attribute. Finally, we used the built-in JavaScript window.open( ) method to display to the user the reports from our BMI and feedback forms in a new browser window.

1. We have not actually used the term dynamic HTML document, but what do you suppose we would mean by that term if we did use it?

2. What kinds of values can be used for the case labels in a JavaScript switch-statement?

3. What is the name of the element attribute whose value you would set if you wanted something to happen when a web page is fully loaded, and what kind of value would it have?

4. What is the name of the element attribute whose value you would set if you wanted something to happen when the user moved the mouse over that element?

5. What is the name of the element attribute whose value you would set if you wanted something to happen when the user moved the mouse away from that element?

6. How do you put text in a textbox (instructions for the user, let’s say) but prevent the user from editing that text?

7. How do you prevent a user from submitting a form with an empty textbox if you really wanted the user to put something into that textbox?

8. What would you do if you wanted to make sure that, before submitting a form, the user actually entered a six-digit integer into a particular textbox?

9. What event attribute would you use if you wanted to notify the user of something the moment that use clicked on a checkbox?

10. What is the usual symbol used as the value of the href attribute of an a element if you do not want the link to go anywhere?

11. Why did we change the markup on some of the menu options (but not others) for our main menu bar in going from the nature1 website to the nature2 website in this chapter?

12. What JavaScript function would you use if you wanted a function you had written to be called every five seconds and what would that function call look like if your function was called doIt( )?

13. What is the JavaScript statement that would create an array called a of size 10?

14. Our “dropdown menus” don’t actually “drop down”. Explain this statement.

15. What is the output of the following JavaScript code segment? And note that the answer depends on the day you are answering this question!

var today = new Date( );
document.write(today.getDay( ));

1. The switch-statement that we used in our rotate.js script is certainly not the only way, and you could argue that it’s not even the best way, to write this particular switch-statement. It does the job, but instead of using the default: option to handle the weekday cases, it might make the code a little clearer if we had one group of explicit cases to handle the weekend days (which we do), another group of explicit cases to handle the weekday cases (which we don’t), and use the default: option for something that is extremely unlikely to happen, such as displaying for the user a message via the alert( ) function to inform the user that something has gone wrong. Revise rotate.js to implement the switch-statement in this way, and test to make sure the revision works.

2. Revise the script in rotate.js so that the images are shown in random order, rather than always repeating the sequence in the same order, and test to make sure the revision works.

3. The generic switch-statement discussed in this chapter is equivalent to the following generic nested if-statement:

   if (expression == value_1)
   {
        statements;
   }
   else if (expression == value_2)
   {
        statements;
   }
   ...
   else if (expression == value_n)
   {
        statements;
   }
   else
   {
        statements;
   }
   

   Revise rotate.js by replacing its switch-statement with an equivalent nested if-statement of the above form, and test it to make sure it works.

4. The switch-statement in rotate.js can also be replaced by the following if.. else-statement:

   if (today.getDay( )==0 || today.getDay( )==5 ||
       today.getDay( )==6)
     prefix += "outdoor";
   else
     prefix += "indoor";
   

   Revise rotate.js by replacing its switch-statement with an equivalent if..else-statement of the above form, and test it to make sure it works. This exercise and the previous one should be a reminder that even for very short and simple code, it’s often worthwhile to stop and think about the “best” way to write the code, rather than going with the first thing that comes to mind.

5. JavaScript provides two other loops in addition to the for-loop: the while-loop and the do..while-loop. Though you can use whatever loop you like in most situations, the kind of loop you actually choose in a particular situation will often depend on the logic, since some loops can be more “readable” than others in certain cases.

   Here, in generic form, are those other two loops:

   initialization;         initialization;
   while (condition)       do
   {                       {
      statements;             statements;
   }                       }
                           while (condition);
   

   The major difference between these two loops is that the body of the do..while-loop is guaranteed to execute at least once, since the condition is not checked until that has happened. The body of the while-loop, on the other hand, may never execute, since the check of the condition is made at the beginning.

   In order for the body of either loop to execute properly, the initialization must be done correctly, and for either loop to terminate properly the body must contain an action that eventually causes condition to become false. In the case of the for-loop, the initialization and update are handled by the loop structure itself. In the other two loops, it is the programmer’s responsibility to ensure that proper initialization and updating are performed.

   As a simple example, here is a version of each of the three loops that adds the positive integers from 1 to 10, inclusive:

   var sum = 0;                 var sum = 0;          var sum = 0;
   var i;                       var i = 0;            var i = 0;
   for (i=1; i<=10; i++)        while (i < 10)        do
   {                            {                     {
      sum += i;                     ++i;                  ++i;
   }                                sum += i;             sum += i;
                                }                     }
   

   We used the for-loop in this chapter to build our array of images. A for-loop was the appropriate choice in that case, because we knew exactly how many times we wanted the loop to execute (the number of images we had), and this is the kind of scenario for which the for-loop is well suited. However, either of the other loops could have been used.

   Revise rotate.js, first of all, to replace the for-loop with an equivalent while-loop to build the image array. Then revise it a second time to use an equivalent do..while-loop. In each case, test to make sure everything still works.

6. In our rotate.js script we defined two separate functions, rotate( ) and start-Rotation( ), to handle the slide show. We can also perform our image rotation with a single rotate( ) function if we implement it somewhat differently, making it a recursive function, which is a somewhat advanced concept. Here is that implementation:

   var i = 0;
   function rotate( )
   {
     document.getElementById('placeholder').src=imageArray[i];
     i++;
     if(i >= imageArray.length) i = 0;
     setTimeout('rotate( )', 2000);
   }
   

   In this version of the image rotation, we begin by initializing the variable i to 0. This variable will again keep track of the subscript (or index) of the array element that provides the filename of the current image. This time around the function rotate( ) itself must be the value of the onload attribute of the body element in index.html and performs the image rotation starting when the page has loaded by proceeding as follows.

   As before, we access the img tag as a DOM element by using the id ('placeholder') of the tag, and set its src attribute to the filename given by imageArray[i]. This makes sure that the image given by imageArray[i] is displayed in the web page.

   We then increment i to prepare for loading the next image in the sequence when the time comes and, as before, we have to make sure the value “wraps to 0” when the time comes. Finally, we have to answer this question: When does the time come to load the next image? And this is where the major departure from the way we previously did things takes place. The last statement in our rotate( ) function is

   setTimeout('rotate( )', 2000);
   

   which essentially says, “Wait 2000 milliseconds (2 seconds) and then call yourself again.” Students coming from C, C++, or Java will immediately recognize this as a recursive function call (a function calling itself), but even they may be bothered by the fact that the function will continue to call itself forever. That is, there is no “stopping condition” for the function. But this is a case where that is not a major concern, since we do in fact want the images to keep rotating for as long as the user is viewing the page, which may be a long time. If the user displays our page and then goes home for the night, the images should still be rotating the next morning. Of course, if the user closes our page, or browses to another site, the function (and everything else associated with our page) goes away.

   So, revise the rotating-image feature of the website to incorporate this recursive version of the rotation function.

7. One of the files our markup file nature1/index.html links to is the CSS style file nature1/css/desktop.css, and the part of this file dedicated to styling our menus is seen in Figure 7.6.

   Make the following changes and perform the suggested actions to observe the changes in the display of nature1/index.html when you do so. This will give you a good sense of which style rules are affecting which parts of the display.

   1. Comment out the “mini-reset” style rule at the beginning of desktop.css (lines 7–10, not shown in Figure 7.6) that sets all margins and padding to 0, and then reload to see what effect, if any, this has had.

   2. There are a number of different colors, specified with hex values, in the CSS shown in Figure 7.6. Change each of these values, one at a time, to red. First predict what the effect will be, then reload the page to check your prediction.

   3. Comment out the float: left style in line 43.

   4. Comment out the list-style: none style in line 49.

   5. Comment out the display: block style in line 59.

   6. Comment out the width: 127px style in line 44.

   7. Comment out the visibility: hidden style in line 76.

   8. Comment out the width: 124px style in line 81.

The website for your business has now developed to the point where it has information about the business itself and some more detailed information about its products and/or services, as well as some data-validated forms for placing an order and for gathering feedback from your users. Now it’s time to improve the “look and feel” of your site by adding some additional “rotating” images and some dropdown menus. Once again, of course, this “parallels” the look and feel of our own Nature’s Source sample website.

1. Find some more images relating to your business that you can legally copy and use on your website (at least six, let’s say) and replicate for your site the rotating image feature illustrated by our own example when you display the home page of either the nature1 website or the nature2 website of this chapter.

2. Create a version of your website that “parallels” our nature1 example of this chapter. That is, your site must have only a home page, but it must also have the rotating images and dropdown menus analogous to what you see in Figure 7.1 of the text. Or, if you wish, give it a fancier dropdown menu. The one in the text can be regarded as a “minimal” dropdown menu whose functionality you should be able to replicate using the text code as a model and making appropriate changes for your particular situation. On the other hand, there are lots of dropdown menu options “out there” on the Internet, and you may find one more to your liking. If you do, and it’s not illegal to do so, go ahead and use it instead. The menu options and suboptions will, of course, depend on the nature of your business, but most of them should be the same or similar to those in the text example.

   In this part of these exercises, none of the menu options on either the main menu bar or the dropdown submenus should be active. In other words, your resulting website should “parallel” our nature1 example, in which none of the links are active.

3. Make a copy of your website from exercise 2 above, and revise it so that all menu links become active and the same header with menu bar and associated dropdown menu options appear on all pages. The rotating images are to appear only on your home page, since you don’t want to distract the user from the serious business of buying your products once that user has started to browse your site. The appearance of the business logo and menu bar on all pages helps to give your visitors a feeling of consistency in the “look and feel” of your site as they browse from page to page. In any case, your result this time should “parallel” our nature2 example, in which all of the links are active on all pages.

4. A final (optional, unless your instructor requires it or some variation of it) exercise: In this version of your website, you may also wish to implement some of the form enhancements we discussed in section 7.4, and you may do that as well.

5. And, of course, everything should validate as HTML5 and CSS3.

1. A significant difference between arrays in JavaScript and arrays in more “conventional” languages such as C, C++, and Java is that in JavaScript the size of an array is not fixed once the array is created. You can change the size of an array at any time. You can even assign a variable to an array location with a subscript that is beyond the current last element of the array. For example, if we only have a six-element array of images to begin with, we could nevertheless say

   imageArray[20] = "pawan.jpg";
   

   and the length of the array will be extended to 21 (remember that indices start at 0). That you can do this is not necessarily a good thing, and there are good reasons why those other languages won’t let you do it, even though you may find it convenient from time to time.

2. You should be aware, particularly if you plan to do any extensive JavaScript programming for your website, that there are many sources for JavaScript code on the web, and it is always a good idea to avoid “reinventing the wheel” if at all possible. First of all, if you see a site that exhibits some behavior that you admire and would like to use on your own site, that behavior may be produced by JavaScript and the code may (or may not, remember) be freely available for use by others. In the (reasonably frequent) cases where the code is available, often all the writer will ask is that acknowledgment be placed in the code wherever you use it. Also, there are many JavaScript code libraries (or “frameworks”) that are also freely available and contain a great deal of ready-made functionality that you may find useful when designing your site. Many of these were listed in the References section of the previous chapter.

• 1. The W3Schools JavaScript tutorial start page is located here:

  http://www.w3schools.com/js/default.asp
  

• 2. The W3Schools JavaScript reference site, which contains lots of examples on both JavaScript itself and the HTML DOM, can be found here:

  http://www.w3schools.com/jsref/default.asp
  

• 3. In particular, for further information on the JavaScript Date and Array data types, see:

  http://www.w3schools.com/jsref/jsref_obj_date.asp
  http://www.w3schools.com/jsref/jsref_obj_array.asp
  

• 4. Here is another site you may find helpful when investigating JavaScript features:

  http://www.javascriptkit.com/jsref/
  

• 5. The following page contains a table showing many JavaScript frameworks and their features:

  http://en.wikipedia.org/wiki/Comparison_of_JavaScript_framework