dhtml2010.pdf February 25,

Size: px

Start display at page:

Download "dhtml2010.pdf February 25,"

Leona Scott
6 years ago
Views:

1 Dynamic HTML INP 2009/ Client Side Scripting: The DOM and JavaScript Lennart Herlaar lennart@cs.uu.nl room A104, telephone February 25, 2010 The DOM and JavaScript 1 The interplay between (X)HTML, style sheets and JavaScript using the Document Object Model (DOM). JavaScript is a widely supported scripting language Most of its syntax will be familiar JavaScript seems object oriented, but is in some ways very different from Java. JavaScript can be used for manipulating a document via the DOM. DOM exists in several version: 0, 1, 2 and 3. Work on 3 continues, but support for 2 is still not standardized across browsers. Be careful when using JavaScript because people can turn it off and implementations vary to large extent. Things are getting better though. But JavaScript is still very useful for client side validation and (limited) dynamics. The DOM and JavaScript 1 What can you do with them? But first...javascript In your webpage you can allow: Interaction through forms. Pull down menus. Fold-out hierarchical structures. Tooltips Animation Run-time style configuration Code examples can be found everywhere (e.g. Estrella s DHTML and CSS book, Deitel, Deitel and Nieto). Derived from LiveScript. Sometimes called EcmaScript (see JavaScript mainly used for client-side validating and adding dynamics. You shall see a lot of commonalities with PHP (like ===). Seems a bit like Java at first glance, but mainly on the surface. This means: The well-known operators (+, ++, + =, =...) Comments The well-known control structures Objects and methods, including special ones like String, Math. No need to deallocate. The DOM and JavaScript 2 The DOM and JavaScript 3 Differences with Java part 1 Differences with Java part 2 Information is organized in objects: a list of pairs (property,value). JavaScript is object-based, not class-based. No need to declare variables or properties. Properties and functions can be added dynamically to objects. Variables are untyped (whatever type follows from assigment). The typeof operator can be used to determine run-time types. Everything starts with being undefined. Automatic conversion: "Bla " + number. A Java program stands alone: no coupling to the document. Functions exist. They may be added to objects to become methods Global and local variables Every variable is global except when explicitly declared with the keyword var inside a function. Scoping as usual, shadowing as usual. Function definitions can be nested (hardly anyone uses this). A number of global functions (members of Global): parseint, isnan, isfinite, escape and a few others. The DOM and JavaScript 4 The DOM and JavaScript 5 dhtml2010.pdf February 25,

2 A dynamic Javascript application Cats that meeow Dynamic contents of HTML pages that depend on the browser state Put the source code in the HTML page. Or put it in a separate.js file and include the source. <script language="javascript" type="text/javascript" src = "helperfuns.js"> today = new Date() endyear = new Date(2009,11,31,23,59,59,999) endyear.setfullyear(today.getfullyear()) msperday = 24 * 60 * 60 * 1000 daysleft = (endyear.gettime() - today.gettime()) / msperday daysleft = Math.round(daysLeft) document.writeln("still " + daysleft + " days left in this year"); The DOM and JavaScript 6 A constructor is synonymous with an object type. JavaScript engine is usually forgiving: turn on error messages in your browser. function cat(name) { // Object with added properties this.name = name; if (name) { this.talk = // talks string to alert function() { alert( this.name + " says meeow!" ) cat1 = new cat("felix"); cat1.talk(); //alerts "felix says meeow!" cat2 = new cat();cat2.talk(); // gives run-time error. The DOM and JavaScript 7 Prototype inheritance JavaScript arrays IE5+ doesn t support the shift() and unshift() methods of Array that NS4+ does shift removes the first element out of an array, shifting the other element one place forward and returns that first element. But these can be added on the fly to all Arrays, by prototype inheritance. As always this refers to the object at hand. if(!array.prototype.shift) { // if this method does not exist.. Array.prototype.shift = function(){ firstelement = this[0]; this.reverse(); this.length = Math.max(this.length-1,0); this.reverse(); return firstelement; The DOM and JavaScript 8 var mylist1 = [1, 2,, "four"]; // Not the same type var mylist2 = new Array(1,2,,"four"); var mylist3 = new Array(4); // Array of length 4 var multi1 = [ [ 1], [ 3, 4, 5]]; // One row of 1, one of 3. var x = multi1.length + multi1[0].length; // Should be three. for (var i in mylist1) { // i ranges over the indices. sum += mylist1[i]; join instead of implode Many useful functions exist: join, sort, concat, slice, shift, unshift, pop, push. Quite similar to what is available in Perl or PHP. The DOM and JavaScript 9 More on for Language differences with PHP The for...in statement also works for general objects. It ranges over all properties. obj["name"] and obj.name can both be used. function dumpprops (obj, objname) { var result = ""; for (var i in obj) { result += objname + "." + i + " = " + obj[i] + "<BR>" return result; car = new car(); car.make = "Ford"; car.model = "Escort"; dumpprops(car,"car"); null and undefined, almost the same but not quite. null is used for objects which do not refer to anything undefined is used for variables which do not exist or never got a value. Variables are global unless preceded by the keyword var. Call-by-value parameter passing; arrays and objects passed as references. Parameters also accessible in function through arguments array. Useful for taking arbitrary numbers of parameters. Strings should stick to a single line. No interpolation. Take care with juggling: " meeowws". What about 7 * "3"? Jugglings are likely enough different in more aspects. The DOM and JavaScript 10 The DOM and JavaScript 11 dhtml2010.pdf February 25,

3 Document Object Model Do we have Dom1? Glue between a programming language and the (X)HTML document Describes how elements in a document can be referred to. And the same for attributes of course. Various versions exist. Level 0 is a quite different across browsers. Level 1 is implemented in most browsers (but see for more detailed info). Level 2 events are handled in different ways by some browsers, leave alone support for Level 3. For some reason IE 6.x does not support the Level 2 events. Browser detects seem unavoidable Always verify that your system works on the major and some minor browsers. The DOM and JavaScript 12 var thedom1 = (document.getelementbyid)? true : false; var theapp = navigator.appname.tolowercase(); var UA = navigator.useragent.tolowercase(); var version = navigator.appversion; // Often WRONG!... Do not write detector yourself. It is hairy stuff. More detection code can be found on The DOM and JavaScript 13 Special operations in a browser window Resizing the window Open extra windows mywindow=window.open("ipnews.html"); // opens new window newval = prompt("gimme a bitstring","101"); if (confirm("are you sure you want "+newval+"?")) { document.write ("You got it"); else { document.write ("Make up your mind"); The DOM and JavaScript 14 function getavailablewidth () { var thewidth = null; if (window.innerwidth) { // Netscape thewidth = window.innerwidth; if (document.body.clientwidth) { // IE thewidth = document.body.clientwidth; return thewidth; // Same for height, IE 6.0 is supposed to be buggy here. function maximizewindow () { window.moveto(0,0); window.resizeto(screen.availwidth,screen.availheight); The DOM and JavaScript 15 Document Object Model (DOM) Document Object Model - document object window = the window in which we are document = the document that is displayed in the window frames document history - keeps track of browser history for moving back and forward location - url of the rendered document event - contains information for events (mouse coordinates) screen - information on the computer screen Estrella s book on JavaScript contains an appendix with an overview of Core JavaScript objects. all collection (references to all nodes in the document) body forms collection anchors collection (only when id or name attribute set) images collection links collection and many more. The DOM and JavaScript 16 The DOM and JavaScript 17 dhtml2010.pdf February 25,

4 Children are the future More structured into the document For each node, children is the array of its children. We can iterate nicely through the lot of them: function traverse (object) { if (typeof(object) === "object") { document.writeln(object.tagname); for (var child in object.children) { traverse(object.children[child]); Now for some examples of DOM and JavaScript working together function dochild (object) { if (typeof(object) === "object") { elements += "<li>"+object.tagname + "<ul>"; for (var i in object.children) { dochild(object.children[ i ]); elements += "</ul></li>"; </head> <body>... The DOM and JavaScript 18 The DOM and JavaScript 19 Reacting to a mouse click Mouse on the move function myfunc() { mywin=window.open("news.html", "mywindow", "width=200,height=200,toolbar=no,scrollbars=yes") <form> <input type="button" value="news" onclick="myfunc()" /> <input type="button" value="close" onclick="mywin.close()" /> function load1() { document["flower"].src = "flower1.jpg" function load2() { document["flower"].src = "flower2.jpg" </head> <body> <a href="test.html" onmouseover="load2()" onmouseout="load1()"> <img src="flower1.jpg" name="flower" />  </a> The DOM and JavaScript 20 The DOM and JavaScript 21 Calculations in a form Alternative addressing Accessing values from a form. Recomputed on change. function calc() { document.form1.out.value = parseint(document.form1.i1.value) + parseint(document.form1.i2.value)... <form name="form1"> <input type="text" name="i1" size="10" onchange="calc()" /> + <input type="text" name="i2" size="10" onchange="calc()" /> = <input type="text" name="out" size="10" /> Use Pascal style with Use getelementbyid function calc() { with (document["form1"]) { // Pascal style with command. OUT.value = parseint(i1.value) + parseint(document.getelementbyid("i2").value); The DOM and JavaScript 22 The DOM and JavaScript 23 dhtml2010.pdf February 25,

5 Validating input Events Validated on submission. If false is returned, the default action is not taken. In this case, the information is not submitted to the server. function mytest() { if (document.form2.textfield.value.length > 0) return true; else { alert( Text field empty! ); return false; <form name="form2" onsubmit="return mytest()"> <input name="textfield" type="text" /> <input type="submit" /> The DOM and JavaScript 24 Many events are predefined. Events are handled differently in the various DOMs. Dom 0 events are rather easy: click on something, browser sends click event to the corresponding node in the document tree, handled by a registered handler: onclick = "validate()". Then the event is sent up to the father node (bubbling) to be handled. Old netscape 4.x browsers use event capturing, which proceeds top-down to the target node. Under DOM Level 2, the default is bubbling if the Level 0 method is used. Starting events in your code: document.getelementbyid("phone").focus(); If a handler returns false, the default action is not taken (see forms). The DOM and JavaScript 25 Dom Level 2 events Bubble or capture, that is the question Event capturing: start at the root and move down to target Event bubbling: go back up from the target to the root. Along the way various methods may have been registered for the event. Register by adding listener(s) element.addeventlistener("click",startdragdrop,false); element.addeventlistener("click",spyonuser,false); When what is executed depends on your own choice. true means on capture (going down) false means on bubbling (going back up) Suppose e2 is nested in e1. First do1, then do2 e1.addeventlistener("click",do1,true) e2.addeventlistener("click",do2,false) // or true First do2, then do1 e1.addeventlistener("click",do1,false) e2.addeventlistener("click",do2,false) // or true The DOM and JavaScript 26 e1 might have a listener set to true and one to false Using e1.onclick = do1; behaves as if set to false/bubble. The DOM and JavaScript 27 Getting too complicated? Bubbling and/or capturing always happen If e1 and e2 both contained in document e1.onclick = dosomething1; e2.onclick = dosomething2; document.onclick = defaultfunction; An object may stop the event bubbling up further: function dosomething(e) { if (!e) var e = window.event; e.cancelbubble = true; // IE if (e.stoppropagation) e.stoppropagation(); // W3C Capturing cannot be stopped! The DOM and JavaScript 28 dhtml2010.pdf February 25,

JavaScript CS 4640 Programming Languages for Web Applications

JavaScript CS 4640 Programming Languages for Web Applications 1 How HTML, CSS, and JS Fit Together {css} javascript() Content layer The HTML gives the page structure and adds semantics Presentation