XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a...
-
date post
15-Jan-2016 -
Category
Documents
-
view
218 -
download
0
Transcript of XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a...
![Page 1: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/1.jpg)
Tutorial 9 New Perspectives on JavaScript, Comprehensive 1
XP
Tutorial 9
Working with Cookies
Managing Data in a Web Site Using JavaScript Cookies
![Page 2: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/2.jpg)
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
![Page 3: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/3.jpg)
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
![Page 4: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/4.jpg)
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
![Page 5: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/5.jpg)
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
![Page 6: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/6.jpg)
Tutorial 9 New Perspectives on JavaScript, Comprehensive 6
XPFunctions of Patti’s Web Pages
![Page 7: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/7.jpg)
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
![Page 8: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/8.jpg)
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
![Page 9: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/9.jpg)
Tutorial 9 New Perspectives on JavaScript, Comprehensive 9
XPClient-Side and Server-Side Shopping Cart Applications
![Page 10: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/10.jpg)
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
![Page 11: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/11.jpg)
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
![Page 12: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/12.jpg)
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
![Page 13: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/13.jpg)
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
![Page 14: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/14.jpg)
Tutorial 9 New Perspectives on JavaScript, Comprehensive 14
XPCustomized Cookie Settings in Internet Explorer
![Page 15: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/15.jpg)
Tutorial 9 New Perspectives on JavaScript, Comprehensive 15
XPCreating a Cookie
• Syntaxdocument.cookie = "name = value; expires = expiration; path = path;
domain = domain; secure";
![Page 16: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/16.jpg)
Tutorial 9 New Perspectives on JavaScript, Comprehensive 16
XPCookie Attributes
![Page 17: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/17.jpg)
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;
![Page 18: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/18.jpg)
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
![Page 19: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/19.jpg)
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
![Page 20: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/20.jpg)
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
![Page 21: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/21.jpg)
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
![Page 22: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/22.jpg)
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
![Page 23: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/23.jpg)
Tutorial 9 New Perspectives on JavaScript, Comprehensive 23
XPExtracting Cookie Values
![Page 24: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/24.jpg)
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;
}
![Page 25: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/25.jpg)
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>
![Page 26: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/26.jpg)
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
![Page 27: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/27.jpg)
Tutorial 9 New Perspectives on JavaScript, Comprehensive 27
XPShopping Cart Solution Using all Available Cookies
![Page 28: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/28.jpg)
Tutorial 9 New Perspectives on JavaScript, Comprehensive 28
XPShopping Cart Solution Minimizing Cookie Use
![Page 29: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/29.jpg)
Tutorial 9 New Perspectives on JavaScript, Comprehensive 29
XPCode to Create Cookies Containing Data on Each Product
![Page 30: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/30.jpg)
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
![Page 31: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/31.jpg)
Tutorial 9 New Perspectives on JavaScript, Comprehensive 31
XPShopping Cart Display
![Page 32: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/32.jpg)
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
![Page 33: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/33.jpg)
Tutorial 9 New Perspectives on JavaScript, Comprehensive 33
XPPreview of the Form Feedback Page
![Page 34: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/34.jpg)
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
![Page 35: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/35.jpg)
Tutorial 9 New Perspectives on JavaScript, Comprehensive 35
XPProcess of Preserving Form Data on Patti’s Web Site
![Page 36: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/36.jpg)
Tutorial 9 New Perspectives on JavaScript, Comprehensive 36
XPThe makeFormCookie() Function
![Page 37: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/37.jpg)
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
![Page 38: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/38.jpg)
Tutorial 9 New Perspectives on JavaScript, Comprehensive 38
XPCode to Change Null Values to Empty Strings
![Page 39: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/39.jpg)
Tutorial 9 New Perspectives on JavaScript, Comprehensive 39
XPCode to Retrieve Cookie Values and Pass them to Individual Variables
![Page 40: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/40.jpg)
Tutorial 9 New Perspectives on JavaScript, Comprehensive 40
XPThe Completed Form Feedback Page for Patti’s Web Site
![Page 41: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/41.jpg)
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()
![Page 42: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/42.jpg)
Tutorial 9 New Perspectives on JavaScript, Comprehensive 42
XPCode for the zapOrder() Function
![Page 43: XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.](https://reader036.fdocuments.us/reader036/viewer/2022062409/56649d645503460f94a46f95/html5/thumbnails/43.jpg)
Tutorial 9 New Perspectives on JavaScript, Comprehensive 43
XPThe Confirmation Page of Patti’s Web Site