CSCI N341: Client-Side Web Programming Copyright ©2004 Department of Computer & Information Science Advanced DHTML

CSCI N341:CSCI N341: Client-Side Web ProgrammingClient-Side Web Programming

Copyright Copyright ©2004 ©2004 Department of Computer & Information ScienceDepartment of Computer & Information Science

Advanced DHTMLAdvanced DHTML

CSCI N341: Client-Side Web ProgrammingCSCI N341: Client-Side Web ProgrammingCopyright Copyright ©2004 ©2004 Department of Computer & Information ScienceDepartment of Computer & Information Science

Goals:Goals:

• Understand the importance of Understand the importance of uniquely identifying object with the uniquely identifying object with the HTML ID attributeHTML ID attribute

• Understand how to change CSS Understand how to change CSS properties by passing JavaScript style properties by passing JavaScript style propertiesproperties

• Understand how layers workUnderstand how layers work• Understand how to dynamically Understand how to dynamically

manipulate layer propertiesmanipulate layer properties


Quick Review of DHTMLQuick Review of DHTML

• DHTML is a programming model that DHTML is a programming model that includes elements from:includes elements from:– HTMLHTML– JavaScriptJavaScript– DOMDOM– CSSCSS

• DHTML relies heavily on user interactionDHTML relies heavily on user interaction• DHTML depends largely on named objects!DHTML depends largely on named objects!


Quick Review of CSSQuick Review of CSS

• Three Major Style Types:Three Major Style Types:– External (Multi-page scope)External (Multi-page scope)– Embedded (Page-level scope)Embedded (Page-level scope)– Inline (Container-level scope)Inline (Container-level scope)

• Depends on Rules:Depends on Rules:– SelectorSelector– DeclarationDeclaration

• PropertyProperty• ValueValue



• Typical Rule Architecture (varies for Typical Rule Architecture (varies for Inline Style)Inline Style)

selectorselector

{{

property:value;property:value;

property2:value2property2:value2

}}



• Example of Rule Applied to all <p>…Example of Rule Applied to all <p>…</p> Containers</p> Containers

pp

{{

color:#666666;color:#666666;

background-color:#000080background-color:#000080

}}



• Example of Custom Class Rule:Example of Custom Class Rule:

.alert.alert

{{

color:#ffffff;color:#ffffff;

background-color:#0000ffbackground-color:#0000ff

}}


Applying a Class Rule Applying a Class Rule (HTML)(HTML)

• To apply a class rule, use the “class” To apply a class rule, use the “class” attribute of an HTML tag:attribute of an HTML tag:<h1 class=“alert”><h1 class=“alert”>Important Notice About The MidtermImportant Notice About The Midterm</h1></h1><p class=“alert”><p class=“alert”>Midterm Exam is Canceled.Midterm Exam is Canceled.Everyone receives 100.00%!Everyone receives 100.00%!</p></p>


Changing Properties via Changing Properties via JavaScriptJavaScript

• We’ve already seen that we can We’ve already seen that we can dynamically change properties of objects dynamically change properties of objects explicitly created by HTML:explicitly created by HTML:– Changing the src property of an image objectChanging the src property of an image object– Changing the value property of a textbox objectChanging the value property of a textbox object– Changing the background color property of the Changing the background color property of the

document objectdocument object

• We can also change properties for an We can also change properties for an entire group of tags established by CSS!entire group of tags established by CSS!


Using the HTML ID AttributeUsing the HTML ID Attribute

• To change properties using Dynamic CSS, To change properties using Dynamic CSS, we must first be able to uniquely identify we must first be able to uniquely identify objects created by HTML …objects created by HTML …

• To do this, we use the To do this, we use the idid attributeattribute– Each tag is assigned a unique value for the id attribute.Each tag is assigned a unique value for the id attribute.– The id attribute’s value essentially establishes a tag The id attribute’s value essentially establishes a tag

container as a recognizable object for JavaScript.container as a recognizable object for JavaScript.– Usually used in conjunction with the Usually used in conjunction with the document.getElementById()document.getElementById() method. method.


Creating the ID Attribute Creating the ID Attribute (HTML)(HTML)

<html><html><head><head>

<title>ID Sample</title><title>ID Sample</title></head></head><body><body>

<p id=“simple”><p id=“simple”>He’s pining for the fjords!He’s pining for the fjords!</p></p>

</body></body></html></html>


getElementById() MethodgetElementById() Method

• document.getElementById()document.getElementById() is a method is a method of the document object that establishes of the document object that establishes the connection between an HTML object the connection between an HTML object (typically, a tag) and JavaScript.(typically, a tag) and JavaScript.

• The method argument is the value The method argument is the value assigned to the assigned to the idid attribute. attribute.

• Be sure to watch case and syntax! The id Be sure to watch case and syntax! The id value and the string sent to the method value and the string sent to the method must match must match exactlyexactly..


getElementById() ExamplegetElementById() Example

• First, we’ll need to create a variable to First, we’ll need to create a variable to hold the reference to the HTML object:hold the reference to the HTML object:

var objPara1;var objPara1;

objPara1 = document.getElementById(“simple”);objPara1 = document.getElementById(“simple”);



• Once we’ve assigned the HTML Once we’ve assigned the HTML element to a variable, we can then element to a variable, we can then change its properties (even those change its properties (even those established by CSS). To do this, we established by CSS). To do this, we can use dot notation:can use dot notation:

objPara1.style.color = “#00FF00”;objPara1.style.color = “#00FF00”;

• You You mustmust assign property values as assign property values as STRINGS!STRINGS!


JavaScript – CSS EquivalentsJavaScript – CSS Equivalents

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



• Dynamic CSS ToolbarDynamic CSS Toolbar• Uses two functions to change the Uses two functions to change the

style properties of <td>…</td> style properties of <td>…</td> containers and <a>…</a> containers and <a>…</a> containerscontainers

• Reacts to mouse events attached to Reacts to mouse events attached to <a> … </a><a> … </a>


Using LayersUsing Layers

• NOT THE SAME THING as Netscape’s NOT THE SAME THING as Netscape’s <layer> … </layer><layer> … </layer>

• Used to create elements which can Used to create elements which can be moved, can appear or disappearbe moved, can appear or disappear

• Rectangular shape that is positioned Rectangular shape that is positioned along the X, Y and Z axesalong the X, Y and Z axes


Thinking in Three Thinking in Three DimensionsDimensions

• x = Horizontal Axisx = Horizontal Axis• y = Vertical Axisy = Vertical Axis• z = “Depth” Axisz = “Depth” Axis

(Stacking Order)(Stacking Order)– Specified by the “z-Specified by the “z-

index” propertyindex” property– Think of the z axis Think of the z axis

pointing from the pointing from the monitor towards youmonitor towards you


Creating a LayerCreating a Layer

– positionposition• relativerelative• absoluteabsolute

– leftleft– toptop

– heightheight– widthwidth– z-indexz-index

• integer valueinteger value• higher values are higher values are

placed on topplaced 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 Example

• No JavaScript in these examplesNo JavaScript in these examples• Created layers using the <div> … Created layers using the <div> …

</div></div>• In the second example, we introduce In the second example, we introduce

the Z-index (uses 2 layers).the Z-index (uses 2 layers).Example 1

Example 2


Advanced Layer Example – Advanced Layer Example – Tabbed FoldersTabbed Folders

• Introduces the “visibility” attributeIntroduces the “visibility” attribute– visiblevisible– hiddenhidden

• Uses JavaScript functions to turn Uses JavaScript functions to turn “on” or turn “off” layers“on” or turn “off” layers


Advanced Layer Example – Advanced Layer Example – Drop-Down MenuDrop-Down Menu

• Uses the “visibility” attribute to Uses the “visibility” attribute to show/hide menusshow/hide menus

• Menu links are created using Menu links are created using standard HTML, contained in a <div> standard HTML, contained in a <div> … </div>… </div>


Questions?Questions?


ResourcesResources

• Heinle, Nick & Bill Peña. Heinle, Nick & Bill Peña. Designing Designing With JavaScript: Creating Dynamic With JavaScript: Creating Dynamic Web Pages. Web Pages. Sebastopol, CA: O’Reilly Sebastopol, CA: O’Reilly & Associates, 2002.& Associates, 2002.

Documents

CSCI N341: Client-Side Web Programming Copyright ©2004 Department of Computer & Information Science Advanced DHTML