Introducción a jQuery

8 05 2009

He estado usando un poco jQuery y, por si después de lo que ya había visto hacía falta algo más, me terminé de convencer de que jQuery es una tremenda ayuda para quienes programamos mucho o poco en JavaScript. Este es el primero de una serie de artículos introductorios los que voy a tratar de mechar con otros con ejemplos reales. Ahí vamos:

¿Que es jQuery?

Una biblioteca javascript (un .js de 19k en su versión de producción) que tiene las siguientes características:

  • Todo lo que hagamos con jQuery es “Browser-Agnostic”, o sea ¡funciona igual en todos los navegadores!
  • Adhiere al concepto de Unobstrusive javascript, o sea, “No metas javascript en tu HTML”, esto abarca los eventos en los tags y absolutamente todo lo que tenga que ver con javascript en el body, así como la mayoría de los <script> en el head, si no todos. Esto entre otras cosas facilita mucho la separación de tareas entre programador-diseñador.
  • Es OpenSource y al mismo tiempo posee cierto soporte de Microsoft, lo que incluye una versión con Intelisense y la inclusión por defecto en el nuevo  ASP.NET MCV.
  • Una comunidad importantísima, una enorme documentación y cantidad de tutoriales. Unas cuantas de estas cosas están en español.
  • Es extensible y posee una cantidad enorme de Plugins desarrollados, donde “enorme” quiere decir que en el sitio oficial hay más de mil.
  • Posee poderosos métodos para trabajar con Ajax.
  • Muchos efectos gráficos incluidos para manipular los objetos de nuestra página.

También presenta tres conceptos que definen la sintaxis de jQuery y gran parte de su funcionalidad:

  1. Utiliza en su sintaxis el concepto de encadenamiento de sentencias, (A.K.A. fluent interfaces o “chaining”), que nos permite realizar una gran cantidad de acciones en una sola sentencia y nos evita declarar infinidad de variables.
  2. Posee un conjunto de selectores muy poderoso con los cuales podemos recorrer el DOM a gusto y piaccere.
  3. Posee una sintaxis para trabajar con eventos que permite no tener que introducir llamadas a los mismos en los tags y en increíblemente flexible.

Estas características son las que veremos a lo largo de estos introducctorios, pero primero empecemos de cero:

Incorporando jQuery a nuestras páginas

En el sitio oficial: www.jquery.com podemos bajar la biblioteca en sus versiones de desarrollo, producción (minified) y visual studio, está última es una versión comentada que permite el intelisense. El sitio también es referencia en cuando a información se refiere.

Una vez incluido el archivos .js en nuestro proyecto, arrastramos el mismo al tag head de nuestra página, lo que genera lo siguiente:

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

para la versión minified 1.3.2, la actual al momento de escribir esto. (No hay que olvidar cambiar la versión de desarrollo por la de producción cuando ya no la necesitamos y no es mala práctica renombrar el archivo a jQuery a secas para facilitar el cambio de versiones.)

El objeto jQuery ($):

Casi toda la funcionalidad de jQuery está contenida en un objeto llamado también jQuery. Este objeto tiene un alias que es el símbolo $, o sea que en cada lugar donde escribimos $ podemos cambiar por jQuery y viceversa. Como el símbolo $ es el estandar vamos a verlo así escrito en este artículo. Veamos la estructura de una típica sentencia jQuery:

$("selector").acción(parámetros);

$(“selector”) captura, a partir del selector indicado, el conjunto del DOM identificado sobre el cual aplicamos la acción, pero el valor de retorno no es directamente un array de objetos, sino que es el propio objeto $ conteniendo los objetos en su interior.

Cuando ejecutamos un método sobre el objeto $ que contiene los elementos que seleccionamos, este aplica dicha acción a cada uno de los objetos recuperados. Un ejemplo concreto:

$("#mensaje").fadeOut(3000);

Llama para el elemento con id=”mensaje” a la función fadeOut, que aumenta su transparencia hasta hacerlo desaparecer al cabo de los tres segundos indicados como parámetro.

La función .ready

Ya tenemos un pequeño ejemplo de código jQuery, pero ¿donde lo ponemos?

Si leímos bien, una de las características de jQuery es que nos permite no introducir llamadas a funciones javascript en los tags HTML, más tarde vamos a ver como atachar eventos a los objetos del DOM, pero hay un método para ejecutar código en la carga de la página y que veremos hasta en la sopa, la función ready.

Normalmente cuando queremos ejecutar una rutina js en la carga de la página, utilizamos el evento onload del body, pero esto tiene la desventaja de hacernos esperar hasta que se carga toda la página, imágenes inclusive. jQuery nos presenta un camino alternativo que es la función ready, está se ejecuta ni bien el navegador levanto el DOM en memoria, ¿y que hace? bueno, lo que nosotros querramos, ya que toma como único parámetro un callback, o sea, una función javascript, veamos la sintaxis:

$(document).ready(
	function() { ... }
);

Como vemos ready es una función del objeto $, el cual en este caso ha sido creado a partir del document. Como parámetro de ready, estamos enviando una función cuyo código será el que se ejecute correctamente. De esta manera si quisieramos cumplir con la inutil misión de que el código del ejemplo anterior se ejecute en primera instancia al cargar la página, tendríamos que escribir lo siguiente:

<script type="text/javascript">
$(document).ready(function() {
   $("#mensaje").fadeOut(3000);
});
</script>

Donde hemos reemplazado únicamente los “…” por nuestra función.

En mucha de la documentación más vieja se ve esta sintaxis, pero jQuery presenta una abreviación que es la que vamos a usar:

<script type="text/javascript">
    $(function() {
    	$("#mensaje").fadeOut(3000);
    });
</script>

Hasta aquí hemos visto solo la manera de hacer de forma interesante algo muy inútil, y es que en la gran mayoría de documentos introductorios a jQuery verán que se presenta la librería haciendo uso de fadeIn, fadeOut y varias funciones gráficas que son muy impactantes a la vez que sencillas de utilizar. He estado hace unas semanas en una charla de jQuery donde toda la atención la despertaba este tipo de funcionalidad y en el mismo sitio oficial se presenta la librería con un lindo efecto.

Todo eso está genial, pero si Uds, como yo, nacieron sin la parte del cerebro que se utiliza para el diseño, antes de creer que jQuery es un compendio de efectos o de hacks para algunas funcionalidades, sigan leyendo y encontrarán un tesoro de la mano de la manipulación del DOM, los selectores, el encadenamiento de sentencias, la facilidad para trabajar con AJAX, el manejo de eventos y el crossbrowsing real, por sobre otros instrumentos no tan útiles a la hora de programar comportamientos y manejo de datos en la UI.

Saludos.

Anuncios

Acciones

Information

2 responses

10 08 2010
claudia

Hola estoy aprendiendo de este mundo nuevo llamado jquery y la vdd recomiendenme manuales felicidades por este que estoy leyendo gracia s

10 08 2010
Alejandro Hernández

Claudia: Te recomiendo JQuery in Action de Manning. También en el sitio hay muchos ejemplos en ambas lenguas. ¡Me alegro que te sea util el sitio!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s




A %d blogueros les gusta esto: