photo credit: NatBat

Codificar en javascript siempre ha sido disgustante y fascinante la vez. Disgustante cuando te das cuenta que estas gastando demasiado tiempo haciendo debugging. Y fascinante cuando finalmente logras tu objetivo.

Cuando le sumas el problema de incompatibilidad entre navegadores y sus versiones llegar a ser muy desazonante.

Ya no más. Hace un par de trabajos en que vengo usando jQuery para:

1.- Cargar asincrónicamente (AJAX) un elemento SELECT con la lista de ciudades apropiadas a medida que se intercambia entre estados de USA.
2.- Realizar suaves desplazamientos entre secciones de una misma página a medida que el usuario los va completando.
3.- Permitir al usuario ordenar una lista de palabras simplemente arrastrando y soltando las filas de la tabla que los contiene (plugin jquery.tablednd)

Para esto no he tenido más que modificar algunos scripts encontrados por ahí o hacer rápidas consultas a la excelente documentación http://docs.jquery.com/ disponible con abundantes ejemplos y demos con sus códigos fuentes a la vista.

Esto no quiere decir que sea una herramienta para principiantes. jQuery hace uso de muchos conceptos y tecnologías. Principalmente:

1.- Programación orientada a objetos –OOP.
2.- Modelo del objeto documento –DOM.
3.- Hojas de estilo en cascada -CSS.

Un conocimiento más que básico en CSS (en especial el uso de selectores) es mandatorio para poder aplicar los métodos de jQuery a los nodos apropiados dentro del árbol jerárquico de un documento HTML.

Si eres principiante no quisiera quitarte las ganas de aprender a usar jQuery, sino todo lo contrario. Si has editado algún archivo con extensión .js y algún otro con extensión .css es suficiente para comprender código jQuery.

Existen también otras bibliotecas dedicadas a lo mismo. Fíjate en el éxito que ha tenido jQuery:

prototype javascript jquery javascript yui javascript mootools javascript scriptaculous javascript

Fuente: http://google.com/trends –compara cantidad de búsquedas en google

Muy bien, como vemos esta biblioteca –o framework– es bastante poderosa y con tanto futuro que vale la pena aprender a usarla completamente. Voy a continuar escribiendo posts basados en la mejor documentación que encuentre y en mi propia experiencia.

Tutoriales recomendados para javascript y CSS:

Antes de iniciarte en jQuery, asegurate de saber muy bien lo que se ve en las siguientes (y concisas) páginas:

Programación orientada a objetos (OOP) con Javascript –contiene gatos
Principios básicos de CSS
Selectores básicos
Selectores avanzados

(Este posts está basado en una presentacion powerpoint hecha por Marc Grabanski)

jQuery es una biblioteca javascript diseñada para ocultar los penosos asuntos de incompatibilidades entre navegadores web al tiempo que entrega una solida y reutilizable API (Application Programming Interface).

Nota: Para usar jQuery es necesario saber lo básico de CSS (Cascade Style Sheets)

Evolución de las principales bibliotecas javascript

prototype javascript jquery javascript yui javascript mootools javascript scriptaculous javascript

Fuente: http://google.com/trends –compara cantidad de búsquedas en google

Filosofía tras jQuery

Simplificar la interacción entre HTML y javascript, es decir:

1.- Encontrar algo en HTML
2.- Hacer algo con él

Por ejemplo:

1.- Encontrar todos los elementos div
2.- Agregarles la clase foo

Método Factory de jQuery

Esencialmente lo que hace jQuery es proveer un objecto llamado jQuery() mediante el cual podemos acceder a todas las funciones que provee la biblioteca. Estas funciones son los métodos del objeto jQuery.

Nota: $() es un alias de jQuery().

Encontramos elementos HTML pasando los selectores CSS apropiados a $()

También podemos encadenar selectores:

Aquí estamos llegando a todas las tablas que se encuentran dentro de todos los elementos con clase “myClass”. A su vez estos elementos con clases “myClass” deben estar dentro de un elemento con id “myId”.

Nota: Los identificadores id deben ser únicos en cada documento.

Ejemplos de selectores

La gran variedad de selectores con sus modificadores permiten llegar hasta el último rincón de un documento HTML.

Ejemplos en vivo de selectores en jQuery

Visita http://codylindley.com/jqueryselectors/

Más sobre el método Factory de jQuery

También podemos pasar a $() una función para ser ejecutada una vez que la página se haya cargado:

Nota: Esto es esencialmente lo mismo que:

Esta útima forma es la más vista en Internet. Quizás porque explícitamente indica que se ejecutará cuando el DOM (Document Object Model) se haya cargado completamente –documento listo: $(document).ready(…)

Como una primera aproximación a jQuery veremos una presentación muy clara y concisa hecha por Marc Grabanski.

Fuente: http://marcgrabanski.com/article/jquery-essentials-presentation-minnewebcon