Programación Web en cliente

Introducción a jQuery

jQuery es un una biblioteca o framework de Javascript que permite simplificar la manera de interactuar con los documentos HTML, permitiendo manejar eventos, desarrollar animaciones y agregar la tecnología AJAX a nuestras páginas web. jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en Javascript que de otra manera requerirían de mucho más código.

La elección de jQuery, en detrimento de otros frameworks AJAX y Javascript se base fundamental en la expansión que actualmente tiene en el mundo del desarrollo web (ver siguiente figura). También posee una librería de interfaz de usuario (jQuery UI) que incorpora efectos gráficos y de usabilidad con capacidades Drag&Drop (arrastrar y colocar), animaciones y otro elementos gráficos y de interfaz amigable. Por último , jQuery tiene el apoyo de Google, Nokia y Microsoft, incluyendose dentro del entorno de desarrollo Visual Studio.

Empezando a trabajar con jQuery

El núcleo de Jquery esta compuesto por un único archivo Javascript que contiene todos los objetos y funciones que vamos a necesitar para empezar a realizar nuestros primeros scripts con funcionalidades AJAX. Podemos encontrar dos versiones de este fichero en la dirección: http://docs.jquery.com/Downloading_jQuery. La primera versión “Minified” es el fichero que usaremos en producción, esta escrito para ocupar el mínimo espacio, no contiene comentarios y el código esta escrito sin espaciados ni sangrías lo que hace su entendimiento y modificación una tarea extremadamente costosa. La segunda versión “Uncompressed” es la usada en desarrollo y la que vamos a utilizar. Esta comentada y permite entender sus funciones y objetos. Una vez hayamos descargado el fichero .js con la última versión de desarrollo de jQuery bastará con incluirlo en la cabecera del fichero HTML de la siguiente manera:

<head>
   <script type="text/javascript" src="jquery.js"></script>
</head>

Selectores CSS en jQuery

Vamos a empezar nuestro aprendizaje del núcleo de jQuery con los selectores CSS que nos permitirán modificar los atributos y el comportamiento de los diferentes elementos de nuestras paginas web. Hasta ahora, cada vez que queríamos acceder a un elemento de nuestra página mediante Javascript utilizábamos varios métodos. Por ejemplo para rescatar el valor del input de un formulario lo podíamos hacer de la forma document.name_del_formulario.name_del_input.value o atacando directamente el identificador con document.getElementById('identificador_del_input'). Al mismo tiempo en nuestras hojas CSS utilizábamos selectores para establecer que propiedades iban a tener los diferentes elementos de la página. Un punto seguido de un nombre (.nombre_clase) indicaba una selección de todos los elementos de la clase “nombre_clase” mientras que una almohadilla seguida de un nombre indica el elemento con el identificador del nombre (#identificador). Estos selectores ya se vieron en la sesión de CSS pero ahora haremos un pequeño repaso ya que con jQuery siempre que deseemos acceder a un elemento del DOM lo haremos siguiendo la sintaxis de estos dentro de la función $(). Por ejemplo para acceder al elemento con id “elemento1” escribiremos esta línea:

$('#elemento1');

Este selector nos devolverá una referencia única al elemento1, en cambio si como selección usamos una clase, jQuery nos devolverá un array con todos los elementos que cumplan el selector CSS (en este caso todos los que tengan el atributo class como “clase1”.

//recogemos todos los elementos de la clase1
var elementos = $('.clase1');
//mostramos contenido Html del primero elemento encontrado de la clase1
alert(elementos[0].innerHtml);

Existen multitud de selectores CSS que podemos usar en nuestros scripts con jQuery, muchos de ellos ya los habéis estudiado en el módulo de Web 2.0. Ahora vamos a repasar los más importantes que nos ayudaran a lo largo de este módulo:

$('#identificador'): hará referencia al elemento con el identificador indicado.
$('.nombreClase'): referencia a todos lo elementos con la clase “nombreClase”.
$('E F'): referenciará a todos los elemento F dentro de elementos E. Por ejemplo si escribiéramos la línea $('.clase1 a'), se estaría accediendo a todos los enlaces dentro de elementos con el atributo class como clase1.
$('E > F'): Muy parecido al caso anterior, con la salvedad que solo referencia a los hijos de primer grado (no hará referencia a nietos, bisnietos, etc...).
$('E[atributo]'): Un ejemplo sería $('img[width=100]') que indicaría la referencia de los elementos img con el atributo width=100.
$('E :first-child'): Se accederá al primer hijo de la selección E, un ejemplo seria $('#padre :first-child') donde se haría referencia al primer hijo del elemento con identificador 'padre'.

Atributos

Una vez hemos seleccionado un elemento (o varios de ellos) con un selector CSS podemos ver y modificar sus atributos ayudándonos con los diferentes atajos que nos ofrece jQuery. Estos atajos se usan seguidamente al selector, por ejemplo $('#elemento1').val() devolvería el atributo value. A continuación mostramos un listado de estos atajos y su uso:

.addClass('nombre_clase'): Asigna la clase CSS “nombre_clase” al elemento seleccionado.
.toggleClass('nombre_clase'): Sustituye la clase actual por la indicada en nombre_clase.
.removeClass('nombre_clase'): Elimina la clase del elemento seleccionado.
.attr('nombre_atributo','nuevo_valor'): Modifica el valor del atributo 'nombre_atributo' con el especificado en 'nuevo_valor', en caso de no introducir el segundo parámetro se devolverá el valor actual del atributo.
.html('codigo_html'): Equivalente a acceder al atributo de Javascript innerHtml. Modificara todo el contenido HTML del elemento por el especificado, si se llama la función sin parámetros se devolverá solo el contenido.
.val('valor'): Asigna al atributo value del elemento seleccionado el valor especificado. Si no se pasa ningún parámetro se devolverá el valor actual.

Haciendo uso de los selectores y atajos en los atributos vamos a escribir un pequeño ejemplo que intercambia las clases de un elemento modificando su visualización al pasar el ratón sobre un texto.

<html>
   <head>
      <script src="http://code.jquery.com/jquery.min.js"
         type="text/javascript"></script>   
      <style type="text/css">
         .clase_fondo_color{
            background-color: #cccccc;
         }
      </style>
   </head> 

   <body>
      <div id="texto">
         Un texto cualquiera
      </div>
      <br>
      <span onmouseover="$('#texto').addClass('clase_fondo_color');"
         onmouseout="$('#texto').removeClass('clase_fondo_color');">
         Cambiar el color de fondo del texto
      </span>
   </body>
</html>

Métodos abreviados

Además de tener los selectores y métodos de acceso, jQuery dispone de otras funciones y atajos que nos permiten acceder y modificar nuestras página web de forma más sencilla y rápida. Un resumen de ellos sería:

.next(): Devuelve el nodo siguiente.
.prev(): Devuelve el nodo anterior.
.partent(): Devuelve el nodo padre.
.childer(): Devuelve los hijos de Elemento.
.is(“selector CSS”): Devuelve false si el elemento no cumple la condición especificada en “selector CSS”.
.first(): Cuando una selección devuelve mas de un elemento, first devuelve el primero. Un ejemplo sería $('.nombre_clase').first().
.last(): Cuando una selección devuelve mas de un elemento, last devuelve el último.
.filter(“selector CSS”): Hace un selección tomando como argumento el selector CSS especificado. Un ejemplo sería $('div'),filter('.nombre_clase') que seleccionaría los elementos contenidos entre tags div que tuviera la clase '.nombre_clase'.
.each(function(){}): Por cada elemento seleccionado se ejecutara la función especificada. Por ejemplo $('li').each(function(){alert('uno de la lista');}) lanzará una advertencia por cada elemento 'li' encontrado en la selección.

En el siguiente ejemplo modificaremos todos los elementos de una lista pulsando un botón, se usa del método abreviado .each que permite recorrer todos los elementos seleccionados.

<html> 
   <head>
      <style type="text/css">
         .clase_fondo_color{
            background-color: #cccccc;
         }
      </style>
      <script src="http://code.jquery.com/jquery.min.js"
         type="text/javascript"></script>  
      <script>
         function cambiar_elementos()
         {
            $("li").each(function(){
               $(this).toggleClass("clase_fondo_color");
            });
         }
      </script>
   </head>
   <body>
      <button onclick="cambiar_elementos()">
         Cambiar todos los elementos de la lista
      </button>
      <ul>
         <li>Primero de la lista</li>
         <li>Segundo de la lista</li>
         <li>Tercero de la lista</li>
      </ul>
   </body>
</html>

Eventos

Hasta ahora para poder trabajar con los eventos típicos como onclick, onmouseenter, onmouseover, etc., utilizábamos la sintaxis típica de Javascript. jQuery permite asociar estos eventos a funciones y elementos concretos gracias al método bind. Esta función se utiliza con la siguiente sintaxis: .bind('tipo_de_evento',function(){}). El objetivo es asociar una función a los elementos seleccionados. Un ejemplo básico sería este:

$('#elemento1').bind('click', function() {
   alert('acabas de hacer click');
});

Cabe destacar que la función que es llamada se denomina de tipo callback. Esta funciones se pasan como parámetros de otras, ejecutándose cuando un evento ha ocurrido. A lo largo del curso trataremos varias veces con ellas.

Todos las funciones que se llaman como consecuencia de un evento llevan implícito como parámetro el objeto Event. Normalmente este objeto no se usa y al declarar nuestra función lo omitimos pero algunas veces es necesario. El objeto Event tiene varios atributos y métodos relacionados con el evento que acaba de suceder, entre ellos destacamos:

event.currentTarget: devuelve el elemento sobre el que ha surgido el evento. En el código anterior sobre el método bind el currentTarget sería el elemento con identificador 'elemento1'.
event.PageX: Nos indica la posición horizontal del ratón en el momento de lanzar el evento.
event.PageY: Nos indica la posición vertical del ratón en el momento de lanzar el evento.
event.stopPropagation(): Detiene la propagación del evento. Si hacemos click sobre un div, también lo haremos para cada uno de sus elementos hijo, con stopPropagation evitamos esto.

Un ejemplo básico del uso del objeto Event sería:

$('#elemento1').bind('click', function(event) {
   alert('El cursor se encuentra en('
      + event.pageX + ', ' + event.pageY + ')');
});

Existen también otros métodos abreviados que combinan el uso del método bind con los diversos tipos de eventos. Un listado de los más importantes sería esta:

.ready(callback): Esta función sustituye al metodo onLoad en la etiqueta body. Se lanzara la función callback cuando el Elemento este disponible (se puede usar en cualquier elemento).
.change(callback): Cuando un elemento cambie se lanzará la función callback. Un ejemplo sería al cambiar el valor de un combobox de un formulario.
.click(callback): Es un atajo a: bind('click',callback).
.dbckick(callback): Se lanza el callback al producirse un doble click en el elemento.
.focus(callback): Se lanza el callback al seleccionarse por parte del usuario el elemento.
.blur(callback): Se lanza el callback al dejar de seleccionarse por parte del usuario el elemento.
.mouseover(callback): Se lanza el callback al ponerse el ratón sobre el elemento.
.mouseout(callback): Se lanza el callback al salirse el puntero del elemento.

Además de los predeterminados, en jQuery se permite la personalización de efectos mediante la función animate. Esta función nos permite pasar de unas propiedades CSS iniciales en un elemento, a otra finales mediante una animación. La sintaxis es la siguiente:

Elemento.animate({propiedades finales css},velocidad)

A continuación mostramos un ejemplo de como animar un elemento (en este caso un div). La palabra HOLA cambiara de tamaño agrandándose al mismo tiempo que pierde intensidad:

<html> 
   <head>
      <script src="http://code.jquery.com/jquery.min.js"
         type="text/javascript"></script>  
   </head>
   <body>
      <button id=”iniciar”></button>
      <div>HOLA</div>

      <script> 
         $("#iniciar").click(function(){
            $("#block").animate({ opacity: 0.5,fontSize: "48px",}, 1500 );
         });
      <script>
   </body>
</html>

Chainability: Concatenación de acciones

Es una de las herramientas mas poderosas de jQuery. Permite al concatenación sucesiva de métodos. Su sintaxis es Elemento.metodo1().metodo2().metodo3()[...]. Cada una de las funciones llamadas hace de callback sobre la de su izquierda. Es muy útil a la hora de manejar eventos y también para mostrar efectos, se puede emplear con cualquier método de jQuery y concatenar tantas funciones como se desee. Por ejemplo podríamos hacer desaparecer y volver aparecer un elemento de la siguiente manera:

$("#elemento1").fadeOut().fadeIn();

jQuery y AJAX

jQuery dispone de métodos que nos van a permitir hacer nuestras llamadas AJAX de una manera mucho más sencilla que tratando directamente con el objeto XMLHttp. La función principal que llamaremos para realizar una petición ya sea POST o GET es $.ajax. Seguidamente mostramos un ejemplo de su uso:

$.ajax({ type: "POST",
   url: "pagina.php",
   data: "id=22&nombre=Luis",success: function(datos){
      alert( "Datos devueltos por el servidor: " + datos ); }
 });

En este código estamos realizando una petición AJAX de tipo POST ya que podemos advertir como en la opción “data” enviamos al servidor dos variables: id y nombre. Por último, se indica la función que será llamada si la petición ha sido correcta, en este caso se mostrará un alert como la información devuelta por el servidor.

Aunque todas las peticiones AJAX se pueden realizar en jQuery mediante la función $.ajax, existen unos métodos abreviados que nos van a permitir trabajar de manera aún mas rápida. Por ejemplo la función .load(url,data,callback) nos permite hacer una petición AJAX de tipo GET (los parámetros especificados en data se pasaran por GET) y el resultado devuelto sustituirá el código Html del elemento que haya lanzado la función. En el siguiente ejemplo vemos como se sustituirá el texto “AQUI IRAN LOS DATOS DE VUELTA” por la información devuelta por el script de PHP ajaxRequest.php (este script de PHP lo usaremos es los tres siguientes ejemplos, con lo que solo se mostrara una vez).

Código Cliente:

<html>
   <head>
      <script type="text/javascript" src="jquery.js"></script>
      <script>
         // cuando este cargado el documento haremos la peticion
         $(document).ready(inicio);
         function inicio(){
            $("#divRespuesta").load("ajaxRequest.php"
               ,"opcion=load&parametro1=valor1",vuelta);
         }
         function vuelta()
         {
            alert("se realizo la conexion");
         }
      </script>
   </head>
   <body>
      <div id="divRespuesta">AQUI IRAN LOS DATOS DE VUELTA</div>
   </body>
</html>

Código servidor:

<?php
switch($_GET["opcion"])
{
   case "load":
      load();
      break;
   case "get":
      get();
      break;
   case "post":
      post();
      break;    
}
function load()
{
   echo "Se llamo con la funcion load, y se paso el parametro 
      'parametro1' con valor " 
      . $_GET["parametro1"];    
}
function get()
{
   echo "1984";
}
function post()
{
   if($_POST["usuario"]==33)
      echo "Issac Asimov";
}
?>

Otro de los métodos abreviados es $.get(url,data,callback). Como su nombre indica realizará una petición AJAX de tipo GET, pasando los parámetros especificados en data y al finalizar (si todo ha sido correcto) lanzará la función callback. A diferencia de la función .load, esta no necesita ser lanzada desde un elemento y el valor devuelto por el servidor se enviara como primer parámetro al callback. A continuación se muestra un ejemplo en el que se realizará una petición que devolverá un nombre de libro el cual se indicará en el div con identificador “divRespuesta”.

<html>
   <head>
      <script type="text/javascript" src="jquery.js"></script> 

      <script>
         // cuando este cargado el documento haremos la peticion
         $(document).ready(inicio);

         function inicio(){
            $.get("ajaxRequest.php","opcion=get",vuelta);
         }

         function vuelta(response)
         {
            $("#divRespuesta").append(response);
         }
      </script>
   </head>
   <body>
      <div id="divRespuesta">El libro de vuelta es: </div>
   </body>
</html>

Por último vamos a ver la función $.post(url,data,callback) que es similar $.get() con la salvedad que los datos especificados en data se pasaran por POST. En el siguiente ejemplo el script PHP del servidor nos devolvera el nombre de un usuario y lo mostraremos en el div con identificador “divRespuesta”.

<html>
   <head>
      <script type="text/javascript" src="jquery.js"></script>
      <script>
         // cuando este cargado el documento haremos la peticion
         $(document).ready(inicio);
         function inicio(){
            $.post("ajaxRequest.php?opcion=post","usuario=33",vuelta);
         }
         function vuelta(response)
         {
            $("#divRespuesta").append(response);
         }
      </script>
   </head>
   <body>
      <div id="divRespuesta">El nombre del usuario es: </div>
   </body>
</html>