Chapter 7 DHTML Object Model and Collections CIS
Chapter 7: DHTML: Object Model and Collections CIS 275—Web Application Development for Business I
Object Referencing n n n The DHTML Object Model gives web authors access to all elements on their web page through ____. Elements can be referenced through the __ attribute. Example n n n in HTML: <p id = “p. Text”>Welcome!</p> in Java. Script: p. Text. inner. Text = “Thanks for coming. ”; The object p. Text has the property _____. When the JS is executed, the text in the web page changes, giving the web page _____ content. See reference. html. 2
Collections n n n 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 <head> is first after _______. See all. html and children. html. 3
Dynamic Styles n n An element’s ______ can be changed dynamically. Changing background color (see p. 436): n n n var input. Color = prompt(“Enter a color name for the page background”, “”); document. body. style. background. Color = input. Color; Changing ______ attributes of elements (see p. 437) The CSS: . big. Text {font-size: 3 em; font-weight: bold} The Java. Script: var input. Class = prompt(“Enter a class name”, “”); p. Text. class. Name = input. Class; The HTML: <p id = “p. Text”>Welcome!</p> 4
Dynamic Positioning n n n 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: n n n Set a timer for a single function execution: n n n var timer = window. set. Timeout(“a. Function()”, 1000); The function a. Function() is called once after 1000 ms Stop a timer: n n n var timer = window. set. Interval(“a. Function()”, 1000); The function a. Function() is called every 1000 ms window. clear. Interval(timer); window. clear. Timeout(timer); See example dynamicposition. html. 5
The frames Collection n A web page can access another page in a frame using the frame’s name: n n parent. frames(“<framename>”) See index. html and top. html. 6
The navigator Object n Different web browsers operate differently n n n Microsoft IE vs. Mozilla Firefox Different versions of Microsoft IE The Java. Script _____ object can detect the browser and version, then redirect users to the appropriate web page. navigator. app. Name returns either “Microsoft Internet Explorer”, “Netscape”, “Mozilla”, etc. navigator. app. Version. substring(1, 0) returns the first character in the browser _______ (4, 5, 6, etc. ). document. location = “<url>”; loads the desired page (see navigator. html). 7
Summary n See http: //w 3 schools. com/dhtml/default. asp and http: //msdn 2. microsoft. com/enus/library/ms 533050. aspx for additional resources. 8
More Examples n Listing 7 -1 in Moseley (set. Interval): n n <div id = “urgent”><h 1>…</div> var e = document. get. Element. By. Id( “urgent” ); set. Interval( “e. style. background. Color = colors[ next. Color++ % colors. length ]; ”, 500); Listing 7 -2 in Moseley (images): n n <img src = “suki. jpg” name = “cats” …> <input type = “button” name = “suki” value = “Miss Suki” on. Click = “document. cats. src = ‘suki. jpg’; ”> 9
The Image Object n Creating and sourcing an Image object: n n n Using an array of Image objects: n n n n an. Image = new Image(); an. Image. src = “suki. jpg”; var images. Array = new Array(6); for( var i = 0; i < 6; i++ ){ images. Array[ i ] = new Image(); images. Array[ i ]. src = “anim” + i + “. jpg”; } see listing on Moseley p. 152 using set. Timeout and clear. Timeout Listing 7 -4 gives a complex example of dynamic positioning. 10
Events and Buttons n n n Events (such as onclick) trigger event ____ Event handlers catch event objects and execute code Example events: n n n (leave an object) onclick (click an object) onmouseover (cursor moves over an object) onsubmit (submit a form) onblur Using events: n n <body on. Unload = “alert( ‘Goodbye!’ )”> <p>Click for the <a href = “mytime. html” on. Click = “alert( ‘the time and date is ‘ + Date() )” > time!</a></p> 11
- Slides: 11