Introducción a JQuery
Anuncio
Introducción a JQuery
jQuery es hoy en día, una indispensable librería javascript que
permite manejar el DOM y el Ajax de forma muy simple y directa.
jQuery lo podemos encontrar integrados en muchos recursos para el
diseño y desarrollo web, por ejemplo esta presente en Twitter
Bootstrap.
jQuery es una librería en Javacript de fuente
abierta (open source), que simplifica mucho
la creación de páginas web, sobre todo en
interfaces web que se comportan de modo muy
similar a las aplicaciones de escritorio.
Algunas ventajas de jQuery
jQuery nos provee una forma simple y poderosa de trabajar en Javacript,jQuery
nos propone una metodología de programación orientado a objetos en un flujo
controlado por eventos, donde encontramos características tales como:
Alta compatibilidad entre Navegadores: Usando jQuery podemos
desarrollar un código que no tenga que pelearse con una implementación
particular de un navegador, por ejemplo, en el trabajo con Ajax. Es
decir, trabajando con jQuery tenemos una mayor compatibilidad entre
navegadores.
Iteración Implicita: Los selectores que usamos en jQuery para
encontrar elementos en el DOM, posee iteración implicita, esto
significa que nos evita tener que estar programando bluces de código
para buscar todos elementos en el DOM que cumplen el criterio dado.
Por ejemplo, seleccionar elementos DIV del HTML con una clase CSS de
nombre PROMO se programa en una sola línea de código.
Encadenamiento de Métodos: Permite en una sola linea de código hacer
mucho más de lo que podríamos hacer usando solamente las
caracteríticas propias del Javascript. Esto es muy útil cuando
recorremos el DOM de un documento HTML, buscando un elemento
determinado. Es decir, con jQuery hacemos más con menos líneas de
código.
DOM: Cuando un navegador carga y despliega al
usuario una página web cualquiera, lo que
hace internamente es interpretar todo el HTML
de la página web y traducir a una estructura
de datos, donde el documento HTML queda
representado en un estructura de tipo árbol,
esto se denomina DOM (Document Object Model).
Obteniendo la librería jQuery
Para usar jQuery en el desarrollo de una página web, disponemos de dos (2)
alternativas:
Descargar la libreria y colocarla en nuestro sitio web.
O víncularla a algún CDN, como el de Google o de la propia página de
jQuery.
CDN: Significa Content Delivery Network.
Si elegimos descargar la librería jQuery, la podemos descargar desde:
http://jquery.com/download/
En el momento de escribir este artículo, la página de jQuery señala que hay
dos (2) tipos de versiones de la librería. Las versiones 1.x y las versiones
2.x, esta última dispone de la misma API de jQuery de versiones 1.x pero sin
soporte para Internet Explorer 6, 7 y 8.
También es posible descargar jQuery, en forma
mimificada (comprimida) o una versión nomimificada (no-comprimida). En general se
recomiendo en sitios wed en producción,
descargar una copia de la librería en su
forma comprimida para ahorrar ancho de banda
y mejorar el rendimiento del navegador.
Hacer disponible jQuery a una página web
Si hemos optado por cargar la librería directamente a nuestro sitio web y no
desde un CDN, entonces el código HTML5 de nuestra página podría tener uno de
los siguientes aspectos.
Colocando el enlace a la librería jQuery en el HEAD del HTML:
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8” />
<title>Mi página web con jQuery</title>
…
<link rel=”stylesheet” href=”estilo.css” media=”screen” />
<script src=”jquery-1.11.1.min.js”></script>
</head>
<body>
…
…
</body>
</html>
Colocando el enlace a la librería jQuery en la parte final del BODY del HTML:
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8” />
<title>Mi página web con jQuery</title>
…
<link rel=”stylesheet” href=”estilo.css” media=”screen” />
</head>
<body>
…
…
<script src=”jquery-1.11.1.min.js”></script>
…
</body>
</html>
Si usamos un CDN, como el del sitio de
jQuery, lo único que cambiaría en el código
anterior es la forma de hacer la vinculación,
en ese caso sería:
<script
src="//code.jquery.com/jquery-1.11.0.min.js">
</script>
Con lo anterior tenemos disponible jQuery, pero ahora necesitamos crear
nuestro propio código Javascript que use jQuery… Esto lo veremos a
continuación.
Usando jQuery
Para usar jQuery necesitamos escribir código Javascript. La forma tradicional
y ordenada de hacer esta tarea, es crear un nuevo archivo Javascript, por
ejemplo el archivo ‘mi_js.js’:
Entonces para usar jQuery, dentro del archivo ‘mi_js.js’, debieramos escribir
algo así:
$(document).on(‘ready’, inicializar);
//
//luego el código de la funcion inicializar
function inicializar() {
//
alert(‘Hola Mundo… desde jQuery’)
//
}
y luego debemos vincular este archivo ‘mi_js.js’ a nuestra página HTML,
quedando el código así:
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8” />
<title>Mi página web con jQuery</title>
…
<link rel=”stylesheet” href=”css/estilo.css” media=”screen” />
</head>
<body>
…
…
<script src=”jquery-1.11.1.min.js”></script>
<script src=”mi_js.js”></script>
</body>
</html>
Es muy importante colocar el enlace a nuestro
archivo CSS en una línea anterior al enlace a
jQuery. Esto es necesario, para tener acceso
al código de la definición de los estilos
CSS.
Es bastante simple la programación en Javascript, lo que si puede costar un
poco de entener en un inicio, es cuando hacemos uso de su ejecución en forma
asincrónica.
Entendiendo la programación con jQuery
Para entender jQuery, necesitamos conocer algunos rudimentos de Javascript.
Para empezar, en Javascript encontramos tres (3) objetos nativos en el
lenguaje:
navigator: Es el objeto que representa al navegador, donde están los
recursos del tipo: la Geolocalización, los acelerómetros y entre otros
(ej. el User-agent).
window: Es el objeto que representa el tab del navegador, donde están
accesibles características del tipo: la resolución de la pantalla, la
posición, etc.
document: Este es el objeto que representa a la página HTML.
Entonces, si queremos crear un objeto jQuery que use, por ejemplo, el
objeto document escribimos el siguiente código:
$(document);
Si queremos que el objeto anterior, ponga atención al evento de nombre ‘mievento’, y cuando ese evento suceda dispare una función determinada, por
ejemplo la función de nombre ‘mi-funcion’. Entonces el código anterior lo
debemos sustituir por:
$(document).on(‘mi-evento’, ‘mi-funcion’);
//
//Ahora definimos ‘mi-funcion’
function mi-funcion() {
//
alert(‘Mi primer programa usando jQuery’);
}
El método ‘on’ que vemos en el código jQuery
anterior, es un listener de eventos que es
usado desde jQuery 1.8, antes se usaba
‘bind’.
Naturalmente, el nombre del evento ‘mi-evento’ no lo tenemos definido, pero
podemos utilizar el evento que sucede cuando el navegador carga sólo el
código HTML de la página. En este caso, el código será:
$(document).on(‘ready’, ‘mi-funcion’);
//
//Ahora definimos ‘mi-funcion’
function mi-funcion() {
alert(‘Se acaba de cargar el HTML’);
}
Frecuentemente se hace mención a jQuery como
el Framework jQuery, sin embargo en este
artículo nos referimos a él como la librería
jQuery.
