General Computer Science 320201 GenCS I & II Lecture ... - Kwarc

document structure, and ii) a program interpreter in the web browser, and iii) a way to send
programs to the browser together with the documents. We will sketch the WWWeb solution to
this in the following.
Dynamic HTML
Observation: The nested, markup codes turn HTML documents into trees.
Definition 559 The document object model (DOM) is a data structure for the HTML
document tree together with a standardized set of access methods.
Note: All browsers implement the DOM and parse HTML documents into it; only then is
the DOM rendered for the user.
Idea: generate parts of the web page dynamically by manipulating the DOM.
Definition 560 JavaScript is an object-oriented scripting language mostly used to enable
programmatic access to the DOM in a web browser.
JavaScript is standardized by ECMA in [ECM09].
Example 561 We write the some text into a HTML document object (the document API)
document.write("Dynamic HTML!");
c○: Michael Kohlhase 369
Let us fortify our intuition about dynamic HTML by going into a more involved example.
Applications and useful tricks in Dynamic HTML
Example 562 hide document parts by setting CSS style attributes to display:none
#dropper { display: none; }
function toggleDiv(element){
if(document.getElementById(element).style.display = ’none’)
{document.getElementById(element).style.display = ’block’}
else if(document.getElementById(element).style.display = ’block’)
{document.getElementById(element).style.display = ’none’}}
...more
Now you see it!
Application: write “gmail” or “google docs” as JavaScript enhanced web applications.
(client-side computation for immediate reaction)
Current Megatrend: Computation in the “cloud”, browsers (or “apps”) as user interfaces
c○: Michael Kohlhase 370
Current web applications include simple office software (word processors, online spreadsheets, and
211