1 / 30

JavaScript, Part 4

Instructor : Charles Moen. CSCI/CINF 4230. JavaScript, Part 4. (continued). DHTML. 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.

zephr-flowers
Download Presentation

JavaScript, Part 4

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. (continued) DHTML

  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 Location Navigator Screen

  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. 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. 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. Opening a Popup Window Simplest approach is to use the “target” attribute JavaScript (Koch‏) <a href="http://sce.uhcl.edu/moenc" target="_blank">Open new window</a>

  8. Opening a Popup Window Can also be opened by JavaScript JavaScript (Koch‏) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script> function popup(url) { window.open(url,"Popup","height=480,width=640"); } </script> </head> <body> <a href="DemoPopup.html" onclick="popup('http://sce.uhcl.edu');return false;"> Open a popup </a> </body> </html>

  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. 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. 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. 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. HTTP Request HTTP (Spainhour, W3Schools) GET /moen/welcome.aspx?name=Charles+Moen&location=UHCL HTTP/1.0 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 This is what the server “sees” in the request 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

  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. 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)‏ HTTP version Method field Resource identifier 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 Fields with information about the client [ a blank line here ]

  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)‏ Ampersands separate the name-value pairs URL of the form handler GET /createOrder.aspx?quantity=1&meat=Ham&cheese=yes&lettuce=on&tomato=on&price=4.99 HTTP/1.0 Query string (visible in the navigation field of the browser) Question mark follows the URL quantity=1 Name of the control Value entered by user

  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 parametersin the body of the request The name-value pairs are not visible in the navigation field of the browser HTTP (Spainhour, Schultz)‏ Header fields 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 Body section

  19. HTTP GET Request and Parameters A GET request can be created without using a form HTTP <a href="http://sce.uhcl.edu/moenc/createOrder.aspx?quantity=1&meat=Ham&price=4.99"> Order one ham sandwich </a>

  20. HTTP Response HTTP (Spainhour, W3Schools) 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 <html> <body> <h1>Welcome</h1> </body> </html> This is what the browser “sees” in the response 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

  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 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 <html> <body> <h1>Welcome</h1> </body> </html> Fields with information about the server and response A blank line here Response body

  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‏)

  23. Cookies

  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. 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. 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 closedexpires=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 cookiedomain=uhcl.edu; Cookies (Koch‏)

  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. 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); } <p> <a href="#" onclick="setCookie('MyCookie','Charles Moen',1);return false;"> Set a cookie </a> </p>

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

  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.

More Related