PDF de programación - Integración de XML en páginas Web dinámicas DOM - Tecnologías Web y XML

Imágen de pdf Integración de XML en páginas Web dinámicas DOM - Tecnologías Web y XML

Integración de XML en páginas Web dinámicas DOM - Tecnologías Web y XMLgráfica de visualizaciones

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
  • Links de descarga
http://lwp-l.com/pdf11968

Comentarios de: Integración de XML en páginas Web dinámicas DOM - Tecnologías Web y XML (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad