Dynamic HTML (DHTML)

Outline (Dynamic HTML (DHTML))

Dynamic HTML (DHTML) [13]
1. Document Object Model (DOM) [7]
2. JavaScript [5]
Ajax Basics [2]
JavaScript Object Notation (JSON) [3]
Conclusions [1]

Dynamic HTML (DHTML) E. Wilde: Asynchronous JavaScript and XML (Ajax)

(4) Scripting on the Web

Web pages were static HTML
- HTML Forms [Hypertext Markup Language (HTML); HTML Forms (1)] were the only interactive part of Web pages
- interaction is only possible by clicking links and visiting new pages
Netscape invented the Document Object Model (DOM) [Document Object Model (DOM) (1)] and LiveScript
- Java was new and hip, so the language was renamed to JavaScript [JavaScript (1)]
- pages with scripting were more pleasant to use
- other browsers invented their own versions of DOM/JavaScript
Scripting was and is often used to implement missing functionality
- good scripting supports graceful degradation (leaving the page functional)
- bad scripting compromises accessibility when the scripting code does not work

Document Object Model (DOM)

Outline (Document Object Model (DOM))

Dynamic HTML (DHTML) [13]
1. Document Object Model (DOM) [7]
2. JavaScript [5]
Ajax Basics [2]
JavaScript Object Notation (JSON) [3]
Conclusions [1]

Document Object Model (DOM) E. Wilde: Asynchronous JavaScript and XML (Ajax)

(6) Handling Markup

HTML (and XML) are based on a tree model
- there is one document element: html
- elements may contain elements: head or body
- element structures can be nested as deep as required
- elements may contain text
- elements may contain text mixed with elements
- elements may have attributes
Most Web pages are not syntactically correct
- basic markup errors: <b><i>no tree<b><i>
- well-formed markup but not valid HTML
Browsers do their best to interpret everything as HTML
- fixing errors always is based on assumptions and thus risky

Document Object Model (DOM) E. Wilde: Asynchronous JavaScript and XML (Ajax)

(7) Mixed Content

The term Mixed content in XML refers to elements which have text content mixed with elements [http://www.w3.org/TR/xml/#sec-mixed-content]. What these elements do depends on the elements , 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>

Document Object Model (DOM) E. Wilde: Asynchronous JavaScript and XML (Ajax)

(8) Markup to Trees

Browsers build a DOM tree from the (fixed) markup
- scripting code never works on the markup text, it works on the tree
DOM trees are an abstraction of the markup
- trees provide convenient navigation facilities
- abstractions provide an insulation against irrelevant markup details
DOM is available in a large number of programming languages
- JavaScript [JavaScript (1)] is the language supported in Web browsers
- DOM is also available for Java, C, C++, Python, Perl, C#, Ruby, …

Document Object Model (DOM) E. Wilde: Asynchronous JavaScript and XML (Ajax)

(9) DOM History

DOM0 was invented by Netscape (backing the LiveScript/JavaScript)
DOM1 was the first DOM version produced by the W3C
DOM2 is the currently available stable version of DOM
- major changes to be compliant with XML and the XML Infoset
DOM3 is highly modularized and still under development
- more XML technologies such as the ability to use XPath

Document Object Model (DOM) E. Wilde: Asynchronous JavaScript and XML (Ajax)

(10) HTML Parser

Document Object Model (DOM) E. Wilde: Asynchronous JavaScript and XML (Ajax)

(11) DOM2 Map

Document Object Model (DOM) E. Wilde: Asynchronous JavaScript and XML (Ajax)

(12) DOM3 Map

JavaScript

Outline (JavaScript)

Dynamic HTML (DHTML) [13]
1. Document Object Model (DOM) [7]
2. JavaScript [5]
Ajax Basics [2]
JavaScript Object Notation (JSON) [3]
Conclusions [1]

JavaScript E. Wilde: Asynchronous JavaScript and XML (Ajax)

(14) Language Names

Netscape started the language as LiveScript
Netscape renamed the language to JavaScript
Microsoft implemented the language as JScript
ECMA [http://www.ecma-international.org/] standardized the language as ECMAScript
Macromedia/Adobe extended the language as ActionScript
Implementations for other platforms [http://en.wikipedia.org/wiki/List_of_ECMAScript_engines] are also available

JavaScript E. Wilde: Asynchronous JavaScript and XML (Ajax)

(15) 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>

colorfades.html

JavaScript E. Wilde: Asynchronous JavaScript and XML (Ajax)

(16) Web Programming

Web programming always requires document access
- user interactions are always going through the document (the interface)
- user interactions create events
- scripting code handles events and updates the document
Events occur in various contexts
- Netscape decided that events bubble up the tree
- Microsoft decided that events are captured top-down
- the W3C DOM now has a combined capturing/bubbling model
- event listeners have to decide when they want to be called

JavaScript E. Wilde: Asynchronous JavaScript and XML (Ajax)

(17) DOM Event Flow

JavaScript E. Wilde: Asynchronous JavaScript and XML (Ajax)

(18) 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>

dom-event-flow.html

JavaScript Object Notation (JSON)

Outline (JavaScript Object Notation (JSON))

Dynamic HTML (DHTML) [13]
1. Document Object Model (DOM) [7]
2. JavaScript [5]
Ajax Basics [2]
JavaScript Object Notation (JSON) [3]
Conclusions [1]

JavaScript Object Notation (JSON) E. Wilde: Asynchronous JavaScript and XML (Ajax)

(23) JavaScript and XML

The XMLHttpRequest API has been built for requesting XML via HTTP
- this is useful because XML is the most popular data format
- all requested data has to be processed by using XML access methods in JavaScript
JavaScript does not have XML as its internal data model
- the XML received via XMLHttpRequest has to be parsed into a DOM tree
- DOM access in JavaScript is inconvenient for complex operations
- alternatively, the XML can be mapped to JavaScript objects (also requires parsing)
JavaScript Object Notation (JSON) encodes data as JavaScript objects
- because the consumer is written in JavaScript, this is more efficient for the consumer
- this turn the generally usable XML service into a JavaScript-oriented service
- for large-scale applications, it might make sense to provide XML and JSON
- using Content Negotiation [Web Foundations (URI & HTTP); Content Negotiation (1)], this can be negotiated on the HTTP protocol level

JavaScript Object Notation (JSON) E. Wilde: Asynchronous JavaScript and XML (Ajax)

(24) JSON Example

<?xml version="1.0"?>
<menu id="file" value="File">
 <popup>
  <menuitem value="New" onclick="CreateNewDoc()"/>
  <menuitem value="Open" onclick="OpenDoc()"/>
  <menuitem value="Close" onclick="CloseDoc()"/>
 </popup>
</menu>

menu.xml

{ "menu" : {
 "id" : "file",
 "value" : "File",
 "popup" : {
  "menuitem" : [
   { "value" : "New", "onclick" : "CreateNewDoc()" },
   { "value" : "Open", "onclick" : "OpenDoc()" },
   { "value" : "Close", "onclick" : "CloseDoc()" }
  ]
 }
}}

menu.json

JavaScript Object Notation (JSON) E. Wilde: Asynchronous JavaScript and XML (Ajax)

(25) JSON via Content Negotiation

XML or JSON are just different representations
- they represent the same underlying resource (as identified by the URI)
Content Negotiation [Web Foundations (URI & HTTP); Content Negotiation (1)] allows to specify preferences
- clients specify preferences and server respond with the best match
HTTP Accept specifies the accepted Media Types [Media Types]
- resources may be available in HTML, XML, or JSON
- depending on the HTTP request, the server responds with the best representation
- reduces processing time on the client and can be cached
Really smart Ajax frameworks could even hide the content negotiation
- request JSON or XML with XML being the lower priority
- if XML is sent by the server, it has to be parsed into a JavaScript object
- the end result is always a JavaScript object for the framework user

Asynchronous JavaScript and XML (Ajax)

Web Architecture [./]
Fall 2008 — INFO 290-03 (CCN 42584)

Erik WildeUC Berkeley School of Information, UC Berkeley School of Information
2008-10-16

Contents

(2) Abstract

Dynamic HTML (DHTML)

Outline (Dynamic HTML (DHTML))

(4) Scripting on the Web

Document Object Model (DOM)

Outline (Document Object Model (DOM))

(6) Handling Markup

(7) Mixed Content

(8) Markup to Trees

(9) DOM History

(10) HTML Parser

(11) DOM2 Map

(12) DOM3 Map

JavaScript

Outline (JavaScript)

(14) Language Names

(15) Scripted Effects

(16) Web Programming

(17) DOM Event Flow

(18) Registering Event Listeners

Ajax Basics

Outline (Ajax Basics)

(20) Ajax = DHTML + HTTP

(21) Ajax and DHTML

JavaScript Object Notation (JSON)

Outline (JavaScript Object Notation (JSON))

(23) JavaScript and XML

(24) JSON Example

(25) JSON via Content Negotiation

Conclusions

Outline (Conclusions)

(27) Client/Server Recreated

Asynchronous JavaScript and XML (Ajax)

Web Architecture [./]Fall 2008 — INFO 290-03 (CCN 42584)

Erik WildeUC Berkeley School of Information, UC Berkeley School of Information2008-10-16

Contents

(2) Abstract

Dynamic HTML (DHTML)

Outline (Dynamic HTML (DHTML))

(4) Scripting on the Web

Document Object Model (DOM)

Outline (Document Object Model (DOM))

(6) Handling Markup

(7) Mixed Content

(8) Markup to Trees

(9) DOM History

(10) HTML Parser

(11) DOM2 Map

(12) DOM3 Map

JavaScript

Outline (JavaScript)

(14) Language Names

(15) Scripted Effects

(16) Web Programming

(17) DOM Event Flow

(18) Registering Event Listeners

Ajax Basics

Outline (Ajax Basics)

(20) Ajax = DHTML + HTTP

(21) Ajax and DHTML

JavaScript Object Notation (JSON)

Outline (JavaScript Object Notation (JSON))

(23) JavaScript and XML

(24) JSON Example

(25) JSON via Content Negotiation

Conclusions

Outline (Conclusions)

(27) Client/Server Recreated

Web Architecture [./]
Fall 2008 — INFO 290-03 (CCN 42584)

Erik WildeUC Berkeley School of Information, UC Berkeley School of Information
2008-10-16