Embed Size (px)
Citation preview
JavaScriptPart 9
George Mason University
June 23, 2010
Topics
• Cookies
• QueryString
• Menus
Cookies
• Cookies are a small amount of data stored by the web browser and associated with a particular web page or site
• Cookies are transient by default; the values go away when the user exits the browser
• If you want to have the cookie last longer, you need to specify the expiration date of the cookie
Cookie Duration
• The original way to specify cookie duration was by setting an expiration date in the future
• This still works, but now there is a max-age attribute which specifies the lifetime of the cookie in seconds
• Using either of these causes the browser to save the cookie in a file on the hard drive
Cookie Access
• By default, a cookie is accessible to the web page that created it, any other page in the same folder, or any subdirectories of that folder
• You can set the path attribute to allow access from other folders
Cookie Domain
• By default, cookies are only accessible to pages on the same server from which they were set
• Large web sites however may utilize several servers and the domain attribute can make the cookie available on multiple servers
• You cannot make the cookie available to another domain
Setting Cookies
• document.cookie = "cookieName"=cookieValue + ",expires=" + expirationDateGMT+ "; path=" + URLpath + "; domain"=siteDomain
Only the initial name/value pair is required; often the cookieValue will have been entered by the user in a form
-To change the value of a cookie, set its value again using the same name, path, and domain
Deleting Cookies
• To delete a cookie, specify a max-age attribute of 0 or use the expires attribute and specify an expiration date in the past
Reading Cookies
• document.cookie returns a String that contains all cookies that apply to the current document
• This is a set of name-value pairs, separated by semicolons and does not include any of the attributes that may have been set for the cookie
• You then parse this string using the String methods of indexOf(), substring(), and split()
Parsing Cookies
The split() method creates an array of Strings; for example, since the name value pairs are separated by semicolons; one can get the individual cookies by the following code:
allcookies = document.cookie;
cookieArray = allcookies.split(";");
Query String
• The query string is the portion of a URL following a question mark
• The query string consists of a series of name=value pairs, separated by &'s
• The query string can be formed by submitting a form using the GET method or by creating a link with the name/value pairs embedded in the link
Query Strings and JavaScript
• The query string of a page can be accessed by window.location.search – this includes the ?
• The query string can be parsed using the same String methods and techniques used in the parsing of cookies
• Server-side programming languages provide methods to obtain the value for a specified name in a query string without having to rely on String methods
Menus
• Although we've seen that menus can be done just with CSS, more commonly they are done with a combination of JavaScript and CSS
• CSS properties• visibility rather than display• positioning – absolute rather than relative• left and top• text-decoration
Menus (cont.)
• JavaScript• onmouseover and onmouseout event handlers
used• dynamically change CSS properties, primarily
visibility
Menus<style>
#m1, #m2 {position:absolute; height: 100px; width: 200px;}
#t1, #t2 {visibility:hidden; position:absolute; left:50px;}
</style></head>
<body><span id="m1" onmouseover="document.getElementById('t1').style.visibility='visible';
onmouseout="document.getElementById('t1').style.visibility='hidden';">
<a href="http://www.nba.com" >NBA</a><br />
<div id="t1"><a href="http://www.lalakers.com">Lakers</a><br />
<a href="http://bostonceltics.com">Celtics</a></div></span><br />
<span id="m2" onmouseover="document.getElementById('t2').style.visibility='visible';"
onmouseout="document.getElementById('t2').style.visibility='hidden';>
<a href="http://www.fcc.gov.com" >FCC</a><br />
<div id="t2"><a href="http://www.nbc.com">NBC</a><br />
<a href="http://www.cbs.com">CBS</a>
</div>
</span>
Content
