Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID...
-
Upload
daisy-lynch -
Category
Documents
-
view
216 -
download
2
Transcript of Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID...
![Page 1: Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by.](https://reader036.fdocuments.us/reader036/viewer/2022070409/56649e9f5503460f94ba10ea/html5/thumbnails/1.jpg)
Advanced DHTMLAdvanced DHTML
![Page 2: Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by.](https://reader036.fdocuments.us/reader036/viewer/2022070409/56649e9f5503460f94ba10ea/html5/thumbnails/2.jpg)
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
![Page 3: Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by.](https://reader036.fdocuments.us/reader036/viewer/2022070409/56649e9f5503460f94ba10ea/html5/thumbnails/3.jpg)
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!
![Page 4: Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by.](https://reader036.fdocuments.us/reader036/viewer/2022070409/56649e9f5503460f94ba10ea/html5/thumbnails/4.jpg)
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
![Page 5: Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by.](https://reader036.fdocuments.us/reader036/viewer/2022070409/56649e9f5503460f94ba10ea/html5/thumbnails/5.jpg)
Quick Review of CSSQuick Review of CSSTypical Rule Architecture (varies
for Inline Style)selector{property:value;property2:value2
}
![Page 6: Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by.](https://reader036.fdocuments.us/reader036/viewer/2022070409/56649e9f5503460f94ba10ea/html5/thumbnails/6.jpg)
Quick Review of CSSQuick Review of CSSExample of Rule Applied to all
<p>…</p> Containersp{color:#666666;background-color:#000080
}
![Page 7: Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by.](https://reader036.fdocuments.us/reader036/viewer/2022070409/56649e9f5503460f94ba10ea/html5/thumbnails/7.jpg)
Quick Review of CSSQuick Review of CSSExample of Custom Class Rule:.alert{color:#ffffff;background-color:#0000ff
}
![Page 8: Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by.](https://reader036.fdocuments.us/reader036/viewer/2022070409/56649e9f5503460f94ba10ea/html5/thumbnails/8.jpg)
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>
![Page 9: Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by.](https://reader036.fdocuments.us/reader036/viewer/2022070409/56649e9f5503460f94ba10ea/html5/thumbnails/9.jpg)
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!
![Page 10: Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by.](https://reader036.fdocuments.us/reader036/viewer/2022070409/56649e9f5503460f94ba10ea/html5/thumbnails/10.jpg)
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.
![Page 11: Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by.](https://reader036.fdocuments.us/reader036/viewer/2022070409/56649e9f5503460f94ba10ea/html5/thumbnails/11.jpg)
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>
![Page 12: Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by.](https://reader036.fdocuments.us/reader036/viewer/2022070409/56649e9f5503460f94ba10ea/html5/thumbnails/12.jpg)
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.
![Page 13: Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by.](https://reader036.fdocuments.us/reader036/viewer/2022070409/56649e9f5503460f94ba10ea/html5/thumbnails/13.jpg)
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”);
![Page 14: Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by.](https://reader036.fdocuments.us/reader036/viewer/2022070409/56649e9f5503460f94ba10ea/html5/thumbnails/14.jpg)
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!
![Page 15: Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by.](https://reader036.fdocuments.us/reader036/viewer/2022070409/56649e9f5503460f94ba10ea/html5/thumbnails/15.jpg)
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
![Page 16: Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by.](https://reader036.fdocuments.us/reader036/viewer/2022070409/56649e9f5503460f94ba10ea/html5/thumbnails/16.jpg)
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>
![Page 17: Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by.](https://reader036.fdocuments.us/reader036/viewer/2022070409/56649e9f5503460f94ba10ea/html5/thumbnails/17.jpg)
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
![Page 18: Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by.](https://reader036.fdocuments.us/reader036/viewer/2022070409/56649e9f5503460f94ba10ea/html5/thumbnails/18.jpg)
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
![Page 19: Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by.](https://reader036.fdocuments.us/reader036/viewer/2022070409/56649e9f5503460f94ba10ea/html5/thumbnails/19.jpg)
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:
![Page 20: Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by.](https://reader036.fdocuments.us/reader036/viewer/2022070409/56649e9f5503460f94ba10ea/html5/thumbnails/20.jpg)
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
![Page 21: Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by.](https://reader036.fdocuments.us/reader036/viewer/2022070409/56649e9f5503460f94ba10ea/html5/thumbnails/21.jpg)
Advanced Layer Example Advanced Layer Example – – Tabbed FoldersTabbed FoldersIntroduces the “visibility”
attribute◦visible◦hidden
Uses JavaScript functions to turn “on” or turn “off” layers
![Page 22: Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by.](https://reader036.fdocuments.us/reader036/viewer/2022070409/56649e9f5503460f94ba10ea/html5/thumbnails/22.jpg)
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>
![Page 23: Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by.](https://reader036.fdocuments.us/reader036/viewer/2022070409/56649e9f5503460f94ba10ea/html5/thumbnails/23.jpg)
Questions?Questions?
![Page 24: Advanced DHTML. Goals: Understand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by.](https://reader036.fdocuments.us/reader036/viewer/2022070409/56649e9f5503460f94ba10ea/html5/thumbnails/24.jpg)
ResourcesResourcesHeinle, Nick & Bill Peña.
Designing With JavaScript: Creating Dynamic Web Pages. Sebastopol, CA: O’Reilly & Associates, 2002.