24
Advanced DHTML Advanced DHTML
| Date post: | 12-Jan-2016 |
| Category: |
Documents |
| Upload: | daisy-lynch |
| View: | 214 times |
| Download: | 2 times |
Advanced DHTMLAdvanced DHTML
Goals: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 workUnderstand how to dynamically
manipulate layer properties
Quick Review of DHTMLQuick Review of DHTMLDHTML is a programming model that
includes elements from:◦ HTML◦ JavaScript◦ DOM◦ CSS
DHTML relies heavily on user interaction
DHTML depends largely on named objects!
Quick Review of CSSQuick Review of CSSThree Major Style Types:
◦ External (Multi-page scope)◦ Embedded (Page-level scope)◦ Inline (Container-level scope)
Depends on Rules:◦ Selector◦ Declaration
Property Value
Quick Review of CSSQuick Review of CSSTypical Rule Architecture (varies
for Inline Style)selector{property:value;property2:value2
}
Quick Review of CSSQuick Review of CSSExample of Rule Applied to all
<p>…</p> Containersp{color:#666666;background-color:#000080
}
Quick Review of CSSQuick Review of CSSExample of Custom Class Rule:.alert{color:#ffffff;background-color:#0000ff
}
Applying a Class Rule Applying a Class Rule (HTML)(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>
Changing Properties via Changing Properties via JavaScriptJavaScriptWe’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!
Using the HTML ID Using the HTML ID AttributeAttributeTo 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.
Creating the ID Attribute Creating the ID Attribute (HTML)(HTML)<html><head>
<title>ID Sample</title></head><body>
<p id=“simple”>He’s pining for the fjords!</p>
</body></html>
getElementById() MethodgetElementById() Methoddocument.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.
getElementById() getElementById() ExampleExample
First, we’ll need to create a variable to hold the reference to the HTML object:
var objPara1;objPara1 = document.getElementById(“simple”);
getElementById() getElementById() ExampleExample
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!
JavaScript – CSS JavaScript – CSS EquivalentsEquivalents
CSSCSS JavaScriptJavaScript
font-sizefont-size fontSizefontSize
font-weightfont-weight fontWeightfontWeight
font-familyfont-family fontFamilyfontFamily
font-stylefont-style fontStylefontStyle
text-decorationtext-decoration textDecorationtextDecoration
colorcolor colorcolor
background-colorbackground-color backgroundColorbackgroundColor
background-imagebackground-image backgroundImagebackgroundImage
getElementById() getElementById() ExampleExampleDynamic CSS ToolbarUses two functions to change the
style properties of <td>…</td> containers and <a>…</a> containers
Reacts to mouse events attached to <a> … </a>
Using LayersUsing LayersNOT 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
Thinking in Three Thinking in Three DimensionsDimensionsx = Horizontal Axisy = Vertical Axisz = “Depth” Axis
(Stacking Order)◦ Specified by the “z-
index” property◦ Think of the z axis
pointing from the monitor towards you
Creating a LayerCreating a Layer
◦ position relative absolute
◦ left◦ top
◦ height◦ width◦ z-index
integer value higher values are
placed on top
• Usually creating using the <div> Usually creating using the <div> … </div> and an associated style… </div> and an associated style
• Layer Attributes:Layer Attributes:
Simple Layer ExampleSimple Layer ExampleNo JavaScript in these examplesCreated layers using the <div>
… </div>In the second example, we
introduce the Z-index (uses 2 layers).
Example 1
Example 2
Advanced Layer Example Advanced Layer Example – – Tabbed FoldersTabbed FoldersIntroduces the “visibility”
attribute◦visible◦hidden
Uses JavaScript functions to turn “on” or turn “off” layers
Advanced Layer Example Advanced Layer Example – – Drop-Down MenuDrop-Down MenuUses the “visibility” attribute to
show/hide menusMenu links are created using
standard HTML, contained in a <div> … </div>
Questions?Questions?
ResourcesResourcesHeinle, Nick & Bill Peña.
Designing With JavaScript: Creating Dynamic Web Pages. Sebastopol, CA: O’Reilly & Associates, 2002.
