CSCI N341: Client-Side Web Programming Copyright ©2004 Department of Computer & 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 attributeUnderstand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by passing JavaScript style propertiesUnderstand how to change CSS properties by passing JavaScript style properties Understand how layers workUnderstand how layers work Understand how to dynamically manipulate layer propertiesUnderstand 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:DHTML is a programming model that includes elements from: –HTML –JavaScript –DOM –CSS DHTML relies heavily on user interactionDHTML relies heavily on user interaction DHTML depends largely on named objects!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:Three Major Style Types: –External (Multi-page scope) –Embedded (Page-level scope) –Inline (Container-level scope) Depends on Rules:Depends on Rules: –Selector –Declaration PropertyProperty ValueValue
CSCI N341: Client-Side Web Programming Copyright ©2004 Department of Computer & Information Science Quick Review of CSS Typical Rule Architecture (varies for Inline Style)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 … ContainersExample of Rule Applied to all … Containersp{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: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:To apply a class rule, use the “class” attribute of an HTML tag: Important Notice About The Midterm </h1> Midterm Exam is Canceled. Everyone receives %! </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: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!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 change properties using Dynamic CSS, we must first be able to uniquely identify objects created by HTML … To do this, we use the id attributeTo 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> ID Sample ID Sample </head><body> 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.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.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.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: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: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!You must assign property values as STRINGS!
CSCI N341: Client-Side Web Programming Copyright ©2004 Department of Computer & Information Science JavaScript – CSS Equivalents CSSJavaScript font-sizefontSize font-weightfontWeight font-familyfontFamily font-stylefontStyle text-decorationtextDecoration colorcolor background-colorbackgroundColor background-imagebackgroundImage
CSCI N341: Client-Side Web Programming Copyright ©2004 Department of Computer & Information Science getElementById() Example Dynamic CSS ToolbarDynamic CSS Toolbar Uses two functions to change the style properties of … containers and … containersUses two functions to change the style properties of … containers and … containers Reacts to mouse events attached to … Reacts to mouse events attached to …
CSCI N341: Client-Side Web Programming Copyright ©2004 Department of Computer & Information Science Using Layers NOT THE SAME THING as Netscape’s … NOT THE SAME THING as Netscape’s … Used to create elements which can be moved, can appear or disappearUsed to create elements which can be moved, can appear or disappear Rectangular shape that is positioned along the X, Y and Z axesRectangular 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 Axisx = Horizontal Axis y = Vertical Axisy = Vertical Axis z = “Depth” Axis (Stacking Order)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 –position relativerelative absoluteabsolute –left –top –height –width –z-index integer valueinteger value higher values are placed on tophigher values are placed on top Usually creating using the … and an associated styleUsually creating using the … and an associated style Layer Attributes:Layer Attributes:
CSCI N341: Client-Side Web Programming Copyright ©2004 Department of Computer & Information Science Simple Layer Example No JavaScript in these examplesNo JavaScript in these examples Created layers using the … Created layers using the … In the second example, we introduce the Z-index (uses 2 layers).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” attributeIntroduces the “visibility” attribute –visible –hidden Uses JavaScript functions to turn “on” or turn “off” layersUses 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 menusUses the “visibility” attribute to show/hide menus Menu links are created using standard HTML, contained in a … Menu links are created using standard HTML, contained in a …
CSCI N341: Client-Side Web Programming Copyright ©2004 Department of Computer & Information Science Questions?
Resources Heinle, Nick & Bill Peña. Designing With JavaScript: Creating Dynamic Web Pages. Sebastopol, CA: O’Reilly & Associates, 2002.Heinle, Nick & Bill Peña. Designing With JavaScript: Creating Dynamic Web Pages. Sebastopol, CA: O’Reilly & Associates, 2002.