 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

 2004 Prentice Hall, Inc. All rights reserved. Objectives En este capítulos aprenderemos a: –Utilizar el Dynamic HTML Object Model & scripting para crear páginas Web dinámicas. –Entender la jerarquía de objetos en Dynamic HTML. –Utilizar las colecciones all y children para enumerar todos los elementos XHTML de una página Web. –Utilizar dynamic styles y dynamic positioning. –Utilizar la colección frames para acceder objetos en un frame separado de la página Web. –Utilizar el objeto navigator para determinar cual browser se está utilizando para acceder la página.

 2004 Prentice Hall, Inc. All rights reserved Introduction Dynamic HTML Object Model –Permite a los autores Web controlar la presentación de sus páginas. –Le provee a ellos el acesso a todos los elementos de sus páginas. Web page –Se compone de elementos, formas, frames, tablas, etc. –Se representan en una jerarquía de objetos (object hierarchy) Scripting –Obtiene y modifica propiedades y atributos

 2004 Prentice Hall, Inc. All rights reserved Object Referencing La forma más sencilla de hacer referencia a un elemento es utilizando sus atributos. El elemento se representa como un objeto. –Los atributos de XHTML se pueden convertir en propiedades que pueden ser manipulados por código (scripting).

 2004 Prentice Hall, Inc. All rights reserved. Outline reference.html (1 of 2) Muestra en un Message Box el mismo mensaje que sale en pantalla y luego cambia el mensaje del browser.

 2004 Prentice Hall, Inc. All rights reserved. Outline reference.html (2 of 2) Cuand se le da al botón OK, sale este mensaje en la pantalla.

 2004 Prentice Hall, Inc. All rights reserved Collections all and children Collections –Es una arreglo de objetos relacionados en una página –all Todos los elementos XHTML de un documento –children child elements

 2004 Prentice Hall, Inc. All rights reserved. Outline all.html (1 of 2) Crea un ciclo a través de los elementos del documento. La colección all es una propiedad del documento. El elemento innerHTML es similar al elemento innertext sólo que incluye el formato XHTML.

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

 2004 Prentice Hall, Inc. All rights reserved. Outline children.html (1 of 3) Va mostrando los elementos en formato de Bullet.

 2004 Prentice Hall, Inc. All rights reserved. Outline children.html (2 of 3) Se va creando la lista. Utiliza recursión para poder obtener todos los elementos de la página y ponerlos en orden jerárquico (bosquejo).

 2004 Prentice Hall, Inc. All rights reserved.

13.4 Dynamic Styles Los Element’s style pueden cambiarse dinámicamente. Dynamic HTML Object Model también te permite cambiar el atributo class

 2004 Prentice Hall, Inc. All rights reserved. Outline dynamicstyle.html (1 of 2) Pide al usuario el nombre de un color y lo aplica al momento en la página.

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

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

 2004 Prentice Hall, Inc. All rights reserved. Outline dynamicstyle2.html (2 of 2) Se le pide al usuario un ClassName para aplicarlo. En este caso es el tamaño de la letra.

 2004 Prentice Hall, Inc. All rights reserved.

13.5 Dynamic Positioning Los elementos XHTML pueden ser posisionados utilizando código (scripting) –Declarar la posición de un elemento CSS para que sea absolute o relative –Mover el elemento al manipular las propiedades CSS de top, left, right o bottom

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

 2004 Prentice Hall, Inc. All rights reserved. Outline dynamicposition.html (2 of 3) Aquí muestra el color y mensaje dependiendo si el texto se va agrandando o reduciendo. Cambio de dirección

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

 2004 Prentice Hall, Inc. All rights reserved.

13.6 Using the frames Collection Se puede hacer referencia a elementos y objetos en diferentes frames al utilizar el frames collection

 2004 Prentice Hall, Inc. All rights reserved. Outline index.html (1 of 1) Crea dos frames, uno encima del otro

 2004 Prentice Hall, Inc. All rights reserved. Outline top.html (1 of 2) Pide el nombre que va a poner en el frame de abajo.

 2004 Prentice Hall, Inc. All rights reserved.

13.7 navigator Object Netscape, Mozilla, Microsoft’s Internet Explorer –Otros también Contiene información del Web browser Le permite a los programadores Web determinar que browser está utilizando el usuario.

 2004 Prentice Hall, Inc. All rights reserved. Outline navigator.html (1 of 2) Aquí se coteja el nombre e incluso se puede preguntar por la versión.

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

 2004 Prentice Hall, Inc. All rights reserved 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 DHTML Object Model.

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

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

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