Post on 15-Jan-2016
Tutorial 9 New Perspectives on JavaScript, Comprehensive 1
XP
Tutorial 9
Working with Cookies
Managing Data in a Web Site Using JavaScript Cookies
Tutorial 9 New Perspectives on JavaScript, Comprehensive 2
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
Tutorial 9 New Perspectives on JavaScript, Comprehensive 3
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
Tutorial 9 New Perspectives on JavaScript, Comprehensive 4
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
Tutorial 9 New Perspectives on JavaScript, Comprehensive 5
XPIntroducing Cookies
• Features of Patti’s Web site– Users should be able to
• Navigate product listing• Purchase products • Create accounts
Tutorial 9 New Perspectives on JavaScript, Comprehensive 6
XPFunctions of Patti’s Web Pages
Tutorial 9 New Perspectives on JavaScript, Comprehensive 7
XPDeveloping a Shopping Cart Application
• Back end – Mechanism that helps Web site function behind
the scenes
• Front end– Visible part of a Web site
Tutorial 9 New Perspectives on JavaScript, Comprehensive 8
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
Tutorial 9 New Perspectives on JavaScript, Comprehensive 9
XPClient-Side and Server-Side Shopping Cart Applications
Tutorial 9 New Perspectives on JavaScript, Comprehensive 10
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
Tutorial 9 New Perspectives on JavaScript, Comprehensive 11
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
Tutorial 9 New Perspectives on JavaScript, Comprehensive 12
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
Tutorial 9 New Perspectives on JavaScript, Comprehensive 13
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
Tutorial 9 New Perspectives on JavaScript, Comprehensive 14
XPCustomized Cookie Settings in Internet Explorer
Tutorial 9 New Perspectives on JavaScript, Comprehensive 15
XPCreating a Cookie
• Syntaxdocument.cookie = "name = value; expires = expiration; path = path;
domain = domain; secure";
Tutorial 9 New Perspectives on JavaScript, Comprehensive 16
XPCookie Attributes
Tutorial 9 New Perspectives on JavaScript, Comprehensive 17
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;
Tutorial 9 New Perspectives on JavaScript, Comprehensive 18
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
Tutorial 9 New Perspectives on JavaScript, Comprehensive 19
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
Tutorial 9 New Perspectives on JavaScript, Comprehensive 20
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
Tutorial 9 New Perspectives on JavaScript, Comprehensive 21
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
Tutorial 9 New Perspectives on JavaScript, Comprehensive 22
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
Tutorial 9 New Perspectives on JavaScript, Comprehensive 23
XPExtracting Cookie Values
Tutorial 9 New Perspectives on JavaScript, Comprehensive 24
XPPopulating Form Fields with Cookie Values
• Assigning value of user variable to username field
function retrieveAccount() {
document.login.username.value=user;
}
Tutorial 9 New Perspectives on JavaScript, Comprehensive 25
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>
Tutorial 9 New Perspectives on JavaScript, Comprehensive 26
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
Tutorial 9 New Perspectives on JavaScript, Comprehensive 27
XPShopping Cart Solution Using all Available Cookies
Tutorial 9 New Perspectives on JavaScript, Comprehensive 28
XPShopping Cart Solution Minimizing Cookie Use
Tutorial 9 New Perspectives on JavaScript, Comprehensive 29
XPCode to Create Cookies Containing Data on Each Product
Tutorial 9 New Perspectives on JavaScript, Comprehensive 30
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
Tutorial 9 New Perspectives on JavaScript, Comprehensive 31
XPShopping Cart Display
Tutorial 9 New Perspectives on JavaScript, Comprehensive 32
XPForm Control Using Cookies
• Additional requirement for Web site– Feedback form that
• Allows users to verify information entered on the patti_cart.htm page
Tutorial 9 New Perspectives on JavaScript, Comprehensive 33
XPPreview of the Form Feedback Page
Tutorial 9 New Perspectives on JavaScript, Comprehensive 34
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
Tutorial 9 New Perspectives on JavaScript, Comprehensive 35
XPProcess of Preserving Form Data on Patti’s Web Site
Tutorial 9 New Perspectives on JavaScript, Comprehensive 36
XPThe makeFormCookie() Function
Tutorial 9 New Perspectives on JavaScript, Comprehensive 37
XPCreating a Form Feedback Page
• Form feedback page allows users to – Review their input from the form – Verify that input is accurate
Tutorial 9 New Perspectives on JavaScript, Comprehensive 38
XPCode to Change Null Values to Empty Strings
Tutorial 9 New Perspectives on JavaScript, Comprehensive 39
XPCode to Retrieve Cookie Values and Pass them to Individual Variables
Tutorial 9 New Perspectives on JavaScript, Comprehensive 40
XPThe Completed Form Feedback Page for Patti’s Web Site
Tutorial 9 New Perspectives on JavaScript, Comprehensive 41
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()
Tutorial 9 New Perspectives on JavaScript, Comprehensive 42
XPCode for the zapOrder() Function
Tutorial 9 New Perspectives on JavaScript, Comprehensive 43
XPThe Confirmation Page of Patti’s Web Site