O'Reilly logo

JavaScript Application Cookbook by Jerry Bradenbaugh

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Step 1: Loading Shopping Bag

JavaScript and the resident browser take care of most of the work here, although the user plays a small part. Consider the first page loaded—index.html. You can see what it looks like in Example 8.1.

Example 8-1. index.html

     1  <HTML>
     2  <HEAD>
     3  <TITLE>Shopping Bag</TITLE>
     4  <STYLE TYPE="text/css">
     5  <!--
     6  #welcome { text-align: center; margin-top: 150}
     7  //-->
     8  </STYLE>
     9  <SCRIPT LANGUAGE="JavaScript">
    10  <!--
    11  var shopWin = null;
    12  var positionStr = '';
    13  function whichBrowser() {
    14    if(navigator.appVersion < 4) { 
    15      alert("You need MSIE 4.x or Netscape Navigator 4.x to use " + 
    16        "Shopping Bag.")
    17      return false;
    18      }
    19    return true;
    20    }
    21  
    22  function launch() {
    23    if(!whichBrowser()) { return; }
    24    if(navigator.appName == "Netscape") 
    25      { positionStr = ",screenX=0,screenY=0"; }
    26    else { positionStr = ",fullscreen=yes"; }
    27    if(shopWin == null) {
    28      shopWin = open("shopset.html", "", "width=" + screen.width + 
    29        ",height=" + screen.height + positionStr);
    30      }
    31    }
    32  function closeUpShop() {
    33    if (shopWin != null) {
    34      if (typeof(shopWin) == "object") {
    35        shopWin.close();
    36        }
    37      }
    38    }
    39  window.onunload = closeUpShop;
    40  //-->
    41  </SCRIPT>
    42  </HEAD>
    43  <BODY>
    44  <DIV ID="welcome"> 
    45    <H1>Welcome to Shopping Bag!!!</H1>
    46    <A HREF="javascript: launch();">Begin</A>
    47  </DIV>
    48  </BODY>
    49  </HTML>

That might seem like a lot of JavaScript for a page that prints only five words on the screen; however, the additional code makes for a slightly ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required