Hacer que la web sea interactiva: una introducción a jQuery

Anuncio

jQuery es una biblioteca de secuencias de comandos del lado del cliente que casi todos los sitios web modernos utilizan: hace que los sitios web sean interactivos. No es la única biblioteca de Javascript, pero es la más desarrollada, más compatible y más utilizada. Es uno de los componentes básicos de cualquier sitio web moderno. Pero, ¿qué es exactamente jQuery, qué lo hace tan popular y por qué debería importarle si está comenzando como desarrollador web?

¿Qué es jQuery?

jQuery es una extensión de Javascript, una biblioteca de Javascript funciones y utilidades que agregan un toque visual y hacen que las funciones avanzadas sean simples de implementar en solo unas pocas líneas de código. Es compatible con todos los navegadores y de código abierto. Además, también puede ampliar la funcionalidad de jQuery con complementos fáciles de usar.

jQuery está construido sobre Javascript, pero agrega métodos y funcionalidades que no se encuentran en Javascript puro. Fue creado para simplificar el uso de Javascript y eliminar las molestias relacionadas con diferentes implementaciones de Javascript en diferentes navegadores. Con jQuery solo puede escribir una vez, y jQuery interpretará su código correctamente para cualquier navegador.

La función principal de jQuery es la manipulación del DOM (DOM es el Modelo de Objetos del Documento), y significa la estructura subyacente de cualquier página web que visite. Todo lo que ves en la página, y muchos que no ves, están representados en el DOM.

jQuery no es la única biblioteca de Javascript, pero es la más popular: aproximadamente el 55% de los principales 10,000 sitios web la utilizan. Prototipo, MooTools y Scriptaculous son alternativas populares, pero no tan compatibles.

Lado del cliente vs Lado del servidor

La mayoría de las páginas web se generan en el lado del servidor: MakeUseOf utiliza PHP y MySQL (en forma de WordPress) para obtener los datos del artículo de una base de datos y luego aplicar una plantilla a esos datos. La página resultante se envía a su navegador, se interpreta y se le muestra. Al hacer clic en un enlace, se realiza otra solicitud a la base de datos y se genera otra página. Pero, ¿qué pasa si quieres crear algún tipo de interactividad en la página? Un formulario que verifica qué escribe el usuario (como Twitter, que cuenta cuántas letras le quedan), un botón que muestra un cuadro de diálogo, o tal vez desee cargar más datos sin volver a cargar todo ¿página?

Aquí es donde secuencias de comandos del lado del cliente entra en juego. Ahí es donde el cliente, su navegador, hace el trabajo pesado. La mayoría de los sitios web, incluido este, usan un poco de ambos.

¿Por qué usar jQuery?

Estilo visual

jQuery le permite cambiar partes de la página web en respuesta a las acciones del usuario. Como un ejemplo rápido, haga clic en este enlace - cada enlace en la página cambiar a rojo. ¿Inútil? Quizás, pero entiendes el punto. Las presentaciones de diapositivas de imágenes son un uso común de jQuery. Equilibrar efectos visuales inútiles y adiciones realmente útiles a la experiencia del usuario es parte de la habilidad de ser un desarrollador web.

Aquí está un lista rápida de algunos efectos realmente impresionantes que puedes lograr.

Eventos fáciles

Casi todo el software funciona en un modelo de evento: haga clic en algo y se activará un evento de clic. Arrastre el dedo por una tableta y se activará un evento de arrastre. Las aplicaciones "escuchan" estos eventos y hacen algo: jQuery le permite hacer esto en un navegador.

Realizar AJAX simplemente

Javascript asíncrono y XML es una forma de comunicarse con un servidor remoto sin tener que cargar otra página. Un buen ejemplo de esto es el flujo de estado de Facebook. Intenta desplazarte por todas tus actualizaciones hasta llegar al final. No puedes Tan pronto como llegues al final, jQuery detecta que estás cerca y envía una solicitud AJAX para que se muestren más estados.

Luego los inyecta en la página actual, sin que te des cuenta. Obtiene un flujo infinito de actualizaciones, pero no todas están cargadas al principio.

Interfaces de usuario avanzadas

Junto con jQuery UI complemento central, puede crear aplicaciones web completas utilizando componentes de formulario estándar; barras de progreso, controles deslizantes, botones, pestañas, arrastrar y soltar: todo está ahí. Un sistema de temas simple le permite personalizar la apariencia, o puede usar uno de los valores predeterminados.

¿Debería importarme?

Si tiene algún interés en absoluto desarrollo de sitios web Qué lenguaje de programación aprender: programación webHoy vamos a echar un vistazo a los diversos lenguajes de programación web que impulsan Internet. Esta es la cuarta parte de una serie de programación para principiantes. En la parte 1, aprendimos lo básico de ... Lee mas , entonces sí, jQuery es algo que definitivamente debes aprender. Si alguna vez te has preguntado "¿Cómo puedo hacer que X haga Y cuando el usuario hace Z?", entonces te va a encantar jQuery. Agregarlo a su sitio es tan simple como agregando un enlace en el encabezado; o decirle a WordPress que lo cargue.

¿Te gustaría aprender jQuery? Háganos saber en los comentarios y veré qué puedo hacer.

Créditos de imagen: Cartelera rotatoria dinámica creada usando jQuery, PistolSlut.com, Gráfico hecho con jQuery