1. Chapter 7: DHTML: Object Model and Collections CIS 275—Web Application Development for Business I

2. 2 Object Referencing The DHTML Object Model gives web authors access to all elements on their web page through ________. Elements can be referenced through the __ attribute. Example in HTML: Welcome! in JavaScript: pText.innerText = “Thanks for coming.”; The object pText has the property __________. When the JS is executed, the text in the web page changes, giving the web page _________ content. See reference.html.reference.html

3. 3 Collections Collections are ________ of related objects on a page. The _____ collection is an array of all XHTML elements in a document in the order of appearance. This allows a reference even without an __ attribute. document.all[0].tagname would return “HTML” if the tag _______ is first on the page. document.all[0].children[0].tagname would return “HEAD” if the tag is first after _______. See all.html and children.html.all.htmlchildren.html

4. 4 Dynamic Styles An element’s ______ can be changed dynamically. Changing background color (see p. 436): var inputColor = prompt(“Enter a color name for the page background”, “”); document.body.style.backgroundColor = inputColor; Changing ______ attributes of elements (see p. 437) The CSS:.bigText {font-size: 3em; font-weight: bold} The JavaScript: var inputClass = prompt(“Enter a class name”, “”); pText.className = inputClass; The HTML: Welcome!

5. 5 Dynamic Positioning You can position elements on a web page with scripting using the CSS __________ property. Many dynamic events are controlled by timing. Set a timer for repeated function execution: var timer = window.setInterval(“aFunction()”, 1000); The function aFunction() is called every 1000 ms Set a timer for a single function execution: var timer = window.setTimeout(“aFunction()”, 1000); The function aFunction() is called once after 1000 ms Stop a timer: window.clearInterval(timer); window.clearTimeout(timer); See example dynamicposition.html.dynamicposition.html

6. 6 The frames Collection A web page can access another page in a frame using the frame’s name: parent.frames(“ ”) See index.html and top.html.index.htmltop.html

7. 7 The navigator Object Different web browsers operate differently Microsoft IE vs. Mozilla Firefox Different versions of Microsoft IE The JavaScript __________ object can detect the browser and version, then redirect users to the appropriate web page. navigator.appName returns either “Microsoft Internet Explorer”, “Netscape”, “Mozilla”, etc. navigator.appVersion.substring(1,0) returns the first character in the browser _______ (4, 5, 6, etc.). document.location = “ ”; loads the desired page (see navigator.html ). navigator.html

8. 8 Summary See http://w3schools.com/dhtml/default.asp and http://msdn2.microsoft.com/en- us/library/ms533050.aspx for additional resources.http://w3schools.com/dhtml/default.asp http://msdn2.microsoft.com/en- us/library/ms533050.aspx

9. 9 More Examples Listing 7-1 in Moseley ( setInterval ): … var e = document.getElementById( “urgent” ); setInterval( “e.style.backgroundColor = colors[ nextColor++ % colors.length ];”, 500); Listing 7-2 in Moseley (images):

10. 10 The Image Object Creating and sourcing an Image object: anImage = new Image(); anImage.src = “suki.jpg”; Using an array of Image objects: var imagesArray = new Array(6); for( var i = 0; i < 6; i++ ){ imagesArray[ i ] = new Image(); imagesArray[ i ].src = “anim” + i + “.jpg”; } see listing on Moseley p. 152 using setTimeout and clearTimeout Listing 7-4 gives a complex example of dynamic positioning.

11. 11 Events and Buttons Events (such as onclick ) trigger event ________ Event handlers catch event objects and execute code Example events: onblur (leave an object) onclick (click an object) onmouseover (cursor moves over an object) onsubmit (submit a form) Using events: Click for the time!