XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a...

transcript

Tutorial 9 New Perspectives on JavaScript, Comprehensive 1

Tutorial 9

Working with Cookies

Managing Data in a Web Site Using JavaScript Cookies

XPObjectives

• Understand the history of cookies• Know the advantages and disadvantages of

using cookies• Understand the parts of a cookie• Create a cookie for a first-time Web site

visitor

XPObjectives

• Manage the display of a personal greeting to users returning to a site

• Control the process of creating bulk cookies for use in a shopping cart

• Manage the deletion of cookies used in a shopping cart application

XPObjectives

• Manage the flow of form data using cookies• Manage cookies used to create a form

feedback page• Control the deletion of cookies used in a form

XPIntroducing Cookies

• Features of Patti’s Web site– Users should be able to

• Navigate product listing• Purchase products • Create accounts

XPFunctions of Patti’s Web Pages

XPDeveloping a Shopping Cart Application

• Back end – Mechanism that helps Web site function behind

the scenes

• Front end– Visible part of a Web site

XPDeveloping a Shopping Cart Application

• Server-side shopping cart– Shopping cart application controlled via server

• Client-side shopping cart – Application controlled via user’s browser with

JavaScript

XPClient-Side and Server-Side Shopping Cart Applications

XPUnderstanding Cookies

• Session– Each visit to a Web page by a user

• Cookie– Text file that stores data from a user’s interaction

with a specific Web site– Persistent

• Stateless protocol– No way to track information

XPUnderstanding Cookies

• Client-side cookie– Initiated by a page coming from a Web server – Created in a browser’s memory

• Server-side cookie – Created and stored on a server using server-side

scripting languages

• Privacy statement – Explains how Web site protects privacy of those

who visit and provide information

XPTypes of Cookies

• First-party cookie – Cookie created from the Web site you are visiting

• Third-party cookie – Cookie created at different Web site and is then

sent to Web site you are currently visiting

XPTypes of Cookies

• Unsatisfactory cookie – Cookie that might allow access to personally

identifiable information without your knowledge

• Compact privacy policy– Code sent to a user’s browser that identifies the

nature of a cookie

XPCustomized Cookie Settings in Internet Explorer

XPCreating a Cookie

• Syntaxdocument.cookie = "name = value; expires = expiration; path = path;

domain = domain; secure";

XPCookie Attributes

XPThe name and value Properties

• Each cookie stores– Single piece of information as its value, which is

paired with a name when cookie is created

• Dynamically generating parameters for cookieusername = document.form1.uname.value;

document.cookie = "input1 = "+username;

XPThe expires Property

• Cookie – Can be assigned an expiration date

• To assign expiration dateexpires = Day, DD-Mmm-YY HH:MM:SS GMT

• Per session cookie – Exists only for as long as the browser is

communicating with the Web site

XPThe path Property

• By default– Cookie available only to page where it originated

• path attribute– Used to set the pages to which a cookie is

available

XPThe domain Property

• Used to specify – URL of domain to which you want to make cookie

available

• If no value is specified for domain property– Its value is set to the server of origin

XPThe secure Property

• The final property you can set for a cookie• Enables you to specify that

– Cookie is to be transmitted over the HTTPS protocol

• To set a cookie as a secure cookie– Add the parameter “secure” without a value

XPWorking with Cookie Values

• Patti’s Web site – Designed so that user input is first checked using

validation script named checkForm()

• checkForm() verifies that user– Completed the form fields– Entered the same password twice

XPExtracting Cookie Values

XPPopulating Form Fields with Cookie Values

• Assigning value of user variable to username field

function retrieveAccount() {

document.login.username.value=user;

XPUsing Cookie Values to Create a Personalized Greeting

• Code to personalize the home page<script type="text/javascript">if((fn != "")&&(ln != "")){document.write("Hello, "+fn+" "+ln+". ")}</script>

XPImplementing a Shopping Cart

• New requirements for Web site– Expand site’s use of cookies to add shopping cart

functionality– When user selects an item

• Item’s name, price information, and quantity should be placed in cart

– Users should be able to enter quantity in text box – Users should be able to receive immediate

feedback

XPShopping Cart Solution Using all Available Cookies

XPShopping Cart Solution Minimizing Cookie Use

XPCode to Create Cookies Containing Data on Each Product

XPDisplaying Shopping Cart Contents

• showOrder() function– Extracts substrings from the cookie value – Totals the cost of each product ordered – Displays total cost just below list of items in the

shopping cart– Creates dynamic table with rows and columns to

support displaying data

XPShopping Cart Display

XPForm Control Using Cookies

• Additional requirement for Web site– Feedback form that

• Allows users to verify information entered on the patti_cart.htm page

XPPreview of the Form Feedback Page

XPPreserving Form Data

• Process of collecting and saving form data– To be used later in functioning of Web site during

the current session or – For retrieval at a later date in a future session

• makeFormCookie() function – Performs the preserving form data process

XPProcess of Preserving Form Data on Patti’s Web Site

XPThe makeFormCookie() Function

XPCreating a Form Feedback Page

• Form feedback page allows users to – Review their input from the form – Verify that input is accurate

XPCode to Change Null Values to Empty Strings

XPCode to Retrieve Cookie Values and Pass them to Individual Variables

XPThe Completed Form Feedback Page for Patti’s Web Site

XPDeleting Cookies

• To control deletion of cookies– Set date and time you want cookie deleted– Develop function that deletes cookie when it is

called

• To expire cookies on Patti’s Web site– Create function named zapOrder()

XPCode for the zapOrder() Function

XPThe Confirmation Page of Patti’s Web Site

XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a...

Documents