a Why JavaScript? jonkv interactivity on the web CGI JavaScript Java Applets Netscape LiveScript JavaScript 1: Example

Size: px

Start display at page:

Download "a Why JavaScript? jonkv interactivity on the web CGI JavaScript Java Applets Netscape LiveScript JavaScript 1: Example"

Kristopher Jenkins
5 years ago
Views:

1 Why JavaScript? 2 JavaScript JavaScript the language Web page manipulation with JavaScript and the DOM : Wanted interactivity on the web Server side interactivity: CGI Common Gateway Interface Batch oriented (fill in a form, get interactive results) "Heavy weight" client side interactivity: Java Applets Self contained part of a web page Interacts with the user + possibly a server Does not interact with the document itself (Interactive versions of Macromedia Flash not available until 1998) "Light weight" client side interactivity: Netscape LiveScript Script language for the web (introduced late 1995) Renamed to JavaScript (marketing!) Standardized version: ECMAscript (ECMA 262, ISO 16262) Also used in Flash, Firefox/Thunderbird UI, PDF files, MacOS Dashboard Widgets, PhotoShop, JavaScript 1: Example 3 JavaScript 2: Script files 4 A simple JavaScript example: In HTML, scripts are CDATA not parsed by browsers, validators <!DOCTYPE HTML PUBLIC > <HTML> <head> <title>hello, World!</title> <script type="text/javascript"> alert("hello, World!"); // Show an alert to the user </script> </head><body> </body></html> In XHTML, your inline code is by default PCDATA (parsed) if (a < b) the < will be interpreted as the start of a tag <script type="text/javascript"> /* <![CDATA[ */ your code /* ]]> */ </script> Better solution: Separate script file Test.html: <!DOCTYPE HTML PUBLIC > <HTML> <head> <title>hello, World!</title> </head> <body> <script type="text/javascript" src="example.js"></script> </body> </HTML> example.js: // Show an alert to the user alert("hello, World!");

2 JavaScript 3: Types and type checking 5 JavaScript 4: Control 6 Like many script languages: No static type checking Variables are always declared with "var", not with a type var myvar = "Testing"; myvar = 10; myvar = true; Example: Some calculations var secs_per_min = 60; var mins_per_hour = 60; var hours_per_day = 24; var secs_per_day = secs_per_min * mins_per_hour * hours_per_day; Special values: null (behaves like 0 in numeric context, false in boolean context) undefined (behaves like false in boolean context) Control structures are similar to Java if (condition) { else { switch / case for (var i= 0; i < 10; i++) { while (condition) { do { while (condition) break / continue try { throw new ; catch (e) { finally { try { throw "Something"; catch (e) { finally { // Comment /* Long comment */ JavaScript 5: Operators 7 JavaScript 6: Functions 8 Operators are similar to Java, C, C++ ==!= // equals (tries to convert types before comparison) ===!== // (strict equals no type conversion) + * / < > << >> >>>// left shift, right shift, unsigned right shift += = *= /= ++, &&, Functions: Declared using the "function" keyword Late type checking: Don't declare parameter types function get_secs(days) { var secs_per_min = 60; var mins_per_hour = 60; var hours_per_day = 24; var secs_per_day = secs_per_min * mins_per_hour * hours_per_day; return days * secs_per_day; var secs_per_week = get_secs(7); Checking whether functions exist: if (get_secs) { Important! Used to check the level of JavaScript support. Important! Used to check the level of DOM support.

3 JavaScript 7: Object-oriented 9 JavaScript 8: Constructors 10 Object oriented but not class based Can use constructors if you want to Individual objects can have their own methods or fields Names the type ("Person") var me = new Object(); me.name = "Jonas Kvarnström"; // Creates a "name" field me.phone = null; me.getname = function() { return this.name; var you = new Object(); you.name = "Jane Doe"; you.address = "somewhere"; Literal notation: function Person(name, phone) { this.name = name; this.phone = phone; this.getname = function() { return this.name; var me = new Person("Jonas Kvarnström", "2305"); Can still add methods / fields incrementally var me = { name: "Jonas Kvarnström", phone: null, getname: function() { return this.name; ; Only weak syntax checking possible me.address = "Somewhere"; me.setaddress = function(addr) { this.address = addr; alert(me.phone); // OK alert(you.phone); // No such property (runtime error) JavaScript 9: Adding new methods 11 JavaScript 10: Adding to prototype 12 Inheritance based on prototypes Each object inherits properties from a prototype object function Employee(name, phone, department) { this.name = name; this.phone = phone; this.department = department; var me = new Employee("Jonas", "2305", "IDA"); me.prototype = new Person(); // Inheritance on a per object level! me.getphone(); // works inherited function from prototype Set the prototype of a constructor method Default prototype for objects constructed using Employee function Employee.prototype = new Person(); // "extends Person" Can add properties to the prototype at any time! Incremental extension person.prototype.getphone = function() { return phone; Now all "person" objects have this method Works for built in classes too! if (!String.prototype.trim) { // If trim does not exist String.prototype.trim = function() { return this.replace(/^\s+/,"").replace(/\s+$/,"");

4 JavaScript 11: Arrays 13 JavaScript 12: Associative arrays 14 Arrays: Kind of like Java arrays Allocated with new operator, or [] syntax var names1 = new Array("Roger", "Moore"); var names2 = [ "Roger", "Moore" ]; var empty = new Array(10); Indexed using [] syntax names[0] == "Roger" empty[0] == undefined Have a.length property Example: var reply = prompt("what's your name?", ""); var names = reply.split(" "); for (var pos = 0; pos < names.length; pos++) { alert("one of your names is " + names[pos]); Useful array methods concat joins two arrays join joins array elements into string push(x), pop() slice() returns a subsection of the array splice() adds/removes elements sort() Arrays can be associative Can replace Map / HashMap in Java var phonenumbers = new Array(); phonenumbers["jonas"] = "070 xxxxxxx"; phonenumbers[ Martin"] = "070 xxxxxxx"; Can iterate over all keys for (var name in phonenumbers) { // Jonas, Martin, dosomethingwith(phonenumbers[name]); Properties and arrays: Different interfaces, same data structure var me = new Person("Jonas Kvarnström", null); me["name"] = "Jonas Kvarnström"; for (var prop in me) { /* iterate over "name", "phone", "getname" */ JavaScript 13: Strings 15 JavaScript 14: Dates 16 String Single or double quotes var myvar = 'asdf', othervar = "qwerty"; Fields: length General Methods charat, charcodeat, indexof, lastindexof fromcharcode // from sequence of Unicode values "abc def ghi".split(" ") == array containing "abc", "def", "ghi" substring, substr, slice, concat match, replace, search // regular expressions tolowercase, touppercase HTML related Methods anchor, link // HTML named anchor / hyperlink big, blink, bold, fixed, italics, small, strike, sub, sup Date Constructors var date = new Date(); // today var date = new Date("December 31, :34:56"); var date = new Date(2010, 12, 31); Methods getyear(), getmonth(), getdate, getday() // and setters gethour(), getminute(), getsecond() // and setters getfullyear() // four digit year

JavaScript 15: History and Window 17 Browser specific JavaScript objects: history the page history history.back(), history.forward() history.go(delta) // 1 = back, 2 = 2 steps back,... history.go('www.

5 JavaScript 15: History and Window 17 Browser specific JavaScript objects: history the page history history.back(), history.forward() history.go(delta) // 1 = back, 2 = 2 steps back,... history.go(' // nearest URL containing ' window.location the current location URL window.location = " // New history entry window.location.reload(); window.location.replace(" // No new entry DOM: The Document Object Model Accessing the Structure of a Document Manipulating HTML 19 DOM 1: Document Object Model 20 Many web apps actively manipulate HTML / XML Populate dropdown boxes depending on previous choices Select country "Sweden" add Swedish cities to the city dropdown Hide and show elements of a web page Click "advanced" to show additional fields in a form Check the validity of form input fields Show errors without requiring a round trip to the server W3C DOM: Document Object Model A document is a tree of nodes with attributes Well defined standard Specified using IDL, the Interface Definition Language Implemented in many different languages, including JavaScript <THead> <Table> <TBody> <TR> <TR> <TR> <TR> <TH> <TH> <TD> <TD> Item Price Foo $100.00

6 DOM 2: Navigating through Documents 21 DOM 3: Element and Text Nodes 22 The document is also a node In JavaScript: Accessed through the document variable Has methods for finding other nodes Give an element a name: <span id="foo">change this text</span> var foonode = document.getelementbyid( foo ); var allspans = document.getelementsbytagname( span ); All nodes have methods for treetraversal readonly attribute Node parentnode; readonly attribute NodeList childnodes; boolean haschildnodes(); and for tree manipulation: Node Node Node Node insertbefore(in Node newchild, in Node refch); replacechild(in Node newchild, in Node oldch); removechild(in Node oldchild); appendchild(in Node newchild); Element and Text node <p>this is a paragraph</p> <p> This is a paragraph interface CharacterData : Node { attribute DOMString data; readonly attribute unsigned long length; void replacedata(in unsigned long offset, in unsigned long count, in DOMString arg) void insertdata(in unsigned long offset, in DOMString arg) void deletedata(in unsigned long offset, in unsigned long count) void appenddata(in DOMString arg) ; interface Text : CharacterData { Text splittext(in unsigned long offset); ; Element node Text node DOM 4: Attribute Nodes 23 DOM 5: Composite Example 24 Each node has an attribute list <P STYLE= >This is a <span>paragraph</span> </P> <img src="foo.png" height="100" width="300"> <img> SRC foo.png height 100 Attr nodes width 300 This is a <p> <span> STYLE DOMString getattribute(in DOMString name); void setattribute(in DOMString name, in DOMString value); void removeattribute(in DOMString name); Attr getattributenode(in DOMString name); Attr setattributenode(in Attr newattr); Attr removeattributenode(in Attr oldattr); interface Attr : Node { readonly attribute DOMString name; readonly attribute boolean specified; attribute DOMString value; ; paragraph

DOM/JS 1: DOM in JavaScript 26 Using the DOM in JavaScript JavaScript has a standard DOM implementation Interfaces represented as JavaScript objects / prototypes Several standard

7 DOM/JS 1: DOM in JavaScript 26 Using the DOM in JavaScript JavaScript has a standard DOM implementation Interfaces represented as JavaScript objects / prototypes Several standard objectsalwaysavailable document the current page (HTMLDocument) window the current window location the current URL being displayed (window.location) navigator the browser (version, platform, ) screen screen properties Now: Using DOM interfaces in JavaScript 27 Dynamic document generation 1 28 Example 1 Dynamic Document Generation Dynamic document generation using writeln() Simple but not very structured often discouraged var secs_per_min = 60; var mins_per_hour = 60; var hours_per_day = 24; var secs_per_day = secs_per_min * mins_per_hour * hours_per_day; document.writeln("<p>there are "); document.writeln(secs_per_day); document.writeln(" seconds per day"); Example: ex1.html

8 Dynamic document generation Dynamic document generation, structured Simple example: Naming an element, modifying it <body> <h2>hello, World!</h2> <p>i can <span id= changespan">change this text</span>! <p><a href= javascript_required.html onclick= changetext('changespan', 'modify stuff')">do it!</a> </body> Example 2 Document Manipulation: Dynamically Adding Rows to Search Forms function changetext(id, text) { var element = document.getelementbyid(id); var textnode = element.firstchild; <span> change what I wrote Search for messages matching: term1 term1 textnode.data = text; Example: ex2.html term1 New row Dynamically Adding Rows 1 31 Dynamically Adding Rows 2 32 First shot: <!DOCTYPE HTML PUBLIC > <html> <head><title>dynamic Forms</title></head> <body><h3>dynamic Forms</h3> <form> <table> Next one should be named input1 <tbody id= searchtable"> <tr><td><input type="text" name= input0"></td></tr> </tbody> </table> <input type="button" value="add row onclick="addrow( searchtable');"> </form> </body> </html> Instead of a link: Button with HTML event handling (onclick) Create a new <tr> row in addrow()... No constructors exist in IDL instead, factory methods HTMLTableElementprovides insertrow() HTMLTableRowElement provides insertcell() Document provides generic factory methods Element createelement(in DOMString tagname) raises(domexception); Text createtextnode(in DOMString data); Attr createattribute(in DOMString name) raises(domexception); function addrow(someid) { // Param is ID from <tbody id="mybody"> var tbody = document.getelementbyid(someid); var newrow = tbody.insertrow(-1); var newcell = newrow.insertcell(-1); var newinput = document.createelement("input"); newinput.type = "text"; // HTML attributes available as fields! newinput.name = input" + tbody.rows.length; // input1, input2, newcell.appendchild(newinput); Example: ex3b.html

33 Collapsing and Expanding 1 34 Example 3 Expanding and Collapsing Elements Expand / collapse elements example: sidebar menus Click header => toggle visibility of link box <tr><td id="general"

9 33 Collapsing and Expanding 1 34 Example 3 Expanding and Collapsing Elements Expand / collapse elements example: sidebar menus Click header => toggle visibility of link box <tr><td id="general" onclick="toggleblock('generalbox'); >General</td></tr> <tr><td class="linkbox" id="generalbox"> <a class="nav" href="prerequisites.html">prerequisites</a><br> <a class="nav" href="staff.html">staff</a><br> </td> </tr> JavaScript code to toggle CSS display property for one block: function toggleblock(id) { var style = document.getelementbyid(id).style; if (style.display == 'none') { style.display = 'block ; else { style.display = 'none'; Example: Old Course Pages 35 Hover Menus 1 36 Example 4 CSS + JavaScript Hover Menus Goal: Top level navigation menu with dropdowns Determine what HTML markup to use Determine what can be done with pure HTML+CSS Might need some scripts too! (adapted from "Suckerfish Dropdowns" at

Hover Menus 2 37 Hover Menus 3 38 Markup: The structure of a menu is a nested list!

href="">white crappie</a></li> </ul> </li> <li>grunts <ul>... </ul> </li> </ul> <p>here is some text after the menu</p> Suitable structure, but the default display is bad!

menu ul // any UL inside an UL of class menu { padding: 0; // No padding or margins for these elements margin: 0; list style: none; // Don't show as a bullet list!

Let menu items float At the current y position As far left as possible Give them a constant width (for better appearance) ul.

10 Hover Menus 2 37 Hover Menus 3 38 Markup: The structure of a menu is a nested list! <ul class="menu"> <li>sunfishes <ul> <li><a href="">blackbanded sunfish</a></li> <li><a href="">shadow bass</a></li> <li><a href="">ozark bass</a></li> <li><a href="">white crappie</a></li> </ul> </li> <li>grunts <ul>... </ul> </li> </ul> <p>here is some text after the menu</p> Suitable structure, but the default display is bad! Don't show as a bullet list Remove list related margins ul.menu, // any UL of class menu ul.menu ul // any UL inside an UL of class menu { padding: 0; // No padding or margins for these elements margin: 0; list style: none; // Don't show as a bullet list! Hover Menus 4 39 Hover Menus 5 40 We wanted a horizontal menu! Let menu items float At the current y position As far left as possible Give them a constant width (for better appearance) ul.menu li { // any LI inside an UL of class menu float: left; position: relative; width: 10em; Oops! What comes after "float: left" continues at the same line! This is intended behaviour lets you float an image to the left To "continue after floating elements", use clear clear: left after all elements floating left clear: right after all elements floating right clear: both after all floating elements... </li> </ul> <div class="aftermenu"></div> <p>here is some text after the menu</p> div.aftermenu { clear: both;

Hover Menus 6 41 Hover Menus 7 42 Submenus should initially be hidden! ul.menu li ul { display: none; When we hover over their parents, they should be seen ul.

Achieved through CSS position attribute position: static default position: relative at an offset from normal position position: absolute willnot affect layout of other components position: fixed

11 Hover Menus 6 41 Hover Menus 7 42 Submenus should initially be hidden! ul.menu li ul { display: none; When we hover over their parents, they should be seen ul.menu li:hover ul { display: block; This selector is more specific than ul.menu li ul, and takes precedence Drop down menus should not move other text! Achieved through CSS position attribute position: static default position: relative at an offset from normal position position: absolute willnot affect layout of other components position: fixed relative to window (does not move when scrolling) ul.menu li ul { display: none; position: absolute; Also give a background color (otherwise transparent) ul.menu li ul { display: none; position: absolute; background: rgb(230, 230, 230); visuren.html#positioning-scheme Hover Menus 8 43 Hover Menus 9 44 Bad layout in Internet Explorer 6 (20% market share)! Must specify non default top/leftcoordinates ul.menu li ul { display: none; position: absolute; top: 1em; left: 0; but this looks bad in Opera! Use the ">" selector ("immediately within") Opera and others understand this rule and apply it IE 6 does not understand the rule ignores it ul.menu li > ul { top: auto; left: auto; Still does not work in Internet Explorer 6! IE 6 only supports :hover for links (<a ></a>) We used it for <li> attributes Workaround: JavaScript for IE 6 Add an alternative to :hover the over class ul.menu li:hover ul, ul.menu li.over ul { display: block; Must add "over" class dynamically when hovering Must remove "over" class dynamically when not hovering

12 Hover Menus Hover Menus Dynamic addition/removal of classes Step 2: Function adding event handlers Call suitable JavaScript functions from HTML event handlers mouseover event add "over" class menu shown mouseout event remove "over" class menu hidden Could specify mouseover / mouseout for each <li> Repetitive Intrusive Ugly code Mixes semantic markup with programming Better: Let JavaScript analyze the DOM + add event handlers! Step 1: Identifying the navigation list <ul class="menu" id="nav"> startlist() { // Only if IE 5+ (supports doc.all and doc.getelbyid) if (document.all && document.getelementbyid) { navroot = document.getelementbyid("nav"); for (i=0; i<navroot.childnodes.length; i++) { node = navroot.childnodes[i]; if (node.nodename=="li") { node.onmouseover = function() { this.classname+=" over"; node.onmouseout = function() { this.classname=this.classname.replace(" over", ""); Hover Menus Hover Menus Step 3: When to call this function? Not "inline" The script might be executed before the navigation menu is loaded! Use an onload event handler window.onload=startlist; Executed immediately after the page is fully loaded Still an ugly menu usecss to improve Font settings ul.menu { font: 11pt "Myriad Web"; Background + subtle border for line items ul.menu li { background: rgb(240,240,230); border bottom: 1px solid rgb(230,230,220); padding: 0.4ex; When hovering, use a brighter background ul.menu li:hover { background: rgb(250,250,240); Adjust submenu for padding ul.menu li ul { margin top: 0.4ex;

Hover Menus 14 49 50 Submenu items have another color ul.

13 Hover Menus Submenu items have another color ul.menu li ul li { background: rgb(230,230,220); border bottom: 1px solid rgb(220,220,210); Hovering over submenu items Example 5 Form Input Validation (JavaScript and server side!) ul.menu li ul li:hover { background: rgb(240,240,230); Links are black, not underlined ul.menu li a { text decoration: none; color: black; Form Validation 1 51 Form Validation 2 52 Form validation tests constraints on valid input Users must provide an e mail address Enter new password twice to detect typing mistakes fields must match Messages must have a subject No letters in numeric fields Server side validation takes time! Not much but a complete roundtrip is required Post form data to server Server validates data If something is wrong: Show the same form again, with errors marked Client side validation is faster / more interactive! Use JavaScript Immediate validation of input How? Use onchange attribute to call a validation method What to do if there is an error? Don't show a dialog window! Intrusive, annoying Preferred: Show a text label indicating there is an error Age: 1a Age: 200 Error: Must be numeric Error: Number too large Can also use this technique to show warnings Age: 105 Warning: Please check

14 Form Validation 3 53 Form Validation 4 54 Example: Immediate input validation Need label + input field + warning field <tr> <td><label for="age">your age (years):</label></td> <td><input id="age" name="age"type="text" onchange="validateage(this, 'inf_age', false);" maxlength="5" size="35"></input></td> <td id="inf_age"> </td> </tr> Need a validation method validateage() function validateage(valfield, // actual element to be validated infofield, // id of element for info/error msg required) { // true if value required // (omitted checking that the value is present) var age = trim(valfield.value); // Assume trim function available var agere = /^[0-9]{1,3$/ // start digits, 1 to 3 of them end if (!agere.test(age)) { msg(infofield, "error", "ERROR: not a valid age"); return false; if (age>=200) { msg(infofield, "error", "ERROR: not a valid age"); return false; if (age>110) msg(infofield, "warn", "Older than 110: check"); else { if (age<7) msg(infofield, "warn", "Are you really that young?"); else msg(infofield, "warn", ""); return true; Form Validation 5 55 Form Validation 6: CSS 56 function msg(fld, // id of element to display message in msgtype, // class to give element ("warn" or "error") message) // string to display { var elem = document.getelementbyid(fld); var emptystring = /^\s*$/ ; if (emptystring.test(message)) { // setting an empty string can give problems if later set to a // non-empty string, so ensure a space (nbsp) is present. var nbsp = 160; elem.firstchild.nodevalue = String.fromCharCode(nbsp); else { elem.firstchild.nodevalue = message; elem.classname = msgtype; // set CSS class to adjust appearance CSS code for message types Info: Black text.info { color: black; font weight: normal; Warning: Dark red.warn { color: rgb(120,0,0); font weight: normal; Error: Red, bold.error { color: red; font weight: bold

15 Form Validation 7: Not only inline 57 Form Validation 8: Validation Alert 58 Inline warnings are perhaps too unobtrusive Easy to miss May also want to check errors at form submission time Warnings should be ignored Errors should lead to an alert popup, stop form submission How to stop form submission? Use onsubmit handler if it returns false, submission is cancelled <FORM id="mf" onsubmit="return validateonsubmit()" action=" "> </FORM> The validation function calls all individual validators Validators return false for error, true for warning/ok! function validateage(valfield, infofield, required) { if (error) { set error message; return false; if (warn) { set warn message; return true; function validateonsubmit() { var errs=0; var myform = document.getelementbyid(" "); if (!validatephone (myform.phone, 'inf_phone', true)) errs += 1; if (!validateage (myform.age, 'inf_age', false)) errs += 1; if (!validate (myform. , 'inf_ ', true)) errs += 1; if (!validatepresent(myform.from, 'inf_from')) errs += 1; if (errs>1) alert('there are fields which need correction'); if (errs==1) alert('there is a field which needs correction'); return (errs==0); ; Form Validation 9: Potential Mistakes Potential mistakes in client side form validation: Only client side validation Clients can manipulate code / turn off JavaScript Must validate on the server too! Validation that fails without JavaScript Clients can turn off JavaScript / run browsers without JavaScript Must be able to fall back to plain server side checking Use a plain submit button not a JS event handler that posts form data Too strict validation Requiring a middle initial Requiring a state but in Sweden we don't have states Info, source and examples: Example 6 AJAX: Asynchronous JavaScript And XML

AJAX 1 61 AJAX 2 62 Different types of interactivity on the WWW: HTML/CSS + form submission + server response Fill in some information; submit; get a completely new page back Batch oriented; calls

16 AJAX 1 61 AJAX 2 62 Different types of interactivity on the WWW: HTML/CSS + form submission + server response Fill in some information; submit; get a completely new page back Batch oriented; calls the server slow HTML/CSS + plain JavaScript Purely client based Can show / hide information, if it is already on the client: set CSS display: none or display: block Can calculate new information, if this can be done purely on the client No calls to the server What else could we want? Hover over an item show detailed info in a popup Don't reload the entire page Don't keep this information in the original page, ready to be displayed far too much information! Forum: List of topics at the top of the page Click one it is shown below the list Don't reload the entire page Plainly impossible to keep all topics in oneweb page, ready to be displayed Dynamic search box Search is performed on the server Client dynamically updates search results as you type AJAX 3 63 AJAX 4 64 Solution: Add asynchronous server requests Example: Validate text field with every key press Use XMLHttpRequest object from JavaScript Retrieve data in XML format Set a callback function, called when the request is finished Parse XML and generate suitable HTML Modify the DOM addnew information / fields Collective name for these techniques: AJAX Asynchronous JavaScript And XML Can also be used to fetch data in non XML formats AHAH: Asynchronous HTML and HTTP Server returns HTML, not XML no need to parse/generate

17 AJAX 5 65 AJAX 6 66 Form element calls validate() for every key press <input type="text" size="20" id="userid" name= userid" onkeyup="validate();"> An XMLHttpRequest object is created var req; function validate() { var idfield = document.getelementbyid("userid"); Converts to URI format (space +, 8 bit %XY) var url = "validate?userid=" + encodeuricomponent(idfield.value); // Different class names depending on browser if (typeof XMLHttpRequest!= "undefined") { req = new XMLHttpRequest(); else if (window.activexobject) { req = new ActiveXObject("Microsoft.XMLHTTP"); req.open("get", url, true); // true asynchronously // Set function to be called when a reply is received req.onreadystatechange = callback; // Send the request asynchronously returns immediately req.send(null); AJAX 7 67 AJAX 8 68 Alternative for POST function validate() { var idfield = document.getelementbyid("userid"); var url = "validate"; // No query info here var req; if (typeof XMLHttpRequest!= "undefined") { req = new XMLHttpRequest(); else if (window.activexobject) { req = new ActiveXObject("Microsoft.XMLHTTP"); req.open("post", url, true); // Tell the server how the POST data is encoded req.setrequestheader( "Content Type", "application/x www form urlencoded"); req.onreadystatechange = callback; // Query info included in send instead (still encoded) req.send("id=" + encodeuricomponent(idfield.value)); "/validate" is mapped to ValidateServlet ValidateServlet handles this just like any other request JSP pages can be used but may be less efficient Important if this is called for every key press! public class ValidateServlet extends HttpServlet { private ServletContext context; private HashMap users = new HashMap(); public void init(servletconfig config) throws ServletException { super.init(config); this.context = config.getservletcontext(); users.put("greg","account data"); users.put("duke","account data");

18 AJAX 9 69 AJAX public void doget(httpservletrequest request, HttpServletResponse response) throws IOException, ServletException { String targetid = request.getparameter("id"); // Return XML document containing reply. Must set this content type! response.setcontenttype("text/xml"); response.setheader("cache-control", "no-cache"); if ((targetid!= null) &&!users.containskey(targetid.trim())) { response.getwriter().write("<message>valid</message>"); else { response.getwriter().write("<message>invalid</message>"); The browser listens for replies in the background Calls your callback function when the request state changes State 0 = uninitialized, 1 = open, 2 = sent, 3 = receiving, 4 = loaded/done Tells you the status of the request HTTP status code: 200 = success, 401 = access denied, Possible callback function: function callback() { if (req.readystate == 4) { if (req.status == 200) { // update the DOM based on whether or not message is valid else But wait: How does the callback function get access to req? AJAX AJAX Alternative 1: Global variable var req; // Declared outside functions global variable function validate() { // Called by input field on key press req = ; req.onreadystatechange = callback; function callback() { // Called by XMLHttpRequest on state change if (req.readystate == 4) { if (req.status == 200) { // update the DOM based on whether or not message is valid else Problem: Fast typing multiple requests active simultaneously, so old requests will be overwritten (never handled) Alternative 2: Callback parameter function validate() { // Called by input field on key press var req; // Declared inside function local variable req = ; // Use an anonymous closure to pass on parameters req.onreadystatechange = function() { callback(req) ; function callback(request) { // Called by anonymous function if (request.readystate == 4) { if (request.status == 200) { // update the DOM based on whether or not message is valid else Better and cleaner solution!

19 AJAX AJAX Example callback function (for alternative 2): function parsemessagecallback(req) { var XML = req.responsexml; if (request.readystate == 4) { if (request.status == 200) { // Get the first element named message var message = XML.getElementsByTagName("message")[0]; // The <message> tag has a text child, child 0. // Its text (the node value) is the text inside <message> </>. if (message.childnodes[0].nodevalue == "invalid") { setmessage( warn, Invalid User Id"); else { setmessage( ok, Valid User Id"); else { setmessage( warn, Bad Server Response"); else { /* We don t have the complete reply yet */ Setting the message: <body> <div id="useridmessage"></div> </body> Alternative 1: Use innerhtml to set the embedded HTML function setmessage(cls, message) { var mdiv = document.getelementbyid("useridmessage"); mdiv.innerhtml = <div class=\ + cls + \ > + message + </div> ; AJAX Alternative 2: Create elements directly: function setmessage(cls, message) { var usermessageelement = document.getelementbyid("useridmessage"); usermessageelement.style.classname = cls; var messagebody = document.createtextnode(messagetext); JavaScript and Browser Compatibility // If it already has a text child, we replace it (it s from a previous call) if (usermessageelement.childnodes[0]) { usermessageelement.replacechild(messagebody, usermessageelement.childnodes[0]); else { usermessageelement.appendchild(messagebody); Jonas Kvarnström

20 Compatibility 1 77 Compatibility 2: Example 78 Browser support for HTML, DOM, CSS, JavaScript varies Older browsers simply do not support modern features Even newer browsers support partial standards, have bugs How to adapt? Sometimes, functionality exists but under different names if (typeof XMLHttpRequest!= "undefined") { req = new XMLHttpRequest(); else if (window.activexobject) { req = new ActiveXObject("Microsoft.XMLHTTP"); Sometimes, you can dowithoutcertain functionality Use it when it exists Otherwise, graceful degradation (features turned off, ) Sometimes, there s just nothing you can do with reasonable effort Many are ceasing to support IE 6 Example: Modern DOM uses getelementbyid() Netscape 4: IE 4/5: finds a node using document.layers finds a node using document.all function getelement(name) { if (document.getelementbyid) { return document.getelementbyid(name); else if (document.all) { return document.all[name]; else if (document.layers) { return document.layers[name]; Using Frameworks 79 JavaScript: The End 80 For all but the simplest applications: Use a framework! Hides browser differences (and there are many!) Provides higher level functionality Provideswell tested solutions Examples: JQuery small (23k compressed), simple, robust $("p.surprise").addclass("ohmy").show("slow"); Prototype Dojo YUI Toolkit, from Yahoo! That's it for now The ideas behind the language The connection to the DOM The concept of document manipulation A number of concrete examples Don't forget: The FireBug inspection / debugging / profiling tool

a Why JavaScript? jonkv interactivity on the web CGI JavaScript Java Applets Netscape LiveScript JavaScript 1: Example

a Why JavaScript? jonkv interactivity on the web CGI JavaScript Java Applets Netscape LiveScript JavaScript 1: Example Why JavaScript? 2 JavaScript JavaScript the language Web page manipulation with JavaScript and the DOM 1994 1995: Wanted interactivity on the web Server side interactivity: CGI Common Gateway Interface