1Web interfaces• Javascript• HTML• DOM• CSS• XMLHttpRequest• AjaxReprise of HTTP• What happens when you click on a URL?• client sends request:GET url HTTP/1.0(blank line)• server returnsheader info(blank line)HTML– since server returns the text, it can be created as needed– can contain encoded material of many different types (MIME)• URL formatservice://hostname/filename?other_stufffilename?other_stuff part can encode– data values from client (forms)– request to run a program on server (cgi-bin)GET urlHTMLclientserver2HTML form<html><body><FORM METHOD=GETACTION="http://campuscgi.princeton.edu/~bwk/hello1.cgi" ><INPUT TYPE="submit" value="hello" ></FORM></body></html>• form data is URL-encoded in query string (GET) or to server's stdin (POST)• limited interaction on client side• requires synchronous exchance with server– potentially slow, client blocks waiting for response• requires recreating entire page with whatever comes back– even if it's identical to current content• how can we make web interfaces more interactive and responsive?Javascript• very widely used programming language• all browsers support it (though not identically)• usually enabled (though not always)• simple scripting language– C/Java-like syntax– about the level of Awk– very weakly typedbasic data types: double, bool, string, array, object– object-oriented• runs inside browser<script> javascript program</script><script src="url"></script><sometag onSomeEvent='javascript code'>• can catch events from mouse, keyboard, ...• can access browser's object interface–window object– document object (DOM == document object model)• can create original page and alter it later3Javascript on a page or two• case sensitive• semicolons or newline as statement terminators• // or /*...*/ comments• var x to declare variable– scope is either global or current function• double, bool, 'string' or "string" with \ escapes– null for undefined value• operators, expressions, and control flow are like C or Java, sort of – for (v in obj) ...– try {...} catch( ) {...} finally {...}• user-defined functionsfunction sum(x, y) { return x + y; }• arrays are sort of quasi objectsvar a = [zero, 1, "2", 'three', 4.5]var b = new Array()for (i = 0; i < a.length; i++)b[i] = a[i]• other array methods – sort, shift, join, reverse, ...Find the largest number<html><body><script>var max = 0var numnum = prompt("Enter new value")while (num != null && num != "") {if (parseFloat(num) > max)max = numnum = prompt("Enter new value")}alert("Max = " + max)</script></body></html>• needs parseInt or parseFloat to coerce string value to a number4Sorting (the hard way)var name, i = 0, j, tempvar names = new Array()name = prompt("Enter new name")while (name != "") {names[names.length] = namename = prompt("Enter new name")}for (i = 0; i < names.length-1; i++) {for (j = i+1; j < names.length; j++) {if (names[i] > names[j]) {temp = names[i]names[i] = names[j]names[j] = temp}}}s = names[0]for (i = 1; i < names.length; i++)s += "\n" + names[i]alert(s)• the easy way:names.sort()alert(names.join("\n"))Javascript library• math – sqrt, max, min, random, ...• string– searching, substring, case conversion, –convert to HTML, ...• regular expressions–about the same as Perl• date/time– current time, elapsed time, conversions• ...5Javascript objects• objects are associative arrays– associate names with properties– name of property is the subscript• can define your own objects– including inheritance• can create anonymous objectsvar o = { x:1, y:2, z:hello" };• browser environment includes objects like window and documentDOC: Document Object Model• a web page in HTML (or XHTML) is structured data– XHTML is a tag set for HTML• the document object model (DOM) is a representation of this hierarchy• DOM methods, properties and events are accessible from Javascript– usually in <form> tag for buttons, text, etc.– can also appear in other tags, images, ...– event handling code can be attached to tags as attributes• window methods and properties– alert(msg), prompt(msg), ... –open(url)– size, position, scrolling, ...– history, status bar, ...– document6Embedding Javascript• in a form:<form> <input type=button value="Hit me"onClick='alert("Ouch! That hurt.")'><input type=text name=url size=30><input type=button value="GO" onCLick='window.open(url.value)'><input type=button value="color it "onClick='document.bgColor=color.value'><input type=text name=color value='type a color here'><input type=button value='make it white'onClick='document.bgColor="white"'></form>• in a tag<body onUnload='alert("bugging out")'>• on an image<img src="smiley.gif" onMouseover='src="new.gif"' onMouseout='src="smiley.gif"'>• etc.CSS: Cascading Style Sheets• a language describing how to display (X)HTML documents• separates structure (HTML) from presentation (CSS) p { font-family: "Garamond", serif; }h2 { font-size: 110%; color: red; background: white; } a:hover { text-decoration: none;color: #f0f; font-weight: bold } • style property of most document entities can be set by Javascript<body id="body"><script> var b = document.getElementById("body")b.style.backgroundColor='lightyellow'b.style.fontFamily='Verdana'b.style.fontSize='72px'b.style.color='blue'</script>hello7XMLHttpRequest• interactions between client and server are usually synchronous– so there can be significant delay– and page has to be redrawn• XMLHttpRequest provides asynchronouscommunication with server• used in Google Suggest and Google Maps– also Orkut, Gmail, Flickr, A9 (it is said)• "The real importance of Google's map and satellite program, however, is not its impressive exterior but the novel technology, known as Ajax, that lies beneath."– James Fallows, NY Times, 4/17/05• Ajax: Asynchronous Javascript + XML(shorthand/marketing/buzzword term for an oldish idea)– XHTML + CSS for presentation–DOM for changing display– Javascript to implement client actions– XML for data exchange with server(but it doesn't have to use XML)Google Suggest in microcosm<body><form>Search:<input type="text" id="pat" onkeyup='geturl(pat.value); return true;' ></form><pre></body></html>8Basic structurevar req;function loadXMLDoc(url) {if (window.XMLHttpRequest) { // nativereq = new XMLHttpRequest();req.onreadystatechange = processReqChange;req.open("GET", url,
View Full Document
![Web [Application] Frameworks](https://media.gradebuddy.com/documents/666470/e08cff1d-bfa1-4b8b-a8eb-00d82ed7ec65.png)
Unlocking...