Regular Expression (continue)

and Cookies

Quick Review

What letter values would be included for the following variable, which will be used for validation purposes: var validCharacters = /[A-Z]/

a. Only A and Z would be included.b. Both uppercase and lowercase letters would

be included.c. Only lowercase letters A-Z would be

included.d. Only uppercase letters A-Z would be

included.

Quick Review

What letter values would be included for the following variable, which will be used for validation purposes: var validCharacters = /[A-Z]/

a. Only A and Z would be included.b. Both uppercase and lowercase letters would

be included.c. Only lowercase letters A-Z would be

included.d. Only uppercase letters A-Z would be

included.

Quick Review

What object is needed to create a regular expression?a. REb. RegExpc. RegularExpd. RegExpression

Quick Review

What object is needed to create a regular expression?a. REb. RegExpc. RegularExpd. RegExpression

Meta characters in Regular Expression(continue)

• ^$ \ // ( ) | ? + * [ ] { } .. / means the ends of regular expression. means any character(s)

ton. Matches tons, tonneaus but not ton All characters in this list need to be escaped if we want to use them as the characters themselves without their special meanings.

Alternation

• |: choiceExample: /John|Karen|Steve/

• Group: subpatternExample: /^(Sam|Dan|Tom)Kat/

Form Validation with Regular Expressions

• Check for alphabetic data (Examples: first name or last name)/^[a-zA-Z]+$/

Form Validation with Regular Expressions

• Check for valid social security numberPattern: <3 digits>-<2 digits>-<4 digits>- (dash): optionalWhat is the regular expression?

/^d{3}-?\d{2)-?\d{4}$/

Form Validation with Regular expression

• Valid phone number:Pattern:<3 digits><dash and/or

spaces><3 digits><dash and/or spaces><4 digits>

Spaces: optionalWhat is the regular expression?

/^\d{3}-?\s*\d{3)-?\s*\d{4}$/

Form validation

• Checking for valid (format) email addresses@: username@address.domainnameat least six charactersdomain name: 2 characters

/^((\w+)\.?)+@((\w+)\.?)+\.[a-zA-Z]{2,4}$/

Examples of regular expressions

To test a string begins with letters between a and f (lowercase only)

/^[a-f]/

To test if a string contains a number /[0-9]+/

or /\d+/

Examples of regular expressions

To test if a string ends with three numbers

/[0-9]{3}$/

To test if 1-character string doesn’t contain number 4 or letter a

/[^a4]/

PracticeStep 1: Change your practice in Week 10 to validate an

international phone number in a function validatePhone011<space(s)><2 digits><space(s)><3 digits><space(s)><5 digits>

Step 2: Insert a textfield that represents a UK zip code. If user finishes typing and press tab to move to the next component, call the function: validateUKZipCode

Step 3: Develop the function validateUKZipCode for checking UK zip code. Start with one or two charactersFollowed by a one or two digitsFollowed by a spaceand Followed by a digit and two characters

Example: RH1 2QP R12 2QP

Objectives

• Create cookies to store bits of information• Create cookies with multiple parameters• Read cookies and use their values• Delete cookies when you are finished with them

Client Side Cookies

Cookies are text files used to store information about the user of your web site. Cookies commonly store user names and encrypted passwords for protected sites. They can also include items purchased at online stores. Many web sites store information to achieve a “personalized” page for the user.

Generally any information can be stored in a cookie.

Browsers since Netscape Navigator 2 and Internet Explorer 3 have supported the use of cookies.

Client Side Cookies

Cookies are written to and read from a text file stored on the user’s computer. This is accomplished using the cookie property of the document object.

Cookies stored in Mozilla based browsers (like Netscape) are stored in a file called “cookies.txt”. All cookies are stored in a common single text file.

Cookies stored in Internet Explorer are saved in a domain-specific text file. Each cookie has a separate text file.

Client Side Cookies Data

Cookies contain fields of information as shown below:1. The domain of the server that created the cookie2. The name of the cookie3. The string of data being stored in the cookie4. The expiration date for the cookie (optional)5. A boolean value indicating whether you need a

secure HTTP connect to access the cookie (optional)

6. A path indicating the URL path(s) that can access the cookie (optional)

Example of a real cookie

CPnull*www.missworld.tv/108817619353603078559025624297629811669*

Client Side Cookies

Cookies can be created with or without an expiration date. When they are created without an expiration date they are considered to be temporary. Otherwise they are stored (persistent) cookies.

A temporary cookie is valid and exists only for the current session of the browser. When the user exits the browser, the cookie is automatically deleted.

Cookie’s attributes

• Name:nameofcookie = value

Example: name = Bob• Expiration data

;expires=Weekday, DD-MON-YY HH:MM:SS GMTExample:

;expires= Friday, 15-Mar-06 12:00:00 GMT• Domain name

;domain=.domain_nameExample

;domain=.kajinsky.com

Cookie’s attributes

• Path;path = pathname

Example: ;path = /home• Secure

; secure

Escape and unscape() build in functions

• We can not use whitespace, semicolons, and commas.

• escape() function: encode the string object by converting all non-alphanumeric characters to their hexadecimal equivalent, preceded by %

• Unescape(): converts the encoded string back to its original format

Creating a Cookie with Javascript

• Cookie is stored by Javascript as a document object for both reading and writing cookie data

document.cookie: contains a string of name=value pairs representing the names of all the cookiers and their corresponding values.

Let’s make a cookie

Retrieving cookies from a server

Delete a cookie

Client Side Cookies Security

Most browsers do not store the information in cookies to the text file immediately. Often the information is stored in the memory of the computer. When you exit the browser, the cookies are written to file.

For e-commerce sites two additional security measures are taken:

1. Boolean value indicating whether you need a secure HTTP connection

2. A path indicating the URL path(s) that can access the cookie

Client Side Cookies Storage Limit

In most browsers you have a maximum of 20 cookies per domain. Netscape browsers have a total limit of 300 stored cookies.

You should limit each cookie to a maximum length of 2,048 characters.

Encoding Information Stored in Cookies

Cookie data cannot be stored with spaces, semicolons, or commas you should URL encode the data.

Cookies should be stored as name=value pairs. For example:userName=“William Stanek”

When storing the information, the escape() function is used. The escape function takes replaces non printable text characters as escape codes. For example, a space is stored as %20. When reading in the data in a cookie the unescape() function is used to reverse the encoding.

Client Side Cookies Expiration Date and Update

The expiration date used in a cookie is always formatted to Greenwich Mean time using the GMT method.

var now = new Date();expDate = now.toGMTString()

To update a cookie that has already been set, simply save the cookie as you did the first time it was created.

document.cookie = cookieInfo (where cookieInfo is the string of information containing the data and other cookie parameters)

Extracting Data From Cookies

Data retrieved from a cookie is a simple text string. While there is no specific JavaScript function for parsing the information from the text string, you can build a function using the indexOf() method.

The text string returned from the cookie contains only the name=value pairs of information.

var myCookie = document.cookie;

Summary

• Cookies are widely used on the WEB• They make tracking information about the user practical• There are two types of cookies:

– Temporary – no expiration date– Stored – future expiration date

• Deleting a cookie in JavaScript is accomplished by setting its expiration date to an earlier date than now

• Cookies can be updated• Cookie information must be encoded using the escape() method

and decoded using the unescape() method.

Practice

Step 1: Use the following code as your framework for this practice:

<html><head><title>Making a Cookie</title><script language="JavaScript">// insert your Javascvript code here

</script></head><body ><!-- Insert your form here --></body></html>

Practice

Step 2: Use cookie2.htm as an example: create a form that asks for a user’s favorite color:

Step 3: Also use cookie2.htm as an example, create a function makeCookie in which you store the user’s favorite color in a cookie

Step 4: Test it in IE.

Practice

Step 4: Use cookie3.htm as an example, write a function to read the user’s favorite color from a cookie and set the document background to that color. Name this function as setBackgroundColor

Step 5: Locate the body tag and change it to:<body onLoad ="javascript:setBackground();">

Step 6: Test it in IE