Seminar 1

Beyond HTML -

Dynamic HTML and the Document Object Model

© M. Firebaugh


I. Topics:


II. Limitations of "Pure" HTML

HTML is a static markup language consisting of 85 tags

Recall the classic HTML approaches to dynamic motion:

<BLINK>

Mars Landscape (Rotate View)

IMac (Rotate Object)

The classic HTML approach to user interaction uses the <FORM>

Example: From Final Exam in Web Page Design 220

PLEASE IDENTIFY YOURSELF

Last Name:
First Name:
Student ID:
Course #:
Date (DD/MM/YY):
 





 

1. The Internet grew out of the cold war and got its start in

.....

75. The reusable elements stored in the Flash library are called

Note the following characteristics of classic HTML dynamic motion/interaction:

So, how can we bring to life and animate the elements themselves, not just their content?

Answer:

DYNAMIC HTML (DHTML)


III. Making Web Objects Dynamic

Dynamic HTML can be considered as a marriage between

Applications of DHTML may be categorized as:

The key concepts of DHTML are

To clarify the DHTML concept, we can use the pizza analogy:


IV. Object Models

What is an Object Model?

We can think of an Object Model as the representation of Web documents and elements in OOP (Object-Oriented Programming) language.

O.K., but what is Object-Oriented Programming?

OOP Advantages include:

DHTML is based on a fundamental change in the concept of HTML "objects"

Evolution of Object Models

  1. DHTML Object Model
  2. Document Object Model

DHTML Object Model

Document Object Model (DOM)

The W3C says:

The Document Object Model (DOM) is an application
programming interface (API) for HTML and XML
documents. It defines the logical structure of documents
and the way a document is accessed and manipulated.	

Examples of how the DOM represents HTML objects:

An HTML Table:


                     <TABLE>
                     <TBODY> 
                     <TR> 
                     <TD>Shady Grove</TD>
                     <TD>Aeolian</TD> 
                     </TR> 
                     <TR>
                     <TD>Over the River, Charlie</TD>        
                     <TD>Dorian</TD> 
                     </TR> 
                     </TBODY>
                     </TABLE>

is represented in the DOM as:

Interface HTMLFormElement

IDL Definition


interface HTMLFormElement : HTMLElement {
readonly attribute HTMLCollection   elements;
readonly attribute long             length;
attribute DOMString        name;
attribute DOMString        acceptCharset;
attribute DOMString        action;
attribute DOMString        enctype;
attribute DOMString        method;
attribute DOMString        target;
void               submit();
void               reset();
};

Attributes

acceptCharset of type DOMString
List of character sets supported by the server. See the
accept-charset attribute definition in HTML 4.0.

action of type DOMString
Server-side form handler. See the action attribute definition in HTML 4.0.

elements of type HTMLCollection, readonly
Returns a collection of all control elements in the form.

enctype of type DOMString
The content type of the submitted form, generally
"application/x-www-form-urlencoded". See the enctype attribute definition in
HTML 4.0.

length of type long, readonly
The number of form controls in the form.

method of type DOMString
HTTP method used to submit form. See the method attribute definition in
HTML 4.0.

name of type DOMString
Names the form.

target of type DOMString
Frame to render the resource in. See the target attribute definition in HTML
4.0.

Methods

reset
Restores a form element's default values. It performs the same action as a
reset button.
No Parameters
No Return Value
No Exceptions


submit
Submits the form. It performs the same action as a submit button.
No Parameters
No Return Value
No Exceptions

Note:

The DOM defines every element of HTML and XML in such IDL language.


IV. Relationship of Cascading Style Sheets and DHTML

The general procedure for applying DHTML is:

Consider the Syntax of a CSS

where

Options for cascading Style Sheets include:


1. An external style sheet in a separate document referenced by the <LINK> tag in the head of the document to which it is to be applied

2. An internal style sheet contained within <STYLE> tags defined within the head of the document to which it is to be applied

3. Inline style changes using the STYLE attribute and applying only to the current element

The Syntax for linking to an external style sheet is given as:

<link rel="STYLESHEET" type="text/css" href= "UNICOStyle. css">

Example of CSS used for this Seminar - UNICOStyle.css

a:active { color: #cccc00 }
a:link { color: #4040ff }
a:visited { color: #ff6600 }
address { color: #660066; font-size: 14pt; font-family: Arial }
body { color: #3300ff; font-size: 14pt; margin-right: 10px; margin-left: 10px }
code { color: red; font-size: 14pt; font-family: Courier, sans-serif }
dfn { color: blue; font-size: 14pt; font-family: Courier, sans-serif }
dl { color: #8b4513; font: 14pt/20pt Palatino, "Times Roman", serif }
h1 { color: #ff00cc; font: 35pt Palatino }
h2 { color: #9900cc; font: 25pt Helvetica }
h3 { color: #6600cc; font: 22pt Palatino }
h4 { color: #3300cc; font: 18pt Palatino }
hr { color: #cc00cc }
kbd { color: green; font-weight: bold; font-size: 14pt; font-family: Courier, sans-serif }
ol { color: #3333ff; font: 16pt/24pt Palatino, "Times Roman", serif }
p { color: #3333ff; font-size: 18pt; margin-right: 10px; margin-left: 10px }
p.classic { color: red; font-size: 14pt; font-family: Helvetica, sans-serif; margin-right: 10px; margin-left: 200px }
p.symbol { color: green; font-size: 14pt; font-family: Symbol; margin-right: 200px }
p:first-line { }
pre { color: red; font-size: 14pt; font-family: Courier, sans-serif; margin-right: 1.5in; margin-left: 1.5in }
samp { color: blue; font-size: 14pt; font-family: Courier, sans-serif }
sub { color: #8b4513; font: 10pt Palatino, "Times Roman", serif }
sup { color: #8b4513; font: 10pt Palatino, "Times Roman", serif }
tt { color: #dd0000; font-size: 14pt; font-family: Courier, sans-serif }
ul { color: #3333ff; font: 18pt/30pt Palatino, "Times Roman", serif }
xmp { color: green; font-weight: bold; font-size: 14pt; font-family: Courier, sans-serif } 

Note:

Example: Adobe GoLive

Open UNICOStyle.css

Examine and Set Attributes:

Advantages of CSS

Some Problems good CSS Solve

1. Solution of the No-Tab, white space problem:

p { color: purple; font-size: 36pt; line-
height: 48pt; font-family: "Apple Chancery";
z-index: 1 }

p.tab1 { color: green; font-size: 24pt; line-
height: 30pt; font-family: Arial; margin-
left: 36pt }

p.tab2 { color: aqua; font-size: 20pt; line-
height: 24pt; font-family: "Bertram LET";
margin-right: 72pt; margin-left: 72pt; border-
left: 3pt solid fuchsia }

p.tab3 { color: red; font-size: 18pt; line-
height: 20pt; font-family: "Times New Roman",
Georgia, Times, Courier; background-color:
yellow; text-indent: 0.5in; margin-top: 20pt;
margin-bottom: 20pt; margin-left: 1in;
padding: 5pt; border: solid 3pt teal }

produces

2. Solution of the Frame Problem

<style type="text/css"><!--			
  #footer { position: absolute; top: 570px;
right: 0; bottom: 0; left: 0px; width: 100%;
height: 50px; visibility: visible }

	#header { position: absolute; top: 0px;
right: 0; bottom: auto; left: 120px; width:
100%; height: 15%; visibility: visible }

	#main { position: absolute; top: 120px;
right: 0; bottom: 100px; left: 120px; width:
85%; height: 85%; visibility: visible }

	#sidebar { position: absolute; top: 0px;
right: auto; bottom: 100px; left: 0px; width:
121px; height: 507px; visibility: visible }

	body { height: 7in }-->
		</style>

</head>
<body>
		<div id="header">
			<img height="112" width="553"
src="header.gif"></div>

		<div id="sidebar">
			<img height="507" width="121" src="Sidebar.gif"></div>

		<div id="main">
			<table width="550" border="0"
cellspacing="0" cellpadding="0">
. . . .
</div>
		<div id="footer">
			<center><h1>CSS Frame Simulation by M.
 Firebaugh</h1>
			</center></div>

produces

Frameless UNICO Page


V. DHTML Examples

Example 1: DHTML to change Background Color

One of the most useful capabilities of DHTML is the ability to modify a document's attributes upon roll-over. This code

<body bgColor="#999999">
<H2>Change Background Color by MouseOver Event</H2>
<A HREF=""onMouseOver="document.bgColor='black'"> Black</a>
<A HREF=""onMouseOver="document.bgColor='green'"> Green</a>
<A HREF=""onMouseOver="document.bgColor='yellow'"> Yellow</a>
<A HREF=""onMouseOver="document.bgColor='red'"> Red</a>
<A HREF=""onMouseOver="document.bgColor='brown'"> Brown</a>
<A HREF=""onMouseOver="document.bgColor='white'"> White</a>
	</body>

produces

Background Color Changer


Example 2: Moving Text Objects with Layers

Object sliding about the screen is a hallmark of DHTML. The script:

<script>
//define x and y coordinates of layer
x=0
y=0
function move() {

//control actions of layer
if(y >= 400) {
x = 0
y = 0
}
x=x+4
y=y+4
//end control actions

document.layers[0].moveToAbsolute(x,y)
setTimeout("move()",100)
}
</script>
</head>

<body bgcolor="blue" onLoad="move()">
<layer name="message" left=0 top=0 bgcolor="yellow">
<font color = "purple">
<spacer type="horizontal" size=30>
<spacer type="vertical" size=20>
<H2>Welcome to UNICO Advanced Web Design Seminar</H2>
</layer>

produces

Welcome Text


Example 3
: Positioning Objects Dynamically

<h2><layer top="100" left="100" 
  onmouseover="left=300" 
  onmouseout="left=100">
Move anywhere over this text<BR>
to watch it jump right 200 pixels.<BR>
Move anywhere else to watch it jump back.
</layer>
</h2>

produces

The Jumping Text Demo


Example 4
: Special Effects - Expand text

<html>
<head>
<title>Expanding Your Mind Example</title>
<script language=JavaScript>
ie4=((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4))
if (ie4){
  document.write('<link rel=stylesheet type="text/css" href="styles/dynamic.css">')
  }
else {document.write('<link rel=stylesheet type="text/css" href="styles/dynamicNS.css">')}
function expandText(which, start, finish, step, speed){       
  if (ie4){
    if (start < finish){      	   
      document.all(which).style.letterSpacing = start+"px";  
      start=start+step; 
      setTimeout("expandText('"+which+"',"+start+","+finish+","+step+","+speed+")",speed);
	}	       
  }
}
//-->
</script>
</head>
<body bgcolor=#000000 text="dddddd" onload="expandText('expand',-10,10,1,30);">
<div align=center>
<img src="Unico56.jpg">
</div>
<h1>Expand <span id=expand>Your Mind at UNICO</span></h1>
<p><font face="arial,helvetica" size=-1>Note: You need an IE 4.0 or newer browser to see this effect. 
You can see it again by reloading the page.
<p><br><br>
</body>
</html>

Expanding.html


Example 5
: Z-Depth Ordering

The code for IE 4 using CSS-P Style Sheet:

<img height="42" width="140" src="SyllabiOn.gif" style="z-index: 1">
<img height="42" width="140" src="SyllabiOff.gif" style="z-index: 2;
position: relative;top:15px;left:-90px">





whereas the code:

<img height="42" width="140" src="SyllabiOn.gif" style="z-index: 2">
<img height="42" width="140" src="SyllabiOff.gif" style="z-index: 1;
position: relative;top:15px;left:-90px">

For the NetScape, we use in-line layers for the same result. The code:

<Ilayer ID="Lay1" z-index=1>
<img height="42" width="140" src="SyllabiOn.gif" ></Ilayer>
<Ilayer ID="Lay2" z-index=2 top=15 left=-90>
<img height="42" width="140" src="SyllabiOff.gif"></Ilayer>

produces

while

<Ilayer ID="Lay1" z-index=2>
<img height="42" width="140" src="SyllabiOn.gif" ></Ilayer>
<Ilayer ID="Lay2" z-index=1 top=15 left=-90>
<img height="42" width="140" src="SyllabiOff.gif"></Ilayer>

produces


Example 6
: Browser-independent Sound Player

The code for sensing which browser is playing uses the "navigator" object:


<SCRIPT LANGUAGE="JavaScript">
<!-- // Script MIDI playing. By Magic Maker 
// You can enter any sound file be it .wav, .au, or .mid
// Just replace peanuts.mid with a sound file of your choice
// Please Keep Information along with credits
// And feel free to alter this script as long as credits remain
// mail me at maligui@mvillage.com
if (navigator.appName == "Netscape") { 
document.write('<EMBED SRC="http://www.htmlgoodies.com/peanuts.mid" AUTOSTART=FALSE LOOP=FALSE WIDTH=145 HEIGHT=55 ALIGN="CENTER"></EMBED>') }
else { if (navigator.appName == "Microsoft Internet Explorer")
document.write('<BGSOUND SRC="http://www.htmlgoodies.com/peanuts.mid" LOOP="-1">')
}
//--></SCRIPT>

produces

Peanuts Theme Song


Example 7
: Form Button for Viewing Source Code

The code for a button which reveals a document's source code uses <FORM>:

<FORM>
<INPUT TYPE=button NAME="view" VALUE="Click here for Source Code" 
OnClick='window.location="view-source:"+window.location.href'>
</FORM>

produces


VI. Limitations of DHTML



References:

Books

Dynamic HTML The Definitive Reference by Danny Goodman, O'Reilly & Associates, Sebastopol, CA (1998)

JavaScript for the World Wide Web (Third Ed.) by Tom Negrino and Dori Smith, Peachpit Press, Berkeley, CA (1998)

JavaScript Bible (Third Ed.) by Danny Goodman, IDG Books, Foster City, CA (1998)

JavaScript The Definitive Guide (Third Ed.) by David Flanagan, O'Reilly & Associates, Sebastopol, CA (1998)

JavaScript Goodies by Joe Burns & Andree Growney, Que Earthweb Press, Indianapolis, IN (1999)

JavaScript Application Cookbook by Jerry Bradenbaugh, O'Reilly & Associates, Sebastopol, CA (1999)

Web Sites URLs

Cross Browser Events for Dynamic HTML by James Robertson

The Minimalist Approach to Dynamic HTML by James Robertson

http://developer.netscape.com/docs/manuals/javascript.html

http://developer.netscape.com/docs/manuals/communicator/dynhtml/content.htm

http://www.w3.org/TR/DOM-Level-2/