Introducción a jQuery – Parte 1

Agregar interactividad a las páginas web ha sido simplificado dramáticamente gracias a JQuery, El framework más popular de JavaScript. Las razones de la popularidad de jQuery pueden resumirse en:

• Escribes menos código, lo que en JavaScript te tomaría cerca de 20 líneas, con jQuery puedes lograrlo en 2 o 3 líneas.
• El mismo código corre en todos los navegadores, no es necesario escribir un código especial para Internet Explorer
• Usa selectores CSS, aprovechando el  conocimiento  que la mayoría de los diseñadores web tiene.

Dreamweaver CS5.5 ahora tiene soporte completo con sugerencias de código (code hinting) para jQuery, haciendo que su uso sea aun más fácil.

Este tutorial es una introducción a los conceptos básicos de jQuery

Nota: En este tutorial se asume que haces uso de Dreamweaver CS5.5 Puedes seguir el tutorial con cualquier versión de Dreamweaver o editor de texto, pero no tendrás los beneficios de sugerencias de código (code hinting). Solo copia el código terminado al final.

¿Qué es jQuery?

De acuerdo al sitio web de jQuery, “jQuery esta diseñado para cambiar la manera en que se escribe código JavaScript”.  No solo ha hecho esto, se ha logrado algo aún más impresionante, ha animado a un gran número de diseñadores web a comenzar a escribir su propio código en lugar de copiarlo de dudosas fuentes. jQuery es lo que se conoce como  una librería JavaScript, pero no es del tipo de librerías que esta llena con filas y filas de libros. Es un archivo relativamente pequeño (84kb sin comprimir) que contiene docenas de funciones (métodos) de JavaScript diseñadas para simplificar el trabajo con JavaScript. Simplemente ligas tu página web al archivo y usas los métodos de jQuery para agregar interactividad a tu sitio web.

JavaScript es un lenguaje muy potente,  pero hay dos obstáculos importantes para su uso:

1. JavaScript fe desarrollado originalmente por Netscape, el archirrival de Internet Explorer durante la guerra de los navegadores en los 90’s. Aunque Internet Explorer adopto rápidamente el lenguaje (su versión oficial se llama JScript), hay diferencias fundamentales en ciertas áreas, como el manejo de eventos. Hacer scripts que funcionen en todos los navegadores generalmente implica rescribir mucho código.
2. La interactividad consiste en agregar y quitar elementos de una página o afectar los estilos que tengan. Los métodos oficiales para hacer esto, usando el Documento de Modelo de Objetos del consorcio World Wide Web (W3C DOM), son bastante engorrosos.

Las librerías de JavaScript destinados a resolver estos dos problemas comenzaron a surgir alrededor de 2005. Los primeros en ganar un uso generalizado fueron Prototype y Script.aculo.us. Otras librerías conocidas son Dojo Toolkit, Moo Tools,  Yahoo! UI Library y el Adobe Spry framework.  Todos tienen los objetivos básicos de jQuery: proporcionar a todos los navegadores de herramientas para añadir interactividad a sus páginas. Así que, ¿por qué elegir jQuery sobre los demás?

• jQuery funciona en todos los navegadores actuales incluyendo Internet Explorer 6+, Firefox 2+, Safari 3+, Chrome, and Opera 9+.
• Es de código libre licenciado a la vez con MIT License y GNU General Public License
• Se estima que tres de cada cuatros sitios web con JavaScript han adoptado jQuery.
• Empresas líderes usan jQuery como Amazon.com, Bank of America, BBC y Twitter.
• Y además es relativamente fácil de aprender.

Adobe se ha convertido en patrocinador oficial de jQuery Mobile, un nuevo framework para el desarrollo de aplicaciones móviles, que esta basado en la librería core de jQuery y los ingenieros de Dreamweaver han contribuido activamente al código del proyecto.

Como obtener jQuery

Aunque Dreamweaver CS5.5 tiene sugerencias de código para todo jQuery, es necesario ligar tus páginas web a la librearía core de jQuery. Hay dos maneras de hacer eso:

• Ligar a la última versión de la librería hospedada en un “Content Distribution Network (CDN)”
• Descargar una copia de la librería y almacenarla con los archivos de tu sitio.

Los detalles de ambos métodos puedes encontrarlos en la documentación de jQuery

Para propósitos de este tutorial, recomendamos trabajar con la versión local de jQuery. Los archivos de ejemplo contienen una copia de jQuery 1.5.2, que era la versión actual al momento de escribir este tutorial. Si hay una nueva versión solo reemplaza los archivos.

Nota: La página de descarga del sitio de jQuery tiene links para versiones mínimas y descomprimidas. Ambas contienen el mismo código, pero en  la versión mínima se quitaron todos los espacios en blanco para lograr un archivo de menor peso. Cuando haces click en el link de descarga, el archivo normalmente se abre en tu navegador.  Selecciona el menú Archivo > Guardar como… para guardar el archivo en tu disco duro.

Preparando los archivos del tutorial

Si aun no lo haz hecho, descarga jquery.zip y descomprímelo en una carpeta junto a los archivos de este tutorial. Todos los archivos están la carpeta llamada jqtut. Crea un nuevo sitio de Dreamweaver con la carpeta jqtut como raíz del sitio. Alternativamente copia los archivos de la carpeta jqtut en algún sitio existente de Dreamweaver y trabaja en esa carpeta.

Ligar e inicializar jQuery

Por muchos años, la practica recomendad ha sido vincular archivos externos de JavaScript en el <head> de la página web. Sin embargo, todo el código de JavaScript necesita ser procesado antes de que el resto de la página continúe cargando.

En consecuencia, ahora es recomendado adjuntar archivos de JavaScript externos justo antes  de cerrar la etiqueta </body> a menos que la página dependa de código que deba ser cargado previamente. Hacer esto resulta en páginas que cargan más rápido.

1. Abrir jq_01.html de la carpeta de archivo de ejemplos jqtut y cambiar a la vista de código o a la vista dividida.
2. Ubica tu cursor en el punto de inserción inmediatamente antes de la etiqueta de cierre </body> y haz click en Script en la categoría Común del panel insertar o a través del menú Insertar > HTML > Script Objects > Script.
3. En la ventana de diálogo Script, hacer click en el icono en forma de carpeta, ir a la carpeta js y seleccionar el archivo jquery-1.5.2.min.js.  Si descargaste una versión reciente de jQuery, selecciona esa en su lugar. Haz click en OK. El nombre del archivo debe aparecer listado en la ventana de diálogo Script como se muestra en la Figura 1.
   
   
   ^{Figura 1. Seleccionar la librería de jQuery.}
4. Click en OK para cerrar la ventana.  La librería debe aparecer ahora ligada a tu página justo antes de la etiqueta de cierre </body>como se muestra en la Figura 2.
   
   ^{Figura 2. La ubicación recomendada la librería jQuery es justo antes de la etiqueta de cierre </body>}
5. Guarda la página.

Agregar la librería jQuery a la página no hace nada por si sola. Simplemente pone los métodos de jQuery disponibles para tus scripts que vienen después de haber vinculado la librería.

 

Creando manejadores para inicializar documentos

Antes de que comiences a interactuar dinámicamente con tu página web, el browser necesita cargar el HTML y construir la estructura del DOM. Tradicionalmente JavaScript usa el evento onload para inicializar los scripts. Sin embargo, esta espera que todos los recursos de la página, incluyendo las imágenes, terminen de cargar antes de hacer otra cosa. Para acelerar este proceso, jQuery usa su propio manejador de documentos cuando están listos.

Hay diferentes formas de crear manejadores de documentos, pero en este tutorial  voy a mostrar la versión corta. Este es la manera más simple y común de hacerlo.

1. Continua trabajando con el mismo archivo. Alternativamente usa jq_02.html
2. Inserta algunas líneas entre el elemento <script> existente y la etiqueta de cierre </body>
3. Agrega las etiquetas <script></script>  en el espacio que acabas de crear.
4. Dentro de del nuevo bloque escribe $(function() {.
5. Pulsa la tecla enter un par de veces para agregar dos líneas nuevas. Ahora escribe un símbolo de llave que cierra seguido de un paréntesis que cierra y un punto y coma. Los dos bloques de <script> al fondo de tu página deben verse de la siguiente manera:
   &lt;script type="text/javascript" src="js/jquery-1.5.2.min.js"&gt;&lt;/script&gt;<br/> &lt;script&gt;<br/> $(function() {<br/> });<br/> &lt;/script&gt;

   1 2 3 4 5

   &lt;script type="text/javascript" src="js/jquery-1.5.2.min.js"&gt;&lt;/script&gt;<br/> &lt;script&gt;<br/> $(function() {<br/> });<br/> &lt;/script&gt;

   Todo el código JavaScript que necesites ejecutar al cargar la página debe ir dentro de las llaves de la función.

Guardar funciones como fragmentos reusables

El código que acabamos de hacer es código que se usa regularmente con jQuery, por lo que podemos guardarlo para poder reusarlo.

1. Selecciona el código completo que acabas de crear.
2. Haz click derecho y selecciona crear nuevo fragmento (o snippet) desde el menú contextual.
3. Escribe  jQuery Document Ready Handler en el campo nombre del cuadro de diálogo.
4. Dreamweaver copia el código seleccionado en el apartado de “Insertar antes”.
5. Haz click dentro del espacio del método y selecciona el código que hay después y córtalo.
6. Pega el código cortado en el apartado de “insertar después”. La ventana con el código debe verse como en la Figura 3.
   ^{Figura 3. Los métodos de jQuery que inicializan documentos son usados a menudo por lo que vale la pena guardarlo como un fragmento de código.}
7. Click en OK para guardar el fragmento.

Cuando necesites insertar este fragmento solo coloca tu cursor en el punto de inserción y haz doble click en el fragmento deseado del panel de fragmentos.

 

Agregar párrafos dinámicamente

Para demostrar como trabaja jQuery, este ejercicio agrega párrafos dinámicamente a la página cuando se carga. Es cierto, no es el uso más práctico de jQuery, pero ilustra dos características esenciales: Seleccionar elementos y usar métodos de jQuery.

1. Continua trabajando con el mismo archivo o usa jq_02.html
2. En el espacio en blanco dentro del método que habías creado, escribe el símbolo de dólar seguido de un paréntesis que abre. Dreamweaver CS5.5  te dará sugerencias de código jQuery. (ver Figura 4)
   
   ^{Figura 4. Dreamweaver ofrece consejos de código jQuery a medida que escribes.}
3. Las dos primeras líneas ofrecidas son para el documento, que aplican a todo el documento que es el destino del evento. Tampoco es apropiado para el ejercicio,  pero escribe una comilla (no importa si es simple o doble).Dreamweaver automáticamente agrega la comilla que cierra y despliega una lista de sugerencias de código para elementos HTML (ver Figura 5).
   
   ^{Figura 5. Cuando escribes una comilla, las sugerencias de código despliegan elementos HTML}
4. Para seleccionar la etiqueta <body>solo escribe las letras bo y pulsa la tecla enter. Dreamweaver completa el nombre de la etiqueta y deja el cursor antes de la comilla de cierre. jQuery usa selectores CSS para seleccionar elementos de una página por lo que Dreamweaver no puede decir si vas a refinar la selección. En este caso ya has terminado. Mueve tu cursor a la derecha de la comilla de cierre y escribe un paréntesis que cierra. El código ahora se ve de la siguiente manera:
   $(function() {<br/> $('body')<br/> });

   1 2 3

   $(function() {<br/> $('body')<br/> });

   Esta es la manera en como jQuery selecciona el elemento <body> de la página

5. Después de seleccionar uno o más elementos de la página ya puedes aplicarle métodos de jQuery. Para agregar nuevos elementos de HTML a los elementos seleccionados debes usar el método append() y pasarle los nuevos elementos como argumentos. Escribe un punto después de  $('body'). Dreamweaver CS5.5 muestra sugerencias de código de todos los métodos de jQuery que pueden ser aplicados al o los elementos seleccionados. Selecciona el método append()y pasa una cadena de texto tipo HTML como esto:
   $(function() {<br/> $('body').append('&lt;p&gt;This paragraph was added dynamically.&lt;/p&gt;');<br/> });

   1 2 3

   $(function() {<br/> $('body').append('&lt;p&gt;This paragraph was added dynamically.&lt;/p&gt;');<br/> });

6. Guarda la página y revísala en un navegador en el Live View. El nuevo párrafo ha sido agregado a la página (ver Figura 6).
   
   ^{Figura 6. El HTML pasado como argumento al método append() ha sido agregado a la página}
   
   Puedes revisar tu código si es necesario con el archivo jq_03.html

Como una forma de comparar el archivo dom_01.html en los archivos de ejemplo produce el mismo resultado usando JavaScript estándar y los métodos de creación de elementos recomendados por la W3C DOM. El bloque <script> en la sección <head> de la página se ve de la siguiente manera:

Estamos de acuerdo que hacer esto con jQuery  es mucho más simple y fácil de entender. Sin embargo, no pienses que usar jQuery es como hacer trampa. Lo que jQuery hace en el fondo es usar JavaScript  estándar. Esconde la complejidad y ayuda a preservar tu salud mental.
En nuestra siguiente entrega revisaremos más a fondo el uso de los métodos de jQuery, como encadenarlos, como ligarlos a eventos de elementos HTML y como pasarle argumentos

[Descargar código de ejemplo]

Recuerda que en Activ tenemos un curso de jQuery con el cual podrás llevar tu conocimiento de JavaScript a otro nivel.

Este artículo lo compartimos aquí bajo licencia Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License, la versión original puedes encontrarla en este link.