Dynamic web interfaces • forms are a limited interface <FORM METHOD=GET ACTION="http://campuscgi.princeton.edu/~bwk/hello1.cgi" > <INPUT TYPE="submit" value="hello" > </FORM> • limited interaction on client side – e.g., Javascript for simple validation • form data sent to server for processing • synchronous exchange with server – potentially slow: client blocks waiting for response • recreates entire page with what comes back – even if it's mostly identical to current content • how can we make web interfaces more interactive and responsive? • dynamic HTML: HTML + CSS, DOM, Javascript • asynchronous partial update: XMLHttpRequest / Ajax • plugins like Flash, Silverlight, ...Javascript • client-side scripting language (by Brendan Eich at Netscape, 1995 ) – C/Java-like syntax • weakly typed, basic data types: double, string, array, object • object-oriented, very dynamic unusual object model based on prototypes, not classes • usage: <script> javascript code </script> <sometag onSomeEvent ='javascript code'> <script src="url "></script> • can catch events from mouse, keyboard, ... • can access browser's object interface – window object for window itself – document object (DOM == document object model) for entities on page • can change a page without completely redrawing it • lots of incompatibilities among browsers – HTML, DOM, Javascript all potentially varyJavascript source materials • Bob Dondero’s Javascript summary from Spring 2011 – http://www.cs.princeton.edu/courses/archive/spring11/cos333/reading/javascriptsummary.pdf • “official” Javascript documentation: – https://developer.mozilla.org/en/JavaScript/Reference – https://developer.mozilla.org/en/Gecko_DOM_Reference • tutorials: – http://www.w3schools.com/js/ – http://www.javascriptkit.com/javatutors/index.shtml – http://www.functionx.com/javascript • books: – e.g., Javascript, the definitive guide (David Flanagan)Javascript constructs • constants, variables, types • operators and expressions • statements, control flow • functions • arrays, objects • libraries • prototypes • etc.Constants, variables, operators • constants – doubles [no integer], true/false, null – ‘string’, “string”, !no difference between single and double quotes; interpret \ within either • variables – hold strings or numbers, as in Awk no automatic coercions; interpretation determined by operators and context – var declaration (optional; just names the variable) – variables are either global or local to a function – only two scopes; block structure does not affect scope (!) • operators – mostly like C!– use === and !== for testing equality – string concatenation uses + – regular expressions in /.../!Statements, control flow • statements – assignment, control flow, function call, … – braces for grouping – semicolon terminator is optional (but always use it) – // or /* … */ comments • control flow almost like C if-else, switch, while, do-while, break, continue! for ( ; ; ), for (var in object) …! try {…} catch(…) {…} finally {…}!Example: Find the largest number <html> <body> <script> var max = 0; var num; num = prompt("Enter new value, or empty to end"); while (num != null && num != "") { if (parseFloat(num) > max) max = num; num = prompt("Enter new value, or empty to end"); } alert("Max = " + max); </script> </body> </html> • needs parseInt or parseFloat to coerce string value to a numberFunctions • functions are objects – can store in variables, pass to functions, return from functions, etc. – can be “anonymous” (no name) – heavily used for callbacks function name(arg, arg, arg) {! var ... // local variable if declared; otherwise global statements! }! function sum(x, y) { return x + y; }! var sumf = function sum(x, y) { return x + y; }! sumf(1,2);!• libraries for math, strings, regular expressions, date/time, ... • plus browser interface: dialog boxes, events, ...Example: ATM checksum function atm(s) { var n = s.length, odd = 1, sum = 0; for (i = n-1; i >= 0; i--) { if (odd) v = parseInt(s.charAt(i)); else v = 2 * parseInt(s.charAt(i)); if (v > 9) v -= 9; sum += v; odd = 1 – odd; } if (sum % 10 == 0) alert("OK"); else alert("Bad. Remainder = " + (sum % 10)); } <form name=F0 onsubmit=""> <input type=text name=num > <input type=button value="ATM" onClick='atm(document.forms.F0.num.value);'> </form>Objects and arrays • object: compound data type with any number of components – very loosely, a cross between a structure and an associative array • each property is a name-value pair – accessible as obj.name or obj[“name”]!– values can be anything, including objects, arrays, functions, … var point = {x:0, y:0, name: “origin”};! point.x = 1; point[“y”] = 2; point.name = “not origin”!• array: an object with numbered values 0..len-1 – elements can be any mixture of types var arr = [point, 1, “somewhere”, {x:1, y:2}];!• array operators: – sort, reverse, join, push, pop, slice(start, end), …Function objects • function literals var max = function(a,b) { return (a > b) ? a : b; } • object literals (initializers) var course = { dept: "cos", numbers: [109, 333], prof: { name1: "brian", name2: "kernighan", office: { bldg: "cs", room: "311" }, email: "bwk" }, toString: function() { return this.dept + this.numbers + " " + this.prof.name1 + " " + this.prof.name2 + " " + this.prof.office.bldg + this.prof.office.room + " " + this.prof.email; } }JSON : Javascript Object Notation • lightweight data interchange format based
View Full Document
![Web [Application] Frameworks](https://media.gradebuddy.com/documents/666470/e08cff1d-bfa1-4b8b-a8eb-00d82ed7ec65.png)
Unlocking...