7. Utilización de mecanismos de comunicación asíncrona

7. UTILIZACIÓN DE MECANISMOS DE COMUNICACIÓN ASÍNCRONA
7.1. INTRODUCCIÓN A AJAX.
7.1.1.AJAX
HTML y CSS
(Presentación)
DOM
(Interacción y
manipulación
dinámica de
información)
XML, XSLT, JSON
(Intercambio y
manipulación de
información)
XMLHTTPRequest
(Intercambio
asíncrono de
información)
Javascript (Unión de
componentes)
LA U R A F O LG A D O G A LA CH E
Elementos de Ajax

7.1.1.AJAX
S I N A J A X C O N A J A X
El usuario hace solicitud desde la
interfaz.
Se hace una solicitud HTTP al
servidor.
El cliente sigue navegando por la
página.
Cuando el servidor realiza la
acción muestra al cliente sin
recargar la página.
El usuario hace solicitud desde la
interfaz.
Se hace una solicitud HTTP al
servidor.
El cliente tiene que esperar hasta
recibir la respuesta (cambio de
página)
El servidor realiza la acción.
El servidor devuelve la página al
cliente.

7.1.1.AJAX
Estándares
abiertos.
Usabilidad.
Válido en
cualquier
plataforma y
navegador
Compatible con
Flash.
Base de la web
2.0.
Independiente
del servidor.
Mejora estética
de la web.
¿Por qué usar Ajax?

7.1.1.AJAX
•Apache, IIS...
Servidor web
•MySQL, Postgresql...
Servidor de bases de datos
•PHP, ASP...
Lenguaje de servidor
Requisitos

7.1.2.COMUNICACIÓNASÍNCRONA
Comunicación asíncrona

7.1.3.EL API XMLHTTPREQUEST (XHR)
XMLHttpRequest (XHR):
• API de lenguajes de script del lado del cliente (ej. Javascript).
• Se utiliza en peticiones al servidor web (http o https).
• Los datos se pueden recibir en texto plano o XML y modificar el DOM sin
modificar la página.
• Los datos también se pueden recibir en formato JSON y ser evaluados con
Javascript.
• No es posible modificar páginas alojadas fuera del dominio desde el que se
realiza la petición.

Propiedades del objeto XMLHttpRequest (XHR):
Propiedad Descripción
readyState Valor numérico (entero) que almacena el estado de la petición
responseText El contenido de la respuesta del servidor en forma de cadena de texto
responseXML
El contenido de la respuesta del servidor en formato XML. El objeto
devuelto se puede procesar como un objeto DOM
status
El código de estado HTTP devuelto por el servidor (200 para una
respuesta correcta, 404para "No encontrado", 500 para un error de
servidor, etc.)
statusText
El código de estado HTTP devuelto por el servidor en forma de cadena de
texto: "OK", "Not Found", "Internal Server Error", etc.

Valores de la propiedad readyState:
Valor Descripción
0
No inicializado (objeto creado, pero no se ha invocado el método
open)
1 Cargando (objeto creado, pero no se ha invocado el método send)
2
Cargado (se ha invocado el método send, pero el servidor aún no ha
respondido)
3
Interactivo (se han recibido algunos datos, aunque no se puede
emplear la propiedad responseText)
4
Completo (se han recibido todos los datos de la respuesta del
servidor)

Métodos del objeto XMLHttpRequest (XHR):
Método Descripción
abort() Detiene la petición actual
getAllResponseHeaders()
Devuelve una cadena de texto con todas las cabeceras de la
respuesta del servidor
getResponseHeader("cabecera")
Devuelve una cadena de texto con el contenido de la cabecera
solicitada
onreadystatechange
Responsable de manejar los eventos que se producen. Se invoca
cada vez que se produce un cambio en el estado de la petición
HTTP. Normalmente es una referencia a una función JavaScript

Método Descripción
open("metodo", "url")
Establece los parámetros de la petición que se realiza al
servidor. Los parámetros necesarios son el método HTTP
empleado y la URL destino (puede indicarse de forma
absoluta o relativa)
send(contenido) Realiza la petición HTTP al servidor
setRequestHeader("cabecera","valor")
Permite establecer cabeceras personalizadas en la petición
HTTP. Se debe invocar el método open() antes que
setRequestHeader()

El método open:
• open(string metodo, string URL [,boolean asincrono, string usuario, string
password]);
• Los dos primeros parámetros son obligatorios, los otros tres opcionales.
• Si se indica en el tercer parámetro “false”, las peticiones se hacen síncronas.
• Realizar peticiones síncronas es contrario a la filosofía de Ajax.
El método send:
• En el parámetro se indica la información a enviar al servidor.
• Si se envían datos, puede ser una cadena, un array de bytes o un XML. Si no se
envían datos, debe ser un valor null.

Programa de ejemplo: Hola mundo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran sitional.dtd">
<html>
<head>
<title>Hola Mundo con AJAX</title>
<script type="text/javascript">
function descargaArchivo() {
// Obtener la instancia del objeto XMLHttpRequest
if(window.XMLHttpRequest) { //Navegadores estándar
peticion_http = new XMLHttpRequest();
}
else if(window.ActiveXObject) { //Navegadores obsoletos
peticion_http = new ActiveXObject("Microsoft.XMLHTTP");
}
// Preparar la funcion de respuesta
peticion_http.onreadystatechange = muestraContenido;
// Realizar peticion HTTP. Get sin envío de parámetros (null)
peticion_http.open('GET', 'http://localhost/holamundo.txt', true);
peticion_http.send(null);
function muestraContenido() {
if(peticion_http.readyState == 4) { //Ha recibido una respuesta
if(peticion_http.status == 200) { //La respuesta es válida y correcta
alert(peticion_http.responseText);
}
}
}
}
window.onload = descargaArchivo;
</script>
</head>
<body></body>
</html>

Programa de ejemplo: Hola mundo (mejorado)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR /xhtml1/DTD/xhtml1-
transitional.dtd">
<html>
<head>
<title>Hola Mundo con AJAX, version 2</title>
<script type="text/javascript" language="javascript">
var READY_STATE_UNINITIALIZED=0;
var READY_STATE_LOADING=1;
var READY_STATE_LOADED=2;
var READY_STATE_INTERACTIVE=3;
var READY_STATE_COMPLETE=4;
var peticion_http;
function cargaContenido(url, metodo, funcion) {
peticion_http = inicializa_xhr();
if(peticion_http) {
peticion_http.onreadystatechange = funcion;
peticion_http.open(metodo, url, true);
peticion_http.send(null);
}
}

Programa de ejemplo: Hola mundo (mejorado)
function inicializa_xhr() {
if(window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
function muestraContenido() {
if(peticion_http.readyState == READY_STATE_COMPLETE) {
if(peticion_http.status == 200) {
alert(peticion_http.responseText);
}
}
}
function descargaArchivo() {
cargaContenido("http://localhost/holamundo.txt", "GET",
muestraContenido);
}
</script>
</head>
<body></body>
</html>

EJERCICIO: u7e1_lectorficheros:
Modifica el código de la página holamundo_mejorado.html para que haga lo siguiente:
- Crea un campo de texto en el que, nada más cargarse la página, se cargue la url de la
misma (ver Unidad 3).
- Crea un botón junto al campo de texto que se llame “Mostrar contenido” y que al hacer clic
sobre él cargue en un textarea el contenido indicado en la url.
- Crea el textarea que inicialmente está vacío, pero que cargará el contenido de la url del
campo de texto en él.

Programa de ejemplo: solicitud fecha al servidor (index.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo dwec07 - 2.3 - AJAX ASINCRONO GET - POST</title>
<script type="text/javascript" src="funciones.js"></script>
<script type="text/javascript" src="index.js"></script>
<style> #resultados{ background: yellow; } </style>
</head>
<body>
A continuación se cargarán por AJAX los datos recibidos en la solicitud ASINCRONA:
<br/>
Contenedor resultados:
<div id="resultados"></div>
<div id="indicador"></div>
</body>
</html>

Programa de ejemplo: solicitud fecha al servidor
(index.js)
//Cuando se carga el documento comienza iniciar()
crearEvento(window,"load",iniciar);
function iniciar()
{
// Creamos un objeto XHR.
miXHR = new objetoXHR();
// Cargamos el fichero fecha.php de forma asíncrona.
cargarAsync("fecha.php");
}
// Carga el contenido de la url de forma asíncrona con Ajax
function cargarAsync(url)
{
if (miXHR)
{
// Carga el indicador Ajax antes de realizar la petición.
document.getElementById("indicador").innerHTML="<i
mg src='ajax-loader.gif'/>";
//Si existe el objeto miXHR abrimos la url (asíncrona)
miXHR.open('GET', url, true);
// En cada cambio de estado llama a estadoPetición
miXHR.onreadystatechange = estadoPeticion;
// Hacemos la petición al servidor con GET y parámetro
null
miXHR.send(null);
}
}

(index.js)
// Se llama en cada cambio de estado de la petición.
// 1. readyState == 4 cuando la petición ha terminado.
// 2. Status == 200 encontrado; ==404 no encontado…
function estadoPeticion()
{
if ( this.readyState==4 && this.status == 200 )
{
// Desactivamos el indicador AJAX.
document.getElementById("indicador").innerHTML="";
// Metemos en el contenedor resultados las
respuestas de la petición AJAX.
textoDIV(document.getElementById("resultados"),
this.responseText);
}
}
Programa de ejemplo: solicitud fecha al servidor (fecha.php)
<?php
// Para que el navegador no haga cache de los datos
devueltos por la página PHP.
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
// retrasamos 2 segundos la ejecución de esta página
PHP.
sleep(2);
// Mostramos la fecha y hora del servidor web.
echo "La fecha y hora del Servidor Web: ";
echo date("j/n/Y G:i:s.");
?>

(funciones CrossBrowser –funciones.js-)
// Función cross-browser para crear objeto XMLHttpRequest
function objetoXHR()
{
if (window.XMLHttpRequest)
{
// El navegador implementa la interfaz XHR de forma
nativa
return new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
var versionesIE = new Array('Msxml2.XMLHTTP.5.0',
'Msxml2.XMLHTTP.4.0',
'Msxml2.XMLHTTP.3.0' , 'Msxml2.XMLHTTP',
'Microsoft.XMLHTTP');
for (var i = 0; i < versionesIE.length; i++)
{
try
{
return new ActiveXObject(versionesIE[i]);
}
catch(errorControlado) {}//Capturamosel
error,
}
}
// Si llegamos aquí es porque el navegador
noposee ningunaformadecrear el objeto.
throw new Error("Nosepudo crear el objeto
XMLHttpRequest");
}

(funciones CrossBrowser –funciones.js-)
// Función cross-browser para añadir Eventos
var crearEvento = function(){
function w3c_crearEvento(elemento, evento, mifuncion)
{
elemento.addEventLis tener(evento, mifuncion, false);
}
function ie_crearEvento(elemento, evento, mifuncion) {
var fx = function(){ mifuncion.call(elemento); };
//Enlazamos el objeto con attachEvent para IE
elemento.attachEvent('on' + evento, fx);
}
if (typeof window.addEventListener !== 'undefined')
{ return w3c_crearEvento; }
else if (typeof window.attac hEvent !== 'undefined')
{ return ie_crearEvento; }
}(); // <= Esta es la parte más crítica - tiene que terminar en ()
// Función cross-browser para modificar elcontenidode un
div
function textoDIV(nodo,texto)
{
//var nodo =document.getElementById(idObjeto);
while (nodo.firstChild)
// Eliminamos todos los hijos deese objeto.
nodo.removeChild(nodo.firstChild);
// Cuando ya no tenga hijos, agregamos un hijocon
el texto que recibela función.
nodo.appendChild(document.createTextNode(texto));
}

Programa de ejemplo:solicitud nombre y
apellidos con GET (funciones iniciary cargar
de index.js)
function iniciar()
{
// Cargamos de forma asíncrona el texto que nos devuelve la página
procesar.php con los parámetros indicados en la URL
cargarAsync("procesar.php?nombre=Laura&apellidos=Folgado");
}
//En la función cargarAsync (url) tenemos:
miXHR.open('GET', url, true); //Abrimos la url, true=ASINCRONA
miXHR.send(null);
Programa de ejemplo:solicitud nombre y
apellidos con POST (funciones iniciary cargar
async de index.js)
function iniciar()
{
// Cargamos de forma asíncrona lo que devuelve la página procesar.php
// En este caso sólo ponemos los parámetros que pasaremos a la página
cargarAsync("nombre=Laura&apellidos=Folgado");
}
//En la función cargarAsync (parametros) tenemos:
miXHR.open('POST', "procesar.php", true); // Abrimos la url, true=ASINCRONA
miXHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
miXHR.send(parametros);

Programa de ejemplo: solicitud fechaal servidor con GET o POST (procesar.php)
<?php
// Para que el navegador no haga cache de los datos devueltos por la página PHP.
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
// Imprimimos un mensaje con los textos recibidos
if (isset($_GET['nombre']))
echo "Saludos desde el servidor: hola {$_GET['nombre']} {$_GET['apellidos ']}. ";
else if (isset($_POST['nom bre']))
echo "Saludos desde el servidor: hola {$_POST['nombre']} {$_POST['apellidos']}. ";
// Mostramos la fecha y hora del servidor web.
echo "La fecha y hora del Servidor Web: ";
echo date("j/n/Y G:i:s");
?>

EJERCICIO: u7e2_localidad:
A partir de los códigos que hemos creado en clase deberás diseñar un programa que tenga las
siguientes características:
- Una página con HTML que tenga un input de tipo texto y un botón: cuando el usuario
introduzca el nombre de una localidad y pulse el botón obtendrá, en un div “resultado”, un
mensaje que indicará si la ciudad está incluida dentro de una lista de ciudades o no. El
mensaje será rojo si no está incluida y verde en caso afirmativo.
- Una archivo en PHP que compruebe que la localidad recibida por parámetro está o no
incluida dentro de una lista de 10 localidades (utiliza un array en PHP y recórrelo para
comprobarlo).
- La petición debe realizarse de forma asíncrona, de modo que no se recargará la página, sino
que se mostrará el resultado una vez finalizada la consulta al servidor.

7.2. FORMATOS PARA EL ENVÍO Y RECEPCIÓN DE LA INFORMACIÓN
Recepción de datos en formato XML
• En la función iniciar() solicitamos que cargue, de manera asíncrona, el fichero
PHP que devuelve los datos XML. Para ello usamos:
• cargarAsync(“fichero.php”);
• Al recibir datos en formato XML debemos hacer la solicitud con la propiedad
.responseXML del objeto XHR.
• resultados = this.responseXML;
• En la función estadoPetición realizamos el procesamiento del XML.
• Elementos =
resultados.documentElement.getElementsByTagName(“etiqueta_elementos”);
• For (i=0; i<elementos.length; i++)
• En caso de que haya elementos que puedan estar vacíos, debemos utilizar try-
catch para evitar excepciones en Javascript.

EJERCICIO: u7e3_xml:
A partir de los ficheros quepermiten procesar un XML, modifícalos demaneraqueel XML a procesar lo hayas creado tu
mismocon los siguientesdatos:
- Series: seráel elementoprincipal del XML.
- Serie: contendrálos datos de unaserieen concreto, queserán:
- Título: nombredela serie.
- Cadena: nombrede lacadena queproduce laserie (HBO, FX, etc.)
- Director: nombredel director de la serie.
- Año: añode estrenode la serie.
- Terminada: podrá contener un valor “sí”o “no” en función si haterminadoonosu emisión.
Al procesar el XML semostrarán todos los datos en unatabla. Tendrá las siguientescondiciones:
- El título, lacadenay el director: el títuloseránegrita, y el director en cursiva.
- El año aparecerá en color rojo si la seriees anterior al año 2000, en amarillosi estáentreel 2001 y el 2010 y en
verde si es posterior al 2011. Estas variaciones serecogen en un archivoen CSS con reglas, comopor ejemplo.rojo,
.amarilloo .verde.
- En lacelda “terminada”habrá unaimagen determinadaen casode queen el XML seregistreun Sí oun No.

JSON
Formato para el
intercambio de
datos.
Alternativa a
XML.
Fácil uso en
Javascript.
Puede ser leído
por cualquier
lenguaje de
programación

Sintaxis de JSON
•“Nombre”: “Laura”
Nombre/Par de valores
•Número (entero o float)
•String (entre comillas simples)
•Booleano (true o false)
•Array (entre corchetes)
•Objeto (entre llaves)
•Null
Valores
•{ "NombreFruta":"Manzana" , "Cantidad":20 }
Objetos
•{
•"Frutas": [
•{ "NombreFruta":"Manzana" , "cantidad":10 },
•{ "NombreFruta":"Pera" , "cantidad":20 },
•{ "NombreFruta":"Naranja" , "cantidad":30 }
•]
•}
Arrays

Ejemplo completo de unafrutería
{"Fruteria":
[
{"Fruta":
[
{"Nombre":"Manzana","Cantidad":10},
{"Nombre":"Pera","Cantidad":20},
{"Nombre":"Naranja","Cantidad":30}
]
},
{"Verdura":
[
{"Nombre":"Lechuga","Cantidad":80},
{"Nombre":"Tomate","Cantidad":15},
{"Nombre":"Pepino","Cantidad":50}
] }]}

JSON Viewer

Recepciónde datos enformato JSON
• En la función iniciar() solicitamos que cargue,de manera asíncrona,el fichero PHP que devuelve los datos
XML.Para ello usamos:
• cargarAsync(“fichero.php”);
• Al recibir datos en formato JSON debemoshacerla solicitud con la propiedad .responseText del objeto XHR y
la parseamos con JSON.parse teniendo en cuenta que devolverá unarray.
• resultados = JSON.parse(this.responseText);
• En la función estadoPetición realizamos el procesamiento del JSON.Para el ejemplo de las frutas:
• texto = "<table border=1><tr><th>Fruta</th><th>Cantidad</th></tr>";
• var frutas = mijson[0].Fruta;
• for (vari=0;i < frutas.length;i++)
• {
• fruta = frutas[i];
• texto+="<tr><td>"+fruta.Nombre+"</td><td>"+fruta.Cantidad+"</td></tr>";
• }
• texto+="</table>“
• En caso de que haya elementos que puedan estarvacíos,debemos utilizartry-catch para evitarexcepciones en
Javascript.

EJERCICIO: u7e4_json:
Crea un archivojson equivalenteal XML quecreasteen el ejercicioanterior y compruebasu funcionamientocon el JSON
Viewer (http://jsonviewer.stack.hu/).
Basándoteen el ejemplode la frutería, procesael JSON de maneraque obtengas el mismoresultadoqueobtuvisteen el
ejercicioanterior (latablade las series con las especificacionesdadas).
Recuerdaquesolamentetendrás quemodificar los siguientesarchivos:
§ datosjson.php: dondemodificarás el XML por el JSON.
§Index.js: dondeprocesarás los datos teniendoen cuentaquesetratade un archivoJSON.

¿Qué es Jquery?
Framework Javascript que simplifica la programación. Permite:
• Creación de interfaces de usuario.
• Efectos dinámicos.
• Ajax.
• Acceso a DOM.
• Eventos.
• Validación de formularios.
• Arrastrar y soltar
• …
7.3. JQUERY

7.2. JQUERY
Librería JQuery.
• Es muy ligera y se carga en caché de navegador (solo hay que cargarla una vez.
• Podemos cargarla desde la web:
<script type="text/javascript" src="HTTP://code.jquery.com/jquery-latest.js"></script>
• Podemos descargarla e incluirla en nuestro servidor en versión producción
(ocupa menos) o desarrollador (ocupa más, pero es más legible):
• <script type="text/javascript" src="jquery.js"></script>

7.2. JQUERY
Selectores
• Permiten seleccionar elementos de nuestra página web de un modo sencillo.
• Tienen el siguiente formato:
jquery(elemento_a_seleccionar).acción
• Pero jquery se sustituye por $ para abreviar:
$(elemento_a_seleccionar).acción

7.2. JQUERY
C A R G A R L A P Á G I N A
S I N J Q U E R Y
C A R G A R L A P Á G I N A
C O N J Q U E R Y
$(document).ready(function() {
//código});
}
O bien:
function readyFn() {
// código
}
$(document).ready(readyFn);

EJERCICIO: u7e5_jquery:
A partir del ficheroejercicios.html:
- Añadela libreríajQuery.
- Añadela referenciaaun archivollamadoholamundo.js
- Crea el archivoholamundo.js quecarguelapáginacon Jquery (con laacción .ready) quemuestreun alert con el texto
(“¡Hola, mundo!”).
7.1.1. INTRODUCCIÓN A AJAX.

7.2. JQUERY
•$('#miId');
Los IDs deben ser únicos por página.
En base a su id
•$('div.miClase');
Si se especifica el tipo de elemento se mejora el rendimiento
En base al nombre de la clase:
•$('input[name=first_name]');
Puede ser muy lento.
Por su atributo
•$(’#contents ul.people li');
En forma de selector CSS
•Hacen referencia a propiedades, número de elementos, etc. Se indican con dos puntos seguidos del pseudoselector.
Con PSEUDOSELECTORES

7.2. JQUERY
Selector Example Selects
* $("*") Todos los elementos
#id $("#lastname") Los elementos con id “lastname”
.class $(".intro") Todos los elementos de clase “intro”
.class,.class $(".intro,.demo")
Todos los elementos de clase “intro” o
”demo”
elemento $("p") Todos los elementos <p>
el1,el2,el3 $("h1,div,p") Todos los elementos <h1>, <div>, <p>
Ver todos los selectores en:
http://www.w3schools.com/jquery/jquery_ref_selectors.asp

7.2. JQUERY
Encadenamiento de selectores
• Permiten elegir elementos a base de encadenar selectores:
$('#content').find('h3').eq(2).html(’Nuevo texto para el tercer elemento h3');
• Pueden formatearse de la siguiente manera:
$('#content')
.find('h3')
.eq(2)
.html('nuevo texto para el tercer elemento h3')

7.2. JQUERY
Getters y setters:
• Para establecer un valor podemos utilizar el método .html(“valor”).
$('h1').html(“¡Hola, mundo');
• Para establecer un valor de un elemento de un formulario utilizams .val(“valor”).
$(‘:input’).val(“¡Hola, mundo');
• Para obtener un valor podemos utilizar el método .html().
$('h1').html();

EJERCICIO: u7e6_selectores:
A partir del ficheroejercicios.htmlcreaun nuevoarchivollamadoselectores.jsquerealicelas siguientes acciones:
- Mostrar un alert delantede cada cambioquevayamos a hacer sobreel documento.
- Modificar todos los elementos <h1> con el texto“Comeaquí”.
- Modificar el primer elemento<h2> con el texto“Frutas”.
- Modificar el segundoelemento<h2> con el texto“Vegetales”.
- Modificar el tercer elemento<h2> con el texto“Pan”.
- Modificatodos los elementos delalistaqueestén apartir del índice3 para que aparezca “superior”.
- Modificael valor del campo de textodel formularioparaque dentroaparezca “Introducetexto”.
- Modificael valor de todas las celdas pares de la tabla para que aparezca “0” y las impares para queaparezca “1”.
- Cambiatodos los elementos quetengan un atributo“href”paraquevayan a http://www.google.com
- Cambiael textode los párrafos de clase“excerpt” para que aparezca “Entrada”.
7.2. JQUERY

7.2. JQUERY
CSS: propiedades
• Para establecer una propiedad css podemos utilizar el método
.css(“propiedad”,”valor”).
$('h1').css('fontSize', '100px'); //Propiedad individual CSS
$('h1').css({ 'fontSize' : '100px', 'color' : 'red' }); // múltiples propiedades
• Para obtener una propiedad un valor podemos utilizar el método .html().
$('h1').css('fontSize'); // devuelve una cadena de caracteres como "19px"
$('h1').css('font-size'); // también funciona

7.2. JQUERY
CSS: clases
• Añadir clases a un elemento:
$('h1').addClass('big');
• Eliminar clases de un elemento:
$('h1').removeClass('big');
• Cambiar una clase a un elemento:
$('h1').toggleClass('big');
• Comprobar si un elemento tiene una clase:
if ($('h1').hasClass('big')) { ... }

7.2. JQUERY
CSS: dimensiones
• Establecer el ancho de todos los elementos h1
$('h1').width(’50px');
• Obtiene el ancho del primer elemento h1
$('h1').width();
• Establecer el alto de todos los elementos h1
$('h1').height(’50px');
• Obtiene el alto del primer elemento h1
$'h1').height();

7.2. JQUERY
Atributos
• Establecer atributos:
$('a').attr('href', 'allMyHrefsAreTheSameNow.html');
$('a').attr({
'title' : 'all titles are the same too',
'href' : 'somethingNew.html' });
• Obtener atributos:
$('a').attr('href'); // devuelve el atributo href perteneciente al primer elemento
<a> del documento

EJERCICIO: u7e7_selectores2:
Crea un archivo html que tenga una tabla con 10filas (y mínimo2columnas). La primera y la última fila serán filas de encabezado
(<th>).
Crea un CSS con las siguientes reglas:
• .rojo: permite modificarel fondo delelemento a color#F5A9BC.
• .azul: permite modificarel fondodelelemento a color#A9BCF5.
• .negrita: permite modificar eltipo de letra a negrita (bold).
Realiza lassiguientes modificaciones con jQuery: (siguiente diapositiva)
7.2. JQUERY

Realiza lassiguientes modificaciones con jQuery:
• Ponle borde a la tabla mediante el atributo border.
• Asigna a las filas de encabezadode la parte superiorun bordedoble.
• Asigna a las filas de encabezadode la parte inferior solo bordesuperior.El resto no se verán.
• Asigna a las celdas pares laclase.rojo.
• Asigna a las celdas impares laclase.azul.
• Asigna a las celdas deencabezado laclase .negrita.
• Aumenta el alto de las celdas de encabezado para que seadiferente del predeterminado.
• Oculta la fila 5(método .hide()).
• Pon en amarillotodas las celdas que tengan eltexto "Amarillo".
7.2. JQUERY

EJERCICIO: u7e7_selectores2:
Crea un archivo html que tenga tres imágenes iguales(por ejemplo, laque utilizaste para elejerciciode los simpsons). Añade cuatro
botones: "Restaurar", "Rotar", "Ocultar"y "Mostrar".
Añade los siguientes eventos para que, a travésde JQuery,se realicen las siguientes modificaciones:
•Al colocarnos con elratón sobre cualquiera de las imágenes, se mostrará otraimagen en su lugar (puedes utilizar tres imágenes del
ejerciciode los Simpsons, porejemplo). Tambiénmostrará un mensajecon la ruta href correspondiente a la imágen que se está
mostrando.
•Al hacer clic sobre cualquiera de las imágenes, su tamañose aumentará y mostrará un mensajecon el tamañoactual. Si volvemos a
hacer clic sobre ella, volverá al tamaño original(puedes comprobarlocon un if).
•Si hacemos clic sobreel botón"Restaurar", lasimágenes volveránal tamañooriginal.
•Si hacemos clic sobreel botón"Rotar", las imágenes cambiarán de laprimera a la segunda, dela segundaa la tercera, y de latercera
a la primera.
•Si hacemos clic sobreel botón"Ocultar", las imágenes desaparecerán.
•Si hacemos clic sobreel botón"Mostrar", las imágenes aparecerán denuevo.
7.2. JQUERY

7. Utilización de mecanismos de comunicación asíncrona

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a 7. Utilización de mecanismos de comunicación asíncrona

Similar a 7. Utilización de mecanismos de comunicación asíncrona (20)

Más de Laura Folgado Galache

Más de Laura Folgado Galache (17)

7. Utilización de mecanismos de comunicación asíncrona