Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Published byClifton Tate Modified over 9 years ago

Similar presentations

Presentation on theme: "CSCI N341: Client-Side Web Programming Copyright ©2004  Department of Computer & Information Science Advanced DHTML."— Presentation transcript:

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

2 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

3 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!

4 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

5 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}

6 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}

7 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}

8 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 100.00%! </p>

9 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!

10 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.

11 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>

12 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.

13 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”);

14 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!

15 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

16 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 …

17 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

18 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

19 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:

20 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

21 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

22 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 …

23 CSCI N341: Client-Side Web Programming Copyright ©2004  Department of Computer & Information Science Questions?

24 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.

Download ppt "CSCI N341: Client-Side Web Programming Copyright ©2004  Department of Computer & Information Science Advanced DHTML."

Similar presentations

Copyright ©2005 Department of Computer & Information Science Advanced DHTML & DOM: Working with the Window Object.

Copyright ©2005 Department of Computer & Information Science Advanced DHTML & DOM: Working with the Window Object.
© 2010 Delmar, Cengage Learning Chapter 9 Positioning Objects with AP Div Tags.

© 2010 Delmar, Cengage Learning Chapter 9 Positioning Objects with AP Div Tags.
HTML Overview - Cascading Style Sheets (CSS). Before We Begin Make a copy of one of your HTML file you have previously created Make a copy of one of your.

HTML Overview - Cascading Style Sheets (CSS). Before We Begin Make a copy of one of your HTML file you have previously created Make a copy of one of your.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.

Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
SM5312 week 11: CSS Menus & Navigation Bars1 An Introduction to Cascading Style Sheets CSS Menus and Navigation Bars Nick Foxall.

SM5312 week 11: CSS Menus & Navigation Bars1 An Introduction to Cascading Style Sheets CSS Menus and Navigation Bars Nick Foxall.
กระบวนวิชา 25 3208 CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.

กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
HTML 5 and CSS 3, Illustrated Complete Unit L: Programming Web Pages with JavaScript.

HTML 5 and CSS 3, Illustrated Complete Unit L: Programming Web Pages with JavaScript.
Ch. 6 Web Page Design – Absolute Positioning, Image Maps, and Navigation Bars Mr. Ursone.

Ch. 6 Web Page Design – Absolute Positioning, Image Maps, and Navigation Bars Mr. Ursone.
Chapter 16 Dynamic HTML and Animation The Web Warrior Guide to Web Design Technologies.

Chapter 16 Dynamic HTML and Animation The Web Warrior Guide to Web Design Technologies.
XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.

XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
Tutorial 13 Working with Objects and Styles. XP Objectives Learn about objects and the document object model Reference documents objects by ID, name,

Tutorial 13 Working with Objects and Styles. XP Objectives Learn about objects and the document object model Reference documents objects by ID, name,
Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.

Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.
DHTML & ALPHABET SOUP Sp.772 spring 2002. A combination Html 4.0 Javascript The document object model (DOM) -- accessing individual document objects Cascading.

DHTML & ALPHABET SOUP Sp.772 spring A combination Html 4.0 Javascript The document object model (DOM) -- accessing individual document objects Cascading.
DHTML - Introduction Introduction to DHTML, the DOM, JS review.

DHTML - Introduction Introduction to DHTML, the DOM, JS review.
DHTML. What is DHTML?  DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more.

DHTML. What is DHTML?  DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more.
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.

Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.

Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.
XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.

XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.
Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature.

Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature.
_______________________________________________________________________________________________________________ Web Design in a Nutshell 2 nd Edition1.

_______________________________________________________________________________________________________________ Web Design in a Nutshell 2 nd Edition1.

Similar presentations

Ads by Google