Tecnologías y Servicios Web 25|26

Tema 3. Programación front-end

Iván Martínez Estévez | [Link]@[Link]

Despacho 401 | tutorías con cita previa

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 Índice
●
(X)HTML.
●
Visión general.
●
Estructura del documento.
●
Elementos de texto. Enlaces. Imágenes y objetos. Tablas. Formularios.
●
CSS.
●
Conceptos básicos. Propiedades básicas (texto, bordes, fondos).
●
Flotación y posicionamiento.
●
Ejemplos de plantillas.
●
JavaScript.
●
Conceptos básicos.
●
JavaScript en páginas Web. DOM Scripting.
●
AJAX.

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. Conceptos básicos
●
JavaScript en un lenguaje de programación
orientado a objetos basado en prototipos, usado
principalmente en navegadores Web para dotar
de comportamiento e interactividad a las
páginas Web.

JavaScript CSS

(X)HTML
●
Creado por Brendan Eich en Netscape en 1995.
●
Comenzó llamándose "Mocha", luego "LiveScript"
y, cuando se hizo público, se llamó JavaScript (no
tiene nada que ver con Java).
●
En 1996 se estandarizó dentro de ECMA, donde
se definió ECMAScript, que engloba a varios
lenguajes (JavaScript, Microsoft JScript o
ActionScript). La versión estándar es 1.8.5.

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. Conceptos básicos
●
Sintaxis básica.
●
JavaScript hereda su sintaxis de C.
●
Estructuras de control:
– if-else, while y do-while, switch y for
– El bucle for tiene además una variante que permite recorrer
las propiedades de un objeto (todas, incluídas las heredadas).
Ejemplo:

for (i in obj){
alert(i+" property is "+obj[i]);
alert(" is own?: "+[Link](i));
}

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. Conceptos básicos
●
Lenguaje dinámico.
●
Débilmente tipado.
– El tipo se asocia a los valores en sí, no a las variables (que no tienen tipo). Una variable se
considera que es del tipo del último valor asignado.
var i = 7; //number
i = "Hello World!"; //string

i = { x: 1, y: 2 }; //objeto
– Permite "duck typing" debido a la ausencia de un sistema de tipos estricto.
●
La semántica de un objeto viene definida por todas aquellas propiedades que posee,
no si hereda de una clase u otra.
●
Si dos objetos tienen métodos con el mismo nombre y parámetros, se podrán usar
indistintamente.
●
Interpretado (evaluación dinámica).
– Incluye además una fución eval(), que permite interpretar cualquier cadena con código
JavaScript, por lo que se permite incluir y ejecutar código dinámicamente.
var x = 3;
eval("x = x + 2");
[Link](x); // muestra 5
Tecnologías y Servicios Web 25|26. Daniel Glez-Peña
 JavaScript. Conceptos básicos
●
Arrays. El objeto Array permite crear colecciones con
un número indeterminado de elementos de cualquier
tipo, accesibles a partir de un índice entero.
●
Implementa varias funciones muy útiles, como añadir al
final, ordenar, unir, etc.
●
Ejemplo:

var nombres = new Array();

nombres[0] = "Juan";
nombres[1] = "Pepe";
//literal para array:
var nombres = ["Juan", "Pepe"];

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. Conceptos básicos
●
Orientación a objetos.
●
JavaScript es un lenguaje orientado a objetos, pero no al estilo
clásico basado en clases como Java, C++ o PHP.
●
La orientación a objetos en JavaScript se basa en objetos literales,
prototipos y funciones, no en clases.
– No existen las clases tradicionales, aunque desde ES6 hay una
sintaxis class (veremos después), pero sigue siendo basada
en prototipos.
●
Los objetos no se crean instanciando clases, se crean a
partir de otros objetos (prototipos).

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. Conceptos básicos
●
Orientación a objetos (II).
●
Un objeto es realmente un mapa o diccionario de pares clave: valor. Esto
significa que los objetos funcionan como arrays asociativos que vinculan
propiedades a valores o a funciones (métodos). Ejemplo:
var yo = {
name: "Juan", apellido: "Perez",
saluda: function(){alert("hola soy "+[Link]);}
};
alert([Link]); [Link]();
alert(yo["name"]); yo["saluda"](); //array asociativo!
●
Existen valores primitivos: number, string, boolean, undefined, null.
– También existen, objetos "wrapper" para manejar ciertos primitivos (Number, String,
Boolean). Además, JavaScript crea los wrapper dinámicamente (auto-boxing/unboxing).
●
Existen varios objetos por defecto: Array, Function, Math, Date, RegExp,
JSON y varios para manejo de errores.

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. Conceptos básicos
●
Orientación a objetos basada en prototipos.
●
No existen las clases.
●
Cada objeto tiene una referencia a un prototipo.
– Es otro objeto más.
– Cualquier objeto puede ser el prototipo de otro.
– El prototipo puede serlo de muchos objetos.
●
En consecuencia un cambio en alguna propiedad del prototipo es visible
en todos los objetos que lo tienen como tal.

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. Conceptos básicos
●
Orientación a objetos basada en prototipos (II).
●
Cadena de prototipos (prototype chain). Cada objeto tiene las
propiedades propias, además de todas las de su prototipo
(recursivamente).
– La propiedad __proto__ permite acceder al objeto prototipo, aunque está
obsoleta, se debe usar [Link](obj);
var obj = {
do: function() {
[Link]("Hola");
}
};
var a = [Link](obj);
[Link](); // No está en "a", se busca en "obj"
var b = [Link](a);
[Link]();// No está en "a" ni "b", se busca en "obj"
// Todos heredan de un único objeto.

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. Conceptos básicos
●
Funciones.
●
Es un lenguaje funcional porque las funciones tienen un papel
central y pueden manipularse como objetos.
●
Las funciones se definen con la palabra clave function. La
palabra clave crea un objeto cuyo prototipo es un objeto
prototipo de todas las funciones ([Link]).
●
El nombre de la función puede ir detrás de function, o bien
podemos asignar la función a una variable o propiedad de objeto.
function mifuncion(param1, param2){ ... }

mifuncion(8,5); //invocacion

var x = function(){...}; //creación de funcion x

var obj = new Object();

[Link] = function() {...};
[Link]();
Tecnologías y Servicios Web 25|26. Daniel Glez-Peña
 JavaScript. Conceptos básicos
●
Funciones (II).
●
Las funciones son objetos y pueden ser pasados como parámetro.
●
El operador () ejecuta el código de una función. Ejemplos:
– Guardar en variables.
var f = function() { alert("hola"); };
f();
– Pasar como parámetro.
function ejecutar(fn) { fn(); }
ejecutar(function(){ alert("hola"); });
– Método como propiedad.
var obj = {
mensaje: "hola",
hablar: function() { alert([Link]); }
};
[Link]();
Tecnologías y Servicios Web 25|26. Daniel Glez-Peña
 JavaScript. Conceptos básicos
●
Funciones (III).
●
Las propiedades de los objetos que apuntan a objetos
función se llaman métodos.
●
Referencia this. Apunta al objeto sobre el que se
llama al método.
var persona = {
nombre: "Pepe",
saludar: function() {
[Link]("Hola, soy " + [Link]);
}
};
[Link](); // Método que devuelve "Hola, soy Pepe"
●
Si la función se llama directamente (no sobre ningún
objeto), this apunta al objeto window.
Tecnologías y Servicios Web 25|26. Daniel Glez-Peña
 JavaScript. Conceptos básicos
●
Creando objetos.
●
Literal de objeto. Construye un nuevo objeto, con el prototipo [Link]. Ejemplo:
var miobj = { nombre: "Juan", apellido: "Perez" };
●
Palabra clave var. Fuera de funciones no significa nada. En funciones indica que la variable es
local a la función.
– Importante, ya que si no se usa se pueden producir efectos no deseados. Ejemplo:
function fn() {
a = 5; // ERROR LÓGICO: crea/sobreescribe una variable global
var b = 6; // variable local
}
●
Operador new. Permite construir objetos nuevos valiendose de una función, que actuará de
constructor.
– new crea un objeto vacío (sin propiedades) e invoca a la función constructora.
– Dentro de la función constructora, this apunta al nuevo objeto. Se puede usar this para ir estableciendo
nuevas propiedades.
function Empleado(nombre){ [Link] = nombre; };
var miEmpleado = new Empleado("pepe");
– Nota: Object, String, Number, etc. son, en realidad, funciones que se usan como constructores
(wrapper objects).
Tecnologías y Servicios Web 25|26. Daniel Glez-Peña
 JavaScript. Conceptos básicos
●
Creando objetos (II).
●
Operador new y prototipos (avanzado).
– El prototipo del nuevo objeto será el que indique la propiedad prototype
de la función constructora.
– Por defecto, prototype apunta a una nueva instancia de Object que se
creó en el momento de la declaración de la función constructora.
●
Dicha instancia tiene una propiedad constructor, que apunta a la función
constructora.
●
Es por ello que la mayoría de objetos tienen una propiedad constructor que
"debería" apuntar a la función que lo construyó. Ejemplo:

function Empleado(name){ [Link] = name; };

var miobj = new Empleado("pepe");
// el prototipo de miobj es un objeto de esta forma:
// { constructor: Empleado };
// [Link] apunta a dicho objeto.

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. Conceptos básicos
●
Creando objetos (III).
●
Operador new y prototipos (avanzado) (II).
– El prototipo que tendrá un objeto se puede alterar si se modifica
la propiedad prototype del constructor, haciéndola apuntar al
objeto que se quiera.
– Es importante que dicho objeto tenga la propiedad constructor
apuntando a la función.
– Ejemplo:
function Empleado(name) { [Link] = name; };

[Link] = {
constructor: Empleado, //debemos acordarnos!
name: "default",
salario: 1500,
saluda: function { alert([Link]); }
};
var obj = new Empleado("Pepe");
Tecnologías y Servicios Web 25|26. Daniel Glez-Peña
 JavaScript. Conceptos básicos
●
Creando objetos (IV).
●
Operador new y prototipos (avanzado) (III).
– Resumen gráfico de constructores y prototipos:
function Foo(){ ... }
var f1 = new Foo();
var f2 = new Foo();
var o1 = new Object();
var o2 = new Object();
– Resumen general
●
f1 y f2 son instancias creadas con new Foo()
– Su prototipo es [Link].
●
Foo es una función
– Su prototipo es [Link].
●
Object es también una función
– Su prototipo también es [Link].
– Sus instancias (o1, o2) tienen como prototipo
[Link].
●
[Link] es la raíz de la jerarquía
– Su prototipo es null(no hereda de ningún otro objeto).

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. Conceptos básicos
●
Herencia.
●
La herencia simplemente establece mediante la cadena de prototipos.
●
Cada vez que se accede (para lectura) a una propiedad o se llama a un método, se busca en
toda la cadena de prototipos.
●
Si se asigna un valor a una propiedad (escritura), siempre se hará sobre la instancia
referenciada (no sobre ninguno de sus prototipos, salvo que sigamos la cadena de
prototipos con getPrototypeOf).
●
Comprobación de prototipos.
●
El método isPrototypeOf de todos los objetos permite saber si un objeto es el protipo
de otro (directa o indirectamente). Ejemplo:
[Link](new Number()); //true
●
El operador instanceof permite saber si un objeto tiene entre sus prototipos el que
asigna una función constructora dada. Ejemplo:
obj instanceof Number;
//comprueba si [Link](obj);
●
Si se llega a ([Link].__proto__ === null), la propiedad no existe.

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. Conceptos básicos
●
Definición de "clases" en ECMAScript 6 (2015).
●
Se pueden definir "clases" y herencia para facilitar el trabajo con los
objetos en JavaScript.
– Nota: Esto no significa que JavaScript soporte ahora una orientación
a objetos basada en clases, sigue siendo basada en prototipos.
Simplemente son mejoras sintácticas; se podía lograr lo mismo en
versiones previas.
– Desde ES2019 se permiten miembros privados, cuyo nombre debe
comenzar por '#'. Más info:
[Link]
e/Classes/Private_properties

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. Conceptos básicos
●
Definición de "clases" en ECMAScript 6 (2015).
●
Ejemplo:
class SkinnedMesh extends [Link] {
constructor(geometry, materials) {
super(geometry, materials);
[Link] = [Link]();
[Link] = [];
[Link] = [];
//...
}
update(camera) {
//...
[Link]();
}
get boneCount() {
return [Link];
}
set matrixType(matrixType) {
[Link] = SkinnedMesh[matrixType]();
}
static defaultMatrix() {
return new THREE.Matrix4();
}
}
Tecnologías y Servicios Web 25|26. Daniel Glez-Peña
 JavaScript. Conceptos básicos
●
Closures.
●
Concepto avanzado, pero esencial para dominar JavaScript.
●
Una closure está formada por:
– Una función.
– El contexto léxico en el que esa función fue creada.
●
Es una función con memoria de las variables que existían en
el momento de su definición.

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. Conceptos básicos
●
Closures (II).
●
Ejemplo:
function makeFunc() { // función contenedora
var name = "Mozilla"; // name no desaparece; es usada por displayName
function displayName() { // función interna
alert(name); // tiene acceso a name!!
}
return displayName; // devolvemos función interna
}
var a = makeFunc(); // myFunc apunta a un closure
var b = makeFunc(); // cada closure tiene sus propias variables internas
a();
b();

– Aunque a y b vienen de la misma función:

●
Cada llamada a makeFunc() genera su propio contexto.
●
Cada closure tiene sus propias variables internas.
– Es decir, a y b no comparten el mismo name.
Tecnologías y Servicios Web 25|26. Daniel Glez-Peña
 JavaScript. Conceptos básicos
●
Closures (III).
●
Cada vez que se invoca la función externa se genera un nuevo
contexto para las variables locales.
●
Un uso típico es crear objetos con métodos privados (no existe
private en JavaScript).
●
Más información sobre closures
– Explicación básica de closures:
[Link]
– Métodos privados:
[Link]

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. Conceptos básicos
●
Closures (IIII). Más ejemplos:
Emulación de miembros privados en objetos "factorías" de funciones

function Counter(start) { function makeAdder(x) {

//private return function(y) {
var secret = start; return x + y;
//public };
[Link] = function () { }
return secret --;
};
} var add5 = makeAdder(5);
var add10 = makeAdder(10);
var myObj = new Counter(3);

for (i=0; i<3; i++){ print(add5(2)); // 7

alert([Link]()); print(add10(2)); // 12
}

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. Conceptos básicos
●
Asincronía.
●
Los entornos de ejecución JavaScript son mono-hilo, por lo que la programación
concurrente está limitada.
– Solo existe un único hilo de ejecución.
– Solo puede ejecutarse una instrucción a la vez.
– Si una operación bloquea el hilo, bloquea toda la aplicación (interfaz congelada,
página que no responde, etc.).
var text = leerArchivo(); // si tarda X segundos => X segundos en espera
●
Para evitar que funciones que pueden tardar en responder (ej: entrada/salida) bloqueen el
único hilo de ejecución de JavaScript, estas funciones de entrada/salida son asíncronas.
Ejemplos:
– lectura y escritura de disco
– peticiones de red
– acceso a bases de datos
– temporizadores
– operaciones complejas de cálculo
– lectura de archivos locales (File API)
Tecnologías y Servicios Web 25|26. Daniel Glez-Peña
 JavaScript. Conceptos básicos
●
Asincronía (II). Callbacks
●
Una función asíncrona:
– Inicia un proceso que tardará en completarse.
– Continua la ejecución del hilo principal (no espera al resultado).
– Cuando la operación finaliza, llama a la función callback (pasada como
parámetro).
●
El hilo nunca se bloquea. Mientras estás esperando el resultado, la interfaz sigue
funcionando, el usuario puede interactuar con la página y otros callbacks pueden
ejecutarse. Por lo tanto, permitir un entorno fluido sin bloqueo, a pesar de tener
un solo hilo.
function calculoLento(callback) {
let resultado = 5;
// hace como que tarda 1 segundo en responder
// setTimeout es, a su vez, una función asíncrona
setTimeout(() => {
callback(resultado); // tras 1 segundo, llama al callback y le pasa el resultado
},
1000); // 1 segundo
}

// llama a la función asíncrona

calculoLento((resultado) => { [Link](resultado) });
Tecnologías y Servicios Web 25|26. Daniel Glez-Peña
 JavaScript. Conceptos básicos
●
Asincronía (III). Promise
●
Cuando queremos realizar varias operaciones asíncronas encadenadas, el
código se llena de callbacks dentro de callbacks.
●
Una alternativa al uso de callbacks, que favorece la legibilidad del código es
Promise.
●
Una Promise es un objeto que representa una operación asíncrona que aún
no ha terminado, pero que en el futuro devolverá un resultado o error.
●
Una promesa tiene tres estados internos:
– pending: en ejecución
– fulfilled: terminó correctamente (se llama a resolve)
– rejected: terminó con error (se llama a reject)

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. Conceptos básicos
●
Asincronía (IV). Promise
●
Ejemplo:

function calculoLento() {
let resultado = 5;

return new Promise ((resolve, reject) => {

setTimeout(() => {
resolve(resultado);
},
1000);
});
}
// llamamos a la función asíncrona y a la promesa devuelta
// se le registra (con then) una función para recibir los resultados
calculoLento().then( (resultado) => [Link](resultado) );

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. Conceptos básicos
●
Asincronía (V). Anidamiento
●
Problema. Las funciones asíncronas, tanto con callbacks, como con
Promise, siguen teniendo problemas de legibilidad, especialmente cuando
se quieren concatenar varias llamadas asíncronas en las cuales el resultado
de una es necesario para la invocación de la siguiente, el cual favorece
anidamientos (o "encadenamiento de promesas") en código que se debería
ver secuencial.
// con callbacks
calculoLento((resultado) => {
[Link]('acumulado: '+resultado);
calculoLento((resultado2) => {
[Link]('acumulado: '+(resultado+resultado2));
calculoLento((resultado3) => {
[Link]('acumulado: '+(resultado+resultado2+resultado3));
});
});
});

// con promesas
calculoLento().then((resultado) => {
[Link]('acumulado: '+resultado);
calculoLento().then((resultado2) => {
[Link]('acumulado: '+(resultado+resultado2));
calculoLento().then((resultado3) => {
[Link]('acumulado: '+(resultado+resultado2+resultado3));
});
});
});
Tecnologías y Servicios Web 25|26. Daniel Glez-Peña
 JavaScript. Conceptos básicos
●
Asincronía (VI). async/await
●
Solución: El uso de async/await es la forma moderna y recomendada de
escribir código asíncrono en JavaScript. Características:
– Su principal ventaja es que permite escribir código con estructura secuencial,
pero manteniendo la naturaleza no bloqueante del modelo asíncrono del
lenguaje
– Facilita la legibilidad el código, evitando anidamientos innecesarios.
– La llamada a la función asíncrona se hace con await que indica que se quiere
ejecutar una función asíncrona y que, cuando el resultado esté, se siga
procesando el código.
– await necesita una Promise. Si no recibe una Promise, JavaScript no sabe
qué esperar.
– Cualquier función que use await debe ser declarada con async.

// con await
resultado = await calculoLento();
[Link]('acumulado: '+resultado);
resultado2 = await calculoLento();
[Link]('acumulado: '+(resultado+resultado2));
resultado3 = await calculoLento();
[Link]('acumulado: '+(resultado+resultado2+resultado3));

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. En la Web
●
Incluir scripts en documentos.
●
Mediante la etiqueta script se puede, o bien, importar un
script de una URL, o bien escribir directamente el código.
Ejemplos:

<script type="text/javascript" src="./js/[Link]"> </script>

<script type="text/javascript">
// <![CDATA[
alert("hola mundo");
// ]]>
</script>

●
Las etiquetas script se van evaluando por el motor a medida
que se vayan encontrando.

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. En la Web
●
El objeto window. Tiene muchos métodos útiles para
trabajar con el navegador. Algunos ejemplos:

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. En la Web
●
Eventos. A la mayoría de los elementos se les pueden
asociar funciones JavaScript asociadas a eventos.

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. En la Web
●
Eventos. Ejemplo: validación de formularios en el cliente.
●
Nota: Validar en cliente sólo sirve para mejorar la experiencia de usuario y
descargar al servidor de peticiones erróneas, nunca para cuestiones de
seguridad (se debe validar de nuevo en el servidor si es necesario).

<!-- fichero HTML -->

<head> // fichero [Link]
<script src="[Link]"
type="text/javascript"></script> //declarada en cualquier lugar…
</head> function validar() {
<form id="myForm" var x=[Link]["myForm"]["fname"].value;
action="demo_form.asp" if (x==null || x==""){
onsubmit="return validar()" alert("First name must be filled out");
method="post"> return false;
}
First name: }
<input type="text" id="fname">
<input type="submit" value="Submit">
</form>

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. En la Web
●
Separación de comportamiento y contenido.
●
El uso de los atributos para eventos en (X)HTML, provoca que el
comportamiento no esté realmente separado del contenido (al
igual que los estilos empotrados en CSS). Ejemplo anterior:
<form id="myForm" onsubmit="return validar()">
●
Se desea que el comportamiento esté en un script externo y que
sea allí donde se asocian las funciones a los eventos de los
elementos (X)HTML.
NO FUNCIONA (ver después)
<!-- fichero HTML --> // fichero [Link]
<head> function validar(){ ... }
<script src="[Link]"
type="text/javascript"></script> // asociar una funcion al evento
</head> // onsubmit desde JS
<body> [Link]["myForm"].onsubmit =
<form id="myForm"> ... </form> function (){ return validar() };
</body>

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. En la Web
●
Separación de comportamiento y contenido.
●
Problema: los scripts declarados antes del cuerpo del (X)HTML puede
que no vean los elementos (X)HTML, es decir, todavía no se ha
construido el árbol DOM (vemos DOM después).
– Sería imposible modificar los eventos a elementos todavía
inexistentes.
– Una forma de solucionarlo ejecutar el script una vez el body ha
cargado (evento onload sobre el <body>).

// fichero [Link]
<!-- fichero HTML -->
function validar(){ ... }
<head>
<script src="[Link]" // asociar una funcion al evento
type="text/javascript"></script> // onsubmit desde JS
</head> function init(){
<body onload="init()"> ... </body> [Link]["myForm"].onsubmit =
function (){ return validar() };
}

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. En la Web
●
Separación de comportamiento y contenido (II).
●
Problema: los scripts declarados antes del cuerpo del (X)HTML puede
que no vean los elementos (X)HTML, es decir, todavía no se ha
construido el árbol DOM (vemos DOM después) (II).
– Si tenemos múltiples scripts, la mejor opción es añadir un listener a window
(pueden ser múltiples). Además se consigue separar completamente
comportamiento y contenido (ni siquiera se usa onload).
// fichero [Link]
function validar(){ ... }
<!-- fichero HTML -->
// asociar una funcion al evento
// onsubmit desde JS
<head> function init(){
<script src="[Link]" [Link]["myForm"].onsubmit =
type="text/javascript"></script> function (){ return validar() };
</head> }
<body> ... </body> if ([Link]){ // W3C standard
[Link]('load', init, false);
}
else if ([Link]){ // Microsoft
[Link]('onload', init);
}
Tecnologías y Servicios Web 25|26. Daniel Glez-Peña
 JavaScript. En la Web
●
Separación de comportamiento y contenido (III).
●
Problema: los scripts declarados antes del cuerpo del (X)HTML puede
que no vean los elementos (X)HTML, es decir, todavía no se ha
construido el árbol DOM (vemos DOM después) (III).
– En todo caso, la última opción vista aún problemas. El usuario puede llegar a
ver parte de la página cargando y el script de inicio todavía no se ejecuta. Si
este script tiene como objetivo modificar el aspecto, la experiencia de
usuario puede ser baja (se verían dos aspectos el anterior y el deseado).
– El siguiente script trata de ejecutar la función init lo antes posible y, a la
vez, garantiza que el DOM está disponible.
– Para saber más: [Link]

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. En la Web
/* for Mozilla/Opera9 */
if ([Link]) {
[Link]("DOMContentLoaded", init, false);
}

/* for Internet Explorer */

/*@cc_on @*/
/*@if (@_win32)
[Link]("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var script = [Link]("__ie_onload");
[Link] = function() {
if ([Link] == "complete") {
init(); // call the onload handler
}
};
/*@end @*/

/* for Safari */
if (/WebKit/[Link]([Link])) { // sniff
var _timer = setInterval(function() {
if (/loaded|complete/.test([Link])) {
init(); // call the onload handler
}
}, 10);
}

/* for other browsers */

[Link] = init;
Tecnologías y Servicios Web 25|26. Daniel Glez-Peña
 JavaScript. DOM Scripting
●
Una vez que el documento (X)HTML se ha analizado, desde
JavaScript se puede acceder a cualquier elemento del
documento para consultarlo o modificarlo.
●
Al principio, se conocía como DHTML (dynamic HTML) y se hacía de
forma diferente para cada navegador.
●
Tras los esfuerzos del W3C por estandarizar, a partir de 2003 el
término de DHTML cae en desuso y pasa a llamarse DOM Scripting.
●
DOM (Document Object Model) es un API de programación para XML
(y HTML) independiente del lenguaje, que representa los
documentos XML como objetos, en lo que se conoce como árbol
DOM.

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. DOM Scripting
●
Mediante DOM Scripting, se puede:
●
Añadir o eliminar elementos al documento.
●
Modificar sus atributos para, por ejemplo:
– Añadir escuchadores de eventos sobre los elementos (visto anteriormente).
– Cambiar el estilo, mediante la propiedad className de todos los elementos.
●
El árbol DOM, creado a partir del documento, tiene una serie de
nodos de tres tipos: elemento, texto y atributo.
<p>This is a paragraph of text with a
Documento <a href="/path/to/another/[Link]"> link</a>. Árbol DOM
</p> Nodos elemento

Nodos texto

Nodo atributo
Tecnologías y Servicios Web 25|26. Daniel Glez-Peña
 JavaScript. DOM Scripting
●
Recorrido del árbol DOM.
●
Se parte del objeto document.
●
Mediante las funciones getElementsByTagName y getElementById se pueden
acceder a los elementos de todo el documento o que sean hijos de un elemento obtenido
previamente.
<div id="content">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<h2>This is another heading</h2>
<p>This is another paragraph.</p>
<p>Yet another paragraph.</p>
</div>

//--javascript--
var the_div = [Link]('content');
var h2s = the_div.getElementsByTagName('h2'); //array
var the_h2 = h2s[0];
//a partir de un hijo obtenido previamente
var the_h2 = the_div.getElementsByTagName('h2')[0];
●
La función [Link](<selector>) permite obtener todos los
elementos que cumplen un selector CSS.
[Link]("[Link], [Link]")
Tecnologías y Servicios Web 25|26. Daniel Glez-Peña
 JavaScript. DOM Scripting
●
Recorrido del árbol DOM (II).
●
Las propiedades parentNode, firstChild, lastChild,
nextSibling y previousSibling, permiten moverse a partir de un
nodo hacia el nodo padre, primer/último hijo, siguiente/anterior
hermano, respectivamente.
●
También existe la propiedad array childNodes que permite acceder a
todos los hijos, junto con hasChildNodes(true/false) para comprobar
si existe algún hijo.
– children. Solo los elementos hijos (etiquetas HTML).
– childNodes. Todos los nodos hijos (elementos, texto, comentarios, etc.).
●
La propiedad nodeType, permite distinguir el tipo de nodo
(1=elemento, 2=atributo, 3=texto).
– Nota: Dependiendo del navegador, los textos en blanco entre etiquetas
generan nodos de texto vacíos o no (se debe comprobar para ser lo más
compatible posible).

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. DOM Scripting
●
Recorrido del árbol DOM (II).
●
Las propiedades parentNode, firstChild, lastChild,
nextSibling y previousSibling, permiten moverse a partir de un
nodo hacia el nodo padre, primer/último hijo, siguiente/anterior
hermano, respectivamente (II).
Propiedad Devuelve Nodos de Ejemplo de uso
texto?
firstChild Cualquier tipo de nodo Sí Recorrer el árbol técnico completo

firstElementChild Solo elementos HTML No Manipular la estructura visual

parentNode El nodo padre (también Sí Uso genérico

#document)
parentElement El elemento padre (si existe) No Uso práctico en HTML

nextSibling / Cualquier tipo de hermano Sí Análisis del DOM completo

previousSibling
nextElementSibling / Solo etiquetas No Navegación visual entre elementos
previousElementSibling
Tecnologías y Servicios Web 25|26. Daniel Glez-Peña
 JavaScript. DOM Scripting
●
Leyendo y manipulando el árbol DOM.
●
Los elementos tienen las siguientes propiedades que se
pueden leer y escribir.
– innerHTML. Referencia a todo el HTML a partir de un nodo. Si se
establece de nuevo la propiedad, el contenido anterior se descarta.
– nodeValue. Referencia al valor concreto de un nodo de tipo texto o de
tipo atributo.
– getAttribute(nombre) y setAttribute(nombre, valor)
permiten leer y modificar un atributo de un elemento.
[Link]("mienlace").setAttribute("href",
"[Link]
●
Nota: los atributos de un elemento también aparecen como propiedades.
[Link]("mienlace").href="[Link]
●
A veces, setAttribute no funciona con todos los navegadores. Por ejemplo, el
atributo class en IE es mejor establecerlo mediante la propiedad className (en vez
de setAttribute("class", "valor")).
[Link]("undiv").className="nuevaclase";

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. DOM Scripting
●
Creación de nodos.
●
La función createElement(etiqueta), permite crear un nodo
elemento nuevo.
var midiv = [Link]("div");
[Link]("id", "nuevodiv");
●
La función createTextNode(texto), permite crear un nodo
texto nuevo.
●
Las funciones appendChild, insertBefore permiten añadir el
nuevo nodo al documento en el lugar deseado.
[Link]("undiv").appendChild(midiv);
●
La función removeChild elimina un hijo.
[Link]("undiv").removeChild(midiv);

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. DOM Scripting
●
Trabajando con CSS desde JavaScript.
●
Mediante JavaScript se puede alterar el estilo de los elementos,
para iniciar animaciones, tranformaciones, cambiar la visibilidad
de elementos ante un evento (de usuario, de llegada de datos
mediante AJAX, etc). Se puede trabajar con, entre otros:
– Atributo classList del nodo HTML. Lista de tokens en el atributo class
en el elemento HTML. Esta lista se puede modificar con métodos add,
remove, toggle, etc. Añadiendo o eliminando clases podrán cambiar las
reglas CSS que le afecten al elemento.
– Atributo style del nodo HTML. Acceder y modificar el atributo style de un
elemento HTML. Como el atributo style tiene alta prioridad, es un buen
lugar para forzar un cambio de estilo desde JavaScript ante una acción de
usuario.
– Método [Link](elemento), permite obtener el
estilo calculado final para un elemento, teniendo en cuenta no sólo el
atributo style, sino todas las propiedades que le afectan indirectemente
(hojas CSS, nodos style en el head, etc.).
Tecnologías y Servicios Web 25|26. Daniel Glez-Peña
 JavaScript. DOM Scripting
●
Ejercicio. "style-switcher"
●
Modifica con JavaScript la fuente base del document,
cambiando la propiedad className del <body>.
●
El código base está en Moovi.

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. AJAX
●
AJAX (Asynchronous JavaScript And Xml) hace referencia a la
técnica de realizar conexiones HTTP en segundo plano desde
JavaScript para posteriormente manipular el árbol DOM en
función de la respuesta del servidor.
●
El hecho de que sea en segundo plano, hace que una página pueda
variar su contenido parcialmente, sin tener que refrescar.
●
En JavaScript se permite realizar las conexiones con el objeto
XMLHttpRequest o, más reciente la función fetch de la Fetch
API.
●
La respuesta del servidor puede ser considerada simplemente texto
o XML. En el segundo caso, se obtiene ya analizado como un objeto
que se puede recorrer como si fuese un árbol DOM.
●
Hoy en día la mayoría de aplicaciones Web "2.0" se basan en AJAX
(Gmail, Google Docs, Facebook, Twitter, etc).
Tecnologías y Servicios Web 25|26. Daniel Glez-Peña
 JavaScript. AJAX
●
El objeto XMLHttpRequest.
●
Posee métodos open, sendRequestHeader y send,
para preparar la conexión a una URL, con método dado
(GET o POST) y unos datos.
– La petición se lanzará en segundo plano, es decir, el
script llama al método y continúa su ejecución en la línea
siguiente.
●
Posee además unas propiedades "evento", cuyo
objetivo es que el programador las haga apuntar a una
función suya para actuar en consecuencia.
– El evento más usado es onreadystatechange, que se
llama cuando llega la respuesta del servidor (si el
readyState del objeto XHR es 4).
Tecnologías y Servicios Web 25|26. Daniel Glez-Peña
 JavaScript. AJAX
●
Fetch API.
●
Proporciona un método fetch() para hacer de forma sencilla
peticiones HTTP asíncronas.
●
Emplea la api de promesas, por lo que se puede usar con
async/await.
●
Ejemplo de petición con configuración completa.
// Example POST method implementation:
async function postData(url = "", data = {}) {
// Default options are marked with *
const response = await fetch(url, {
method: "POST",
mode: "cors",
cache: "no-cache",
credentials: "same-origin",
headers: {
"Content-Type": "application/json",
},
redirect: "follow",
referrerPolicy: "no-referrer",
body: [Link](data),
});
return [Link](); // parses JSON response into native JavaScript objects
}
resultado = await postData("[Link]", {"name"}); Fuente: Mozilla Developer Network

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 JavaScript. AJAX
●
Ejercicio. "AddressBook".
●
Realiza dos implementaciones distintas:
1)Usando el objeto XMLHttpRequest.
2)Usando el método fetch().
●
El código base está en Moovi.

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 Frameworks JavaScript
●
Debido al auge de JavaScript, sobre todo gracias a AJAX, en los
últimos años se han publicado numerosos frameworks de
JavaScript.
●
Trabajar con JavaScript puro, DOM Scripting y AJAX implica
gestionar directamente:
●
Creación y actualización manual del DOM.
●
Manejo del estado de la interfaz.
●
Sincronización con peticiones AJAX.
●
Navegación y cambio entre vistas.
●
Compatibilidad entre navegadores.
●
En aplicaciones medianas o grandes esto se vuelve complejo y
propenso a errores.

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 Frameworks JavaScript
●
Como solución, nacen los frameworks, proporcionando funcionalidades
extra como:
●
Aportar estructuras MVC o similares, gestionando los cambios del modelo
y reflejándolos en HTML automáticamente (Angular, React, etc.).
●
Facilitar el trabajo con DOM Scripting y AJAX.
●
Automatizar la actualización de la interfaz.
●
Ofrecer componentes reutilizables
●
Mejorar la organización del código.
●
Permitir Drag & Drop (con librerías como jQuery).
●
Soportar "botón atrás" del navegador.
●
Layout automático y distribución de elementos y plantillas.
●
Los frameworks son fundamentales en el desarrollo web moderno.
Ejemplos: construcción de SPA o trabajo con REST.
●
Más info: Comparativa de frameworks JavaScript.
Tecnologías y Servicios Web 25|26. Daniel Glez-Peña
Resumen. JavaScript cheat-sheets

Fuente: [Link]
Tecnologías y Servicios Web 25|26. Daniel Glez-Peña
Resumen. JavaScript cheat-sheets

Fuente: [Link]
Tecnologías y Servicios Web 25|26. Daniel Glez-Peña
Resumen. JavaScript cheat-sheets

Fuente: [Link]
Tecnologías y Servicios Web 25|26. Daniel Glez-Peña
 Navegadores. Funciones
●
Responsabilidades de un navegador:
●
Generar peticiones en representación del usuario.
– Al hacer clic enlaces, URL en la barra de direcciones, envío de
formulario, parseo de HTML que incluye terceros recursos
(imágenes, applets, etc.), o llamadas en segundo plano a
través de JavaScript (AJAX).
●
Aceptar respuestas y, en función del contenido
(cabecera Content-Type), averiguar qué tipo de
renderizado se hará.
●
Renderizar la información en la ventana del navegador o
mediante una herramienta externa.

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 Navegadores. Funciones
●
Para llevar a cabo de forma eficiente las 3 tareas, los
navegadores realizan:
●
Gestión de cache.
– El navegador debe determinar si realmente necesita un recurso. El servidor
le informa de la fecha de última modificación de recursos, por lo que se
puede implementar una caché local que mejora el rendimiento.
●
Autenticación y autorización.
– El servidor puede proteger recursos bajo credenciales. El navegador debe: i)
pedirlos al usuario y ii) reenviarlos al servidor si ya los tiene (peticiones
anteriores).
●
Mantenimiento del estado.
– El navegador debe soportar cookies, almacenarlas e incluirlas en las
peticiones correspondientes. De este modo, se pueden mantener sesiones,
preferencias y cualquier información necesaria entre distintas peticiones
HTTP (recordemos que HTTP es un protocolo sin estado).

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 Navegadores. Funciones
●
Para llevar a cabo de forma eficiente las 3 tareas, los
navegadores realizan (II):
●
Petición de recursos auxiliares.
– Renderizar una Web no sólo incluye el HTML, sino también imágenes, applets,
sonidos. El navegador debe pedirlos sin intervención del usuario.
●
Reacción ante cada código y/o cabeceras de respuesta del servidor.
– Por ejemplo, debe reaccionar ante los códigos de redirección (ej.: 301 y 302),
mantener la conexión abierta, preguntar al usuario por credenciales, etc.
●
Renderización de objetos complejos.
– El navegador soporta nativamente varios tipos de contenido (text/html,
text/plain, image/gif, image/jpeg).
– Sin embargo, debe proveer de mecanismos (es decir, diseño extensible) para
tipos complejos, bien mediante aplicaciones externas, o plugins integrados.
●
Manejo de errores.
– Respuestas de error del servidor, pérdida de conexión, etc.

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 Navegadores. Arquitectura
●
Arquitectura conceptual de un hipotético navegador.

Interfaz de usuario

Procesamiento de
respuestas
Generación de Peticiones
Interpretación de contenido
Si se necesitan HTML/CSS/Javascript
recursos auxiliares...
Configuración

Estado Autenticación
Cache
(cookies) Autorización

Red

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 Proceso petición/respuesta
●
Flujo de generación de peticiones
(1) El usuario hace clic en un enlace (5) La petición está lista

Generación
Presentación Red
de Peticiones

(2) Existe copia local? (4) Se necesita incluir cookies?

Añadir cabecera If-Modified-Since: ... Añadir cabecera Cookie: ...

(3) Se necesita enviar autorización?

Añadir cabecera Authorization: ...

Cache Estado

Autorización

Configuración

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 Proceso petición/respuesta
●
Flujo de procesamiento de respuestas
(2) Es necesario decodificar el contenido?
Ver cabecera Content-Encoding
(7) El resultado del procesamiento se pasa a presentar
(1) Llega una respuesta

Procesamiento Interprete de
Red Presentación
de respuestas contenido
(6) Se necesitan otros recursos?
(3) Se necesitan credenciales? (5) Se debería guardar en cache?
Ver cabecera WWW-Authenticate: ... Ver cabecera Cache-Control: ...
(4) Se necesitan almacenar cookies?
Ver cabecera Set-Cookie: ...

Autorización Cache Generación

de peticiones

Estado

Configuración

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 Proceso petición/respuesta
●
Construcción de la petición (dada una URL...).
●
Resolver URLs relativas.
– Las URL en HTML (<a href="...">, <img src="...">, etc) pueden ser de
dos tipos:
●
Absolutas: Empiezan por <protocolo>://. Se usan para enlazar recursos externos al
sitio Web.
– Ejemplo: <a href="[Link]
●
Relativas: Contienen sólo una ruta. Se usan para los contenidos propios del sitio Web.
Son una buena práctica, ya que permite que los documentos HTML no dependan de la
localización raíz (fichero en local, dominio del servidor, etc). Dos casos:
– Comienzan por '/': Indica que la ruta se refiere a la raíz del host.
– No comienzan por '/': Indica que la ruta se refiere al directorio de la URL actual
que está mostrando el navegador.
– El navegador debe pasar las rutas relativas a absolutas (durante la Generación de
Peticiones).
●
La URL actual del navegador puede ser sobreescrita con la etiqueta <base
href="..."> dentro del HTML. Ejemplo:
<base href="[Link]
<img src="[Link]"> --> [Link]

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 Proceso petición/respuesta
●
Construcción de la petición (II).
●
Generar la línea de petición (primera línea). <Método> URL HTTP/<version>
– Método:
●
GET. Clic en enlaces, URL en barra de direcciones, recuperación de recursos adicionales, AJAX, envío
de formularios (por defecto GET). Los parámetros van en la URL: ?param=value.
●
POST. Envío de formularios que indiquen method="POST". Los datos se envían en el cuerpo del
mensaje HTTP; no van en la URL.
– URL:
●
HTTP/1.0:
– Obligatorio indicar URL absoluta si la petición va a un proxy. El proxy elimina la porción del host de la
URL antes de enviarla al servidor final.
– Prohibidas URL absolutas si va a un servidor final. En HTTP/1.0 no hay cabecera Host, por eso el
servidor final espera una URL relativa.
●
HTTP/1.1:
– Obligatorio indicar URL absoluta si la petición va a un proxy.
– Opcional URL absoluta si va a un servidor final.
– Obligatorio incluir también cabecera Host, para soporte de Virtual Hosting, evitando que se pierda la
porción del host de la URL si hay algún proxy HTTP/1.0 en medio.
– Versión HTTP. El navegador deberá tratar de usar la última versión. Si el servidor no la soporta, el
navegador debe retroceder (fallback) a una anterior (ej: HTTP/1.0).
GET /[Link] HTTP/1.1
Host: [Link]
Tecnologías y Servicios Web 25|26. Daniel Glez-Peña
 Proceso petición/respuesta
●
Construcción de la petición (III).
●
Generar las cabeceras.
– Host. Requerida en HTTP 1.1, identifica el sitio Web destino dentro
de un servidor puede alojar varios dominios (con diferente host).
Host: [Link]

– User-Agent. Indica el navegador (nombre, versión, idioma,

plataforma). Firefox genera esta cabecera.
User-Agent: Mozilla/5.0

– Referer. Contiene la URL actual del navegador.

Referer: [Link]

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 Proceso petición/respuesta
●
Construcción de la petición (III).
●
Generar las cabeceras (II).
– Date. Incluye la fecha y hora actual.
Date: Mon, 26 Sep 2011 10:00:00 GMT

– Accept-*. Indica los tipos MIME, conjuntos de caracteres, idiomas y

codificaciones que el cliente puede aceptar:
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7

●
Los valores q=<valor>, entre 0-1 (por defecto 1) indica el nivel de
calidad que el navegador tiene para visualizar un tipo.
– Cabeceras de entidad (obligatorias en POST y PUT).
Content-Type: <mime-type>
Content-Length: <bytes>

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 Proceso petición/respuesta
●
Construcción de la petición (III).
●
Generar las cabeceras (III).
– Cookie. Contiene las cookies previamente recibidas por este
servidor.
Cookie: nombre=valor:nombre2=valor2...

– Authorization. Proporciona los credenciales de acceso, si el

servidor los acaba de pedir (401 Not Authorized), o bien en
cualquier petición posterior a la zona protegida. El usuario y
password van separados por ':' y posteriormente codificados en
Base64.
Authorization: Basic bGlwaWRvOm1pcGFzc3dvcmQ=

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 Proceso petición/respuesta
●
Construcción de la petición (IV).
●
Construir el cuerpo de la petición.
– Se necesita en los métodos POST y PUT.
– Se requieren cabeceras Content-Type y Content-Length.
– La versión más simple es incluir un único cuerpo (ej: al enviar un formulario
por POST, sin ficheros adjuntos).

POST /[Link] HTTP/1.1

Host: [Link]
Content-Type: application/x-www-form-urlencoded
Content-Length: 27

nombre=pepe&enviar=Enviar

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 Proceso petición/respuesta
●
Construcción de la petición (IV).
●
Construir el cuerpo de la petición (II).
– Se pueden enviar varios cuerpos. El Content-Type es de tipo
multipart/multipart_subtipo. Además Content-Type debe indicar
una cadena de texto aleatoria para indicar cómo se separa cada cuerpo
(boundary).
– Cada cuerpo llevará opcionalmente cabeceras Content-*, una línea en
blanco y luego el propio cuerpo.
POST /~lipido/SR1112/http-demo/[Link] HTTP/1.1
Host: [Link]
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary2gvc1YiXXBt3y61j

------WebKitFormBoundary2gvc1YiXXBt3y61j
Content-Disposition: form-data; name="nombre"

Mi presentación
------WebKitFormBoundary2gvc1YiXXBt3y61j
Content-Disposition: form-data; name="fichero"; filename="[Link]"
Content-Type: application/[Link]

PK........CV&?3&../.../.......

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 Proceso petición/respuesta
●
Procesamiento de respuestas.
●
Procesamiento de respuestas exitosas.
– Content-Encoding indica si es necesario descodificar la respuesta.
Content-Encoding: gzip

– Content-Lengh. Es opcional, pero si existe, el navegador puede

informar al usuario del progreso de carga de la página.
Content-Length: 28447

– Set-Cookie. El servidor quiere que el navegador guarde información

de estado con el navegador del usuario. Es este último quien debe
devolvérsela en posteriores peticiones.
Set-Cookie: nombre=valor; domain=[Link]; path=/

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 Proceso petición/respuesta
●
Procesamiento de respuestas (II).
●
Procesamiento de respuestas exitosas.
– Cache-Control, Pragma y Expires controlan la cache.
●
Cache-Control indica si se puede guardar en cache y dónde, Pragma es
para HTTP/1.0 y Expires indica cuándo caduca.
Cache-Control: private | public | no-cache
Pragma: no-cache
Expires: Tue, 27 Sep 2011 22:28:31 GMT

– Una vez realizadas las acciones correspondientes de decodificación,

determinación del tipo de contenido, estado y cache, se debe procesar
el contenido según su tipo:
●
Las imágenes (image/*) se renderizan.
●
El HTML (text/html) se parsea y se buscan recursos auxiliares.
●
El código JavaScript (text/javascript) se ejecuta en el motor de
Javascript.
●
Las hojas de estilo (text/css) se parsean y se aplican.

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 Proceso petición/respuesta
●
Procesamiento de respuestas (III).
●
Procesamiento de otro tipo de respuestas.
– Las respuestas no exitosas más típicas son:
●
Redirecciones (301 y 302). En ambos casos el navegador debe
realizar automáticamente una nueva petición a una URL
indicada con la cabecera Location.
– En el caso de 301 (Moved Permanently), el navegador podría
guardar la nueva URL y no pedir nunca más la antigua.
●
Petición de credenciales (401 Not Authorized). El
navegador debe mostrar un cuadro de diálogo pidiendo
usuario/contraseña.

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 Persistencia
●
La cache, cookies y credenciales persisten entre peticiones.
●
El navegador debe mantenerlas y asociarles una clave para poder
recuperarlas en sucesivas peticiones.
Decisión de Clave Cuándo eliminar Dónde almacenar
almacenar (sí/no)
Cache Depende de las URL asociada a la - Cache llena. Memoria y disco.
cabeceras de petición. - Reemplazar con
respuesta. entrada más
reciente.
Cookies Depende de la Dominio, ruta y - Fecha de - Disco, para cookies
configuración del parámetros de caducidad. con fecha de
usuario. seguridad. - Si no se especifica caducidad.
caducidad, al cerrar
el navegador. - Memoria, para
cookies que caducan
al cerrar el
navegador.
Credenciales de Al validarse. Dirección del Al final de la sesión. Memoria (nunca
autentificación servidor y nombre disco).
del área restringida.

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña

 Referencias
●
Shklar, L. and Rosen, R. Web application Architecture, 2nd ed. Wiley.
●
Niederst, J. Web Design in a Nutshell, 3rd ed. O'Reilly.
●
Referencia a todas las etiquetas/atributos de (X)HTML:
[Link]
●
Wikipedia.

Tecnologías y Servicios Web 25|26. Daniel Glez-Peña