Haciendo la web interactiva una introducción a jQuery

jQuery es una biblioteca de scripts del lado del cliente que utiliza casi todos los sitios web modernos; hace que los sitios web sean interactivos. No es la única biblioteca de Javascript, pero es la más desarrollada, la más compatible y la más utilizada. Es uno de los bloques de construcción de cualquier sitio web moderno. Pero, ¿qué es exactamente jQuery, qué lo hace tan popular y por qué debería preocuparse si está comenzando como desarrollador web??

Que es jQuery?

jQuery es una extensión de Javascript, una biblioteca de funciones y utilidades de Javascript que agrega un toque visual, y hace que las funciones avanzadas sean fáciles 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 jQuery con complementos fáciles de usar.

jQuery está construido sobre Javascript, pero agrega métodos y funcionalidad 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 para la manipulación de DOM (DOM es el Modelo de objeto de documento), y significa la estructura subyacente de cualquier página web que visite. Cada cosa que ve en la página, y muchas que no ve, está representada en el DOM.

jQuery no es la única biblioteca de Javascript que existe, pero es la más popular: alrededor del 55% de los 10.000 sitios web más importantes la utilizan. Prototype, 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 usa 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 muestra ante usted. 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 lo que escribe el usuario (como Twitter, que cuenta cuántas letras le quedan), un botón que abre un cuadro de diálogo, o quizás desee cargar algunos datos más sin volver a cargar toda la página?

Aquí es donde scripting 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, utilizan 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 rapido, 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 imágenes son un uso común de jQuery. Equilibrar efectos visuales sin sentido y adiciones realmente útiles a la experiencia del usuario es parte de la habilidad de ser un desarrollador web.

Aquí hay una 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 activa un evento de clic. Arrastre el dedo por una tableta y se activará un evento de arrastre. Aplicaciones “escucha” para estos eventos y hacer algo - jQuery te permite hacer esto en un navegador.

Realice 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 que llegues al final. Usted no puede Tan pronto como llega al final, jQuery detecta que está cerca y envía una solicitud AJAX para que se muestren más estados..

Luego los inyecta en la página actual, sin que usted se dé cuenta. Obtienes un flujo infinito de actualizaciones, pero no todas se cargan al principio.

Interfaces de usuario avanzadas

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

Debería importarme?

Si tiene interés en desarrollar sitios web Qué lenguaje de programación aprender - Programación web Qué lenguaje de programación aprender - Programación web Hoy vamos a echar un vistazo a los distintos lenguajes de programación web que impulsan Internet. Esta es la cuarta parte en una serie de programación para principiantes. En la parte 1, aprendimos lo básico de ... Leer más, luego sí, jQuery es una cosa que definitivamente necesitas aprender. Si alguna vez te has preguntado “¿Cómo puedo hacer que X haga Y cuando el usuario hace Z??”, entonces vas a amar a jQuery. Agregarlo a su sitio es tan simple como agregarle un enlace en el encabezado; o diciendo 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 rotativa dinámica creada con jQuery, PistolSlut.com, gráfico hecho con jQuery