Embed Size (px)
Citation preview
Chapter 7: 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: <p id = “pText”>Welcome!</p> 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.
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 <head> is first after _______.
See all.html and children.html.
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: <p id = “pText”>Welcome!</p>
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.
6
The frames Collection A web page can access another page in a
frame using the frame’s name: parent.frames(“<framename>”)
See index.html and top.html.
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 = “<url>”; loads the desired page (see navigator.html).
8
Summary See http://w3schools.com/dhtml/default.asp
and http://msdn2.microsoft.com/en-us/library/ms533050.aspx for additional resources.
9
More Examples Listing 7-1 in Moseley (setInterval):
<div id = “urgent”><h1>…</div> var e = document.getElementById( “urgent” ); setInterval( “e.style.backgroundColor = colors[ nextColor++ % colors.length ];”, 500);
Listing 7-2 in Moseley (images): <img src = “suki.jpg” name = “cats” …> <input type = “button” name = “suki” value = “Miss Suki” onClick = “document.cats.src = ‘suki.jpg’;”>
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
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: <body onUnload = “alert( ‘Goodbye!’ )”> <p>Click for the <a href = “mytime.html” onClick = “alert( ‘the time and date is ‘ + Date() )” > time!</a></p>
