Chapter 1 Introduction to Computers and C Programming

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 l       Use a hidden frame for JavaScript
code l       Explain why hidden frames are
useful l       Explain the concept of a
JavaScript object l       Create an object using
the Object data type l       Write a method for
an object l       Use the delete operator to
delete an object l       Use the With statement
to reference an object
3
Project 5 Using Objects to Create a Shopping Cart
Application
Outline l       Use the For-in statement to loop
through the elements of an object l       Use the
history method of the document object to navigate
to Web pages l       Write to a window object
from a document l       Refer to windows from
other windows l       Determine the browser being
used with the navigator object l       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
companys 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.
6
Introduction
This allow user to use shortcut key to access the
shopping carts
7
Introduction
A pop up window will display the information
which stored in the hidden frame.
8
Project Five Val-U Computers Shopping Web Site

• Requirements
• Already has a web page which list all the selling
  items. Want to have a shopping cart added to the
  page.
• After users select their items, they can view
  their shopping cart on another web page.
• 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

• The users can obtain a printable copy of their
  order by clicking a link on the shopping cart
  page.
• When the users click the link, there will have
  information displayed to show the users how to
  print the information.
• 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.
13
Creating an Object in a Hidden Frame
Save the file as valucomp.htm.
14
Creating an Object in a Hidden Frame
Creating the ShoppingCart Object
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.
Declared ShoppingCart as JavaScript object
Set ShoppingCart objects properties.
Set display method for showing an item.
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
26
Creating an Object in a Hidden Frame
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 r10with (Math)           a PI r
r          x r cos(PI)          y r
sin(PI/2)
29
Creating an Object in a Hidden Frame
30
Creating an Object in a Hidden Frame
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 " " obji "
"           result
""          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
Check if item is deleted
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.
36
Creating an Object in a Hidden Frame
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
39
Creating an Object in a 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(paramet
ers)3. windowReference.historyindex
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 history0, history1, and
history2.
44
Using the History Object
To use the history array 1. historyindex2.
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 history0"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() Exa
mple 3. The following example causes the second
frame in a frameset to go back one item
parent.frames1.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 (history0.indexOf("NET
SCAPE") ! -1)    myFunction(history0)
52
Using the History Object
Example 7. The following example displays the
entire history list document.writeln("history
is " history) This code displays output
similar to the following history is Welcome to
Netscape     http//home.netscape.com/ Sun
Microsystems              http//www.sun.com/ Slug
Video at the Dream Inn    http//sapphire.cse.ucsc
.edu/SlugVideo/dream-inn.html Bad Dog
Chronicles                 http//www.supernet.net
/dugbrown/
53
Using the History Object
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
55
Using the History Object
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
58
Writing HTML to Another Window
59
Writing HTML to Another Window
60
Writing HTML to Another Window
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 pluginsAn array
of all plug-ins currently installed on the client
userAgentSpecifies 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.
66
Determining Browsers and Detecting Keystrokes
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
68
Determining Browsers and Detecting Keystrokes
69
Determining Browsers and Detecting Keystrokes
70
Determining Browsers and Detecting Keystrokes
Set MAIN onKeyPress event
Send key from the HIDDEN frame
Make MAIN as the active frame
71
Determining Browsers and Detecting Keystrokes
In the order.htmls body tag put the
onKeyPress"JavaScripttop.HIDDEN.keyPressed()
in.
Call keyPressed() event in the hidden frame
72
Determining Browsers and Detecting Keystrokes
Using the prompt() Function
73
Determining Browsers and Detecting Keystrokes