1JavaScript Lecture IIHTTP in OperationClient makes TCP connection to server at www.utoronto.ca:80.1.Server at www.utoronto.ca:80 accepts connection.2.Client sends HTTP request containing URL.3.Server receives request, and sends response containing text of /index.html.4.2…HTTP in OperationClient receives and parses response; finds links to 4 images.5.Server closes connection.…Client makes TCP connection to server at www.utoronto.ca:80.6.Server at www.utoronto.ca:80 accepts connection.7.Client sends HTTP request containing URL of first image…8.Cookies• Variables set by a webpage and stored on a user’s computer• Sent to web pages with the correct domain and path• Cookies expire (are deleted from the user’s computer) after a certain amount of time3… Cookies (cont)• Mostly used to store user preferences, but can be used for other purposes as well. – Can you think of one?• The window.document.cookie is the path to the Cookie object in JavaScript.– window.document.cookie acts like a String with some unique propertiesWriting Cookies• Cookies are created or modified by writingdocument.cookie = cookieString;– cookieString is a ‘;’ delimited list of name=value pairs of all the properties of a cookiedocument.cookie=“numVisit=0;expires=1000”• Best way to set an expiry date is to use the JavaScript Date object to get a GMT date [ toGMTString() ]. GMT Example: Thu, 31-Dec-1998 00:00:00 GMT• Alternatively you can set it (as above) using milliseconds from the current time.http://www.webreference.com/js/column8/functions.html4Writing Cookies• Cookie object is unusual in that when you add a ‘cookieString’ to it, it does to become that value, but instead appends the new cookie to any other cookies it might be holding.document.cookie=“numVisit=0;expires=10000”document.cookie=“name=Shawn;expires=10000”• HTTP Server Sends…Set-Cookie: name=value; expires=date; path=pathname; domain=domainname; secure Reading Cookies• Browser Sends…Cookie: name1=value1; name2=value2 ... • The only part of the cookie that is visible when parsing/printing document.cookie is the name=value pair. All other attributes (expiry, etc…) are removed when sending a cookie. • What happens when there are multiple cookies available?document.writeln( document.cookie ) would give … “numVisit=0;name=Shawn”5Reading Multiple Cookies• Each cookie has a name=value pair which are delimited by a ‘;’. • There are no built-in functions for parsing out name=value, so we must write our own. • How would we parse it out?function getCookie(name) { var dc = document.cookie; var prefix = name + "="; var begin = dc.indexOf("; " + prefix); if (begin == -1) { begin = dc.indexOf(prefix); if (begin != 0) {return null; }} else { begin += 2; }var end = document.cookie.indexOf(";", begin); if (end == -1) end = dc.length; return unescape(dc.substring(begin + prefix.length, end)); } …Cookies?function somethingCookie(name, path, domain) { if (getCookie(name)) { document.cookie = name + "=" + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + ";expires=Thu, 01-Jan-70 00:00:01 GMT"; } }What does this code do?6Cookie Example• Record the number of times you have visited a webpageJavaScript Security• Why is JavaScript a security concern?• JavaScript security model is based on Java. All code is run in a sandboxed environment.– Browser environment is the ‘sandbox’• No access to file-system or OS environment.– Same-origin policy on URLs• Without it we could record keystrokes or steal login cookies• If a window.open() call passes the security check then elements of the open window can be controlled by the window that opened it (AKA parent document).– Try opening a window to google.com, then using the object returned from the open() method to track the pages the user is viewing. Why won’t this work?7… JavaScript Security (cont)• Don’t– Password protect your site with JavaScript•Do– Write your email in JavaScript to protect it (spiders will pass it by)Debugging Tools• Mozila Firefox interactive JavaScript Console. – Shows all errors/warnings during run-time• Mozilla Firefox DOM inspector– Shows a tree structure of the current document• Mozilla Firefox Web Developer 0.9.3 (extension)– Display Form Details, View JavaScript Code, View Cookie Information• Mozilla Firefox JavaScript Debugger 0.9.84 (extension)– Interactive walk-through of JavaScript code8DebuggingAlthough Greg Says Its Bad …• Printing Variables– Print out variables in the current page– Open a new window and print debugging information to a child window– How? Lets see some code…• Using a JavaScript Debugger and JavaScript Console.• Using a decent JavaScript development environment.– Notepad and VI are evil.– Eclipse JavaScript?Debugging• 4 Most Common Mistakes– Misspellings• Case sensitivity• Get your operators right (‘==‘ vs ‘=‘)– Unbalanced Delimiters• Commas, Quotes, Brackets• Escaping special characters– Misplaced Elements• Wrong order• Code location (HEAD vs. BODY)• Misplaced variable– Mixed Variable Types• If something is a String and you think it’s a number.• Assigning a property to a primitive data-type (1.me = “Shawn” ??)9Brief Look at HTML Frames• Why are Frames good?– Keep one part of the page static while changing another part– Reduced bandwidth and server load• Why are Frames evil?– Broken framesets (e.g. users coming in from a search engine)– Some browsers (Blackberry) do not support frames– Bookmarks– Back Button Doesn’t Work– Reduced Usable Space– Problems with Printing• Generally Framesets are best and most commonly used for ‘navigation frames’JavaScript and HTML Frames• Accessing the “frameset” document– Use the ‘parent’ object to link to the window object of the frameset document.• Number of frames– parent.frames.length• Access frame Window object– parent.frames[0];– parent.frames[“menu”]– parent.menu10JavaScript Frames Example• Button in one frame changes a value in another frameXML Primer• A basic XML document contains elements nested within other elements• An element consists of an opening label, text, and a closing label<person>Shawn K</person>• Elements can also have attributes– Attributes syntax is: name=“description”<person type=“student”>Shawn K</person>• Elements are most always