Crafting the Index Page

[ LiB ]

The HTML and JavaScript statements that make up the index page of Jerry's On-line Bookmall are listed here.

 <HTML>   <HEAD>     <TITLE>Script 5.8 - Jerry's On-line Bookmall Index Page</TITLE>     <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">     <!-- Start hiding JavaScript statements       //Define an array that will be used to manage banner advertisements        MyBannerArray = new Array(3);       MyBannerArray[0]="banner0.jpg";       MyBannerArray[1]="banner1.jpg";       MyBannerArray[2]="banner2.jpg";       currentBanner=0;       noOfBanners=MyBannerArray.length;       function CycleBanner() {           if (currentBanner==noOfBanners) {             currentBanner=0;           }           document.myBanner.src=MyBannerArray[currentBanner];           currentBanner++;           setTimeout("CycleBanner()", 5*1000);       }       //Declare a variable used to set the cookie expiration date       ExpirationDate = new Date;       ExpirationDate.setMonth(ExpirationDate.getMonth() + 3);       //Define a function that stores a cookie on the visitor's computer       function BakeTheCookie(name) {         document.cookie = "name=" + name + ";expires=" +         ExpirationDate.toGMTString();       }       //Define a function to check for the cookie and use it       // in the welcome message if found        function CookieCheck() {         visitorName = "";         cookieName = "";         if (document.cookie != "") {         visitorName = document.cookie.split("=")[1];         document.write("<H4>Hello " + visitorName + ",</H4>");       }         else {           input = window.prompt("Welcome to the Bookmall. " +             "What is your name?","");           //user click on cancel           if (input != null) {             //user left blank and clicked on OK             if (input != "") {               BakeTheCookie(input);               document.write("<H4>Welcome " + input + "," + "</H4>");           }             else {               document.write("<H4>Welcome.</H4>");             }           }           else {             document.write("<H4>Welcome.</H4>");           }         }       }       //Define a function to load an html page Into a new window        function OpenNewWindow() {         window.open('Script 5.9.html', 'window1', 'width=640,height=420');       }       //Define a function that determines the visitor's browser type       //and version       function BrowserCheck() {         if ((navigator.appName=="Microsoft Internet Explorer")            (navigator.appName=="Netscape")) {           if (navigator.appName=="Microsoft Internet Explorer") {             if (navigator.appVersion.indexOf("6.") < 0) {               window.alert("Please upgrade to IE version 6 or above.");             }           }           if (navigator.appName=="Netscape") {             if (navigator.appVersion.indexOf("5") < 0) {               window.alert("Please upgrade to Netscape version 7 or above.");             }           }         } else {           window.alert("This Web site requires Netscape 7 or Internet " +              "Explorer 6 or higher!");         }       }     // End hiding JavaScript statements -->     </SCRIPT>   </HEAD>   <BODY onLoad="CycleBanner()">     <TABLE BORDER="0" WIDTH="590">       <TR>         <TD>           <CENTER>             <P><IMG NAME="myBanner" SRC="banner0.jpg"></P>             <IMG BORDER="0" HEIGHT="78" SRC="bstorelogo.jpg" WIDTH="636">           </CENTER>         </TD>       </TR>     </TABLE>     <TABLE BORDER="0" WIDTH="590" STYLE="HEIGHT: 25px; WIDTH: 643px">       <TR>         <TD>         </TD>       </TR>     </TABLE>      <TABLE BORDER="0" WIDTH="590" STYLE="HEIGHT: 254px; WIDTH: 643px">       <TR>         <TD>           <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">           <!-- Start hiding JavaScript statements             //Execute the function that determines the visitor's browser             //type and version             BrowserCheck();             //Execute the function that looks for the Web site's cookie             CookieCheck();            // End hiding JavaScript statements -->           </SCRIPT>           <H2 ALIGN="left">             <FONT COLOR="red">Welcome to Jerry's Bookmall.</FONT>           </H2>           <HR>           <FONT SIZE="5">F</FONT>or your convenience I have           assembled a collection of the finest bookstores on           the World Wide Web. Jerry's On-line Bookmall is           your one stop shopping place for all your reading           needs. Whether you are interested in fiction,           non-fiction, history, literature, or computer books,            you will find exactly what you are looking for here.           Don't forget that you can also purchase your           favorite toys, videos, and CDs as well. Feel free           to browse to your heart's content and thanks           for visiting us!           <HR>         </TD>         <TD>           <CENTER>             <H3>Featured Book!</H3>              <A HREF="javascript:OpenNewWindow()"> <IMG HEIGHT="170"               SRC="htmlbook.jpg" ALT="Learn HTML In a Weekend" WIDTH="126">              </A>           <BR>           <B>Learn HTML In a Weekend</B>           </CENTER>         </TD>       </TR>     </TABLE>     <TABLE BORDER="0" STYLE="HEIGHT: 25px; WIDTH: 643px" WIDTH="590">       <TR>         <TD>           <CENTER>             <BR>             [ <A>Main Menu</A> ]             [ <A HREF="Script 5.10.html">Bookstore</A> ]             [ <A HREF="script 5.18.html">Email Us</A> ]           </CENTER>          </TD>       </TR>     </TABLE>   </BODY> </HTML>

As you can see, this HTML page and the JavaScripts that it contains are fairly lengthy compared to the other examples you have seen in this book. It begins by defining all the variables and functions used on the page in the head section:

ExpirationDate . A variable used to build the expiration date for the site's cookie.
MyBannerArray[] . An array loaded with three graphic images that will be used to display a rotating banner advertisement.
CycleBanner() . A function that loops continuously through MyBannerArray[] to display the page's banner advertisement.
BakeTheCookie() . A function that, when called, creates and stores a cookie containing the visitor's name on the visitor's computer.
CookieCheck() . A function that, when called, checks to see whether there is a cookie stored on the visitor's computer. If a cookie is not found, the function asks the visitor for his name and then calls the BakeTheCookie() function.
OpenNewWindow() . A function that, when called, opens a new browser window and loads the Web page that presents the Web site's featured book of the month.
BrowserCheck() . A function that, when called, checks to see whether the visitor is using either Netscape Navigator version 4 or higher or Internet Explorer version 4 or higher.

The page's <BODY> tag has been modified so that the first thing that happens is that the CycleBanner() function is executed using onLoad="CycleBanner()" . The page itself is arranged using a series of tables that organize and display the information presented. In the middle of the body section, the BrowserCheck() and CookieCheck() functions are called. Next, the link for the featured book has been modified to call the OpenNewWindow() function as shown here:

 <A HREF="javascript:OpenNewWindow()"><IMG HEIGHT="170" SRC="htmlbook.jpg"    ALT="Learn HTML In a Weekend" WIDTH="126"></A>

The last table on the page provides a simple navigation menu that is used throughout the Web site.

When someone visits Jerry's On-line Bookmall for the first time, or when he visits for the first time in over 90 days (e.g. after the expiration date for the site's cookie has expired as set by expirationDate.setMonth(expirationDate. getMonth() + 3)) , the CheckCookie() function displays the prompt shown in Figure 5.10, asking the visitor to type his name. The BakeTheCookie() function then stores the cookie on the visitor's computer.

Figure 5.10. The `document` object's `prompt()` method provides the perfect tool for interactively collecting small pieces of information from visitors .

graphic/05fig10.gif

[ LiB ]

Crafting the Index Page

Crafting the Index Page

Figure 5.10. The document object's prompt() method provides the perfect tool for interactively collecting small pieces of information from visitors .

Figure 5.10. The `document` object's `prompt()` method provides the perfect tool for interactively collecting small pieces of information from visitors .