Chapter 7

In this chapter, we looked at how we could put frames into our web pages and how to write JavaScript code that scripted between frames. We also looked at how to open and modify new browser windows using script.

Question 1

In the previous chapter's exercise questions, we created a form that allowed the user to pick a computer system. He could view the details of his system and its total cost by clicking a button that wrote the details to a textarea. Change the example so that it's a frames-based web page, and instead of writing to a text area, the details should be written to another frame.

The solution I have created involves a frameset that divides the page into two frames, left and right. In the left we have the form that allows the user to pick his system. The system chosen is summarized in the right frame when the user clicks an Update button.

The first page is the top frameset-defining page and is the one that needs to be loaded into the browser first.

<html>
<head>
</head>
<frameset cols="55%,*">
   <frame src="PickSystem.htm" name="pickSystem">
   <frame src="blank.htm" name="systemSummary">
</frameset>
    
</html>

Save this as ch7Q1TopFrame.htm.

Next we need to create a blank page for the right frame. Until the user clicks an Update button, that frame is blank, but if we don't put an HTML page into that frame, Netscape throws an error, though IE is happy with src="".

<html>
<body>
</body>
</html>

Save this as blank.htm.

Finally, we come to the page that's loaded into the left frame and allows the user to choose his computer system and its components. This is very similar to the solution to Question 2 in the previous chapter, so I'll just concentrate on what's been changed here. All the changes are within the updateOrderDetails() function.

function updateOrderDetails()
{
   var total = 0;
   var orderDetails = "<H3>Your selected system</H3>";
   var formElement;
   formElement =
      document.form1.cboProcessor[document.form1.cboProcessor.selectedIndex];
   total = parseFloat(CompItems[formElement.value]);
   orderDetails = orderDetails + "Processor : " + formElement.text
   orderDetails = orderDetails + " $" + CompItems[formElement.value] + "<br>";
    
   formElement =
      document.form1.cboHardDrive[document.form1.cboHardDrive.selectedIndex];
   total = total + parseFloat(CompItems[formElement.value]);
   orderDetails = orderDetails + "Hard Drive : " + formElement.text
   orderDetails = orderDetails + " $" + CompItems[formElement.value] + "<br>";
    
   formElement = document.form1.chkCDROM
   if (formElement.checked == true)
   {
      orderDetails = orderDetails + "CD-ROM : $" +
         CompItems[formElement.value] + "<br>";
      total = total + parseFloat(CompItems[formElement.value]);
   }
    
   formElement = document.form1.chkDVD
   if (formElement.checked == true)
   {
      orderDetails = orderDetails + "DVD-ROM : $" +
         CompItems[formElement.value] + "<br>";
      total = total + parseFloat(CompItems[formElement.value]);
   }
    
   formElement = document.form1.chkScanner
   if (formElement.checked == true)
   {
      orderDetails = orderDetails + "Scanner : $" +
         CompItems[formElement.value] + "<br>";
      total = total + parseFloat(CompItems[formElement.value]);
   }
    
   formElement = document.form1.radCase
   if (formElement[0].checked == true)
   {
      orderDetails = orderDetails + "Desktop Case : $" +
         CompItems[formElement[0].value] + "<br>";
      total = total + parseFloat(CompItems[formElement[0].value]);
   }
   else if (formElement[1].checked == true)
   {
      orderDetails = orderDetails + "Mini Tower Case : $" +
         CompItems[formElement[1].value] + "<br>";
      total = total + parseFloat(CompItems[formElement[1].value]);
   }
   else
   {
      orderDetails = orderDetails + "Full Tower Case : $" +
         CompItems[formElement[2].value]
      total = total + parseFloat(CompItems[formElement[2].value]);
   }
    
   orderDetails = orderDetails + "<P>Total Order Cost is $" + total + "</P>";
    
   window.parent.systemSummary.document.open();
   window.parent.systemSummary.document.write(orderDetails);
   window.parent.systemSummary.document.close();
}

Save this as PickSystem.htm, and load ch7Q1TopFrame.htm into your browser to try out the code.

The first difference between this and the code from Question 2 in the last chapter is that when creating the text summarizing the system we are creating HTML rather than plain text, so rather than \n for new lines we use the <br> tag.

The main change, however, is the following three lines:

   window.parent.systemSummary.document.open();
   window.parent.systemSummary.document.write(orderDetails);
   window.parent.systemSummary.close();

Instead of setting the value of a textarea box as we did in the solution to Question 2 in the last chapter, this time we are writing the order summary to an HTML page, the page contained in the right-hand frame, systemSummary. First we open the document for writing, then write out our string, and finally close the document indicating that we have completed our writing to the page.

Question 2

In the first example in this chapter, we had a page with images of books, where clicking on a book's image brought up information about that book in a popup window. Amend this so that the popup window also has a button or link that, when clicked, adds the item to the user's shopping basket. Also on the main page, give the user some way of opening up a shopping basket window with details of all the items the user has purchased so far, and give him a way of deleting items from this basket.

For this exercise I have created four pages, two that display the book's details (very similar to the pages we created in the example), a third that displays the book's images and opens the new windows, and a fourth totally new page, which will hold the shopping basket.

Let's look at the main page to be loaded, which I've called online_books.htm.

<html>
<head>
<title>Online Books</title>
<script language="JavaScript">
var detailsWindow;
var basketWindow;
    
var stockItems = new Array();
    
stockItems[100] = new Array();
stockItems[100][0] = "Beginning Active Server Pages";
stockItems[100][1] = "$39.99";
stockItems[100][2] = 0;
    
stockItems[101] = new Array();
stockItems[101][0] = "Professonal JavaScript";
stockItems[101][1] = "$46.99";
stockItems[101][2] = 0;
    
function removeItem(stockId)
{
   stockItems[stockId][2] = 0;
   alert("Item Removed");
   showBasket();
   return false;
}
    
function showDetails(bookURL)
{
   detailsWindow = window.open(bookURL,"bookDetails","width=400,height=500");
   detailsWindow.focus();
   return false;
}
    
function addBookToBasket(stockId)
{
   stockItems[stockId][2] = 1;
   alert("Item added successfully");
   detailsWindow.close();
}
    
function showBasket()
{
   basketWindow =
      window.open('ShoppingBasket.htm','shoppingBasket','width=400,height=350');

   basketWindow.document.open();
   var basketItem;
   var containsItems = false;
   basketWindow.document.write("<H4>Your shopping basket contains :</H4>");
    
   for (basketItem in stockItems)
   {
      if (stockItems[basketItem][2] > 0)
      {
         basketWindow.document.write(stockItems[basketItem][0] + " at ");
         basketWindow.document.write(stockItems[basketItem][1]);
         basketWindow.document.write("&nbsp&nbsp&nbsp&nbsp");
         basketWindow.document.write("<A href='' onclick='return " + "
         window.opener.removeItem(" + basketItem + ")'>");
         basketWindow.document.write("Remove Item</A><br>");
         containsItems = true;
      }
   }
    
   if (containsItems == false)
   {
      basketWindow.document.write("<H4>No items</H4>");
   }
   basketWindow.document.close();
   basketWindow.focus();
}
    
</script>
</head>
<body>
<H2 align=center>Online Book Buyer</H2>
<form name=form1>
<input type="button" value="Show Shopping Basket" onclick="showBasket()"
name=butShowBasket>
</form>
<P>
Click any of the images below for more details
</P>
<strong>Beginning Active Server Pages 3</strong>
<br>
<A name="begASPLink" href="" onclick="return showDetails('beg_asp3_details.htm')">
<img src="beg_asp3.gif" border=0>
</A>
<br><br>
<strong>Professional JavaScript</strong>
<br>
<A name="profJSLink" href=""
onclick="return showDetails('prof_js_details.htm')">
<img src="prof_js.gif" border=0>
</A>
</body>
</html>

The details of the books are stored in the stockItems array, which we've made a multi-dimensional array. The second dimension stores the book's title, its price, and finally the quantity the customer has in his basket.

So, in the first element, we have

stockItems[100] = new Array();
stockItems[100][0] = "Beginning Active Server Pages";
stockItems[100][1] = "$39.99";
stockItems[100][2] = 0;

[100][0] is the title, [100][1] is the price, and finally [100][2] is the quantity required, which starts as zero. In fact, though there is the potential to have the customer order more than one of a certain book the code does not facilitate that.

The first function defined in the code is removeItem().

function removeItem(stockId)
{
   stockItems[stockId][2] = 0;
   alert("Item Removed");
   showBasket();
   return false;
}

This removes a book from the shopping basket. The parameter stockId is simply the array element index of that book which we then use to set the quantity element of the second dimension to 0.

Next, we have the function that adds a book to the shopping basket.

function addBookToBasket(stockId)
{
   stockItems[stockId][2] = 1;
   alert("Item added successfully");
   detailsWindow.close();
}

The final function displays the contents of the shopping basket in a new window.

function showBasket()
{
   basketWindow =
      window.open('ShoppingBasket.htm','shoppingBasket','width=400,height=350');

   basketWindow.document.open();
   var basketItem;
   var containsItems = false;
   basketWindow.document.write("<H4>Your shopping basket contains :</H4>");
    
   for (basketItem in stockItems)
   {
      if (stockItems[basketItem][2] > 0)
      {
         basketWindow.document.write(stockItems[basketItem][0] + " at ");
         basketWindow.document.write(stockItems[basketItem][1]);
         basketWindow.document.write("&nbsp&nbsp&nbsp&nbsp");
         basketWindow.document.write("<A href='' onclick='return " +
         " window.opener.removeItem(" + basketItem + ")'>");
         basketWindow.document.write("Remove Item</A><br>");
         containsItems = true;
      }
   }
    
   if (containsItems == false)
   {
      basketWindow.document.write("<H4>No items</H4>");
   }
   basketWindow.document.close();
   basketWindow.focus();
}

A new window is opened up and its window object reference stored in basketWindow. We then write to the new window's document. First we write a heading, and then we loop through each item in the stockItems array and check the quantity element of the second dimension, which is stockItems[basketItem][2]. If it is greater than zero, we write the book's details to the shopping list window. We also write out a link to the shopping basket, which when clicked calls our removeItem() function.

Let's create the shopping basket page.

<html>
<head>
<title>Shopping Basket</title>
</head>
<body>
</body>
</html>

Save this as ShoppingBasket.htm. There's no code, but if we don't create the page and load it into the shopping basket window, we won't be able to document.write() to it.

Finally, we need to create the book description pages. First we have prof_js_details.htm. This is identical to the version we created for the example, except for the addition of the form and button inside. When clicked, the button calls the addToBasket() function in the window that opened this window, that is, our online_books.htm page.

<html>
<head>
<title>Professional JavaScript</title>
</head>
<body><strong>Professional JavaScript</strong>
<br>
<form name=form1>
<input type="button" value="Add to basket" name=butAddBook
       onclick="window.opener.addBookToBasket(101)">
</form>
    
<strong>Subjects</strong>
    ECMAScript<br>
    Internet<br>JavaScript
    <br>XML and Scripting<BR>
    
<HR color=#cc3333>
<P>This book covers the broad spectrum of programming JavaScript - from the core
language to browser applications and server-side use to stand-alone and embedded
JavaScript.
</P>
<P>
It includes a guide to the language - when where and how to get the
most out of JavaScript - together with practical case studies demonstrating
JavaScript in action. Coverage is bang up-to-date, with discussion of
compatability issues and version differences, and the book concludes with a
comprehensive reference section. </P>
    
</body>
</html>

Finally, we have our beg_asp3_details.htm page. Again, it is identical to the version created in the example with a form and button to add the book to the shopping basket, like the preceding page.

<html>
<head>
<title>Beginning Active Server Pages 3.0</title>
</head>
<body>
<strong>Beginning Active Server Pages 3.0</strong>
<form name=form1>
<input type="button" value="Add to basket" name=butAddBook
       onclick="window.opener.addBookToBasket(100)">
</form>
    
<br>
Subjects
<br>
ASP
<br>
Internet
<br>
    
<HR color=#cc3333>
    
<P>ASP 3.0 is the most recent version of ASP, and is released with version 5.0
of Microsoft's <B>Internet Information Server</B> (IIS 5.0) web server, with
<B>Windows 2000</B>. It is also ported for use on UNIX.
</P>
<P>ASP is an easy way to control content – giving us the
flexibility to handle complex professional commercial sites. If you want to
program a web page, pure HTML is fine, however this book shows how to add
dynamism to web site generation and will utilize components, objects and
Databases to achieve that.
</P>
    
</body>
</html>