JavaScript Part 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 #m1, #m2 {position:absolute; height: 100px; width: 200px;} #t1, #t2 {visibility:hidden; position:absolute; left:50px;} <span id="m1" onmouseover="document.getElementById('t1').style.visibility='visible'; onmouseout="document.getElementById('t1').style.visibility='hidden';"> NBA Lakers Celtics <span id="m2" onmouseover="document.getElementById('t2').style.visibility='visible';" onmouseout="document.getElementById('t2').style.visibility='hidden';> FCC NBC CBS Content