Detrás de la página web: jQuery

¿Nunca te has preguntado que hay detrás de una página web? ¿Cómo fue que se creó? Páginas como la de Facebook, Twitter y Youtube tienen un agradable diseño a la vista, cuentan con una buena interacción y tienen cierto comportamiento dinámico. Aparte de un buen equipo de desarrolladores, son necesarias muchas herramientas para crear una página de este tipo: Javascript, HTML y CSS son tan solo algunos de ellas, pero estos lenguajes se han llegado a convertir en el pan de cada día de un desarrollador:

• HTML: Es el estándar encargado de generar de contenido para una página web.
• CSS: Es un lenguaje de estilos que se encarga de caracterizar el contenido de la página web
• Javascript: Es un lenguaje orientado a objetos que permite al desarrollador interactuar con elementos de la web. En este artículo nos enfocaremos en este último y particularmente en su hijo: jQuery.

Hablando con la web

Cuando escribes una dirección URL desde tu explorador (1), en realidad estás haciendo una petición a un servidor web, este servidor te responde enviándote varios archivos entre los cuales se encuentran archivos HTML, Javascript y CSS (2). El explorador va a cargar el HTML dentro del DOM (3) y una vez cargado, Javascript puede interactuar con elementos de la web. Pero un momento, ¿qué es el DOM?

Entendiendo el DOM

Nuestro explorador (ya sea Chrome, Firefox, Safari e incluso el patito feo Internet Explorer) organiza el HTML que recibe del servidor web a través de algo llamado Document Object Model o DOM, que viene siendo una estructura organizada cómo la siguiente:

Dentro del DOM, elementos HTML se convierten en nodos que se relacionan entre sí, de esta forma DOM es considerado el padre de html, y normalmente html es el padre de head y body lo cual hace que estos nodos sean hermanos. Para este ejemplo en particular h1 y p1 también son nodos hermanos e hijos de body, title por su lado es hijo de head. Así html es solo una gran familia de nodos!

Como se mencionó antes Javascript es un lenguaje que nos permite interactuar con elementos del DOM, pero entonces, ¿para qué necesitamos a jQuery? Bueno la cosa no es tan sencilla, pues cada explorador web tiene una interfaz DOM ligeramente diferente, entonces usando únicamente Javascript sería necesario escribir un código diferente para cada explorador. Afortunadamente es aquí donde jQuery entra al rescate, pues si Javascript usa jQuery para interactuar con el DOM entonces el código funcionará para la mayoría de los exploradores. Así jQuery se convierte en uno de los frameworks de Javascript más importantes.

Usando jQuery: Encontrando elementos en el DOM

Antes de empezar a interactuar con elementos del DOM, necesitamos asegurarnos que el DOM haya terminado de cargar todos sus elementos, de otra forma podemos llamar a un elemento que todavía no existe y eso resultaría en un error. Para evitar este problema el DOM lanza un evento que indica que se ha terminado de cargar y que está listo para trabajar:

jQuery(document).ready(function(){
<Aquí nuestro código>
});


Todo el código dentro de esta función se va a ejecutar únicamente cuando el DOM se haya terminado de cargar, evitando así errores. Ahora bien tomando en cuenta el ejemplo de arriba digamos que queremos encontrar los elementos h1 y p, y luego cambiar su contenido de forma dinámica. Bueno para encontrar estos elementos simplemente tenemos que llamarlos dentro de la función de jQuery:

jQuery(“h1”);
jQuery(“p”);

O lo que es igual:

$(“h1”);
$(“p”);

Utilizando la función text(), que es una función proporcionada por jQuery, podemos obtener y cambiar el contenido de un elemento. De tal forma que

$(“h1”).text();

Regresa el contenido del elemento h1: Conociendo jQuery, y

$(“h1”).text(“Un título diferente”)

Cambiaría el contenido del elemento. El código completo quedaría de la siguiente manera

$(document).ready(function(){
$(“h1”).text(“Un título diferente”);
$(“p”).text(“Todo un curioso”);
});

¿Qué pasa si tenemos múltiples elementos h1? ¿Cómo le indicamos a jQuery que queremos seleccionar uno en particular? Hay múltiples soluciones para esta problemática, observa el siguiente ejemplo:

¿Cómo podríamos cambiar el texto de cada elemento li?¿Necesitamos tres líneas de código para seleccionar cada uno? La respuesta es no, necesitamos solamente uno:

$(“li”);

Esto regresa un objeto jQuery incluyendo todos los elementos li y para cambiar el texto de los tres simplemente lo hacemos con la función text():

$(“li”).text(“jQuery rules!”);

Si quisiéramos seleccionar únicamente un elemento en específico se puede utilizar su ID o su clase, por ejemplo:

$(“#posts”)

Seleccionaría todos los elementos con ID = “posts” y

$(“.selected”)

Seleccionaría los elementos con clase = “selected”. También podemos seleccionar elementos que están anidados a otro elemento, por ejemplo para seleccionar todos los elementos li que están debajo de ul#destinations bastará con utilizar el siguiente comando

$(“#destinations > li”).

La siguiente tabla resume las diferentes formas en las cuales podemos seleccionar un elemento con jQuery:

Instalando jQuery

Vamos a terminar este artículo enseñándoles como incluir jQuery en su página web en tres simples pasos:

1. Descargar jQuery desde su página web: http://jquery.com
2. Cargar jQuery en su HTML con la siguiente línea:
   
3. Para poder usarlo es recomendable crear otro documento denominado application.js (js por Javascript) donde se escribiría todo el código de jQuery, este documento también hay que cargarlo en el HTML con la siguiente línea:

Referencias:

http://jquery.com