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

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 p. 431 for complete file.

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 pp. 432 and 434 for sample files.

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 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 on p. 439.

6 The frames Collection A web page can access another page in a frame using the frame’s name: parent.frames(“ ”) See example on p. 441.

7 The navigator Object Different web browsers operate differently Microsoft IE vs. Netscape 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 p. 443).

8 Summary See pp for a listing of important DHTML objects and collections. See orkshop/author/dhtml/reference/dhtml_reference_ent ry.asp for additional resources. orkshop/author/dhtml/reference/dhtml_reference_ent ry.asp