javascript, part 4 instructor: charles moen csci/cinf 4230

JavaScript, Part 4

Instructor: Charles Moen

CSCI/CINF 4230

DHTML

(continued)

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

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

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

ProtocolHTTP 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


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.0GET /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.eduUser-Agent: Mozilla/5.0 ...Referer: http://dcm.uhcl.edu/moen/hello.html

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)

GET /moen/welcome.aspx?name=Charles+Moen&location=UHCL HTTP/1.0Host: dcm.uhcl.eduUser-Agent: Mozilla/5.0 [shortened to save space on this slide] Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en-us,en;q=0.5Accept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive: 300Connection: keep-aliveReferer: http://dcm.uhcl.edu/moen/hello.html

GET /moen/welcome.aspx?name=Charles+Moen&location=UHCL HTTP/1.0Host: dcm.uhcl.eduUser-Agent: Mozilla/5.0 [shortened to save space on this slide] Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en-us,en;q=0.5Accept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive: 300Connection: keep-aliveReferer: http://dcm.uhcl.edu/moen/hello.html

Method field

HTTP versionResource identifier

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)

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.0GET /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)

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.0User-Agent: Mozilla/2.02Gold (WinNT; I)Accept: image/gif, image/x-xbitmap, image/jpeg, */*Host: www.oreilly.comContent-type: application/x-www-form-urlencodedContent-length: 62

quantity=1&meat=Ham&cheese=yes&lettuce=on&tomato=on&price=4.99

POST /createOrder.aspx HTTP/1.0User-Agent: Mozilla/2.02Gold (WinNT; I)Accept: image/gif, image/x-xbitmap, image/jpeg, */*Host: www.oreilly.comContent-type: application/x-www-form-urlencodedContent-length: 62

quantity=1&meat=Ham&cheese=yes&lettuce=on&tomato=on&price=4.99

Header fields

18Body 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)

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 OKCache-Control: privateDate: Mon, 27 Oct 2008 00:03:49 GMTContent-Type: text/html; charset=utf-8Server: Microsoft-IIS/6.0X-Powered-By: ASP.NETX-AspNet-Version: 2.0.50727Content-Encoding: gzipVary: Accept-EncodingTransfer-Encoding: chunked

<html><body><h1>Welcome</h1></body></html>



This is what the browser “sees” in the response

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



22

HTTP Response Status Codes

General meanings• 200 – 299 Success

• 300 – 399 Redirection to another location or URL hasn’t changed

• 400 – 599 Errors


Code Meaning

400 Wrong request syntax

401 Authorization required

402 No Chargeto field on a request for a paid service

403 Forbidden resource

404 The server cannot find the URL requested

405 Accessing the resource using a method not allowed

500 The server has encountered an internal error and cannot continue with the request

501 The server does not support the method of a legal request

502 Secondary server does not return a valid response

503 The service is unavailable because the server is too busy

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


28

Setting a cookie with JavaScriptCookies (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);}

<p><a href="#" onclick="setCookie('MyCookie','Charles Moen',1);return false;">Set a cookie</a></p>

<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


Set-Cookie: cart_content=415DF4591; path=/Set-Cookie: cart_content=415DF4591; path=/

In a response

Cookie: cart_content=415DF4591;Cookie: cart_content=415DF4591;

In the next request

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.

javascript, part 4 instructor: charles moen csci/cinf 4230

Documents

entire browser window

window objectrepresents

particular window

main window open

window objectsome properties

browser sniffingexamine

popup windowan extra

popup windowcan