En este artículo encontrarás el resumen y las grabaciones de las clases "Aprende jQuery" dedicadas a la manipulación del DOM y el trabajo con Ajax desde jQuery. Son dos clases de temas separados, pero que fueron impartidas el mismo día en dos sesiones contiguas, en riguroso directo en DesarrolloWeb.com / EscuelaIT, previos al comienzo del curso completo de jQuery.

Te ofrecemos todos los materiales generados durante estas sesiones, tanto el vídeo de la grabación, las diapositivas y los ejemplos, junto con un resumen en texto del contenido ofrecido. Si te gustan los vídeos y los encuentras útiles no dejes de compartirlos y darle al "me gusta". Muchas gracias.

Estos vídeos te darán una buena idea de lo que puedes hacer cuando usas jQuery a un nivel básico. Vemos algunas de las funciones más representativas con ejemplos realizados en vivo que te guiarán paso a paso. Te recomendamos ponerte delante del editor de código que uses en tu día a día y practicar a la vez que ves el vídeo con las cosas que se están haciendo y verás hasta qué punto es sencillo comenzar con jQuery.

Bloque 1: Manipulación del DOM de la página

Comenzamos revisando nuestros conocimientos de Javascript, en concreto con la pregunta sobre qué es el DOM de la página. Document Object Model, o modelo de objetos del navegador. Contiene modelizados en objetos todos y cada uno de los elementos que existen dentro de una página web, a los que podemos acceder para leer o modificar sus propiedades, de modo que analizaremos o cambiaremos el estado de la página.

A continuación revisamos cómo se accede al DOM mediante Javascript y cómo se accede con jQuery, más que nada para comprobar hasta qué punto jQuery nos permite un acceso más sencillo a los elementos de la página y usando selectores de CSS que posiblemente ya conozcas bien gracias a tu dominio del lenguaje de estilo en cascada.

Después de un poco de teoría, nos ponemos manos a la obra con un par de ejemplos, uno simplemente para practicar el acceso al DOM y luego otro ejemplo un poco más avanzado para hacer una caja de diálogo sencilla y personalizada simplemente con Javascript jQuery. En realidad es un ejemplo meramente didáctico porque hacemos una caja de diálogo muy simple, con un código que podríamos tomar de base para mejorarlo y hacer algo que realmente pudiera ser usable en un proyecto real para implementar una alternativa a las feas cajas "alert".

Durante esta clase practicamos con una buena lista de métodos del API de jQuery, como html() para cambiar el código HTML que tiene como contenido un elemento, appendTo(), append() y prepend() para insertar nuevos elementos en el DOM, remove() para eliminar elementos del DOM, etc.

Puedes ver los ejemplos que se crearon durante la clase en GitHub. Primer ejemplo para practicar el acceso al DOM y segundo ejemplo con un ejercicio de una caja de diálogo (fíjate que en este segundo ejemplo el código Javascript está en un archivo js aparte).

Las diapositivas las puedes obtener también del repositorio de código de los ejemplos realizados.

La grabación la encuentras en el vídeo a continuación.

Bloque 2: Ajax con jQuery

La segunda clase del día se dedicó a jQuery y Ajax, para demostrar una de las mayores utilidades de la librería, como es la de solicitar asíncronamente contenido al servidor y alterar el contenido de la página con las respuestas que se reciban.

Comenzamos el vídeo explicando qué es Ajax, una tecnología que se encuentra presente en la mayoria de los sitios de la web que usas en tu día a día, Google, Gmail, Outlook, Facebook, Twitter, etc. usan Ajax de manera intensiva, por poner tan solo unos ejemplos representativos.

Luego vemos cómo puede llegar a ser sencillo Ajax cuando usamos jQuery, remarcando que Ajax en realidad es algo que trae Javascript, solo que programar un comportamiento Ajax en Javascript nativo puede ser doloroso y complicado, pero sobre todo poco vialble porque tendríamos que hacer código compatible con diversos navegadores. Es mucho más útil y agradecido dejarle la parte aburrida a jQuery, de comprobar el navegador y ejecutar un Javascript que funcione bien en cada caso.

Sólo a modo ilustrativo y como curiosidad mostramos un código para hacer Ajax antes de que existiera jQuery. Es obvio a que cualquiera de nosotros nos gustaría apoyarnos en la librería Javascript porque nos simplifica mucho la vida.

jQuery tiene un tratamiento del Ajax extremadamente sencillo, ya que te permite escribir una solicitud Ajax con una única línea de código. Esto es con la función load(), aunque si usas otros métodos más avanzados quizás tengas que escribir más líneas. Al final todo depende de lo que necesites personalizar tu script.

En el vídeo usamos los métodos de Ajax load(), que es el de más alto nivel (más cercano al lenguaje de las personas y más lejano al lenguaje máquina), y $.post() que es un shorcut que permite enviar contenidos al servidor usando el método "POST" y recibir la respuesta. Además explicamos cómo mostrar el típico mensaje de carga Ajax mediante los eventos globales ajaxStart y ajaxComplete.

El código de los ejemplos lo encuentras en GitHub.

Las diapositivas también están en el mismo repositorio, simplemente puedes descargar el repo completo y verás la carpeta que contiene los PDF de las diapositivas.

El vídeo de la clase lo encuentras a continuación.

Conclusión

Con estas dos sesiones terminan las clases en abierto "Aprende jQuery". Continuaremos trabajando para ver todo esto y mucho más, de una manera detallada en el Curso completo de jQuery en el que ojalá contemos con tu presencia.