1.  2004 Prentice Hall, Inc. All rights reserved. Chapter 13 - Dynamic HTML: Object Model and Collections Outline 13.1 Introduction 13.2 Object Referencing 13.3 Collections all and children 13.4 Dynamic Styles 13.5 Dynamic Positioning 13.6 Using the frames Collection 13.7 navigator Object 13.8 Summary of the DHTML Object Model

2.  2004 Prentice Hall, Inc. All rights reserved. Objectives –To use the Dynamic HTML Object Model and scripting to create dynamic Web pages. –To understand the Dynamic HTML object hierarchy. –To use the all and children collections to enumerate all of the XHTML elements of a Web page. –To use dynamic styles and dynamic positioning. –To use the frames collection to access objects in a separate frame on your Web page. –To use the navigator object to determine which browser is being used to access your page.

3.  2004 Prentice Hall, Inc. All rights reserved. Goals Understand the concept of DHTML as a tool for creating dynamic content Understand how to use DOM properties to make changes in the appearance of HTML objects Understand how to create and use objects not explicitly created by HTML

4.  2004 Prentice Hall, Inc. All rights reserved. DHTML DHTML is not HTML DHTML is not a programming language DHTML is a programming model for designing Web pages that incorporates: –JavaScript –DOM –CSS –HTML

5.  2004 Prentice Hall, Inc. All rights reserved. DHTML vs. HTML HTML Static Limited I/O Little Interactivity DHTML Dynamic Changes elements with changes in the environment Relies heavily on interactivity

6.  2004 Prentice Hall, Inc. All rights reserved. DHTML Rules of Thumb For use with 4.x versions of the browsers Some DHTML scripts can be browser-dependent: –Some versions of image swapping –Hover for anchor tags

7.  2004 Prentice Hall, Inc. All rights reserved. DHTML A combination of technologies used to create animated documents Not a W3C standard! –Originally, a marketing term used by Netscape and Microsoft Using scripts, we manipulate HTML content and style properties in reaction to events

8.  2004 Prentice Hall, Inc. All rights reserved. Dynamic HTML XHTML content CSS style rules appearanceScriptingLanguage manipulate

9.  2004 Prentice Hall, Inc. All rights reserved. Introduction Dynamic HTML Object Model –Allows Web authors to control the presentation of their pages –Gives them access to all the elements on their pages Web page –Elements, forms, frames, tables –Represented in an object hierarchy Scripting –Retrieve and modify properties and attributes

10.  2004 Prentice Hall, Inc. All rights reserved. Object Referencing The simplest way to reference an element is by using the element’s id attribute. The element is represented as an object –XHTML attributes become properties that can be manipulated by scripting

11.  2004 Prentice Hall, Inc. All rights reserved. HTML DOM From W3C: “A platform- and language-neutral interface that allows programs and scripts to dynamically access and update the content and structure of HTML and XHTML documents.”

12.  2004 Prentice Hall, Inc. All rights reserved. DOM and JavaScript Combined with JavaScript, every element in the HTML document is represented by an object Elements can be manipulated using the properties and methods of the corresponding objects Changes in the element properties are immediately reflected by the browser

13.  2004 Prentice Hall, Inc. All rights reserved. Accessing HTML Elements All HTML elements (objects) are accessed through the document object document itself is automatically created Several ways to access a specific element –paths in the DOM tree –retrieval by tag –retrieval by ID

14.  2004 Prentice Hall, Inc. All rights reserved. HTML DOM Tree

15.  2004 Prentice Hall, Inc. All rights reserved. Accessing Elements by Paths function execute() { var img = document.images[0]; img.src="lighton.gif" var inx = document.forms[0].elements[0]; inx.value="xx" var iny = document.forms["form1"].elements["y"]; iny.value="yy" } body head

16.  2004 Prentice Hall, Inc. All rights reserved. Accessing Elements by Tags This example is lovely. But this one is even more! function execute() { var spans = document.getElementsByTagName("span"); spans[0].style.color="red"; spans[1].style.color="blue"; spans[1].style.fontVariant="small-caps"; } body head

17.  2004 Prentice Hall, Inc. All rights reserved. Accessing Elements by ID This text can be hidden! function execute() { var theDiv = document.getElementById("div1"); if (theDiv.style.visibility=="hidden") {theDiv.style.visibility="visible" } else {theDiv.style.visibility="hidden" } } head This technique is more stable w.r.t. document changes (why?) body

18.  2004 Prentice Hall, Inc. All rights reserved. Element Properties Elements of different types have different sets of properties and methods Most elements have the style member style is an object that represents the style- sheet rules applied over the element

19.  2004 Prentice Hall, Inc. All rights reserved. Outline reference.html (1 of 2)

20.  2004 Prentice Hall, Inc. All rights reserved. Outline reference.html (2 of 2)

21.  2004 Prentice Hall, Inc. All rights reserved. 13.3 Collections all and children Collections –Arrays of related objects on a page –all all the XHTML elements in a document –children Specific element contains that element’s child elements

22.  2004 Prentice Hall, Inc. All rights reserved. Outline all.html (1 of 2)

23.  2004 Prentice Hall, Inc. All rights reserved. Outline all.html (2 of 2)

24.  2004 Prentice Hall, Inc. All rights reserved. Outline children.html (1 of 3)

25.  2004 Prentice Hall, Inc. All rights reserved. Outline children.html (2 of 3)

26.  2004 Prentice Hall, Inc. All rights reserved. Outline children.html (3 of 3)

27.  2004 Prentice Hall, Inc. All rights reserved.

28. 13.4 Dynamic Styles Element’s style can be changed dynamically Dynamic HTML Object Model also allows you to change the class attribute

29.  2004 Prentice Hall, Inc. All rights reserved. Outline dynamicstyle.html (1 of 2)

30.  2004 Prentice Hall, Inc. All rights reserved. Outline dynamicstyle.html (2 of 2)

31.  2004 Prentice Hall, Inc. All rights reserved. Outline dynamicstyle2.html (1 of 2)

32.  2004 Prentice Hall, Inc. All rights reserved. Outline dynamicstyle2.html (2 of 2)

33.  2004 Prentice Hall, Inc. All rights reserved.

34. 13.5 Dynamic Positioning Enables XHTML elements can be positioned with scripting –Declare an element’s CSS position property to be either absolute or relative –Move the element by manipulating any of the top, left, right or bottom CSS properties

35.  2004 Prentice Hall, Inc. All rights reserved. CSS-P Attributes Left – the elements left position Top - the elements top position Visibility – specifies whether an element should be visible or hidden Z-index – the elements stack order Clip – element clipping Overflow – how overflow contents are handled

36.  2004 Prentice Hall, Inc. All rights reserved. Position This property allows you to control the positioning of an element Position :relative –Position an element relative to its current position div{ Position :relative Left:10; } Position div element 10 pixels to right

37.  2004 Prentice Hall, Inc. All rights reserved. Position Position :absolute –Position an element from the margin of the window div{ Position : absolute Left:10; } Position div element 10 pixels to right from the left margin of its containing block

38.  2004 Prentice Hall, Inc. All rights reserved. Visibility Determines element is visible or not Visibility :visible H1{ visibility:visible;} make visible Visibility:hidden H1: { Visibility:hidden;} make invisible

39.  2004 Prentice Hall, Inc. All rights reserved. Z-index To place an element behind another element Default it is 0.The higher number has higher priority. Exp H1{ z-index:1; } H2{ Z-index:2; }

40.  2004 Prentice Hall, Inc. All rights reserved. Outline dynamicposition.html (1 of 3)

41.  2004 Prentice Hall, Inc. All rights reserved. Outline dynamicposition.html (2 of 3)

42.  2004 Prentice Hall, Inc. All rights reserved. Outline dynamicposition.html (3 of 3)

43.  2004 Prentice Hall, Inc. All rights reserved.

44. 13.6 Using the frames Collection Referencing elements and objects in different frames by using the frames collection

45.  2004 Prentice Hall, Inc. All rights reserved. Outline index.html (1 of 1)

46.  2004 Prentice Hall, Inc. All rights reserved. Outline top.html (1 of 2)

47.  2004 Prentice Hall, Inc. All rights reserved. Outline top.html (2 of 2)

48.  2004 Prentice Hall, Inc. All rights reserved.

49. 13.7 navigator Object Netscape, Mozilla, Microsoft’s Internet Explorer –Others as well Contains information about the Web browser Allows Web authors to determine what browser the user is using

50.  2004 Prentice Hall, Inc. All rights reserved. Outline navigator.html (1 of 2)

51.  2004 Prentice Hall, Inc. All rights reserved. Outline navigator.html (2 of 2)

52.  2004 Prentice Hall, Inc. All rights reserved. 13.8 Summary of the DHTML Object Model applets all anchors embeds forms filters images links plugins styleSheets scripts frames plugins collection body screen document history navigator location event document object window Key Fig. 13.10DHTML Object Model.

53.  2004 Prentice Hall, Inc. All rights reserved. 13.8 Summary of the DHTML Object Model

54.  2004 Prentice Hall, Inc. All rights reserved. 13.8 Summary of the DHTML Object Model

55.  2004 Prentice Hall, Inc. All rights reserved. 13.8 Summary of the DHTML Object Model