Dynamic HTML (DHTML)

Web Architecture (INFO 290-03)

Erik Wilde, UC Berkeley School of Information
2007-10-16
Creative Commons License

This work is licensed under a CC
Attribution 3.0 Unported License

Abstract

Dynamic HTML (DHTML) refers to the combination of HTML, CSS, the Document Object Model (DOM), and JavaScript. The Document Object Model (DOM) is an API for markup-structured documents, it is used for HTML as well as for XML. The DOM allows program code to access documents for read and write access. DOM-based access to documents in conjunction with user-originated events (keyboard and mouse events) allows scripting code on Web pages to dynamically update documents.

Scripting on the Web

Outline (Document Object Model (DOM))

  1. Document Object Model (DOM) [7]
  2. JavaScript [5]
  3. Conclusions [1]

Handling Markup

Mixed Content

The term Mixed content in XML refers to elements which have text content mixed with elements. What these elements do depends on the elements smiley.gif, but the important point is that they are on the same level as the text nodes of the mixed content.

<p>The term <em>Mixed content</em> in XML refers to elements <a href="http://www.w3.org/TR/xml/#sec-mixed-content">which have text content mixed with elements</a>. What these elements do depends on the elements <img style="height : 1em" src="smiley.gif"/>, but the important point is that they are on the same level as the text nodes of the mixed content.</p>
XML tree for mixed content

Markup to Trees

DOM History

HTML Parser

HTML Parser

DOM2 Map

dom2-map.png

DOM3 Map

dom3-map.png

Outline (JavaScript)

  1. Document Object Model (DOM) [7]
  2. JavaScript [5]
  3. Conclusions [1]

Language Names

Scripted Effects

<html>
 <head>
  <title>CSS and DOM for Text Animation</title>
  <script>
  cc = 25 ;  // Number of frames in the animation
  aa = 255 ; // Initial value used for RGB color
  tt = 0 ;   // Aux counter - the left position of the element
  el = 0 ;   // Index of the element
  function colorfade() {
   if ( cc > 0 ) {
    tt += cc ;
    document.getElementById("t"+el).style.left = tt+"px" ;
    aa -= 10 ;
    document.getElementById("t"+el).style.color = "rgb("+aa+","+aa+","+aa+")" ;
    cc-- ;
    setTimeout("colorfade()", 40) ;
   } else {
    cc = 25 ; aa = 255 ; tt = 0 ;
    if ( el < 5 ) {
     el++ ;
     setTimeout("colorfade()", 20); } } }
  </script>
 </head>
 <body onload="colorfade()" style="color:white;background:white;left:0px;">
  <div id="t0" style="position:absolute;top:10%;font-size:48pt;">CSS</div>
  <div id="t1" style="position:absolute;top:20%;font-size:32pt;">and</div>
  <div id="t2" style="position:absolute;top:30%;font-size:48pt;">DOM</div>
  <div id="t3" style="position:absolute;top:40%;font-size:32pt;">for</div>
  <div id="t4" style="position:absolute;top:50%;font-size:48pt;">Text</div>
  <div id="t5" style="position:absolute;top:60%;font-size:96pt;">Animation</div>
 </body>
</html>

Web Programming

DOM Event Flow

dom-event-flow.png

Registering Event Listeners

<html>
 <head>
  <title>DOM Event Flow</title>
  <script type="text/javascript">
   function init() {
    // using old syntax to assign bubble-type event handlers
    window.onclick = winEvent ;
    document.onclick = docEvent ;
    document.body.onclick = docBodEvent ;
    // turn on click event capture for two objects
    document.addEventListener("click", docEvent, true) ;
    document.forms[0].addEventListener("click", formCaptureEvent, true) ;
    // set event listener for bubble
    document.forms[0].addEventListener("click", formBubbleEvent, false) ; }
   function winEvent(evt) { alert("window and (" + phase(evt) + ").") } ;
   function docEvent(evt) { alert("document and (" + phase(evt) + ").") } ;
   function docBodEvent(evt) { alert("body and (" + phase(evt) + ").") } ;
   function formCaptureEvent(evt) { alert("form and (" + phase(evt) + ").") } ;
   function formBubbleEvent(evt) { alert("form and (" + phase(evt) + ").") } ;
   function phase(evt) {
    switch (evt.eventPhase) {
     case 1:  return "CAPTURING" ; break ;
     case 2:  return "AT TARGET" ; break ;
     case 3:  return "BUBBLING" ;  break ;
     default: return "" } }
  </script>
 </head>
 <body onLoad="init()">
  <form>
   <input type="button" value="Click!" onClick="alert('button and (' + phase(event) + ').')" />
  </form>
 </body>
</html>

Outline (Conclusions)

  1. Document Object Model (DOM) [7]
  2. JavaScript [5]
  3. Conclusions [1]

Making Web Pages Act & React