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

XP Tutorial 9New Perspectives on JavaScript, Comprehensive2 Objectives 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

XP Tutorial 9New Perspectives on JavaScript, Comprehensive3 Objectives 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

XP Tutorial 9New Perspectives on JavaScript, Comprehensive4 Objectives 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

XP Tutorial 9New Perspectives on JavaScript, Comprehensive5 Introducing Cookies Features of Patti’s Web site –Users should be able to Navigate product listing Purchase products Create accounts

XP Tutorial 9New Perspectives on JavaScript, Comprehensive6 Functions of Patti’s Web Pages

XP Tutorial 9New Perspectives on JavaScript, Comprehensive7 Developing a Shopping Cart Application Back end –Mechanism that helps Web site function behind the scenes Front end –Visible part of a Web site

XP Tutorial 9New Perspectives on JavaScript, Comprehensive8 Developing 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

XP Tutorial 9New Perspectives on JavaScript, Comprehensive9 Client-Side and Server-Side Shopping Cart Applications

XP Tutorial 9New Perspectives on JavaScript, Comprehensive10 Understanding 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

XP Tutorial 9New Perspectives on JavaScript, Comprehensive11 Understanding 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

XP Tutorial 9New Perspectives on JavaScript, Comprehensive12 Types 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

XP Tutorial 9New Perspectives on JavaScript, Comprehensive13 Types 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

XP Tutorial 9New Perspectives on JavaScript, Comprehensive14 Customized Cookie Settings in Internet Explorer

XP Tutorial 9New Perspectives on JavaScript, Comprehensive15 Creating a Cookie Syntax document.cookie = "name = value; expires = expiration; path = path; domain = domain; secure";

XP Tutorial 9New Perspectives on JavaScript, Comprehensive16 Cookie Attributes

XP Tutorial 9New Perspectives on JavaScript, Comprehensive17 The 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 cookie username = document.form1.uname.value; document.cookie = "input1 = "+username;

XP Tutorial 9New Perspectives on JavaScript, Comprehensive18 The expires Property Cookie –Can be assigned an expiration date To assign expiration date expires = 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

XP Tutorial 9New Perspectives on JavaScript, Comprehensive19 The 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

XP Tutorial 9New Perspectives on JavaScript, Comprehensive20 The 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

XP Tutorial 9New Perspectives on JavaScript, Comprehensive21 The 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

XP Tutorial 9New Perspectives on JavaScript, Comprehensive22 Working 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

XP Tutorial 9New Perspectives on JavaScript, Comprehensive23 Extracting Cookie Values

XP Tutorial 9New Perspectives on JavaScript, Comprehensive24 Populating Form Fields with Cookie Values Assigning value of user variable to username field function retrieveAccount() { document.login.username.value=user; }

XP Tutorial 9New Perspectives on JavaScript, Comprehensive25 Using Cookie Values to Create a Personalized Greeting Code to personalize the home page if((fn != "")&&(ln != "")){document.write("Hello, "+fn+" "+ln+". ")}

XP Tutorial 9New Perspectives on JavaScript, Comprehensive26 Implementing 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

XP Tutorial 9New Perspectives on JavaScript, Comprehensive27 Shopping Cart Solution Using all Available Cookies

XP Tutorial 9New Perspectives on JavaScript, Comprehensive28 Shopping Cart Solution Minimizing Cookie Use

XP Tutorial 9New Perspectives on JavaScript, Comprehensive29 Code to Create Cookies Containing Data on Each Product

XP Tutorial 9New Perspectives on JavaScript, Comprehensive30 Displaying 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

XP Tutorial 9New Perspectives on JavaScript, Comprehensive31 Shopping Cart Display

XP Tutorial 9New Perspectives on JavaScript, Comprehensive32 Form Control Using Cookies Additional requirement for Web site –Feedback form that Allows users to verify information entered on the patti_cart.htm page

XP Tutorial 9New Perspectives on JavaScript, Comprehensive33 Preview of the Form Feedback Page

XP Tutorial 9New Perspectives on JavaScript, Comprehensive34 Preserving 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

XP Tutorial 9New Perspectives on JavaScript, Comprehensive35 Process of Preserving Form Data on Patti’s Web Site

XP Tutorial 9New Perspectives on JavaScript, Comprehensive36 The makeFormCookie() Function

XP Tutorial 9New Perspectives on JavaScript, Comprehensive37 Creating a Form Feedback Page Form feedback page allows users to –Review their input from the form –Verify that input is accurate

XP Tutorial 9New Perspectives on JavaScript, Comprehensive38 Code to Change Null Values to Empty Strings

XP Tutorial 9New Perspectives on JavaScript, Comprehensive39 Code to Retrieve Cookie Values and Pass them to Individual Variables

XP Tutorial 9New Perspectives on JavaScript, Comprehensive40 The Completed Form Feedback Page for Patti’s Web Site

XP Tutorial 9New Perspectives on JavaScript, Comprehensive41 Deleting 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()

XP Tutorial 9New Perspectives on JavaScript, Comprehensive42 Code for the zapOrder() Function

XP Tutorial 9New Perspectives on JavaScript, Comprehensive43 The Confirmation Page of Patti’s Web Site