CSS1 Dynamic HTML Objects, Collections & Events

CSS2 Introduction Dynamic HTML treats HTML elements as objects. Element’s parameters can be treated as properties, whose values can be changed through a scripting language, dynamically. Web page, which consists of elements, forms, frames, tables, etc., is represented as an object hierarchy.

CSS3 Hierarchy window document frames history navigator location event screen document plugins all anchors body applets filters embeds forms images links plugins object collection Key

CSS4 Elements as Objects How can the individual elements in a document be accessed? Using the id parameter.

CSS5 Example 1 Object Model function start() { alert( pText.innerText ); pText.innerText = "Thanks for coming."; } Welcome to our Web page!

CSS6 Collections Dynamic HTML has collections besides objects. Collections are basically arrays of related objects on a page. Special collections: all collection Other collections: anchors, forms, images, links, plug-ins, scripts, etc.

CSS7 Example 2 Object Model var elements = ""; function start() { for ( var loop = 0; loop < document.all.length; ++loop ) elements += " " + document.all[ loop ].tagName; pText.innerHTML += elements; } Elements on this Web page:

CSS8 Events Dynamic HTML allows event driven programs (scripts) to run on the client side. This can make a web page responsive to the users actions. Web page content becomes dynamic. All these things happen without loading the server.

CSS9 Event Example: Onclick DHTML Event ONCLICK alert( "Hi there" ); Click on this text!

CSS10 Event Example: Onmouseover DHTML Event - ONMOUSEMOVE event function updateMouseCoordinates() { coordinates.innerText = event.srcElement.tagName + " (" + event.offsetX + ", " + event.offsetY + ")";} (0, 0) <IMG SRC = "deitel.gif" STYLE = "position: absolute; top: 100; left: 100">