1. JavaScript, Part 4 Instructor: Charles Moen CSCI/CINF 4230

2. DHTML (continued)

3. 3 Browser Object Model (BOM)  Objects that we can use to interact with the browser  Each of these objects has properties, methods, and events JavaScript (Underwood, Koch, Ding‏) Window Document History Navigator Location Screen

4. 4 window Object  Represents the entire browser window, everything in it, and every part of it that is accessible to JavaScript  The DOM is contained within the window object  Some properties: closed – returns true or false, based on whether a particular window is closed name – a name that a script can use to refer to a particular window; the main window open in the browser does not have a name by default self – refers to the current window window – refers to the current window  Some methods: alert() confirm() prompt() JavaScript (Underwood, Koch‏)

5. 5 navigator Object  Represents the browser that was used to request the page  Some properties: appName – name of the browser, but not reliable appVersion – version number of the browser, but not meaningful for us cookieEnabled – true or false userAgent – can be used for “browser sniffing”  Examine the properties: JavaScript (Underwood, Koch, Yue‏) function getProperties() { var navProperties; for (var prop in navigator) { navProperties += prop + ": " + navigator[prop] + "\n"; } alert(navProperties); }

6. 6 Popup Window  An extra window that shows additional information, and allows the user to keep the current page open at the same time  Objections to popups Users are often annoyed by popups The default setting of many browsers is to block popups Many users run popup killer programs JavaScript popups don’t work when JavaScript is disabled JavaScript (Koch‏)

7. 7 Opening a Popup Window  Simplest approach is to use the “target” attribute JavaScript (Koch‏) Open new window

8. 8 Opening a Popup Window  Can also be opened by JavaScript JavaScript (Koch‏) function popup(url) { window.open(url,"Popup","height=480,width=640"); } Open a popup

9. 9 open Method  Third argument contains attributes of the window JavaScript (Underwood, Koch‏) window.open(url,"Popup","height=480,width=640"); URL of the content of the new window, or an empty string Name of the new window Attributes height width left – offset from the left in pixels top – offset from the top in pixels resizable – if yes, allows user to resize scrollbars – if yes, adds scrollbars toolbar – if yes, adds navigation toolbar menubar – if yes, adds the menu bar location – if yes, adds the address bar status – if yes, adds the status bar (at bottom) directories – if yes, adds directories toolbar Using the name of the attribute alone sets the value to yes

10. HTTP

11. 11 HTTP  Hypertext Transfer Protocol Language for communications between the browser and the Web server Uses a TCP connection over the Internet  Steps for HTTP communications The client uses a URL to open a TCP connection with the server The client sends a request to the server at that URL The server sends a response to the client The TCP connection is closed  The standard was developed by the World Wide Web Consortium and the Internet Engineering Task Force (IETF) HTTP (Wikipedia, Yue‏)

12. 12 URL Uniform Resource Locator The address of a document on the Web HTTP (Ding, Spainhour, Schultz)‏ http://sce.uhcl.edu/moenc/index.html Protocol HTTP is the language for communicating between the browser and server

13. 13 HTTP Request  There are eight request methods GET – user data is put in the query string of the URL POST – user data is put in the message body of the request HEAD – retrieve only the header, not the body of the response PUT – upload a resource DELETE – delete a resource TRACE – echoes the request for troubleshooting OPTIONS – returns the methods supported by a particular server CONNECT – used with secure https connections HTTP (Wikipedia, Yue‏)

14. 14 HTTP Request HTTP (Spainhour, W3Schools) When the user submits a form, the browser sends an HTTP request over the Internet to a server, and this request passes the value of every control in the form The server sends an HTTP response to the browser containing HTML text GET /moen/welcome.aspx?name=Charles+Moen&location=UHCL HTTP/1.0 This is what the server “sees” in the request The browser may also append header information, such as: Host: dcm.uhcl.edu User-Agent: Mozilla/5.0... Referer: http://dcm.uhcl.edu/moen/hello.html

15. 15 HTTP is Stateless  The server does not “remember” anything about previous requests  For any particular request, the user could be someone entirely new or it could be a repeat visitor who has been sending a request every few minutes, but with HTTP, the server has no way to know. HTTP (Koch, Yue‏)

16. 16 HTTP Request Parts 1.Request header Method field, resource identifier, and HTTP version on the first line Fields, such as the accept fields with information about the client 2.A blank line 3.The message body (for POST requests) HTTP (Yue, Spainhour)‏ GET /moen/welcome.aspx?name=Charles+Moen&location=UHCL HTTP/1.0 Host: dcm.uhcl.edu User-Agent: Mozilla/5.0 [shortened to save space on this slide] Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Referer: http://dcm.uhcl.edu/moen/hello.html GET /moen/welcome.aspx?name=Charles+Moen&location=UHCL HTTP/1.0 Host: dcm.uhcl.edu User-Agent: Mozilla/5.0 [shortened to save space on this slide] Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Referer: http://dcm.uhcl.edu/moen/hello.html Method field HTTP version Resource identifier Fields with information about the client [ a blank line here ]

17. 17 HTTP GET Request and Parameters  method="get"  The name of every form control and its value is appended to the URL of the form handler as part of the query string  The form handler on the server can read and process the values of these query string parameters HTTP (W3Schools, Schultz)‏ URL of the form handler Question mark follows the URL GET /createOrder.aspx?quantity=1&meat=Ham&cheese=yes&lettuce=on&tomato=on&price=4.99 HTTP/1.0 Query string Ampersands separate the name-value pairs quantity=1 Name of the control Value entered by user (visible in the navigation field of the browser)

18. HTTP POST Request and Parameters  method="post"  The name of every form control and its value is placed in the body of the request  The form handler on the server can read and process the values of these parameters in the body of the request  The name-value pairs are not visible in the navigation field of the browser HTTP (Spainhour, Schultz)‏ URL of the form handler POST /createOrder.aspx HTTP/1.0 User-Agent: Mozilla/2.02Gold (WinNT; I) Accept: image/gif, image/x-xbitmap, image/jpeg, */* Host: www.oreilly.com Content-type: application/x-www-form-urlencoded Content-length: 62 quantity=1&meat=Ham&cheese=yes&lettuce=on&tomato=on&price=4.99 POST /createOrder.aspx HTTP/1.0 User-Agent: Mozilla/2.02Gold (WinNT; I) Accept: image/gif, image/x-xbitmap, image/jpeg, */* Host: www.oreilly.com Content-type: application/x-www-form-urlencoded Content-length: 62 quantity=1&meat=Ham&cheese=yes&lettuce=on&tomato=on&price=4.99 Header fields 18 Body section

19. 19 HTTP GET Request and Parameters  A GET request can be created without using a form HTTP Order one ham sandwich

20. 20 HTTP Response HTTP (Spainhour, W3Schools) When the user submits a form, the browser sends an HTTP request over the Internet to a server, and this request passes the value of every control in the form The server sends an HTTP response to the browser containing HTML text HTTP/1.x 200 OK Cache-Control: private Date: Mon, 27 Oct 2008 00:03:49 GMT Content-Type: text/html; charset=utf-8 Server: Microsoft-IIS/6.0 X-Powered-By: ASP.NET X-AspNet-Version: 2.0.50727 Content-Encoding: gzip Vary: Accept-Encoding Transfer-Encoding: chunked Welcome HTTP/1.x 200 OK Cache-Control: private Date: Mon, 27 Oct 2008 00:03:49 GMT Content-Type: text/html; charset=utf-8 Server: Microsoft-IIS/6.0 X-Powered-By: ASP.NET X-AspNet-Version: 2.0.50727 Content-Encoding: gzip Vary: Accept-Encoding Transfer-Encoding: chunked Welcome This is what the browser “sees” in the response

21. 21 HTTP Response Parts 1.Response header HTTP version, status code, and explanation on the first line Fields with information about the server 2.A blank line 3.The response body (the HTML) HTTP (Yue, Spainhour)‏ Status code Response body Fields with information about the server and response A blank line here HTTP/1.x 200 OK Cache-Control: private Date: Mon, 27 Oct 2008 00:03:49 GMT Content-Type: text/html; charset=utf-8 Server: Microsoft-IIS/6.0 X-Powered-By: ASP.NET X-AspNet-Version: 2.0.50727 Content-Encoding: gzip Vary: Accept-Encoding Transfer-Encoding: chunked Welcome

22. 22 HTTP Response Status Codes  General meanings 200 – 299 Success 300 – 399 Redirection to another location or URL hasn’t changed 400 – 599 Errors HTTP (Wikipedia, Yue‏) CodeMeaning 400Wrong request syntax 401Authorization required 402No Chargeto field on a request for a paid service 403Forbidden resource 404The server cannot find the URL requested 405Accessing the resource using a method not allowed 500The server has encountered an internal error and cannot continue with the request 501The server does not support the method of a legal request 502Secondary server does not return a valid response 503The service is unavailable because the server is too busy

23. Cookies

24. 24 Cookie  A small text file used to keep track of users Either created by JavaScript or sent in the HTTP response Stored on the user’s computer Automatically sent back to the same server in the HTTP request until the cookie expires Contains name-value pairs Programs can store information and retrieve it later Cookies are not viruses or spam or executable programs  Invented by Netscape Cookies (Koch, Wikipedia‏)

25. 25 Why do we use cookies?  Because HTTP is stateless, we use cookies to keep track of the user  Some typical uses Storing user preferences Storing login information Storing shopping cart information Tracking usage statistics Cookies (Koch‏)

26. 26 What is stored in a cookie?  Some browsers, e.g. FireFox, can show you the content of all your cookies In Firefox: Tools > Options... > Privacy > Show Cookies...  A cookie stores name-value pairs The first pair sets the cookie name and its content, such as: mycookie=Charles; expires – if not set, the cookie expires when the browser is closed expires=Tue, 27 Oct 2008 13:57:40 UTC; path – by default, the directory of the page that set the cookie; to set to all pages on your site, use path=/; domain – the domain of the page that set the cookie domain=uhcl.edu; Cookies (Koch‏)

27. 27 What is wrong with cookies?  Some users disable or delete cookies  They are not portable They are stored on one particular computer Different browsers do not share cookies  Privacy can be compromised by third-party cookies A page may contain images or ads from another domain; the cookies that they set are called third-party cookies, because they belong to a domain that’s different from the rest of the page Advertisers can use cookies to track a particular user across multiple web sites and build a profile of that user Cookies (Koch, Wikipedia‏)

28. 28 Setting a cookie with JavaScript Cookies (Koch, W3Schools‏) function setCookie(cookiename,value,expiredays) { var expdate=new Date(); expdate.setDate(expdate.getDate() + expiredays); document.cookie = cookiename + "=" + escape(value) + ";expires=" + expdate.toGMTString(); } function getCookies() { var myCookies = ""; var cookies = document.cookie.split(";"); for (var i=0; i<cookies.length; i++) { myCookies += cookies[i] + "\n"; } alert(myCookies); } function setCookie(cookiename,value,expiredays) { var expdate=new Date(); expdate.setDate(expdate.getDate() + expiredays); document.cookie = cookiename + "=" + escape(value) + ";expires=" + expdate.toGMTString(); } function getCookies() { var myCookies = ""; var cookies = document.cookie.split(";"); for (var i=0; i<cookies.length; i++) { myCookies += cookies[i] + "\n"; } alert(myCookies); } Set a cookie Set a cookie

29. 29 Sending a cookie from the Server  Cookies are set in the header fields Cookies (Koch, Wikipedia‏) Set-Cookie: cart_content=415DF4591; path=/ In a response Cookie: cart_content=415DF4591; In the next request

30. 30 References Ding, Wei, “JavaScript” UHCL lecture slides, 2008. Keith, Jeremy. DOM Scripting: Web Design with JavaScript and the Document Object Model. friends of ED, 2005. Koch, Peter-Paul, PPK on JavaScript. New Riders, 2007. Schultz, David and Craig Cook, Beginning HTML with CSS and XHTML: Modern Guide and Reference. Apress, 2007. W3Schools Online Web Tutorials. “JavaScript Tutorial”. [Online]. Available: http://www.w3schools.com/js/default.asp Underwood, Lee, “The JavaScript Diaries”. [Online]. Available: http://www.webreference.com/programming/javascript/diaries/7/ Yue, Kwok-Bun, “An Introduction to JavaScript” UHCL lecture notes, 2000.