1. 1 CS 21A Beginning JavaScript Programming Project 4 Cookies, Arrays, and Frames Sonny Huang

2. 2 Project 4 Cookies, Arrays, and Frames Outline Create a cookie Use a cookie to store information from a Web page Set the expiration date on a cookie Read a cookie Explain the use of the escape() and unescape() functions Delete a cookie Determine the contents of a cookie

3. 3 Project 4 Cookies, Arrays, and Frames Outline Use the alert() method to debug JavaScript code Create an array of objects Populate an array of objects Describe the attributes of an object Use the new operator Explain the use of the this keyword Use a cookie to take action on a Web page

4. 4 Project 4 Cookies, Arrays, and Frames Outline Set a flag in a cookie Write information to a frame using JavaScript

5. 5 Introduction oThis project introduces creating and reading cookies using various JavaScript methods. oWe will learn about creating and using special arrays called objects using the new and this keywords. oWe,also, will learn how to use JavaScript to communicate with frames using the TARGET keyword and top object. oThe project illustrates how to use the alert() method to debug their JavaScript code. oFinally, we will use the escape() and unescape() functions to store information correctly in a cookie.

6. 6 Introduction

7. 7

8. 8 cookie A message given to a Web browser by a Web server. The browser stores the message in a text file. The message is then sent back to the server each time the browser requests a page from the server. The main purpose of cookies is to identify users and possibly prepare customized Web pages for them. When you enter a Web site using cookies, you may be asked to fill out a form providing such information as your name and interests.

9. 9 Introduction This information is packaged into a cookie and sent to your Web browser which stores it for later use. The next time you go to the same Web site, your browser will send the cookie to the Web server. The server can use this information to present you with custom Web pages. So, for example, instead of seeing just a generic welcome page you might see a welcome page with your name on it. The name cookie derives from UNIX objects called magic cookies. These are tokens that are attached to a user or program and change depending on the areas entered by the user or program.

10. 10 Introduction This information is packaged into a cookie and sent to your Web browser which stores it for later use. The next time you go to the same Web site, your browser will send the cookie to the Web server. The server can use this information to present you with custom Web pages. So, for example, instead of seeing just a generic welcome page you might see a welcome page with your name on it. The name cookie derives from UNIX objects called magic cookies. These are tokens that are attached to a user or program and change depending on the areas entered by the user or program.

11. 11 Project Four – Student Council Web site Needs: On the first page (fig a) allows the viewer to change the activities listed on the main student council web page shown in the left frame in fig b. By entering name and check boxes allow the user to select the organizations that page displays the student name and the organizations selected in the Student Council Preference Web Page(fig a). When the user clicks an organization name, the browser loads the appropriate organization’s Web page in the right frame of the Student Council Web page(fig c)

12. 12 Project Four – Student Council Web site data validation requirement: name area can not be empty

13. 13 Project Four – Student Council Web site Starting Notepad and opening the council.htm file

14. 14 Creating the cookie A cookie is a small piece of information stored on the client machine in the cookies.txt file in Navigator client. We can manipulate cookies oExplicitly, with a CGI program. oProgrammatically, with client-side JavaScript using the cookie property of the document object. o Transparently, with the LiveWire the client object, when using client-cookie maintenance.

15. 15 Creating the cookie We will concentrate on using JavaScript to manipulate cookies. Each cookie is a small item of information with an optional expiration date and is added to the cookie file in the following format: name=value;expires=expDate; name is the name of the datum being stored, and value is its value. expDate is the expiration date, in GMT date format: Wdy, DD-Mon-YY HH:MM:SS

16. 16 Creating the cookie Greenwich Mean Time (GMT), as well as local time methods. GMT, also known as UTC (universal) methods, refers to the time as set by the World Time Standard. The local time is the time known to the computer where JavaScript is executed. Although it's slightly different from this format, the date string returned by the Date method toGMTString can be used to set cookie expiration dates. The expiration date is an optional parameter indicating how long to maintain the cookie. If expDate is not specified, the cookie expires when the user exits the current Navigator session.

17. 17 Creating the cookie Navigator maintains and retrieves a cookie only if its expiration date has not yet passed. Limitations Cookies have these limitations oThree hundred total cookies in the cookie file. o4 Kbytes per cookie, for the sum of both the cookie's name and value. oTwenty cookies per server or domain (completely specified hosts and domains are treated as separate entities and have a twenty-cookie limitation for each, not combined).

18. 18 Creating the cookie Cookies can be associated with one or more directories. If your files are all in one directory, then you need not worry about this. If your files are in multiple directories, you may need to use an additional path parameter for each cookie. Using cookies with JavaScript The document.cookie property is a string that contains all the names and values of Navigator cookies. You can use this property to work with cookies in JavaScript.

19. 19 Creating the cookie Here are some basic things you can do with cookies: oSet a cookie value, optionally specifying an expiration date. oGet a cookie value, given the cookie name. It is convenient to define functions to perform these tasks. Here, for example, is a function that sets cookie values and expiration:

20. 20 Creating the cookie // Sets cookie values. Expiration date is optional // function setCookie(name, value, expire) { document.cookie = name + "=" + escape(value) + ((expire == null) ? "" : ("; expires=" + expire.toGMTString())) }Notice the use of escape to encode special characters (semicolons, commas, spaces) in the value string. This function assumes that cookie names do not have any special characters.

21. 21 Creating the cookie To create the cookie, perform the following two steps: (1) write the function that create the cookie. (2) add the JavaScript code that calls the function that create the cookie. Creating the addCookie() Function To create the addCookie function, perform the following two steps: (1) set a date variable for the cookie experation date to a date that is one year from now. (2) Set the cookie value for the current document.

22. 22 Creating the cookie getTime () One of the Date object method. Returns the numeric value corresponding to the time for the specified date.

23. 23 Creating the cookie A browser stores cookies in a file or files in a special directory on the user’s computer. A separate file may exist on the user’s computer for each cookie storing Web page that the user has visited. For security and privacy, by default the browser allows a Web page to have access only to the Web page’s own cookies on the user’s computer. The browser stores as many values as required by the Web page.

24. 24 Creating the cookie The browser stores these values as name and value pairs.

25. 25 Creating the cookie The escape() function converts the string by changing all punctuation, spaces, accented characters, and other non- ASCII characters to a special hexadecimal notation.

26. 26 Creating the cookie

27. 27 Creating the cookie Calling the addCookie() Function

28. 28 Creating the cookie

29. 29 Creating the cookie

30. 30 Creating the cookie Calling the addCookie() Function

31. 31 Reading the Cookie Generic functions Programmers refer to functions, such as addCookie() and getCookie(), which can be used again and again without any modification. The steps to read the cookie: 1). Read the cookie that was created with the updateValues() function 2). Test to make sure that the browser property saved the cookie by displaying the value using the JavaScript alert() function.

32. 32 Reading the Cookie Creating the getCookie() function

33. 33 Reading the Cookie The getCookie() function accepts the tag name of the cookie that we want to read as a parameter. The function searchs through all of the cookie’s name and value pairs in the current web page to find if the name exists in the cookie. If the name exists, the function returns the value of the cookie to the calling function.

34. 34 Reading the Cookie escape oFunction. Returns the ASCII encoding of an argument in the ISO Latin-1 character set. oSyntax oescape("string") oParameters ostring is a nonalphanumeric string in the ISO Latin-1 character set, or a property of an existing object.

35. 35 Reading the Cookie oDescription The value returned by the escape function is a string of the form "%xx," where xx is the ASCII encoding of a character in the argument. If you pass the escape function an alphanumeric character, the escape function returns the same character. escape is a top-level function not associated with any object.

36. 36 Reading the Cookie oExamples The following example returns "Hello%2C%20World": escape("Hello, World") The following example returns "%26": escape("&") The following example returns "%21%23": escape("!#")

37. 37 Reading the Cookie The getCookie() function accepts the tag name of the cookie that we want to read as a parameter. The function searchs through all of the cookie’s name and value pairs in the current web page to find if the name exists in the cookie. If the name exists, the function returns the value of the cookie to the calling function.

38. 38 Reading the Cookie

39. 39 Reading the Cookie Calling the getcookie() function

40. 40 Reading the Cookie Calling the getcookie() function

41. 41 Reading the Cookie Deleting a Cookie(call from the Clear All button)

42. 42 Reading the Cookie

43. 43 Reading the Cookie Deleting a Cookie(call from the Clear All button)

44. 44 Reading the Cookie

45. 45 Creating the Array Using array to store each organization’s web page information. The array contains the information about a user’s selected list of organization. The array’s information will be used to update the lower-right frame in the following figure.

46. 46 Creating the Array Initializing the Array We will use the cookie’s information, which is created in the Student Council Preferences Web page, and populate the array in sidebar.htm file.

47. 47 Creating the Array this keyword Use the this keyword to refer to the current object. In general, this refers to the calling object in a method. Use this as follows: this[.propertyName]

48. 48 Creating the Array Example 1. Suppose a function called validate validates an object's value property, given the object and the high and low values: function validate(obj, lowval, hival) { if ((obj.value hival)) alert("Invalid Value!") }

49. 49 Creating the Array You could call validate in each form element's onChange event handler, using this to pass it the form element, as in the following example: Enter a number between 18 and 99:

50. 50 Creating the Array Example 2. When combined with the form property, this can refer to the current object's parent form. In the following example, the form myForm contains a Text object and a button. When the user clicks the button, the value of the Text object is set to the form's name. The button's onClick event handler uses this.form to refer to the parent form, myForm.

51. 51 Creating the Array Form name:

52. 52 Creating the Array The ClubArray() function accepts a parameter that indicates how many elements will be in the array.

53. 53 Creating the Array The AddClub() function acreated an object entry for the club that is passed to it.

54. 54 Creating the Array Populating the Array

55. 55 Creating the Array Populating the Array

56. 56 Creating the Array

57. 57 Displaying Data Based on a Cookie Value Reading the Cookie “= “

58. 58 Displaying Data Based on a Cookie Value

59. 59 Displaying Data Based on a Cookie Value Displaying the Student Name

60. 60 Displaying Data Based on a Cookie Value

61. 61 Displaying Data Based on a Cookie Value Displaying the Organization List

62. 62 Displaying Data Based on a Cookie Value

63. 63 Displaying Data Based on a Cookie Value

64. 64 Displaying Data Based on a Cookie Value

65. 65 Setting a Flag in a Cookie When we want to go back to the student council preference page by using back button on browser we will see we can not go back to the previous page due to the existence of StudentName cookie. We have to let the browser know that that the user want to change his/hers preferences, so the the JavaScript will not automatically jump to the Student Council Web page.

66. 66 Setting a Flag in a Cookie top Property. The top property is a synonym for the top-most Navigator window, which is a "document window" or "Web Browser window." Syntax 1. top.propertyName 2. top.methodName 3. top.frameName 4. top.frames[index]

67. 67 Setting a Flag in a Cookie Parameters propertyName is defaultStatus, status, or length. methodName is any method associated with the window object. frameName and frames[index] are ways to refer to frames. Description The top property refers to the top-most window that contains frames or nested framesets. Use the top property to refer to this ancestor window.

68. 68 Setting a Flag in a Cookie The top property is read-only. The value of the top property is where objectReference is an internal reference. Examples The statement top.close() closes the top-most ancestor window.

69. 69 Setting a Flag in a Cookie The statement top.length specifies the number of frames contained within the top-most ancestor window. When the top-most ancestor is defined as follows, top.length returns three:

70. 70 Setting a Flag in a Cookie The following example sets the background color of a frame called myFrame to red. myFrame is a child of the top-most ancestor window. top.myFrame.document.bgColor="red"

71. 71 Setting a Flag in a Cookie Setting the Value of the Flag

72. 72 Setting a Flag in a Cookie

73. 73 Setting a Flag in a Cookie

74. 74 Setting a Flag in a Cookie Reading and Using the Flag

75. 75 Setting a Flag in a Cookie

76. 76 Initializing the Web Page The InitialValue() function reads the existing cookies and sets the values on the Student Council Preference page.

77. 77 Initializing the Web Page

78. 78 Initializing the Web Page

79. 79 Working with Frames

80. 80 Working with Frames <FRAME NAME="SIDEBAR" SRC="side.htm" MARGINWIDTH=0 MARGINHEIGHT=10> <FRAMESET ROWS="135,448*" FRAMEBORDER=NO BORDER=0 FRAMESPACING=0> <FRAME NAME="HEADER" SRC="header.htm" MARGINHEIGHT=0 MARGINWIDTH=0> <FRAME NAME= "LOWERRIGHT“ SRC="welcome.htm" MARGINHEIGHT=0 MARGINWIDTH=0>

81. 81 Working with Frames Setting the contents of the display frame