Date post: | 02-Jan-2016 |
Category: |
Documents |
Upload: | anabel-french |
View: | 233 times |
Download: | 0 times |
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
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
Project 4 Cookies, Arrays, and Frames
Outline
Set a flag in a cookie
Write information to a frame using JavaScript
5
Introduction
o This project introduces creating and reading cookies using various JavaScript methods.
o We will learn about creating and using special arrays called objects using the new and this keywords.
o We ,also, will learn how to use JavaScript to communicate with frames using the TARGET keyword and top object.
o The project illustrates how to use the alert() method to debug their JavaScript code.
o Finally, we will use the escape() and unescape() functions to store information correctly in a cookie.
8
Introduction
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
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
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
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)
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
o Explicitly, with a CGI program.
o Programmatically, 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
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
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
Creating the cookie
Navigator maintains and retrieves a cookie only if its expiration date has not yet passed.
Limitations
Cookies have these limitations
o Three hundred total cookies in the cookie file.
o 4 Kbytes per cookie, for the sum of both the cookie's name and value.
o Twenty 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
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
Creating the cookie
Here are some basic things you can do with cookies:
o Set a cookie value, optionally specifying an expiration date.
o Get 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
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
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
Creating the cookie
getTime ()
One of the Date object method. Returns the numeric value corresponding to the time for the specified date.
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.
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.
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.
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
Reading the Cookie
escape
o Function. Returns the ASCII encoding of an argument in the ISO Latin-1 character set.
o Syntax
o escape("string")
o Parameters
o string is a nonalphanumeric string in the ISO Latin-1 character set, or a property of an existing object.
35
Reading the Cookie
o Description
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
Reading the Cookie
o Examples
The following example returns "Hello%2C%20World":
escape("Hello, World")
The following example returns "%26":
escape("&")
The following example returns "%21%23":
escape("!#")
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.
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
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
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
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 < lowval) || (obj.value > hival)) alert("Invalid Value!")}
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:
<B>Enter a number between 18 and 99:</B><INPUT TYPE = "text" NAME = "age" SIZE = 3onChange="validate(this, 18, 99)">
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
Creating the Array
<FORM NAME="myForm">Form name:<INPUT TYPE="text" NAME="text1" VALUE="Beluga"><P><INPUT NAME="button1" TYPE="button" VALUE="Show Form Name" onClick="this.form.text1.value=this.form.name"></FORM>
52
Creating the Array
The ClubArray() function accepts a parameter that indicates how many elements will be in the array.
53
Creating the Array
The AddClub() function acreated an object entry for the club that is passed to it.
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
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.propertyName2. top.methodName3. top.frameName4. top.frames[index]
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
Setting a Flag in a Cookie
The top property is read-only. The value of the top property is
<object objectReference>where objectReference is an internal reference.
Examples
The statement top.close() closes the top-most ancestor window.
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:
<FRAMESET COLS="30%,40%,30%"><FRAME SRC=child1.htm NAME="childFrame1"><FRAME SRC=child2.htm NAME="childFrame2"><FRAME SRC=child3.htm NAME="childFrame3"></FRAMESET>
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"
76
Initializing the Web Page
The InitialValue() function reads the existing cookies and sets the values on the Student Council Preference page.
80
Working with Frames <FRAMESET COLS="160, *" FRAMEBORDER=YES>
<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>
</FRAMESET> </FRAMESET>