1 cs 21a beginning javascript programming project 5 using objects to create a shopping cart...

1

CS 21A • Beginning JavaScript

Programming

Project 5 Using Objects to Create a Shopping Cart Application

Sonny Huang

2


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


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.

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:

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


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 the Hidden Frame:

Same as creating any frames, but set the size of the hidden frames to zero.

13


Save the file as valucomp.htm.

14


Creating the ShoppingCart Object

15


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


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


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


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


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


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


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


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


object Indexes: We can use different kinds of variable as an index.

24


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


Deleting an Object

delete operator: tells JavaScript to delete all of the properties of an object. The syntax is as following:

delete objectname

26


27


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


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)}

29


30


31


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


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


For an object car with properties make and model, result would be:

car.make = Fordcar.model = Mustang

34


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


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

36


37


Calling the viewCart() Function

Call viewCart() in the hidden frame

38


Calling the addtoCart() Function

Call addtoCart() in the hidden frame

39


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


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


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


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


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


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


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


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


•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


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


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


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


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/

53


54


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


56


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


59


60


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


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


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


Responding to a Keystroke Based on the Browser Type

65


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


67


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


69


70


Send key from the HIDDEN frame

Set MAIN onKeyPress event

Make MAIN as the active frame

71


In the order.html’s body tag put the

onKeyPress="JavaScript:top.HIDDEN.keyPressed()“ in.

Call keyPressed() event in the hidden frame

72


Using the prompt() Function

73


1 cs 21a beginning javascript programming project 5 using objects to create a shopping cart...

Documents

web page slide

shopping page

javascript object

shopping cart page

web page visitor

hidden frames

dell web

hidden frame cookies