1
CS 21A • Beginning JavaScript
Programming
Project 5 Using Objects to Create a Shopping Cart Application
Sonny Huang
2
Project 5 Using Objects to Create a Shopping Cart Application
Outline
Use a hidden frame for JavaScript code
Explain why hidden frames are useful
Explain the concept of a JavaScript object
Create an object using the Object data type
Write a method for an object
Use the delete operator to delete an object
Use the With statement to reference an object
3
Project 5 Using Objects to Create a Shopping Cart Application
Outline
Use the For-in statement to loop through the elements of an object
Use the history method of the document object to navigate to Web pages
Write to a window object from a document
Refer to windows from other windows
Determine the browser being used with the navigator object
Detect keystrokes in a Web page
4
Introduction
Please view the dell web site(www.dell.com) to see the functions of a shopping carts program.
Shopping carts allow users to build a list of items they want to purchase from a company’s Web site. We will learn how to create and maintain the list of items that shoppers purchase.
We will use hidden frames to place all of our JavaScript in a single location without allowing users to see that frame.
5
Introduction
Different browsers will act differently in handling some HTML tags and JavaScript commands.
To make sure that all the browser will display what we wants. We will learn to identify the browser a Web page visitor is using.
8
Project Five – Val-U Computers Shopping Web Site
Requirements:
1. Already has a web page which list all the selling items. Want to have a shopping cart added to the page.
2. After users select their items, they can view their shopping cart on another web page.
3. The web page will allow users to delete items or go back to the shopping page.
9
Project Five – Val-U Computers Shopping Web Site
4. The users can obtain a printable copy of their order by clicking a link on the shopping cart page.
5. When the users click the link, there will have information displayed to show the users how to print the information.
6. The web page will ask the users’ information, so it will be able to display the users’ information on the form.
10
Creating an Object in a Hidden Frame
Cookies are a place to store information for future use.
A hidden frame is an area, that is invisible to the user, to remain in place for use by JavaScript.
JavaScript can be placed in hidden frames, so common functions can be accessed from multiple Web pages within the Web site.
11
Creating an Object in a Hidden Frame
Advantages of using hidden frames over cookies:
1. The data remain intact in the hidden frame as the user navigates the web site. When reloading a web page, the program has to read and write the cookies.
2. Hidden frames can store complex data, such as objects, more easily than cookies.
3. When users visit another website or close browsers the hidden frame data will be lost. The cookies still stay in the computer.
12
Creating an Object in a Hidden Frame
Creating the Hidden Frame:
Same as creating any frames, but set the size of the hidden frames to zero.
15
Creating an Object in a Hidden Frame
Based on the criteria, we will choose to use object and the name of the object is ShoppingCart.
1. Each item will itself be an object.
2. These objects can be added to the shoppingCart object or deleted from the ShoppingCart object.
3. Each item in the shopping cart also will have the capacity of displaying itself using the display method.
16
Creating an Object in a Hidden Frame
new operator
An operator that lets you create an instance of a user-defined object type or of one of the built-in object types Array, Boolean, Date, Function, Math, Number, or String.
Creating a user-defined object type requires two steps:
1. Define the object type by writing a function.
2. Create an instance of the object with new.
17
Creating an Object in a Hidden Frame
To define an object type, create a function for the object type that specifies its name, properties, and methods.
Syntax
objectName = new objectType ( param1 [,param2] ...[,paramN] )
18
Creating an Object in a Hidden Frame
Arguments
objectName is the name of the new object instance.
objectType is the object type. It must be a function that defines an object type.
param1...paramN are the property values for the object. These properties are parameters defined for the objectType function.
19
Creating an Object in a Hidden Frame
Example : object type and object instance. Suppose you want to create an object type for cars. You want this type of object to be called car, and you want it to have properties for make, model, and year. To do this, you would write the following function:
function car(make, model, year) { this.make = make this.model = model this.year = year}
20
Creating an Object in a Hidden Frame
Now you can create an object called mycar as follows:
mycar = new car("Eagle", "Talon TSi", 1993)
This statement creates mycar and assigns it the specified values for its properties. Then the value of mycar.make is the string "Eagle", mycar.year is the integer 1993, and so on.
You can create any number of car objects by calls to new. For example,
kenscar = new car("Nissan", "300ZX", 1992)
21
Creating an Object in a Hidden Frame
The following code is used to start a new document.
This document exists in the hidden frame, name HIDDEN.
The addItem( ) function adds an item to the ShoppingCart object.
The addItem function contains three properties (Description, Price and ItemNum) and one method(display).
22
Creating an Object in a Hidden Frame
The following code is used to start a new document. This document exists in the hidden frame, name HIDDEN.
Set display method for showing an item.
Declared ShoppingCart as JavaScript object
Set ShoppingCart object’s properties.
23
Creating an Object in a Hidden Frame
object Indexes: We can use different kinds of variable as an index.
24
Creating an Object in a Hidden Frame
The following code is used to add a new item to the shopping cart.
Creating a new object and assign it to the ShoppingCart object index.
25
Creating an Object in a Hidden Frame
Deleting an Object
delete operator: tells JavaScript to delete all of the properties of an object. The syntax is as following:
delete objectname
27
Creating an Object in a Hidden Frame
Creating the printItem( ) Method
with statement
The with statement establishes the default object for a set of statements. Within the set of statements, any property references that do not specify an object are assumed to be for the default object. A with statement looks as follows:
with (object){ statements
}
28
Creating an Object in a Hidden Frame
Example. The following with statement specifies that the Math object is the default object. The statements following the with statement refer to the PI property and the cos and sin methods, without specifying an object. JavaScript assumes the Math object for these references.
var a, x, y; var r=10with (Math) { a = PI * r * r x = r * cos(PI) y = r * sin(PI/2)}
31
Creating an Object in a Hidden Frame
Writing Object Data to the Web Page
for...in statement
he for...in statement iterates a specified variable over all the properties of an object. For each distinct property, JavaScript executes the specified statements. A for...in statement looks as follows:
for (variable in object) { statements }
32
Creating an Object in a Hidden Frame
Example. The following function takes as its argument an object and the object's name. It then iterates over all the object's properties and returns a string that lists the property names and their values.
function dump_props(obj, obj_name) { var result = "" for (var i in obj) { result += obj_name + "." + i + " = "
+ obj[i] + "<BR>" } result += "<HR>" return result }
33
Creating an Object in a Hidden Frame
For an object car with properties make and model, result would be:
car.make = Fordcar.model = Mustang
34
Creating an Object in a Hidden Frame
For an object car with properties make and model, result would be:
car.make = Fordcar.model = Mustang
Clear the frame
Writing HTML code to frame
35
Creating an Object in a Hidden Frame
Line 56 will invoke the display method which will cause the printItem() to be called and passed in true and top.Main.document to the function.
Check if item is deleted
37
Creating an Object in a Hidden Frame
Calling the viewCart() Function
Call viewCart() in the hidden frame
38
Creating an Object in a Hidden Frame
Calling the addtoCart() Function
Call addtoCart() in the hidden frame
40
Using the History Object
history object
Object. Contains information on the URLs that the client has visited within a window. This information is stored in a history list and is accessible through the Navigator Go menu.
Syntax
To use a history object:
1. history.propertyName2. history.methodName(parameters)3. [windowReference.]history[index]
41
Using the History Object
Parameters
propertyName is one of the properties listed below.
methodName is one of the methods listed below.
windowReference is a valid way of referring to a window
index is an integer representing an entry in the history list.
42
Using the History Object
Property of
window object
Description
The history object is a linked list of URLs the user has visited, as shown in the Navigator Go menu.
To change a window's current URL without generating a history entry, you can use the replace method. This replaces the current page with a new one without generating a history entry.
43
Using the History Object
The history array
You can reference the history entries by using the history array. This array contains an entry for each history entry in source order; each array entry is a string containing a URL. For example, if the history list contains three named entries, these entries are reflected as history[0], history[1], and history[2].
44
Using the History Object
To use the history array:
1. history[index]2. history.lengthindex is an integer representing an entry in the history list.
To obtain the number of entries in the history list, use the length property: history.length.
Elements in the history array are read-only. For example, the statement history[0]="http://home.netscape.com" has no effect.
45
Using the History Object
If we access the history array without specifying an array element, Navigator returns a string of HTML which displays a table of URLs, each of which is a hyperlink.
Properties
The history object has the following properties:
current
Specifies the URL of the current history entry
length
Reflects the number of entries in the history list
46
Using the History Object
next
Specifies the URL of the next history entry
previous
Specifies the URL of the previous history entry
The history array has the following properties:
length
Reflects the number of history entries in the window.
47
Using the History Object
The History object has the following methods:
•back :Loads the previous URL in the history list. history.back()
•eval :evaluates a string of JavaScript code in the context of the specified object. [objectName.]eval(string)
•forward :Loads the next URL in the history list. history.forward()
•go :Loads a URL from the history list. history.go(delta | "location")
48
Using the History Object
•toString : Returns a string representing the specified object. objectName.toString()
•valueOf :Returns the primitive value of the specified object. objectName.valueOf()
Examples
Example 1.
The following example goes to the URL the user visited three clicks ago in the current window.
history.go(-3)
49
Using the History Object
Example 2.
You can use the history object with a specific window or frame. The following example causes window2 to go back one item in its window (or session) history:
window2.history.back()
Example 3.
The following example causes the second frame in a frameset to go back one item:
parent.frames[1].history.back()
50
Using the History Object
Example 4.
The following example causes the frame named frame1 in a frameset to go back one item:
parent.frame1.history.back()
Example 5.
The following example causes the frame named frame2 in window2 to go back one item:
window2.frame2.history.back()
51
Using the History Object
Example 6.
The following code determines whether the first entry in the history array contains the string "NETSCAPE". If it does, the function myFunction is called.
if (history[0].indexOf("NETSCAPE") != -1) { myFunction(history[0])}
52
Using the History Object
Example 7.
The following example displays the entire history list:
document.writeln("<B>history is</B> " + history)
This code displays output similar to the following:
history is
Welcome to Netscape http://home.netscape.com/
Sun Microsystems http://www.sun.com/
SlugVideo at the Dream Inn http://sapphire.cse.ucsc.edu/SlugVideo/dream-inn.html
Bad Dog Chronicles http://www.supernet.net/~dugbrown/
54
Using the History Object
Adding the goBack() function
In the MAIN frame go back two pages: due to the write() and close() methods add a blank page to the history
56
Using the History Object
Calling the goBack() and printOrder() Functions
Call goBack()
Call printOrder()
57
Writing HTML to Another Window
Writing the printOrder() function
The printOrder() opens a new window and display the items in the ShoppingCart object. The open(), used to create the window, returns an object for the window that it opened
61
Determining Browsers and Detecting Keystrokes
navigator object
Contains information about the browser in use.
Syntax
To use a navigator object:
1. navigator.propertyName2. navigator.methodName
Parameters
propertyName is one of the properties listed below.
methodName is one of the methods listed below.
62
Determining Browsers and Detecting Keystrokes
Description
Use the navigator object to determine which version and name of the browser we have, what MIME types the user's browser can handle, and what plug-ins the user has installed.
Properties
appCodeName :Specifies the code name of the browser appName :Specifies the name of the browser
63
Determining Browsers and Detecting Keystrokes
appVersion :Specifies version information for the Navigator
mimeTypes :An array of all MIME types supported by the client
plugins:An array of all plug-ins currently installed on the client
userAgent:Specifies the user-agent header
64
Determining Browsers and Detecting Keystrokes
Responding to a Keystroke Based on the Browser Type
65
Determining Browsers and Detecting Keystrokes
For the Netscape Navigator:
The which property returns the ASCII value of the key. The key.which value is forced to be a numeric value by making the result a new number object.
The toString(16) method converts the KeyChar to hexadecimal.
The unescape() converts the hexadecimal to a standard character that can be test.
67
Determining Browsers and Detecting Keystrokes
For Internet Explorer:
IP provides a keyCode property when a key is press in a document.
fromCharCode, one of the String methodes, converts the key to a readable character
70
Determining Browsers and Detecting Keystrokes
Send key from the HIDDEN frame
Set MAIN onKeyPress event
Make MAIN as the active frame
71
Determining Browsers and Detecting Keystrokes
In the order.html’s body tag put the
onKeyPress="JavaScript:top.HIDDEN.keyPressed()“ in.
Call keyPressed() event in the hidden frame