Java Reference
In-Depth Information
Exercise 2 Question
The fourth example (ch08_examp4.htm) was a page with images of books, in which clicking on a book's
image brought up information about that book in a pop-up window. Amend this so that the pop-up win-
dow also has a button or link that, when clicked, adds the item to a 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 they
have purchased so far, and give them a way of deleting items from this basket.
Exercise 2 Solution
This is the most challenging exercise so far, but by the end you'll see how a more complex application
can be created using JavaScript. The solution to this exercise involves four pages: two that display the
book's details (very similar to the pages you created in the example), a third that displays the topic's
images and opens the new windows, and a fourth, totally new page, which holds the shopping basket.
Let's look at the main page to be loaded, called ch8_q2_online_books.htm.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Chapter 8: Question 2</title>
<script type=”text/javascript”>
var detailsWindow;
var basketWindow;
var stockItems = new Array();
stockItems[0] = new StockItem(“Professional Ajax, 2nd Edition”, “$39.99”);
stockItems[1] = new StockItem(“Professonal JavaScript, 2nd Edition”, “$46.99”);
function removeItem(stockId)
{
stockItems[stockId].quantity = 0;
alert(“Item Removed”);
showBasket();
return false;
}
function addBookToBasket(stockId)
{
stockItems[stockId].quantity = 1;
alert(“Item added successfully”);
detailsWindow.close();
}
function showDetails(bookURL)
{
detailsWindow = window.open(bookURL, “bookDetails”,
“width=400,height=500”);
detailsWindow.focus();
return false;
