Publicado el 18 de Junio del 2018
856 visualizaciones desde el 18 de Junio del 2018
1,8 MB
57 paginas
Creado hace 14a (21/10/2009)
Integración de XML en páginas
Web dinámicas
DOM
Jose Emilio Labra Gayo
Departamento de Informática
Universidad de Oviedo
Motivación:
Computación Dinámica
Páginas Web estáticas vs. Dinámicas
Computación Dinámica = Contenido se genera en el momento
en que se hace la petición
2 Posibilidades: Cliente vs Servidor
Internet
Cliente
GET http://servidor.com/hola.html
Servidor
http:/1.0 200 OK
<html>
<body>
Enlace a
<a href =“otro.html”>Otro</a>
</body>
</html>
Computación Dinámica
en Servidor
Al solicitar ciertas páginas, el servidor genera el
contenido
Ejemplos: CGI's, Servlets, JSP, ASP, PHP, etc.
El proceso es trasparente para el cliente
El cliente recibe únicamente código HTML
No tiene porqué haber problemas de usabilidad
Desventajas
La interactividad requiere comunicación entre cliente/servidor
Mayor carga de la red y del servidor
Desperdicio de las capacidades del cliente
Computación dinámica
en Cliente
Se pueden incluir objetos computacionales que son
interpretados por el cliente
Varias posibilidades: Applets, Javascript, ...
Se ejecutan en el entorno que ofrece el navegador
DOM ofrece una API que permite acceder/manipular los
elementos del documento
También se puede acceder a otros elementos (eventos,
barra de estado, etc.)
Por seguridad no se permite escribir/leer ficheros
JavaScript
Un poco de historia
Netscape 2 (Dic. 1995) incorporó Javascript (diseñado por
Brendan Eich)
Permite modificar contenido de páginas Web interactivamente
JavaScript no tiene nada que ver con Java
Se llamaba LiveScript (cambio de nombre por marketing)
Microsoft desarrolla JScript Problemas compatibilidad
Estándar ECMAScript (1997)
Javascript será una implementación de ECMAScript
ECMAScript es un lenguaje de scripting basado en objetos
No se pretende que sea autosuficiente, se ejecuta empotrado en un
visualizador Web (no tiene objetos de E/S)
No se realizan comprobaciones estáticas de tipos
Sintaxis similar a Java
Herencia basada en prototipos (no en clases)
Generalidades de Javascript
Lenguaje Orientado a Objetos sin clases
Sólo se parece a Java en aspectos sintácticos
Interpretado
Lenguaje “sin tipos” o dinámico
No tiene acceso al disco de la máquina local (por seguridad)
Tiene objetos predefinidos
Window
Location
History
Document
Forms
Anchors
String
Math
Date
Navigator
Generalidades de JavaScript
Elementos de JavaScript:
Objetos
Expresiones
Estructuras de control
Funciones
Arrays
Eventos
Elementos de una página XHTML pueden causar un evento que
ejecutará una acción
Esa acción se ejecutará a través de una serie de sentencias
JavaScript
La Etiqueta <script>
Sintaxis
<script type="text/javascript">
//instrucciones javaScript
</script>
¿Dónde se colocan los scripts?
En general, dentro de <head> ... </head>
Si genera una salida, dentro de <body> ...
</body>
Si hace referencia a un elemento XHTML, después
de dicho elemento
En algunos casos, en los atributos de algunas
etiquetas (eventos)
en un fichero externo
<script type="text/javascript" src="fuente.js"></script>
Objetos Predefinidos en Javascript
Objetos Predefinidos
String: Cada vez que se asigna una cadena de caracteres a
una variable, se crea un objeto de la clase String
Math: Se usa para efectuar cálculos matemáticos
Date: Para el manejo de fechas y horas
Array: almacena un conjunto de valores
Boolean
Objeto Browser (Navegador)
Informa sobre el navegador
Objeto Document
Es el documento HTML y tiene asociados elementos del
documento (link, ancla, formulario, …)
Objetos definidos por el usuario
Métodos habituales
String:
length(): longitud del string
replace(): reemplaza un texto por otro
ToUpperCase ():pasa a mayúsculas
Date:
getTime()
getFullYear()
getDay
Array
sort(): ordena elementos
concat(): concatena dos arrays
Math
Round()
Max(), min()
Nombres de Variables
Nombres sensibles mayúsculas/minúsculas.
Deben comenzar por una letra o guión bajo. No deben
coincidir con palabras reservadas
Se podrían definir como variables:
Nombre
_Opción15
mes3
Declaración:
Asignándole un valor: x = 42
Con la palabra reservada “var”: var x
O bien ambos: var x = 42
Comentarios
Igual que en C++
Una línea:
// comentario de una línea
Varias líneas:
/*
comentario de varias líneas
*/
Bucles
While while (condicion){
//código
}
Do … while do {
//código
} while (condicion)
For for (inicialización; condición; incremento){
//código
}
For in for (variable in object) {
//código
}
Sentencias condicionales
if (condicion){
//código para condición = true
}
else{
//código para condición = false
}
switch (expresion){
case etiqueta1:
//código si la expresion = label1
break
case etiqueta2:
//código si la expresion = label2
break
default:
//código si la expresión no es ninguna de las
anteriores
}
Operadores
Aritméticos: +, -, *, /, %, ++, --
Asignación: =, +=, -=, *=, /=, %=
Comparación: ==, !=, >, <, >=, <=
Lógicos: &&, ||, !
Objetos y propiedades
Acceso a propiedades de un objeto:
nombreObjeto.nombrePropiedad
Las propiedades se definen asignándoles un
valor
Es posible definir nuevos objetos de dos formas
diferentes:
Mediante inicialización de objetos
Mediante una función constructora y “new”
Funciones
Sintaxis
function mifuncion(argumento1,argumento2,…)
{
//Código
}
Se puede usar la palabra reservada return pero no hay
que indicar nada en la declaración de la función
Pueden definirse funciones anónimas (Ej. manejadores
de eventos)
Eventos en Javascript
El evento es gestionado por una sección de
código en JavaScript (Gestor de Eventos)
Declaración de Gestores de Eventos
Crear páginas web dinámicas
Las acciones son detectadas por JavaScript
Ejemplos:
Click de ratón
Carga de la página
Mandar un formulario…
Gestores de Eventos
Evento
Ocurre cuando
Gestor
blur
click
change
focus
load
El usuario quita el cursor de un elemento de formulario
onBlur
El usuario hace click en un link o un elemento de formulario
onClick
El usuario cambia el valor de un texto, un área de texto o
selecciona un elemento.
onChange
El usuario coloca el cursor en un elemento de formulario.
onFocus
El usuario carga una página en el Navegador
onLoad
Mouseover
El usuario mueve el ratón sobre un link
onMouseOver
Select
El usuario selecciona un campo del elemento de un formulario
onSelect
Submit
Se envía un formulario
Unload
Se descarga la página
onSubmit
onUnload
Javascript & DHTML
DHTML (HTML + CSS + DOM + JavaScript)
JavaScript interactúa con los elementos HTML a través
del DOM del navegador
En 1998, el W3C decide estandarizar DHTML
Se observa que la funcionalidad requerida puede servir a otros
campos: XML, HTML, SVG, SMIL, etc.
DOM (Document Object Model) = Interfaz común para
trabajar con objetos de un documento
El interfaz se define mediante OMG IDL (Interface Definition
Language): es independiente del lenguaje particular
Estructura similar a un árbol
Especificación DOM
DOM = Interfaz independiente de plataforma y lenguaje
de programación para acceder y manipular el
contenido, el estilo y la estructura de un documento.
La norma se define en niveles en lugar de versiones:
Niveles 1, 2 y 3
DOM Nivel 1
Recomendación en 1998
Contiene 3 partes:
DOM Core = Estructura lógica de documentos común a
XML y HTML
Estructura de árbol: Node, Element, Attr, ...
Manipulación del árbol: appendChild, removeChild, ...
DOM XML = Características de XML
CDATASection, PIs, entityReference, ...
HTML = Funcionalidad especializada para HTML
a.href, form.submit, ...
Arquitectura de DOM Nivel 1
DOM Nivel 2
Finalizado en 2000 (recomendación en 2003)
Incluye
Espacios de nombres
Hojas de estilos (CSS)
Sucesos (events)
Rangos (rangos de recorrido de un árbol)
Recorridos (vista iterador, filtro, etc.)
Arquitectura DOM Nivel 2
DOM Nivel 3
Finalizado en 2004
Incluye
Soporte para XML Base
Cargar y almacenar documentos
Posibilidad de mezclar varios vocabularios
Validación de documentos
XPath
Nuevos tipos de sucesos
Arquitectura de DOM Nivel 3
Elementos básicos
de DOM
La base de DOM es un árbol de nodos.
No se especifica cómo tiene que ser la implementación
de ese árbol de nodos.
Solo tiene que cumplir una interfaz
Implementaciones en varios lenguajes:
Java, ECMAScript, C, C++, Python, etc.
Estructura jerárquica
En DOM, un documento XML se representa como un
árbol
DOM proporciona métodos, clases e interfaces para
acceder y manipular el árbol
<html>
<head>
<title>Ejemplo</title>
</head>
<body>
<h1>Cabecera</h1>
<p>Un párrafo</p>
</body>
</html>
html
head
title
body
h1
p
Ejemplo
Cabecera
Un párrafo
Estructura de documentos
Elementos
<p>Un párrafo</p>
Element: p
Text: Un párrafo
Estructura de Documentos
Subelementos
<p>Un párrafo
<b>marcado</b>
</p>
Element: p
Text: Un párrafo
Element: b
Text: marcado
Estructura de Documentos
Atributos
<p ALIGN="right">Un párrafo
<b>marcado</b>
</p>
Element: p
Text: Un párrafo
Element: b
Text: marcado
Attr: ALIGN
Text: right
Modelo de Herencia
Principales Interfaces
<<Interface>>
Node
<<Interface>>
<<Interface>>
<<Interface>>
<<Interface>>
Element
Attr
Document
CharacterData
. . .
<<Interface>>
NodeList
<<Interface>>
NamedNodeMap
<<Interface>>
CharacterData
<<Interface>>
CDataSection
Nodo Documento
El nodo documento representa el documento entero
Métodos de búsqueda:
documentElement devuelve el elemento raíz
getElementByID devuelve el elemento a partir de un ID
getElementsByTagName devuelve los elementos a partir de
una etiqueta dada
Métodos factoría (para crear nodos)
createElement
createAttribute
createComment
createProcessingInstruction
...
Nodos del árbol
El interfaz Node representa nodos del árbol
Todos los demás heredan de Node
Funcionalidad básica de manipulación del árbol
Recorrido:
attributes
Attrib1
Attrib2
...
...
parentNode
firs
Comentarios de: Integración de XML en páginas Web dinámicas DOM - Tecnologías Web y XML (0)
No hay comentarios