CS 21A

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 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: • 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 object’s 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 r=10with (Math) {a = PI * r * rx = 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 + " = " + 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 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(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 historyentries 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()