Chapter 29: Introduction to DHTML
Download
Report
Transcript Chapter 29: Introduction to DHTML
Web Design in a Nutshell
Chapter 29: Introduction to DHTML
_______________________________________________________________________________________________________________
Web Design in a Nutshell 2nd Edition
1
O’Reilly 2001
Summary
_______________________________________________________________________________________________________________
Web Design in a Nutshell 2nd Edition
2
O’Reilly 2001
Synopsis
HTML is based on thinking of a web page like a printed page: a
document that is rendered once and that is static once rendered. The idea
behind Dynamic HTML (DHTML), however, is to make every element
of a page interactively controllable, before, during, and after the page is
rendered. This means you can make things move, appear and disappear,
overlap, change styles, and interact with the user to your heart’s content.
Through DHTML, users get a more engaging and interactive web
experience without constant calls to a web server or the overhead of
loading new pages, plug-ins, or large applets.
DHTML is not a language itself, but is a combination of:
HTML 4.0 (or XHTML 1.0)
JavaScript – the Web’s standard scripting language
Cascading Style Sheets (CSS) – styles dictated outside a document’s content
Document Object Model (DOM) – a means of accessing a document’s
individual elements
_______________________________________________________________________________________________________________
Web Design in a Nutshell 2nd Edition
3
O’Reilly 2001
Using DHTML
Like most web technologies, DHTML comes with its share
of pros and cons.
Advantages:
File sizes are small: DHTML files are small compared to other
interactive media like Flash, Shockwave, and Java
It’s supported by major browser manufacturers
DHTML is a standard
No plug-ins, ActiveX controls, or Java is necessary
There are fewer calls to the server
Disadvantages:
Only newer browsers support the DHTML “standard”
Netscape and MS have different DHTML implementations
DHTML creation has a fairly steep learning curve
_______________________________________________________________________________________________________________
Web Design in a Nutshell 2nd Edition
4
O’Reilly 2001
How DHTML works
The web page here uses simple DHTML to change the style of
links to be red and underlined when the mouse is rolled over
them
<html>
<head>
<title>Rollover Style Changes</title>
<style>
a {text-decoration: none;}
</style>
<script>
function turnOn(currentLink) {
currentLink.style.color = “#990000”;
currentLink.style.textDecoration = “underline”;
}
function turnOff(currentLink) {
currentLink.style.color = “#0000FF”;
currentLink.style.textDecoration = “none”;
}
</script>
</head>
_______________________________________________________________________________________________________________
Web Design in a Nutshell 2nd Edition
5
O’Reilly 2001
How DHTML works (cont.)
<body bgcolor=“#FFFFFF”>
<a href=“#home” onMouseOver=“turnOn(this);”
onMouseOut=“turnOff(this);”>Home</a>
<br>
<a href=“#contact” onMouseOver=“turnOn(this);”
onMouseOut=“turnOff(this);”>Contact</a>
<br>
<a href=“#links” onMouseOver=“turnOn(this);”
onMouseOut=“turnOff(this);”>Links</a>
<br>
</body>
</html>
_______________________________________________________________________________________________________________
Web Design in a Nutshell 2nd Edition
6
O’Reilly 2001
The Document Object Model
The Document Object Model (DOM) exposes every
element of an HTML page to a scripting language,
such as JavaScript.
Early iterations of the DOM, now called DOM Level 0 and
retained for backwards compatibility, gave scripts access to
only some objects on a page, including forms, frames, and
images.
DOM Level 1 and DOM Level 2, however, allow you to access
and modify almost any part of an HTML (or XHTML)
document, browser window, or browser features (e.g. history)
For more information about the DOM, see
http://www.w3.org/DOM/
_______________________________________________________________________________________________________________
Web Design in a Nutshell 2nd Edition
7
O’Reilly 2001
The Document Object Model (cont.)
In JavaScript parlance, each element of the page is an object.
The DOM begins with a base object called the document object,
which refers to the HTML page itself and everything in it. All
the elements contained within the HTML page, such as
headings, paragraphs, images, forms, and links, are represented
by separate child objects of the document object.
To do something such as changing the appearance of a
particular element in an HTML document, you first have to
reference the object that corresponds to that element.
Using JS, the general form of the reference to a particular image in an
HTML document is document.image[“image_name”]
E.g., if we have the HTML code in our document that looks like <IMG
SRC=“start.gif” NAME=“start”>, we can reference it in our JavaScript as
document.images[“start”]
_______________________________________________________________________________________________________________
Web Design in a Nutshell 2nd Edition
8
O’Reilly 2001
The Document Object Model (cont.)
Images, along with some other common elements, such as
forms and links (known as collections), get special treatment in
the DOM, so they can be referenced using this simple syntax.
For regular HTML elements, like headings and paragraphs, the
technique is a bit different
To reference the paragraph in <p id=“simple”>This is a simple
paragraph</p> from JavaScript, you would use
document.getElementById(“simple”)
getElementById() is a method, or built-in function associated with an
object. It returns the HTML element with the specified id attribute in the
document, which in this case is the paragraph we are interested in. The
document object also has a number of other methods for accessing
HTML elements, such as getElementsByTagName() and
getElementsByName().
_______________________________________________________________________________________________________________
Web Design in a Nutshell 2nd Edition
9
O’Reilly 2001
The Document Object Model (cont.)
Just referencing an object isn’t particular interesting, however.
What we really want to be able to do is manipulate the object,
say by changing its appearance or location. One way to
manipulate an object is to change its properties or attributes,
which describe different characteristics of the object.
In most cases, these properties actually correspond to attributes
of the HTML element represented by the object.
An image object has a src property that corresponds to the src attribute of
the <img> tag. We used this property to implement image rollovers.
With DHTML, the style property is by far the most important property. It
lets you access all of the CSS properties that apply to a particular
element, so you can use it to change things like the color, font family,
and font size of an element (e.g.
document.getElementById(“simple”).style.color = “00FF00”;)
_______________________________________________________________________________________________________________
Web Design in a Nutshell 2nd Edition
10
O’Reilly 2001
Common DOM objects, collections, and their properties
Object
HTML element
Properties
document.body
body
alink, attributes, background, gbcolor, style,
text, title, vlink
document.links[]
a
attributes, className, href, id, name, style,
tagName, title
document.forms[]
form
action, attributes, elements, id, style, tagName,
target, title
document.images[] img
align, alt, attributes, border, height, hspace, id,
isMap, name, src, style, tagName, title,
useMap, vspace, width
_______________________________________________________________________________________________________________
Web Design in a Nutshell 2nd Edition
11
O’Reilly 2001
Creating layers
Dynamically positioned objects in DHTML are often
referred to as layers, probably because they work like
the layers used in many graphics programs.
A layer is a container for content that can be
positioned in the x (horizontal), y (vertical), and z
(depth/stacking order) dimensions.
A typical layer is created with a <div> tag surrounding
other HTML elements. Special attributes in the <div>
tag define its behavior.
Once you’ve created a layer, you can show and hide it,
animate it, or change its appearance in other ways.
_______________________________________________________________________________________________________________
Web Design in a Nutshell 2nd Edition
12
O’Reilly 2001
Creating layers (cont.)
<html>
<head>
<style type=“text/css”>
.welcome {font-family: Geneva, Arial, Helvetica, san-serif;
font-size: large;
font-style: oblique;
}
.Layer1 {position: absolute;
z-index: 1;
left: 100px; top: 10px; width: 300px; height: 60px;
background-color: #FFCC00;
}
</style>
</head>
<body bgcolor=“#FFFFFF” text=“#000000”>
<div id=“Layer1” class=“Layer1”>
<p align=“center” class=“welcome”>Welcome to Jen’s World!</p>
</div>
</body>
</html>
_______________________________________________________________________________________________________________
Web Design in a Nutshell 2nd Edition
13
O’Reilly 2001
Example: Drop-Down Menus
One of the most common interface elements in desktop
applications is the menubar with drop-down menus.
You can make the same kind of menus with DHTML
by showing and hiding positioned layers. When the
user clicks on the “Resources” or “Links”, a layer with
links is displayed below it.
The DHTML code creates the menus. The JavaScript
combines 2 concepts we’ve seen before: creating a
positioned layer and manipulating a style via the
DOM.
_______________________________________________________________________________________________________________
Web Design in a Nutshell 2nd Edition
14
O’Reilly 2001
Example: Drop-Down Menus (cont.)
<html>
<head<title>Drop-down Menus</title>
<script>
function showLayer(layerid) {
layer = document.getElementById(layerid);
layer.style.visibility = “visible”;
}
function hideLayer(layerid) {
layer.document.getElementById(layerid);
layer.style.visibility = “hidden”;
}
</script>
<style type=“text/css”>
a {font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF; margin-left: 3px;}
</style>
</head>
_______________________________________________________________________________________________________________
Web Design in a Nutshell 2nd Edition
15
O’Reilly 2001
Example: Drop-Down Menus (cont.)
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0"
marginwidth="0" marginheight="0">
<table border="0" bgcolor="#3333AA" cellspacing="0" cellpadding="2">
<tr>
<td width="100"><a href="#">Home</a></td>
<td width="100">
<div id="ResMenu" class="Menu" style="left: 110px; height: 62px;">
<a href="#">Scripts</a><br>
<a href="#">Reference</a><br>
<a href="#">Weblog</a><br>
</div>
<a href="#" onClick="showLayer('ResMenu');“
onDblClick="hideLayer('ResMenu');">Resources</a>
</td>
<td width="100">
<div id="LinksMenu" class="Menu" style="left: 211px; height: 85px;">
<a href="#">DHTML</a><br>
<a href="#">CSS</a><br>
<a href="#">HTML</a><br>
<a href="#">JavaScript</a><br>
</div>
<a href="#" onClick="showLayer('LinksMenu');"
onDblClick="hideLayer('LinksMenu');">Links</a>
</td>
</tr>
</table>
</body>
</html>
_______________________________________________________________________________________________________________
Web Design in a Nutshell 2nd Edition
16
O’Reilly 2001
Sliding Tabs
Making an object move in DHTML is like making any other
style change. All you are doing is changing one of two
properties – style.left or style.top – to get an object from one
place to another. The illusion of motion happens when you
change the object’s position incrementally and quickly.
In this example, we’re creating a tab on the left-hand side of the
browser that is 75 pixels off the left edge of the screen, so that
the main content of the tab is not visible. When the user clicks
on “show>>”, the tab moves right 5 pixels every millisecond
until it is completely onscreen. Clicking on the “<<hide” link
returns the tab to its original position.
As with the drop-down menu, we are creating a positioned layer
and manipulating it with the DOM. What’s new in this example
is the code for moving the layer. Just by changing the style.left
property, we’ve created the illusion of motion.
_______________________________________________________________________________________________________________
Web Design in a Nutshell 2nd Edition
17
O’Reilly 2001
Example: Sliding Tabs (cont.)
<html>
<head><title>Sliding Tabs</title>
<script>
function showLayer()
{
hiddenLayer = document.getElementById("Layer1");
layerPosition = parseInt(hiddenLayer.style.left);
if (layerPosition < 0)
{
hiddenLayer.style.left = (layerPosition + 5) + "px";
setTimeout("showLayer()",25);
}
}
function hideLayer(layerid)
{
hiddenLayer = document.getElementById("Layer1");
layerPosition = parseInt(hiddenLayer.style.left);
if (layerPosition > -80)
{
hiddenLayer.style.left = (layerPosition - 5) + "px";
setTimeout("hideLayer()",15);
}
}
</script>
_______________________________________________________________________________________________________________
Web Design in a Nutshell 2nd Edition
18
O’Reilly 2001
Example: Sliding Tabs (cont.)
<style type="text/css">
.hideshow
{
color: #333333;
font-size: 9px;
font-family: sans-serif;
text-decoration: none;
}
.Layer1
{
position: absolute;
left: -80px;
top: 50px;
width: 115px;
height: 200px;
z-index: 1;
background-color: #CCCCCC;
}
</style>
</head>
_______________________________________________________________________________________________________________
Web Design in a Nutshell 2nd Edition
19
O’Reilly 2001
Example: Sliding Tabs (cont.)
<body bgcolor="#FFFFFF">
<div id="Layer1" style="left: -80px;"
class="Layer1">
<p align="right" class="hideshow">
<a href="javascript:hideLayer();"
class="hideshow"><<hide</a>
<a href="javascript:showLayer();“
class="hideshow"> show>></a>
</p>
<p align="left" style="margin-left: 5px;">
<a href="#">Scripts</a><br>
<a href="#">Weblog</a><br>
<a href="#">Projects</a><br>
<a href="#">Contact</a><br>
</p>
</div>
</body>
</html>
_______________________________________________________________________________________________________________
Web Design in a Nutshell 2nd Edition
20
O’Reilly 2001