COP 3813 Intro to Internet Computing

1. COP 3813Intro to Internet Computing Prof. Roy Levow Lecture 7 DHTML Intro

2. Dynamic HTML • Warning! • Microsoft DHTML and Netscape DHTML are different • They are not compatable • Examples run under IE but not Netscape

3. Dynamic HTML Object Model • XHTML elements can be treated as objects • Their XHTML attributes become properties of the objects • The properties can be manipulated by scripts for dynamic effect • The id attribute defines the object name • Example: reference.html

4. Collections all and children • A collection is basically an array of related objects • The ‘all’ collection consists of all XHTML elements of a document • The ‘children’ collection of an object consists of all the immediately contained elements • Examples: all.html, children.html

5. Dynamic Styles • Styles can change dynamically • Example: dynamicstyle.htlm • Font attributes can change dynamically • Example: dynamicstyle2.html • Position can change dynamically • Example: dynamicposition.html

6. DHTML Events • The script tag can contain an event attribute with a script to execute as its value • The action can be limited by the ‘for’ attribute. • Example: onclick.html • On load is triggered when page loads • Example: onload.html

7. Error Handling • The onerror attribute specifies a function to execute if there is an error • Three parameters: errType, errURL, errLineNum • Passed by system • Example onerror.html

8. Mouse Events • onmousemove • provides event object • properties include • button • clientX/clientY – position in client window • offsetX/offsetY – position in current object • screenX/screenY – screen position • cancelBubble – events bubble up from innermost object • Example: onmousemove.html

9. Rollovers • onmouseover, onmouseout • Example: onmouseoverout.html • Event bubling • Example: bubbling.html