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

7. UTILIZACIÓN DE MECANISMOS DE COMUNICACIÓN ASÍNCRONA7.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)

L A U R A F O L G A D O G A L A C H E

Elementos de 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.


Estándaresabiertos.

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?



•Apache, IIS...

Servidor web

•MySQL, Postgresql...

Servidor de bases de datos

•PHP, ASP...

Lenguaje de servidor

Requisitos

7. UTILIZACIÓN DE MECANISMOS DE COMUNICACIÓN ASÍNCRONA7.1. INTRODUCCIÓN A AJAX. 7.1.2. COMUNICACIÓN ASÍNCRONA


Comunicación asíncrona


7. UTILIZACIÓN DE MECANISMOS DE COMUNICACIÓN ASÍNCRONA7.1. INTRODUCCIÓN A AJAX. 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

statusEl código de estado HTTP devuelto por el servidor (200 para una respuesta correcta, 404 para "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

onreadystatechangeResponsable 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étodos del objeto XMLHttpRequest (XHR):

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()



Métodos del objeto XMLHttpRequest (XHR):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/xht ml1-transitional.dtd">

<html>

<head>

<title>Hola Mundo con AJAX, version 2</title>

<script type="text/javascript" language="javascript">

var READY_STATE_UNINITIALIZ ED=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/x html1/DTD /xht ml1-transitional .dtd">

<html xmlns="http://www.w3.org/1999/x html">

<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=" <img 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);

}

}



Programa de ejemplo: solicitud fecha al servidor (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 lasrespuestas 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 datosdevueltos 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áginaPHP.

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.");

?>



Programa de ejemplo: solicitud fecha al servidor (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) {}//Capturamoselerror,

} }

// Si llegamos aquí es porque el navegadorno posee ninguna forma de crear el objeto.throw new Error("No se pudo crear el objetoXMLHttpRequest");

}



Programa de ejemplo: solicitud fecha al servidor (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 el contenidode un div

function textoDIV(nodo, texto)

{

//var nodo = document.getElementById(idObjeto);

while (nodo.firstChild)

// Eliminamos todos los hijos de ese objeto.

nodo.removeChild(nodo.firstChild);

// Cuando ya no tenga hijos, agregamos un hijocon el texto que recibe la función.

nodo.appendChild(document.createTextNode(texto));

}




Programa de ejemplo: solicitud nombre y apellidos con GET (funciones iniciar y cargar de index.js)

function iniciar()

{



// Cargamos de forma asíncrona el texto que nos devuelve la páginaprocesar.php con los parámetros indicados en la URL

cargarAsync("procesar.php?nombre=L aura&apellidos=Folg ado");

}

//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 iniciar y 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-urlencod ed");

miXHR.send(parametros);



Programa de ejemplo: solicitud fecha al 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. UTILIZACIÓN DE MECANISMOS DE COMUNICACIÓN ASÍNCRONA7.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 que permiten procesar un XML, modifícalos de manera que el XML a procesar lo hayas creado tu mismo con los siguientes datos:

- Series: será el elemento principal del XML.

- Serie: contendrá los datos de una serie en concreto, que serán:- Título: nombre de la serie.- Cadena: nombre de la cadena que produce la serie (HBO, FX, etc.)- Director: nombre del director de la serie.- Año: año de estreno de la serie.- Terminada: podrá contener un valor “sí” o “no” en función si ha terminado o no su emisión.

Al procesar el XML se mostrarán todos los datos en una tabla. Tendrá las siguientes condiciones:- El título, la cadena y el director: el título será negrita, y el director en cursiva.- El año aparecerá en color rojo si la serie es anterior al año 2000, en amarillo si está entre el 2001 y el 2010 y en

verde si es posterior al 2011. Estas variaciones se recogen en un archivo en CSS con reglas, como por ejemplo .rojo, .amarillo o .verde.

- En la celda “terminada” habrá una imagen determinada en caso de que en el XML se registre un Sí o un 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 una fruterí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ón de datos en formato 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 debemos hacer la solicitud con la propiedad .responseText del objeto XHR y la parseamos con JSON.parse teniendo en cuenta que devolverá un array.• 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 (var i=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 estar vacíos, debemos utilizar try-catch para evitar excepciones en Javascript.


EJERCICIO: u7e4_json:

Crea un archivo json equivalente al XML que creaste en el ejercicio anterior y comprueba su funcionamiento con el JSON Viewer (http://jsonviewer.stack.hu/).

Basándote en el ejemplo de la frutería, procesa el JSON de manera que obtengas el mismo resultado que obtuviste en el ejercicio anterior (la tabla de las series con las especificaciones dadas).

Recuerda que solamente tendrás que modificar los siguientes archivos:§ datosjson.php: donde modificarás el XML por el JSON.§Index.js: donde procesarás los datos teniendo en cuenta que se trata de un archivo JSON.




¿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. UTILIZACIÓN DE MECANISMOS DE COMUNICACIÓN ASÍNCRONA7.3. 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>



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


C A R G A R L A P Á G I N AS I N J Q U E R Y


C A R G A R L A P Á G I N AC 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 fichero ejercicios.html:

- Añade la librería jQuery.

- Añade la referencia a un archivo llamado holamundo.js

- Crea el archivo holamundo.js que cargue la página con Jquery (con la acción .ready) que muestre un alert con el texto (“¡Hola, mundo!”).


7. UTILIZACIÓN DE MECANISMOS DE COMUNICACIÓN ASÍNCRONA7.1.1. INTRODUCCIÓN A AJAX. 7.1.2. EL API XMLHTTPREQUEST (XHR)


•$('#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




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



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')



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 fichero ejercicios.htmlcrea un nuevo archivo llamado selectores.jsque realice las siguientes acciones:

- Mostrar un alert delante de cada cambio que vayamos a hacer sobre el documento.

- Modificar todos los elementos <h1> con el texto “Come aquí”.

- Modificar el primer elemento <h2> con el texto “Frutas”.

- Modificar el segundo elemento <h2> con el texto “Vegetales”.

- Modificar el tercer elemento <h2> con el texto “Pan”.

- Modifica todos los elementos de la lista que estén a partir del índice 3 para que aparezca “superior”.

- Modifica el valor del campo de texto del formulario para que dentro aparezca “Introduce texto”.

- Modifica el valor de todas las celdas pares de la tabla para que aparezca “0” y las impares para que aparezca “1”.

- Cambia todos los elementos que tengan un atributo “href” para que vayan a http://www.google.com

- Cambia el texto de los párrafos de clase “excerpt” para que aparezca “Entrada”.





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



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')) { ... }



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();



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 10 filas (y mínimo 2 columnas). La primera y la última fila serán filas de encabezado (<th>).

Crea un CSS con las siguientes reglas:

• .rojo: permite modificar el fondo del elemento a color #F5A9BC.

• .azul: permite modificar el fondo del elemento a color #A9BCF5.

• .negrita: permite modificar el tipo de letra a negrita (bold).

Realiza las siguientes modificaciones con jQuery: (siguiente diapositiva)



Realiza las siguientes modificaciones con jQuery:

• Ponle borde a la tabla mediante el atributo border.

• Asigna a las filas de encabezado de la parte superior un borde doble.

• Asigna a las filas de encabezado de la parte inferior solo borde superior. El resto no se verán.

• Asigna a las celdas pares la clase .rojo.

• Asigna a las celdas impares la clase .azul.

• Asigna a las celdas de encabezado la clase .negrita.

• Aumenta el alto de las celdas de encabezado para que sea diferente del predeterminado.

• Oculta la fila 5 (método .hide()).

• Pon en amarillo todas las celdas que tengan el texto "Amarillo".



EJERCICIO: u7e7_selectores2:

Crea un archivo html que tenga tres imágenes iguales (por ejemplo, la que utilizaste para el ejercicio de los simpsons). Añade cuatro botones: "Restaurar", "Rotar", "Ocultar" y "Mostrar".Añade los siguientes eventos para que, a través de JQuery, se realicen las siguientes modificaciones:

•Al colocarnos con el ratón sobre cualquiera de las imágenes, se mostrará otra imagen en su lugar (puedes utilizar tres imágenes del ejercicio de los Simpsons, por ejemplo). También mostrará un mensaje con la ruta href correspondiente a la imágen que se está mostrando.

•Al hacer clic sobre cualquiera de las imágenes, su tamaño se aumentará y mostrará un mensaje con el tamaño actual. Si volvemos ahacer clic sobre ella, volverá al tamaño original (puedes comprobarlo con un if).

•Si hacemos clic sobre el botón "Restaurar", las imágenes volverán al tamaño original.

•Si hacemos clic sobre el botón "Rotar", las imágenes cambiarán de la primera a la segunda, de la segunda a la tercera, y de la tercera a la primera.

•Si hacemos clic sobre el botón "Ocultar", las imágenes desaparecerán.

•Si hacemos clic sobre el botón "Mostrar", las imágenes aparecerán de nuevo.



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

Software

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