Advanced DHTML - Department of Computer and Information Science
Download
Report
Transcript Advanced DHTML - Department of Computer and Information Science
Advanced DHTML
CSCI N341: Client-Side Web Programming
Copyright ©2004 Department of Computer & Information Science
Goals:
• Understand the importance of uniquely
identifying object with the HTML ID
attribute
• Understand how to change CSS properties
by passing JavaScript style properties
• Understand how layers work
• Understand how to dynamically
manipulate layer properties
CSCI N341: Client-Side Web Programming
Copyright ©2004 Department of Computer & Information Science
Quick Review of DHTML
• DHTML is a programming model that includes
elements from:
–
–
–
–
HTML
JavaScript
DOM
CSS
• DHTML relies heavily on user interaction
• DHTML depends largely on named objects!
CSCI N341: Client-Side Web Programming
Copyright ©2004 Department of Computer & Information Science
Quick Review of CSS
• Three Major Style Types:
– External (Multi-page scope)
– Embedded (Page-level scope)
– Inline (Container-level scope)
• Depends on Rules:
– Selector
– Declaration
• Property
• Value
CSCI N341: Client-Side Web Programming
Copyright ©2004 Department of Computer & Information Science
Quick Review of CSS
• Typical Rule Architecture (varies for Inline
Style)
selector
{
property:value;
property2:value2
}
CSCI N341: Client-Side Web Programming
Copyright ©2004 Department of Computer & Information Science
Quick Review of CSS
• Example of Rule Applied to all <p>…</p>
Containers
p
{
color:#666666;
background-color:#000080
}
CSCI N341: Client-Side Web Programming
Copyright ©2004 Department of Computer & Information Science
Quick Review of CSS
• Example of Custom Class Rule:
.alert
{
color:#ffffff;
background-color:#0000ff
}
CSCI N341: Client-Side Web Programming
Copyright ©2004 Department of Computer & Information Science
Applying a Class Rule (HTML)
• To apply a class rule, use the “class” attribute of
an HTML tag:
<h1 class=“alert”>
Important Notice About The Midterm
</h1>
<p class=“alert”>
Midterm Exam is Canceled.
Everyone receives 100.00%!
</p>
CSCI N341: Client-Side Web Programming
Copyright ©2004 Department of Computer & Information Science
Changing Properties via
JavaScript
• We’ve already seen that we can dynamically
change properties of objects explicitly created by
HTML:
– Changing the src property of an image object
– Changing the value property of a textbox object
– Changing the background color property of the document
object
• We can also change properties for an entire
group of tags established by CSS!
CSCI N341: Client-Side Web Programming
Copyright ©2004 Department of Computer & Information Science
Using the HTML ID Attribute
• To change properties using Dynamic CSS, we
must first be able to uniquely identify objects
created by HTML …
• To do this, we use the id attribute
– Each tag is assigned a unique value for the id attribute.
– The id attribute’s value essentially establishes a tag container as
a recognizable object for JavaScript.
– Usually used in conjunction with the
document.getElementById() method.
CSCI N341: Client-Side Web Programming
Copyright ©2004 Department of Computer & Information Science
Creating the ID Attribute
(HTML)
<html>
<head>
<title>ID Sample</title>
</head>
<body>
<p id=“simple”>
He’s pining for the fjords!
</p>
</body>
</html>
CSCI N341: Client-Side Web Programming
Copyright ©2004 Department of Computer & Information Science
getElementById() Method
• document.getElementById() is a method of
the document object that establishes the
connection between an HTML object (typically, a
tag) and JavaScript.
• The method argument is the value assigned to
the id attribute.
• Be sure to watch case and syntax! The id value
and the string sent to the method must match
exactly.
CSCI N341: Client-Side Web Programming
Copyright ©2004 Department of Computer & Information Science
getElementById() Example
• First, we’ll need to create a variable to hold
the reference to the HTML object:
var objPara1;
objPara1 = document.getElementById(“simple”);
CSCI N341: Client-Side Web Programming
Copyright ©2004 Department of Computer & Information Science
getElementById() Example
• Once we’ve assigned the HTML element to
a variable, we can then change its
properties (even those established by CSS).
To do this, we can use dot notation:
objPara1.style.color = “#00FF00”;
• You must assign property values as
STRINGS!
CSCI N341: Client-Side Web Programming
Copyright ©2004 Department of Computer & Information Science
JavaScript – CSS Equivalents
CSS
font-size
font-weight
font-family
font-style
text-decoration
color
background-color
background-image
JavaScript
fontSize
fontWeight
fontFamily
fontStyle
textDecoration
color
backgroundColor
backgroundImage
CSCI N341: Client-Side Web Programming
Copyright ©2004 Department of Computer & Information Science
getElementById() Example
• Dynamic CSS Toolbar
• Uses two functions to change the style
properties of <td>…</td> containers and
<a>…</a> containers
• Reacts to mouse events attached to <a>
… </a>
CSCI N341: Client-Side Web Programming
Copyright ©2004 Department of Computer & Information Science
Using Layers
• NOT THE SAME THING as Netscape’s
<layer> … </layer>
• Used to create elements which can be
moved, can appear or disappear
• Rectangular shape that is positioned along
the X, Y and Z axes
CSCI N341: Client-Side Web Programming
Copyright ©2004 Department of Computer & Information Science
Thinking in Three Dimensions
• x = Horizontal Axis
• y = Vertical Axis
• z = “Depth” Axis
(Stacking Order)
– Specified by the “z-index”
property
– Think of the z axis pointing
from the monitor towards
you
CSCI N341: Client-Side Web Programming
Copyright ©2004 Department of Computer & Information Science
Creating a Layer
• Usually creating using the <div> …
</div> and an associated style
• Layer Attributes:
– position
• relative
• absolute
– left
– top
– height
– width
– z-index
• integer value
• higher values are
placed on top
CSCI N341: Client-Side Web Programming
Copyright ©2004 Department of Computer & Information Science
Simple Layer Example
• No JavaScript in these examples
• Created layers using the <div> … </div>
• In the second example, we introduce the
Z-index (uses 2 layers).
Example 1
Example 2
CSCI N341: Client-Side Web Programming
Copyright ©2004 Department of Computer & Information Science
Advanced Layer Example –
Tabbed Folders
• Introduces the “visibility” attribute
– visible
– hidden
• Uses JavaScript functions to turn “on” or
turn “off” layers
CSCI N341: Client-Side Web Programming
Copyright ©2004 Department of Computer & Information Science
Advanced Layer Example –
Drop-Down Menu
• Uses the “visibility” attribute to show/hide
menus
• Menu links are created using standard
HTML, contained in a <div> … </div>
CSCI N341: Client-Side Web Programming
Copyright ©2004 Department of Computer & Information Science
Questions?
CSCI N341: Client-Side Web Programming
Copyright ©2004 Department of Computer & Information Science
Resources
• Heinle, Nick & Bill Peña. Designing With
JavaScript: Creating Dynamic Web Pages.
Sebastopol, CA: O’Reilly & Associates,
2002.
CSCI N341: Client-Side Web Programming
Copyright ©2004 Department of Computer & Information Science