En este articulo, aprenderas las bases para un desarrollo con JavaScript, con una de las librerias más populares disponibles: jQuery.

Aunque existen muchos tutoriales en linea que te pueden dar un punto de partida bastante bueno para el desarrollo con jQuery, en este articulo espero ir más alla que un simple inicio rapido y en lugar de eso, proporcionar una solida descripción general de jQuery y discutir los beneficios de utilizar esta libreria.

¿Porque una libreria de JavaScript?

Para citar el slogan oficial de jQuery: “Escirbe menos, haz más.” El papel de un desarrollador web es crear código que resulte en una interacción del usuario en una página web. Desarrolladores web no deberian gastar horas depurando peculiaridades de los exploradores. En vez de eso, deberian ser libres para tratar unicamente con las acciones y resultados. Aqui es donde la libreria de JavaScript entra en juego.

Superar las diferencias de los exploradores

Diferentes exploradores manipulan el DOM de diferentes formas, requiriendo, en algunos casos, demasiado código para crear un simple efecto. Usar una libreria de JavaScript nos permite completamente saltarnos todos esos desafios, dandonos accesos a un API que trata directamente con las tareas que deseas lograr. Todos los desafios y cuestiones comunes a JavaScript son tratados detras de escenas, permitiendo integrar funcionalidad sin preguntarnos si funcionara ó no en un explorador en particular.

JavaScript no intrusivo

Otra razón para impulsar el uso de una libreria de JavaScript es que todas las librerias te permiten incluir JavaScript en tus páginas sin ser intrusivo.

Implementación de tareas complejas con facilidad

Finalmente, una caracteristica muy poderosa de cualquier libreria de JavaScript es la habilidad de manipular cualquier elemento o conjunto de elementos en una página web con solo unas lineas de código. Por ejemplo, el siguiente HTML:

<div class="contenedor">
  <ul class="lista">
    <li>Texto aqui</li>
    <li>Texto aqui</li>
    <li>Texto aqui</li>
    <li>Texto aqui</li>
    <li>Texto aqui</li>
  </ul>
</div>

Digamos que queremos usar JavaScript para cambiar el color de fondo del primer elemento de la lista (li). Utilizando JavaScript puro, tu código seria como este:

var miColeccion = document.getElementsByTagName("ul");
  for (var i = 0; i < miColeccion.length; i++) {
    if (miColeccion[i].className === "lista") {
      miColeccion[i].childNodes[0].style.backgroundColor = "blue"
    }
  }

Usando jQuery, puedes lograr lo mismo con solo una, fácil de mantener, linea de código:

$("ul.lista li:first-child").css("background-color", "blue");

Entender los conceptos CSS

Un área que es realmente poderosa en el desarrollo con jQuery, es el profundo conocimiento de CSS. La razón de esto es porque jQuery a menudo utiliza la sintaxis basada en CSS para manipular los elementos del documento. Aqui estan algunos conceptos con los que deberias hacerte familiar antes de entrar en el desarrollo con jQuery:

• Selectores de tipo
• Selectores por clase
• Selectores por ID
• Selectores descendentes
• Selectores “hijos”
• Selectores por atributo
• Especificos de CSS
• El termino cascada y herencia

Muchas de los conceptos CSS anteriores deberian ser muy familiares para cualquier desarrollador moderno, ya que cualquier diseño los utiliza. jQuery no solo incorpora los selectores basicos (tipo, class y ID), tambien usa los selectores descendientes e “hijos”, que no son soportados por todos los exploradores actuales. Pero con jQuery, debido a la normalización que incorpora para los exploradores, todos los selectores son soportados de igual manera.

Comprender los conceptos de JavaScript

Con el fin de hacer un uso completo de jQuery, es buena idea aprender ciertos conceptos de JavaScript. Si bien es cierto que puedes hacer mucho con jQuery sin conocer mucho acerca de los conceptos presentados más abajo, pero tendras una gran ventaja en el desarrollo con jQuery si te tomas el tiempo para entender algunos conceptos fundamentales, incluyendo:

• Creación de objetos
• Propiedades de los objetos
• Objetos literales
• Funciones y métodos
• “Closures”

De nuevo, no es necesario comprender completamente alguno de los conceptos anteriores con el fin de empezar a trabajar con jQuery, pero tus habilidades con el API de jQuery se incrementaran en gran medida si entiendes uno o más de los conceptos anteriores.

El código fuente de jQuery

Antes de empezar con cualquier desarrollo en jQuery, primero necesitas descargar la ultima versión de jQuery e incluirla en tus páginas:

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

La linea anterior de código HTML debe aparecer antes de cualquier código jQuery, de lo contrario obtendras errores.

Alternativamente, en vez alojar el código fuente en tu servidor, puedes ligar directamente la versión más reciente utilizando el servidor de librerias de google que puede ahorrarte algunos recursos en el servidor.

Sintaxis de jQuery

Ahora que ya tienes una descripción general de los beneficios de jQuery, con una cierta comprensión de los conceptos involucrados. Echemos un visazo a la sintaxis para iniciarnos con esta poderosa libreria.

El contenedor de jQuery

El contenedor de jQuery es la funcion que esta en el núcleo de todos los comandos jQuery. Lo he usado en uno de los ejemplos anteriores. Aqui esta de nuevo:

$("li a");

El simbolo $ es un alias para la función de jQuery, por lo que la anterior linea de código como alternativa puede escribirse asi:

jQuery("li a");

Pero, por obvias razones (para mantener el código conciso), rara vez veras esta sintaxis.

La funcion jQuery que se muestra en los dos ejemplos anteriores devuelven un objeto que contienen un arrelgo con los elementos del DOM especificados dentro de los paréntesis (en este caso, todas las etiquetas anclas (a) que estan anidadas dentro de las etiquetas li). Por supuesto, en los dos ejemplos anteriores, no hemos especificado una acción; lo unico que estamos haciendo es devolver esos elementos del DOM, que no hacen nada. En la siguiente sección, vamos agregar métodos que desempeñaran una acción en un grupo de elementos que seleccionemos.

Los métodos ó comandos de jQuery

El API de jQuery incluye fácil acceso a efectos y otras acciones a traves de los métodos incorporados que normalmente toman docenas de lineas de código para lograr que funcione en todos los exploradores con solo JavaScript nativo. Por ejemplo agreguemos el método fadeOut (desvanesimiento) al código, tomando como referencia los ejemplos anteriores:

$("li a").fadeOut();

La linea de código anterior desvanese todas las etiquetas anclas (a) en la página que estan anidadas dentro de las etiquetas li. Si queremos que aparezcan todas las anclas anteriores de nuevo, solo usamos el método fadeIn():

$("li a").fadeIn();

Encadenamiento de comandos

jQuery tambien permite a los desarrolladores encadenar comandos, uno sobre otro. Asi que podemos combinar los dos ejemplos anteriores, de la siguiente manera:

$("li a").fadeOut().fadeIn();

El código anterior desvanecerá todas las anclas anidadas dentro de las listas, despues inmediatamente las mostrara de nuevo. El número de métodos ó comandos que podemos encadenar es infinito (aunque debemos hacerlo moderadamente), ofreciendo la ventaja de trabajar en el mismo grupo de elementos, cada uno pasando en sucesión.

Esto es tan solo una muestra de lo que es posible hacer con jQuery, y lo fácil que es lograr tareas que normalmente toman demasiadas lineas de código, y muchas pruebas en diferentes exploradores. Aunque realizes pruebas en los exploradores con código jQuery, el resultado virtualmente sera el mismo (tomando en cuenta que estas utilizando los métodos de jQuery, aún así pueden existir ciertas excepeciones).

Ejecutando código cuando el DOM este listo

Anteriormente tocamos el concepto de JavaScript no intrusivo, y como jQuery es escrito para permitirnos que el código se mantenga separado del contenido y la presentación. Hasta ahora, los ejemplos de código que hemos discutido se ejecutan bien, siempre y cuando esten incluidos hasta abajo en la página HTML. Si, por otra parte, estan incluidos en el head del documento, fallaran porque, hasta este punto, el documento no ha sido cargado.

jQuery nos permite ejecutar nuestro código solo cuando el DOM este listo. Esto se hace por medio del uso de $(document).ready. La belleza de esto es que el código no espera hasta que la página este cargada por completo, que seria el caso típico del evento window.onload. Con el controlador (document).ready, tu código se ejecutara tan pronto que el DOM sea cargado por completo, antes de todas las imagenes.

Intentemos ejecutar nuestro código anterior cuando el DOM este listo:

$(document).ready(function(){
  $("li a").fadeOut().fadeIn();
});

El código anterior le dice a jQuery que ejecute una función anonima cuando el árbol del documento termine de cargar. La función anonima contiene el código que vimos anteriormente, que desvanece las anclas, inmediatamente despues las muestra de nuevo. Este código debe ser incluido en el head del documento, cerca del píe de página, ó en cualquier lugar, y se ejecutara de la misma manera.

El evento “ready” es solo uno de los muchos eventos disponibles en el API de jQuery. Otros son click, dblclick, load, blur, keydown, submit, y más.

jQuery es capaz de mucho más, solo empeze mostrando su poder y simplicidad. Pero creo que eso basta para proporcionar una buena descripción general, con algunas sintaxis basicas.

Ejemplo de como debe ser usado:

$(".selectorClass").hover(
  function(){
    $(this).stop().fadeTo("slow", 0.4);
},
  function(){
    $(this).stop().fadeTo("slow", 1);
  }
);

Esto hace que la primera función sea ejecutada cuando el ratón pasa por encima de los elementos en la página, que comparten el nombre de la clase selectorClass, y la segunda función se ejecuta cuando el ratón sale del elemento.

Puedes usar “this” dentro de las funciones, para acceder al elemento que disparo el evento.

Hover une la primera función al evento mouseenter, y la segunda al evento mouseleave, de tal manera puedes escribir como una alternativa lo siguiente:

$(".selectorClass").mouseenter(function(){
  $(this).stop().fadeTo("slow", 0.4);
}).mouseleave(function(){
  $(this).stop().fadeTo("slow", 1);
});

En la versión 1.4 de jQuery, es posible hacerlo en una simple función dentro de hover(), que llamará las 2 funciones anteriores mouseenter y mouseleave. De este modo puedes acortar el código aún más:

$(".selectorClass").hover(function(){
  this.check = this.check || 1
  $(this).stop().fadeTo("slow", this.check++%2==0 ? 1 : 0.4);
});

El ejemplo anterior incrementa this.check cada que la función es ejecutada. Dependiendo si el número es par ó non, escoge el nivel de opacidad a utilizar en fadeTo() (1 es completamente visible).

Los tres bloques de código anteriores producen el mismo resultado:

También es una gran manera de usar las funciones toggle de jQuery como .slideToggle() y .toggleClass().