aplicaciones webquegrande.org/apuntes/etix/opt/iu/teoria/08-09/dhtml.pdf · dom: modelo de objetos...
TRANSCRIPT
![Page 1: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/1.jpg)
Aplicaciones WebDHTML
David Cabrero Souto
Grupo MADS (http://www.grupomads.org/)Universidade da Coruña
![Page 2: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/2.jpg)
Introducción
Dynamic HTML.Posibilidad de ejecutar parte de la aplicación en el cliente.La parte cliente puede cambiar el documento HTML.Beneficios:
Es el sitio adecuado para la parte de IU.Evitar circulaciones petición-respuesta.
Problemas:Portabilidad: no todos los navegadores lo soportan.Implementación deficiente de estándares.Aumenta la complejidad del cliente.Accesibilidad.
No confundir con:Plugins (Flash, . . . ).Extensiones del navegador (p.e. Mozilla).
![Page 3: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/3.jpg)
Introducción
Dynamic HTML.Posibilidad de ejecutar parte de la aplicación en el cliente.La parte cliente puede cambiar el documento HTML.Beneficios:
Es el sitio adecuado para la parte de IU.Evitar circulaciones petición-respuesta.
Problemas:Portabilidad: no todos los navegadores lo soportan.Implementación deficiente de estándares.Aumenta la complejidad del cliente.Accesibilidad.
No confundir con:Plugins (Flash, . . . ).Extensiones del navegador (p.e. Mozilla).
![Page 4: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/4.jpg)
Introducción
Dynamic HTML.Posibilidad de ejecutar parte de la aplicación en el cliente.La parte cliente puede cambiar el documento HTML.Beneficios:
Es el sitio adecuado para la parte de IU.Evitar circulaciones petición-respuesta.
Problemas:Portabilidad: no todos los navegadores lo soportan.Implementación deficiente de estándares.Aumenta la complejidad del cliente.Accesibilidad.
No confundir con:Plugins (Flash, . . . ).Extensiones del navegador (p.e. Mozilla).
![Page 5: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/5.jpg)
Introducción
Dynamic HTML.Posibilidad de ejecutar parte de la aplicación en el cliente.La parte cliente puede cambiar el documento HTML.Beneficios:
Es el sitio adecuado para la parte de IU.Evitar circulaciones petición-respuesta.
Problemas:Portabilidad: no todos los navegadores lo soportan.Implementación deficiente de estándares.Aumenta la complejidad del cliente.Accesibilidad.
No confundir con:Plugins (Flash, . . . ).Extensiones del navegador (p.e. Mozilla).
![Page 6: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/6.jpg)
Introducción
Dynamic HTML.Posibilidad de ejecutar parte de la aplicación en el cliente.La parte cliente puede cambiar el documento HTML.Beneficios:
Es el sitio adecuado para la parte de IU.Evitar circulaciones petición-respuesta.
Problemas:Portabilidad: no todos los navegadores lo soportan.Implementación deficiente de estándares.Aumenta la complejidad del cliente.Accesibilidad.
No confundir con:Plugins (Flash, . . . ).Extensiones del navegador (p.e. Mozilla).
![Page 7: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/7.jpg)
Introducción
Dynamic HTML.Posibilidad de ejecutar parte de la aplicación en el cliente.La parte cliente puede cambiar el documento HTML.Beneficios:
Es el sitio adecuado para la parte de IU.Evitar circulaciones petición-respuesta.
Problemas:Portabilidad: no todos los navegadores lo soportan.Implementación deficiente de estándares.Aumenta la complejidad del cliente.Accesibilidad.
No confundir con:Plugins (Flash, . . . ).Extensiones del navegador (p.e. Mozilla).
![Page 8: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/8.jpg)
Introducción
Dynamic HTML.Posibilidad de ejecutar parte de la aplicación en el cliente.La parte cliente puede cambiar el documento HTML.Beneficios:
Es el sitio adecuado para la parte de IU.Evitar circulaciones petición-respuesta.
Problemas:Portabilidad: no todos los navegadores lo soportan.Implementación deficiente de estándares.Aumenta la complejidad del cliente.Accesibilidad.
No confundir con:Plugins (Flash, . . . ).Extensiones del navegador (p.e. Mozilla).
![Page 9: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/9.jpg)
Introducción
Dynamic HTML.Posibilidad de ejecutar parte de la aplicación en el cliente.La parte cliente puede cambiar el documento HTML.Beneficios:
Es el sitio adecuado para la parte de IU.Evitar circulaciones petición-respuesta.
Problemas:Portabilidad: no todos los navegadores lo soportan.Implementación deficiente de estándares.Aumenta la complejidad del cliente.Accesibilidad.
No confundir con:Plugins (Flash, . . . ).Extensiones del navegador (p.e. Mozilla).
![Page 10: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/10.jpg)
Introducción
Dynamic HTML.Posibilidad de ejecutar parte de la aplicación en el cliente.La parte cliente puede cambiar el documento HTML.Beneficios:
Es el sitio adecuado para la parte de IU.Evitar circulaciones petición-respuesta.
Problemas:Portabilidad: no todos los navegadores lo soportan.Implementación deficiente de estándares.Aumenta la complejidad del cliente.Accesibilidad.
No confundir con:Plugins (Flash, . . . ).Extensiones del navegador (p.e. Mozilla).
![Page 11: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/11.jpg)
Introducción
Dynamic HTML.Posibilidad de ejecutar parte de la aplicación en el cliente.La parte cliente puede cambiar el documento HTML.Beneficios:
Es el sitio adecuado para la parte de IU.Evitar circulaciones petición-respuesta.
Problemas:Portabilidad: no todos los navegadores lo soportan.Implementación deficiente de estándares.Aumenta la complejidad del cliente.Accesibilidad.
No confundir con:Plugins (Flash, . . . ).Extensiones del navegador (p.e. Mozilla).
![Page 12: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/12.jpg)
Javascript
Lenguaje empleado en DHTML.Se compone de tres partes:
ECMAScript: lenguaje programación.DOM: Modelo de Objetos del Documento (Document ObjectModel).API para manipular los documentos HTML.BOM: Modelo de Objetos del Navegador (Browser ObjectModel).API para acceder a algunas funcionalidades del navegador.
![Page 13: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/13.jpg)
Javascript
Lenguaje empleado en DHTML.Se compone de tres partes:
ECMAScript: lenguaje programación.DOM: Modelo de Objetos del Documento (Document ObjectModel).API para manipular los documentos HTML.BOM: Modelo de Objetos del Navegador (Browser ObjectModel).API para acceder a algunas funcionalidades del navegador.
![Page 14: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/14.jpg)
Javascript
Lenguaje empleado en DHTML.Se compone de tres partes:
ECMAScript: lenguaje programación.DOM: Modelo de Objetos del Documento (Document ObjectModel).API para manipular los documentos HTML.BOM: Modelo de Objetos del Navegador (Browser ObjectModel).API para acceder a algunas funcionalidades del navegador.
![Page 15: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/15.jpg)
Javascript
Lenguaje empleado en DHTML.Se compone de tres partes:
ECMAScript: lenguaje programación.DOM: Modelo de Objetos del Documento (Document ObjectModel).API para manipular los documentos HTML.BOM: Modelo de Objetos del Navegador (Browser ObjectModel).API para acceder a algunas funcionalidades del navegador.
![Page 16: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/16.jpg)
Javascript
Lenguaje empleado en DHTML.Se compone de tres partes:
ECMAScript: lenguaje programación.DOM: Modelo de Objetos del Documento (Document ObjectModel).API para manipular los documentos HTML.BOM: Modelo de Objetos del Navegador (Browser ObjectModel).API para acceder a algunas funcionalidades del navegador.
![Page 17: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/17.jpg)
ECMAScript
Sintaxis con “sabor” a Java, C, perl.No incluye entrada/salida.El estándar ECMA define:
Sintaxis.Tipos.Instrucciones.Palabras clave.Palabras reservadas.Operadores.Objetos.
Orientado a Objetos, pero no baso en clases, sino enprototipos.Sirve de core a otros lenguajes: Javascript, Actionscript, . . .
![Page 18: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/18.jpg)
ECMAScript
Sintaxis con “sabor” a Java, C, perl.No incluye entrada/salida.El estándar ECMA define:
Sintaxis.Tipos.Instrucciones.Palabras clave.Palabras reservadas.Operadores.Objetos.
Orientado a Objetos, pero no baso en clases, sino enprototipos.Sirve de core a otros lenguajes: Javascript, Actionscript, . . .
![Page 19: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/19.jpg)
ECMAScript
Sintaxis con “sabor” a Java, C, perl.No incluye entrada/salida.El estándar ECMA define:
Sintaxis.Tipos.Instrucciones.Palabras clave.Palabras reservadas.Operadores.Objetos.
Orientado a Objetos, pero no baso en clases, sino enprototipos.Sirve de core a otros lenguajes: Javascript, Actionscript, . . .
![Page 20: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/20.jpg)
ECMAScript
Sintaxis con “sabor” a Java, C, perl.No incluye entrada/salida.El estándar ECMA define:
Sintaxis.Tipos.Instrucciones.Palabras clave.Palabras reservadas.Operadores.Objetos.
Orientado a Objetos, pero no baso en clases, sino enprototipos.Sirve de core a otros lenguajes: Javascript, Actionscript, . . .
![Page 21: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/21.jpg)
ECMAScript
Sintaxis con “sabor” a Java, C, perl.No incluye entrada/salida.El estándar ECMA define:
Sintaxis.Tipos.Instrucciones.Palabras clave.Palabras reservadas.Operadores.Objetos.
Orientado a Objetos, pero no baso en clases, sino enprototipos.Sirve de core a otros lenguajes: Javascript, Actionscript, . . .
![Page 22: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/22.jpg)
DOM
API para HTML, XML, XHTML, SVG, MathML, SMIL, . . .El documento se representa como una jerarquía de nodos.En HTML cada nodo representa un elemento y sus hijosestarán representados por los correspondientes nodos hijo.
<html><head>
<title>Ejemplo</title></head><body>
<p>¡Hola Mundo!</p></body>
</html>
html
head
title
Ejemplo
body
p
¡Hola Mundo!
![Page 23: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/23.jpg)
DOM
API para HTML, XML, XHTML, SVG, MathML, SMIL, . . .El documento se representa como una jerarquía de nodos.En HTML cada nodo representa un elemento y sus hijosestarán representados por los correspondientes nodos hijo.
<html><head>
<title>Ejemplo</title></head><body>
<p>¡Hola Mundo!</p></body>
</html>
html
head
title
Ejemplo
body
p
¡Hola Mundo!
![Page 24: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/24.jpg)
DOM
API para HTML, XML, XHTML, SVG, MathML, SMIL, . . .El documento se representa como una jerarquía de nodos.En HTML cada nodo representa un elemento y sus hijosestarán representados por los correspondientes nodos hijo.
<html><head>
<title>Ejemplo</title></head><body>
<p>¡Hola Mundo!</p></body>
</html>
html
head
title
Ejemplo
body
p
¡Hola Mundo!
![Page 25: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/25.jpg)
DOM (cont.)
Estándares W3C.
Nivel 1. DOM Core (XML) + DOM HTML.Nivel 2.
DOM Views. Documento antes y después de aplicar CSS.DOM Events.DOM Style. API para manipular CSS.DOM Traversal and Range. Recorrido y manipulación del árbol.
Nivel 3. DOM Load and Save, DOM Validation, XML 1.0(Xpath, XML Infoset, XML Base).
![Page 26: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/26.jpg)
DOM (cont.)
Estándares W3C.
Nivel 1. DOM Core (XML) + DOM HTML.Nivel 2.
DOM Views. Documento antes y después de aplicar CSS.DOM Events.DOM Style. API para manipular CSS.DOM Traversal and Range. Recorrido y manipulación del árbol.
Nivel 3. DOM Load and Save, DOM Validation, XML 1.0(Xpath, XML Infoset, XML Base).
![Page 27: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/27.jpg)
DOM (cont.)
Estándares W3C.
Nivel 1. DOM Core (XML) + DOM HTML.Nivel 2.
DOM Views. Documento antes y después de aplicar CSS.DOM Events.DOM Style. API para manipular CSS.DOM Traversal and Range. Recorrido y manipulación del árbol.
Nivel 3. DOM Load and Save, DOM Validation, XML 1.0(Xpath, XML Infoset, XML Base).
![Page 28: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/28.jpg)
DOM (cont.)
Estándares W3C.
Nivel 1. DOM Core (XML) + DOM HTML.Nivel 2.
DOM Views. Documento antes y después de aplicar CSS.DOM Events.DOM Style. API para manipular CSS.DOM Traversal and Range. Recorrido y manipulación del árbol.
Nivel 3. DOM Load and Save, DOM Validation, XML 1.0(Xpath, XML Infoset, XML Base).
![Page 29: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/29.jpg)
BOM
No está estandarizado.Estándar de facto.Posibilidades habituales:
Abrir, mover, cambiar tamaño, y cerrar ventanas.Objeto Navigator.Objeto Location.Objeto Screen.Manejo de cookies.
![Page 30: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/30.jpg)
BOM
No está estandarizado.Estándar de facto.Posibilidades habituales:
Abrir, mover, cambiar tamaño, y cerrar ventanas.Objeto Navigator.Objeto Location.Objeto Screen.Manejo de cookies.
![Page 31: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/31.jpg)
Utilidad de javascript
Cosas útiles.
Evitar viajes ida-vuelta (round-trips) al servidor.P.e.: validación de datos, menús.
Cosas superfluas.
P.e.: menús animados.
Cosas molestas/indeseables.
Vetanas emergentes.Cambiar la barra de estado.. . .
Cosas estúpidas.
Reimplementar links.
![Page 32: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/32.jpg)
Utilidad de javascript
Cosas útiles.
Evitar viajes ida-vuelta (round-trips) al servidor.P.e.: validación de datos, menús.
Cosas superfluas.
P.e.: menús animados.
Cosas molestas/indeseables.
Vetanas emergentes.Cambiar la barra de estado.. . .
Cosas estúpidas.
Reimplementar links.
![Page 33: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/33.jpg)
Utilidad de javascript
Cosas útiles.
Evitar viajes ida-vuelta (round-trips) al servidor.P.e.: validación de datos, menús.
Cosas superfluas.
P.e.: menús animados.
Cosas molestas/indeseables.
Vetanas emergentes.Cambiar la barra de estado.. . .
Cosas estúpidas.
Reimplementar links.
![Page 34: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/34.jpg)
Utilidad de javascript
Cosas útiles.
Evitar viajes ida-vuelta (round-trips) al servidor.P.e.: validación de datos, menús.
Cosas superfluas.
P.e.: menús animados.
Cosas molestas/indeseables.
Vetanas emergentes.Cambiar la barra de estado.. . .
Cosas estúpidas.
Reimplementar links.
![Page 35: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/35.jpg)
Utilidad de javascript
Cosas útiles.
Evitar viajes ida-vuelta (round-trips) al servidor.P.e.: validación de datos, menús.
Cosas superfluas.
P.e.: menús animados.
Cosas molestas/indeseables.
Vetanas emergentes.Cambiar la barra de estado.. . .
Cosas estúpidas.
Reimplementar links.
![Page 36: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/36.jpg)
Sintaxis y tipos de datos de Javascript
/* Los puntos y coma al final de la línea son opcionales */
// Las variables no están tipadasvar color = "rojo";
// Las llaves indica bloques de códigoif (jugador == "rojo") {jugador == "azul"
}
// Tipos de datos básicosvar aValores = new Array();var bFound = true;var fFlotante = 3.12;var fnFuncion = funcionA;var iEntero = 5;var oObjeto = new Object();var sCadena = "¡Hola Mundo!"
![Page 37: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/37.jpg)
Objetos en Javascript (I)
ECMA-262:Un objeto es una colección sin ordenar depropiedades que contienen un valor primitivo, unobjeto o una función.
Las variables almacenan referencias a objetos.Más cerca de un LOO basado en prototipos que un LOObasado en clases.
La clases es simplemente una plantilla.Es posible modificar los atributos y la interfaz de un objeto unavez creado.
Objetos nativos.
Object
Boolean
String
Number
Date
RegExp
Array
Error
Function
URIError
EvalError
TypeError
RangeError
SyntaxError
ReferenceError
![Page 38: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/38.jpg)
Objetos en Javascript (I)
ECMA-262:Un objeto es una colección sin ordenar depropiedades que contienen un valor primitivo, unobjeto o una función.
Las variables almacenan referencias a objetos.Más cerca de un LOO basado en prototipos que un LOObasado en clases.
La clases es simplemente una plantilla.Es posible modificar los atributos y la interfaz de un objeto unavez creado.
Objetos nativos.
Object
Boolean
String
Number
Date
RegExp
Array
Error
Function
URIError
EvalError
TypeError
RangeError
SyntaxError
ReferenceError
![Page 39: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/39.jpg)
Objetos en Javascript (I)
ECMA-262:Un objeto es una colección sin ordenar depropiedades que contienen un valor primitivo, unobjeto o una función.
Las variables almacenan referencias a objetos.Más cerca de un LOO basado en prototipos que un LOObasado en clases.
La clases es simplemente una plantilla.Es posible modificar los atributos y la interfaz de un objeto unavez creado.
Objetos nativos.
Object
Boolean
String
Number
Date
RegExp
Array
Error
Function
URIError
EvalError
TypeError
RangeError
SyntaxError
ReferenceError
![Page 40: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/40.jpg)
Objetos en Javascript (I)
ECMA-262:Un objeto es una colección sin ordenar depropiedades que contienen un valor primitivo, unobjeto o una función.
Las variables almacenan referencias a objetos.Más cerca de un LOO basado en prototipos que un LOObasado en clases.
La clases es simplemente una plantilla.Es posible modificar los atributos y la interfaz de un objeto unavez creado.
Objetos nativos.
Object
Boolean
String
Number
Date
RegExp
Array
Error
Function
URIError
EvalError
TypeError
RangeError
SyntaxError
ReferenceError
![Page 41: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/41.jpg)
Objetos en Javascript (III)
Objetos incorporados.Existe una instancia, sin necesidad de crearla.Global. No es referenciable. Contiene las funciones globales.encodeURI, parseFloat(), . . .Math.
No existe ámbito público/privado.Posible convención: Los atributos privadoscomienzan por "_".
Los objetos se pueden crear añadiendo atributos y métodos.
var oCoche = new Object;oCoche._color = "negro";oCoche._conductores = new Array("Alonso", "Pedro");oCoche.getColor = function() {return this._color;
}
![Page 42: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/42.jpg)
Objetos en Javascript (III)
Objetos incorporados.Existe una instancia, sin necesidad de crearla.Global. No es referenciable. Contiene las funciones globales.encodeURI, parseFloat(), . . .Math.
No existe ámbito público/privado.Posible convención: Los atributos privadoscomienzan por "_".
Los objetos se pueden crear añadiendo atributos y métodos.
var oCoche = new Object;oCoche._color = "negro";oCoche._conductores = new Array("Alonso", "Pedro");oCoche.getColor = function() {return this._color;
}
![Page 43: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/43.jpg)
Objetos en Javascript (III)
Objetos incorporados.Existe una instancia, sin necesidad de crearla.Global. No es referenciable. Contiene las funciones globales.encodeURI, parseFloat(), . . .Math.
No existe ámbito público/privado.Posible convención: Los atributos privadoscomienzan por "_".
Los objetos se pueden crear añadiendo atributos y métodos.
var oCoche = new Object;oCoche._color = "negro";oCoche._conductores = new Array("Alonso", "Pedro");oCoche.getColor = function() {return this._color;
}
![Page 44: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/44.jpg)
Objetos en Javascript (IV)
Clase = plantilla (Factory).Usamos una función como constructor.
function Coche(sColor) {this._color = "negro";this._conductores = new Array("Alonso", "Pedro");this.getColor = function() {return this._color;
}}
var oCoche1 = new Coche("negro");var oCoche2 = new Coche("azul");
Problema del constructor: cada vez se crea una instancianueva de los métodos.
![Page 45: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/45.jpg)
Objetos en Javascript (IV)
Clase = plantilla (Factory).Usamos una función como constructor.
function Coche(sColor) {this._color = "negro";this._conductores = new Array("Alonso", "Pedro");this.getColor = function() {return this._color;
}}
var oCoche1 = new Coche("negro");var oCoche2 = new Coche("azul");
Problema del constructor: cada vez se crea una instancianueva de los métodos.
![Page 46: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/46.jpg)
Objetos en Javascript (IV)
Podemos usar prototipos para instanciar objetos.
function Coche() {}
Coche.prototype._color = "red";Coche.prototype._conductores = new Array("Alonso", "Pedro");Coche.prototype.getColor = function() {
return this._color;}
var oCoche1 = new Coche();var oCoche2 = new Coche();
Las funciones (métodos) se comparten.Problemas:
El “constructor” no puede tener argumentos.Se comparten los objetos referenciados por los atributos.
![Page 47: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/47.jpg)
Objetos en Javascript (IV)
Podemos usar prototipos para instanciar objetos.
function Coche() {}
Coche.prototype._color = "red";Coche.prototype._conductores = new Array("Alonso", "Pedro");Coche.prototype.getColor = function() {
return this._color;}
var oCoche1 = new Coche();var oCoche2 = new Coche();
Las funciones (métodos) se comparten.Problemas:
El “constructor” no puede tener argumentos.Se comparten los objetos referenciados por los atributos.
![Page 48: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/48.jpg)
Objetos en Javascript (IV)
Podemos usar prototipos para instanciar objetos.
function Coche() {}
Coche.prototype._color = "red";Coche.prototype._conductores = new Array("Alonso", "Pedro");Coche.prototype.getColor = function() {
return this._color;}
var oCoche1 = new Coche();var oCoche2 = new Coche();
Las funciones (métodos) se comparten.Problemas:
El “constructor” no puede tener argumentos.Se comparten los objetos referenciados por los atributos.
![Page 49: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/49.jpg)
Objetos en Javascript (IV)
Solución habitual: usar constructores y prototipos.
function Coche(sColor) {this._color = sColor;this._conductores = new Array("Alonso", "Pedro");
}Coche.prototype.getColor = function() {
return this._color;}
var oCoche1 = new Coche("negro");var oCoche2 = new Coche("azul");
![Page 50: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/50.jpg)
Herencia en Javascript (I)
Los objetos nativos, incorporados o definidos por elnavegador no se pueden derivar.La herencia es emulada.Con constructores: usar call para invocar el constructor dela clase padre.Con prototipos: la primera operación es asignar al prototipouna instancia de la clase padre, y a continuación extendemosel prototipo.
![Page 51: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/51.jpg)
Herencia en Javascript (I)
Los objetos nativos, incorporados o definidos por elnavegador no se pueden derivar.La herencia es emulada.Con constructores: usar call para invocar el constructor dela clase padre.Con prototipos: la primera operación es asignar al prototipouna instancia de la clase padre, y a continuación extendemosel prototipo.
![Page 52: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/52.jpg)
Herencia en Javascript (I)
Los objetos nativos, incorporados o definidos por elnavegador no se pueden derivar.La herencia es emulada.Con constructores: usar call para invocar el constructor dela clase padre.Con prototipos: la primera operación es asignar al prototipouna instancia de la clase padre, y a continuación extendemosel prototipo.
![Page 53: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/53.jpg)
Herencia en Javascript (I)
Los objetos nativos, incorporados o definidos por elnavegador no se pueden derivar.La herencia es emulada.Con constructores: usar call para invocar el constructor dela clase padre.Con prototipos: la primera operación es asignar al prototipouna instancia de la clase padre, y a continuación extendemosel prototipo.
![Page 54: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/54.jpg)
Herencia en Javascript (I)
Caso híbrido. Ejemplo:
function Coche(sColor) {this._color = sColor;
}Coche.prototype.getColor = function() {
return this._color;}
function F1(sColor, sPiloto) {Coche.call(this, sColor);this._pilot = sPiloto;
}F1.prototype.getPiloto = function () {return this._piloto;
}
![Page 55: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/55.jpg)
Añadir javascript a los documentos html
Varias formas.Elemento script en la cabecera.
<head>...<script type="text/javascript">var n=6;alert("N vale "+n);
</script>...
</head>
Enlace a rescurso externo.
<head>...<script type="text/javascript"
src="externo.js"></script>...
</head>
![Page 56: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/56.jpg)
Añadir javascript a los documentos html
Varias formas.Elemento script en la cabecera.
<head>...<script type="text/javascript">var n=6;alert("N vale "+n);
</script>...
</head>
Enlace a rescurso externo.
<head>...<script type="text/javascript"
src="externo.js"></script>...
</head>
![Page 57: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/57.jpg)
Añadir javascript a los documentos html
Varias formas.Elemento script en la cabecera.
<head>...<script type="text/javascript">var n=6;alert("N vale "+n);
</script>...
</head>
Enlace a rescurso externo.
<head>...<script type="text/javascript"
src="externo.js"></script>...
</head>
![Page 58: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/58.jpg)
Código Javascript en XHTML
XHTML⇒ XML.
<script type="text/javascript">// <![CDATA[
var n=6;alert("N vale "+n);
// ]]></script>
![Page 59: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/59.jpg)
Concurrencia
Los browsers ejecutan algunas acciones concurrentemente oen un orden inconveniente. Típicamente: crear el documentoy ejecutar el código javascript de la cabecera.El objeto window tiene un callback en el atributo onload.Un idioma típico:
<head><script type="text/javascript">// <![CDATA[
function init() { ... }
window.onload = init;
// ]]></script>
</head>
<body>...
![Page 60: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/60.jpg)
Concurrencia
Los browsers ejecutan algunas acciones concurrentemente oen un orden inconveniente. Típicamente: crear el documentoy ejecutar el código javascript de la cabecera.El objeto window tiene un callback en el atributo onload.Un idioma típico:
<head><script type="text/javascript">// <![CDATA[
function init() { ... }
window.onload = init;
// ]]></script>
</head>
<body>...
![Page 61: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/61.jpg)
DOM (I)
Documento = jerarquía de nodos.Objeto document.
window.document == document.Elemento html: document.documentElement.
var oHthml = document.documentElement;var oHead = oHtml.childNodes.item(0);var oBody = oHtml.childNodex.item(1);
![Page 62: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/62.jpg)
DOM (I)
Documento = jerarquía de nodos.Objeto document.
window.document == document.Elemento html: document.documentElement.
var oHthml = document.documentElement;var oHead = oHtml.childNodes.item(0);var oBody = oHtml.childNodex.item(1);
![Page 63: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/63.jpg)
DOM (II)
La interface Node:
nodeName : String previousSibling : NodenodeValue : String nextSibling : NodenodeType : Number hasChildNodes() : BooleanownerDocument : DocumentfirstChild : Node appendChild(node) : NodelastChild : Node removeChild(node) : NodechildNodes : NodeListattributes : NamedNodeMapreplaceChild(oldNode,newNode) : NodeinsertBefore(newNode, refNode) : Node
Ejemplo: recorrer los hijos de un nodo.
var children = aNode.childNodes;for(int i=0; i<children.length; i++) {some_op(children[i]);
}
![Page 64: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/64.jpg)
DOM (II)
La interface Node:
nodeName : String previousSibling : NodenodeValue : String nextSibling : NodenodeType : Number hasChildNodes() : BooleanownerDocument : DocumentfirstChild : Node appendChild(node) : NodelastChild : Node removeChild(node) : NodechildNodes : NodeListattributes : NamedNodeMapreplaceChild(oldNode,newNode) : NodeinsertBefore(newNode, refNode) : Node
Ejemplo: recorrer los hijos de un nodo.
var children = aNode.childNodes;for(int i=0; i<children.length; i++) {some_op(children[i]);
}
![Page 65: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/65.jpg)
DOM (III)
Los nodos element (Elementos XHTML) tiene atributos.La propiedad attributes contiene una lista de nodos detipo atributo.
getNamedItem(name) setNamedItem(node)removeNamedItem(name) item(position)
getAttribute(name) ==attributes.getNamedItem(name).value
setAttribute(name,value) ==attributes.getNamedItem(name).value = value
removeAttribute(name) ==attributes.removeNamedItem(name)
Ejemplo: oP referencia el nodo de elemento:
<p class="rojo" id="p1">¡Hola Mundo!</p>
var sID = oP.attributes.getNamedItem("id").nodeValue;var sID = oP.getAttribute("id");
![Page 66: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/66.jpg)
DOM (III)
Los nodos element (Elementos XHTML) tiene atributos.La propiedad attributes contiene una lista de nodos detipo atributo.
getNamedItem(name) setNamedItem(node)removeNamedItem(name) item(position)
getAttribute(name) ==attributes.getNamedItem(name).value
setAttribute(name,value) ==attributes.getNamedItem(name).value = value
removeAttribute(name) ==attributes.removeNamedItem(name)
Ejemplo: oP referencia el nodo de elemento:
<p class="rojo" id="p1">¡Hola Mundo!</p>
var sID = oP.attributes.getNamedItem("id").nodeValue;var sID = oP.getAttribute("id");
![Page 67: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/67.jpg)
DOM (III)
Los nodos element (Elementos XHTML) tiene atributos.La propiedad attributes contiene una lista de nodos detipo atributo.
getNamedItem(name) setNamedItem(node)removeNamedItem(name) item(position)
getAttribute(name) ==attributes.getNamedItem(name).value
setAttribute(name,value) ==attributes.getNamedItem(name).value = value
removeAttribute(name) ==attributes.removeNamedItem(name)
Ejemplo: oP referencia el nodo de elemento:
<p class="rojo" id="p1">¡Hola Mundo!</p>
var sID = oP.attributes.getNamedItem("id").nodeValue;var sID = oP.getAttribute("id");
![Page 68: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/68.jpg)
DOM (IV)
Otros métodos de acceso a los nodos.
getElementsByName()getElementsById()
Crear nodos.
createElement()createTextNode()createAttribute(), createComment, . . .
![Page 69: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/69.jpg)
DOM (IV)
Otros métodos de acceso a los nodos.
getElementsByName()getElementsById()
Crear nodos.
createElement()createTextNode()createAttribute(), createComment, . . .
![Page 70: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/70.jpg)
DOM (V)
Ejemplo: formulario.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3c.org/199/xhtml">
<head><title>Ejemplo de DOM</title><meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" /></head>
![Page 71: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/71.jpg)
DOM (VI)
Ejemplo: formulario (cont.).
<body><form method="post" action="hacer.cgi"><fieldset><legend>¿Qué personaje te gusta más?</legend><p><input type="radio" name="personaje" vaue="LAdama">
Lee Adama </input></p><p><input type="radio" name="personaje" vaue="StarBuck"
checked="checked">StarBuck </input></p>
<p><input type="radio" name="personaje" vaue="Baltar">Dr. Baltar </input></p>
<p><input type="radio" name="personaje" vaue="Cylon6">Cylon nb. 6 </input></p>
</fieldset><input type="submit" value="Enviar" />
</form></body></html>
![Page 72: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/72.jpg)
DOM (VII)
Añadimos javascript para que el foco pase al primer elementode la lista de opciones.
<head>...<script type="text/javascript">//<![CDATA[function init() {
var oRadios = document.getElementsByName("personaje");oRadios.item(0).focus();
}
window.onload = init;//]]></script></head>
![Page 73: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/73.jpg)
DOM y CSS
El estilo CSS asociado a un nodo se accede a traves de suatributo style.Ejemplo:oP.sytle.color = "red";
La clase se accede a traves del atrituto className.
![Page 74: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/74.jpg)
DOM y CSS
El estilo CSS asociado a un nodo se accede a traves de suatributo style.Ejemplo:oP.sytle.color = "red";
La clase se accede a traves del atrituto className.
![Page 75: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/75.jpg)
Interactividad
Es posible asociar manejadores a cierto eventos de usuario.Existen varias maneras.Implementación deficiente de estandares (IE).
![Page 76: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/76.jpg)
Interactividad
Es posible asociar manejadores a cierto eventos de usuario.Existen varias maneras.Implementación deficiente de estandares (IE).
![Page 77: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/77.jpg)
Interactividad
Es posible asociar manejadores a cierto eventos de usuario.Existen varias maneras.Implementación deficiente de estandares (IE).
![Page 78: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/78.jpg)
Eventos
Atributos de las etiquetas:
<a href="fallback.cgi"onClick="hacer_algo(); return false;">
...</a>
Atributos de los elementos:
var enlace = ...enlace.onclick = hacer_algo;
DOM W3C:
var enlace = ...enlace.addEventListener(’click’,hacer_algo,false);
![Page 79: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/79.jpg)
Eventos
Atributos de las etiquetas:
<a href="fallback.cgi"onClick="hacer_algo(); return false;">
...</a>
Atributos de los elementos:
var enlace = ...enlace.onclick = hacer_algo;
DOM W3C:
var enlace = ...enlace.addEventListener(’click’,hacer_algo,false);
![Page 80: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/80.jpg)
Eventos
Atributos de las etiquetas:
<a href="fallback.cgi"onClick="hacer_algo(); return false;">
...</a>
Atributos de los elementos:
var enlace = ...enlace.onclick = hacer_algo;
DOM W3C:
var enlace = ...enlace.addEventListener(’click’,hacer_algo,false);
![Page 81: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/81.jpg)
El objeto event
Argumento de los manejadores.Contiene información del evento.
function hacer_algo(e) {alert("El tipo de evento es" + e.type);
}
Pero, en Microsoft sólo tenemos window.event:
function hacer_algo(e) {alert("El tipo de evento es" + window.event.type);
}
Cross-browser.
function hacer_algo(e) {if (!e) var e = window.event;// e está disponible en todos los browsers
}
![Page 82: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/82.jpg)
El objeto event
Argumento de los manejadores.Contiene información del evento.
function hacer_algo(e) {alert("El tipo de evento es" + e.type);
}
Pero, en Microsoft sólo tenemos window.event:
function hacer_algo(e) {alert("El tipo de evento es" + window.event.type);
}
Cross-browser.
function hacer_algo(e) {if (!e) var e = window.event;// e está disponible en todos los browsers
}
![Page 83: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/83.jpg)
El objeto event
Argumento de los manejadores.Contiene información del evento.
function hacer_algo(e) {alert("El tipo de evento es" + e.type);
}
Pero, en Microsoft sólo tenemos window.event:
function hacer_algo(e) {alert("El tipo de evento es" + window.event.type);
}
Cross-browser.
function hacer_algo(e) {if (!e) var e = window.event;// e está disponible en todos los browsers
}
![Page 84: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/84.jpg)
Ejemplo (I)
Validación en formularios.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en"><head><title>W3C DOM - Form error messages</title>...
<script type="text/javascript"><!--...--!></script>
</head>
![Page 85: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/85.jpg)
Ejemplo (II)
Validación en formularios.
<body>...<form name="example" action="/cgi-bin/show_params.cgi"><p><label for="name">name</label><input size="20" name="name" id="name" /></p><p><label for="address">address</label><input size="20" name="address" id="address" /></p><p><label for="city">city</label><input size="20" name="city" id="city" /></p><p><label for="email">e-mail</label><input size="20" name="email" id="email" /></p>
<p><input type="submit" value="Submit form" /></p></form>...</body></html>
![Page 86: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/86.jpg)
Ejemplo (III)
Javascript de validación:
<script type="text/javascript"><!--
var W3CDOM = (document.getElementsByTagName && document.createElement);
function init (){
document.forms[0].onsubmit = function () {return validate()
}}
...
window.onload = init// -->
</script>
![Page 87: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/87.jpg)
Ejemplo (IV)
Función de validación:
function validate(){
validForm = true;firstError = null;errorstring = ’’;var x = document.forms[0].elements;for (var i=0;i<x.length;i++){
if (!x[i].value)writeError(x[i],’This field is required’);
}if (x[’email’].value.indexOf(’@’) == -1)
writeError(x[’email’],’This is not a valid email address’);if (!W3CDOM)
alert(errorstring);if (firstError)
firstError.focus();if (validForm)
alert(’All data is valid!’);return false; // I return false anyway to prevent actual form submission. Don’t do this at home!
}
![Page 88: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/88.jpg)
Ejemplo (V)
Función de marcado de errores:
function writeError(obj,message){
validForm = false;if (obj.hasError) return;if (W3CDOM){
obj.className += ’ error’;obj.onchange = removeError;var sp = document.createElement(’span’);sp.className = ’error’;sp.appendChild(document.createTextNode(message));obj.parentNode.appendChild(sp);obj.hasError = sp;
}else{
errorstring += obj.name + ’: ’ + message + ’\n’;obj.hasError = true;
}if (!firstError)
firstError = obj;}
![Page 89: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/89.jpg)
Ejemplo (VI)
Función de borrado de marcas de error:
function removeError(){
this.className = this.className.substring(0,this.className.lastIndexOf(’ ’));this.parentNode.removeChild(this.hasError);this.hasError = null;this.onchange = null;
}
![Page 90: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/90.jpg)
Ejemplo (I)
Crear elementos
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3c.org/199/xhtml"><head><title>Ejemplo de DOM</title>...
<script type="text/javascript"><!--...--!></script>
</head>
![Page 91: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/91.jpg)
Ejemplo (II)
La página inicial.
<div id="imagenes"><h1>Imagenes</h1></div>
<form action="fallback.cgi"><input type="submit" name="botonAñadir" value="Añadir" />
</form></body>
![Page 92: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/92.jpg)
Ejemplo (III)
Código de inicialización.
function init() {var boton = document.getElementsByName("botonAñadir").item(0);boton.addEventListener(’click’, addImage, false);
}window.onload = init;
Manejador de evento.
function addImage(e) {var capa = document.getElementById(’imagenes’);var img = document.createElement(’img’);img.setAttribute(’src’,’imagen.jpg’)img.setAttribute(’class’, ’imagen’);capa.appendChild(img);e.preventDefault();
}
![Page 93: Aplicaciones Webquegrande.org/apuntes/ETIX/OPT/IU/teoria/08-09/dhtml.pdf · DOM: Modelo de Objetos del Documento (Document Object Model). API para manipular los documentos HTML. BOM:](https://reader035.vdocuments.site/reader035/viewer/2022071605/61412e2e83382e045471eb8b/html5/thumbnails/93.jpg)
Ejemplo (III)
Código de inicialización.
function init() {var boton = document.getElementsByName("botonAñadir").item(0);boton.addEventListener(’click’, addImage, false);
}window.onload = init;
Manejador de evento.
function addImage(e) {var capa = document.getElementById(’imagenes’);var img = document.createElement(’img’);img.setAttribute(’src’,’imagen.jpg’)img.setAttribute(’class’, ’imagen’);capa.appendChild(img);e.preventDefault();
}