RSS

Empezar con JQuery

06 Ene

jQuery_logoEn este post voy a hablar de una de las tecnologías más usadas en la parte de cliente en las aplicaciones web, JQueryJQuery nos simplifica el uso de Javascript en nuestros proyectos y nos amplia su funcionalidad de una manera sencilla. En primer lugar vamos a tener que bajar las librerías de JQuery y JQuery UI.

Ir a Java4Developers.com para una versión completa ó continuar leyendo.

Instalar JQuery.

Las librerías del core de JQuery las podemos encontrar en el siguiente enlace (la última versión a fecha de hoy es la 1.7.1).

JQueryHomepage

Podrás ver que existen dos tipos de ficheros, en función de nuestro entorno:

  • Desarrollo: podemos bajar una versión de JQuery que se muestra de manera agradable al programador (prettyprint). Es decir que a la hora de desarrollar podremos debuguear dentro de JQuery y veremos de forma clara las variables ó métodos.
  • Producción: esta versión está pensada para ser subida en nuestro entorno de producción. La diferencia con la versión de desarrollo es que está comprimida y minificada, es decir, nos va a ocupar menos espacio en disco y por lo tanto se cargará más rápido en cliente.
    En mi caso voy a bajar la versión de desarrollo ya que me interesa depurar mi código.

Por otro lado nos bajaremos la última versión de JQuery UIJQuery UI nos permite disponer de una serie de widgets (mensajes de dialogos, selector de fechas, acordeones, …) ya construidos para JQuery y que son muy útiles. Además podemos seleccionar los estilos que queremos aplicar a nuestro proyecto mediante JQuery Theme Roller. Para bajarnos la última versión de JQuery UI iremos al siguiente enlace.

JQueryThemeRoller

JQuery UI nos permite configurar totalmente que widget y efectos queremos bajar. En principio nos interesan todos, pero pueden ser que finalmente sólo utilicemos unos pocos y nos convenga bajar otra vez JQuery UI para que nuestro fichero en producción sea más pequeño.

JQueryUIDownload

Sólo queda incluir JQueryJQuery UI(con Theme Roller) en nuestras páginas de la siguiente manera:

<head>
<script type="text/javascript" src="js/jquery-1.7.1.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js" charset="utf-8"></script>
<link type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.16.custom.css">
...
</head>

Tenemos que tener cuidado con el orden en que declaramos las librerías de JQuery. Si por ejemplo incluyeramos JQuery UI antes que la libraría core de JQuery tendríamos errores al intentar usarla. Podemos ver los errores en la consola de Inspeccionar Elemento de Chrome ó con Firebug en Firefox.

ErrorJquery

Una opción interesante en lugar de guardar las librerías de JQuery en nuestro proyecto es enlazarlas a Google’s CDN . Google te permite acceder a una serie de librerías javascript como JQueryPrototypeMootools, … sin necesidad de tenerlas alojadas en tu propio servidor. Una de las mayores ventajas de este método es que si varias aplicaciones acceden a JQuery el navegador cacheará JQuery en la primera llamada, estando disponibles en sucesivas. Una utilidad muy interesante de Google es su Code PlayGround  que nos permite probar la funcionalidad de distintas librerías Javascript en un terminal.

GoogleCode Playground

Probar funcionamiento JQuery.

Una vez incluidas las librerías de JQuery en nuestro proyecto vamos a probar que éstas añadidas correctamente. Pero antes un poco (muy poco :D) de teoría. JQuery manipula los objetos del DOM para añadirles nueva funcionalidad, modificar estilos o ejecutar eventos. Por lo tanto antes de utilizar JQuery en nuestras páginas debemos estar seguros que nuestro DOM se ha cargado.
¿Cómo se asegura JQuery?. Muy sencillo, JQuery tiene un tipo de evento llamado ready que le informa cuando se ha cargado nuestra página. Vamos a verlo en código:

<head>
...
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
alert('JQuery is already!');
});
</script>
</head>

La explicación para el código de arriba es la siguiente JQuery selecciona el documento y le asigna un handler cuando esté documento este listo, momento en el cual notificaremos una alerta. ¿Pero qué significa el alias $?. Se utiliza por comodidad, pero significa lo mismo que JQuery y nos permite acceder a las funciones declaradas en las librerías core. Hay que tener cuidado porque otras librerías como Prototype  utilizan este símbolo también con lo que podemos tener problemas. El siguiente código funcionaría de la misma manera que el anterior:

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function() {
alert('Ready to go!');
});
</script>

ReadyJQuery

Manos a la obra.

Una vez que hemos incluido de manera correcta JQuery y JQuery UI vamos a hacer un ejemplo. Los objetivos de este ejemplo son introducir el uso de selectores, manejar hojas de estilo desde JQuery, añadir elementos al DOM. Los pasos a seguir son los siguientes:

  •  Incluiremos un botón en nuestra página.
  • Asociaremos un manejador cuando se haga click en dicho botón.
  • Dicho manejador mostrará un diálogo y añadirá una clase css a nuestro botón.
  •  Incluiremos un texto en nuestra página informando de que el botón se ha pulsado.

Vamos a necesitar crear un nuevo fichero de hojas de estilos al que llamaremos myStyles.css y que tendrá el siguiente contenido:

.redbutton {
color: #FF0000;
}

Nuestra página html (que tendrá también incluido el código JQuery) será la siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Sandbox example</title>
	<meta name="author" content="Iván Fernández Perea">
	<script type="text/javascript" src="js/jquery-1.7.1.js" charset="utf-8"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js" charset="utf-8"></script>
	<link type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.16.custom.css">
	<link type="text/css" rel="stylesheet" href="css/myStyles.css">

	<script type="text/javascript" charset="utf-8">
		$(document).ready(function() {
			$('div').hide();
			$('#btn_dialog').click(function() {
				$(this).addClass('redbutton');
				$('#dialog').dialog();
				$('<span>Button already clicked!</span>').insertAfter('#btn_dialog');
				//$('#dialog span').dialog();
			});
	 });
	</script>
</head>
<body>
  <input id="btn_dialog" type="button" value="Open dialog!" />
  <div id="dialog" title="Dialog Title">I'm in a dialog
	<!--<span>I'm in a dialog</span>-->
	</div>
</body>
</html>

Esto sería lo que veríamos nada más cargar la página.

PlainIndex

Ahora vamos a explicar lo que se hace:

  • Añadimos en el cuerpo de nuestra página un botón y un div con el siguiente código:
<input id="btn_dialog" type="button" value="Open dialog!" />
<div id="dialog" title="Dialog Title">I'm in a dialog</div>

En nuestro caso vemos que hemos añadidos identificadores a los dos objetos. Esto nos va a servir para después seleccionarlos desde la parte JQuery.

  • En la parte JQuery ocultamos el div cuando se carga la página.
    Para ello seleccionamos el div identificado como dialog y llamamos a la funcion hide(). En JQuery podemos seleccionar un elemento de diferentes formas. En este ejemplo lo hacemos a través de su idetificador. Sin embargo JQuery nos ofrece muchas formas de seleccionar un elemento, por ejemplo, ya que nuestro dialogo es el único div dentro de nuestra página el siguiente código JQuery seleccionaría igualmente a nuestro div dialogo:
$('div').hide();

Incluso podríamos seleccionar nuestro div a través de una clase definida en está:

$('div .class').hide();
.
.
.
<div class='myClass' title="Dialog Title">I'm in a dialog</div>

También podemos acceder a los distintos elementos navegando por el DOM. Por ejemplo $(‘#dialog span:first’). En este caso accederíamos al primer span que hubiese dentro del elemento dialog. Además de first hay un montón de filtros específicos.

  •  El botón tiene asociado un manejador que se ejecuta cuando se hace click sobre él. Este manejador hace tres cosas:
    • Añade una clase CSS al botón. Como el objeto sobre el que está declaro el handler es el mismo sobre el que queremos añadir una clase, podremos acceder a éste (el botón) a través del objeto this. JQuery nos da una función addClass al que le pasaremos el estilo definido en nuestro fichero myStyles.css.

Una forma de ver que la clase se ha añadido a nuestro botón, además de visualmente es en la consola de javascript de Chrome. Allí podemos inspeccionar nuestro botón en el código y vemos cómo se le ha añadido la clase. Otra cosa que podemos hacer es llamar a JQuery desde la línea de comandos de la consola y preguntar si tiene una clase con la función hasClass(class).

    • Abre una ventana de diálogo. Aquí vamos a utilizar el dialogo que nos da JQuery UI. Hay muchas opciones para crear un diálogo. En nuestro caso queremos algo simple. Podemos ver que cuando el diálogo se abre hereda los estilos que nos hemos bajado de JQuery UI.ButtonAlreadyClicked
    • Añade un span detrás del botón. JQuery nos permite incluir nuevos objetos al DOM. En nuestro caso vamos a añadir un span después del botón con un texto. Cómo se puede ver en el código, es muy fácil.

Enlaces interesantes.

Libros recomendados.

Me ha gustado mucho el libro jQuery: Novice to Ninja de Earle Castledine y Craig Sharkie. Explica desde un nivel muy básico elementos de JQuery hasta un nivel más avanzado.

 
Deja un comentario

Publicado por en 6 enero, 2012 en web

 

Etiquetas: , , , , ,

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: