JQuery: Asignar un controlador al evento click de un enlace

Sencillo ejemplo que muestra como ejecutar una funcion al hacer click en un enlace con JQuery. El ejemplo basicamente consiste en dos enlaces y dos capas (DIVS), el primer enlace al darle click calcula un numero aleatorio y lo muestra en las dos capas. Cada capa inicialmente tiene una hoja de estilos diferente. El segundo enlace al darle click intercambia las hojas de estilos de cada capa.

A continuacion copio el codigo completo del ejemplo:
index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>.::Ejemplo2 con JQuery::.</title>
	<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>

    <script type="text/javascript">
		var miPaginaWeb = $(document);
		miPaginaWeb.ready(inicializaJQuery);	
		
		function inicializaJQuery() {
			$('#capa1').html("Contenido DIV1");	//Texto por default de capa1
			$('#capa2').html("Contenido DIV2");	//Texto por default de capa2
			
			var miEnlace = $('#enlace');
			//Asignar funcion controladora a evento click del enlace 1
			miEnlace.click(actualizaNumAleatorio);
			
			var miEnlace2 = $('#enlace2');
			//Asignar funcion controladora a evento click del enlace 2
			miEnlace2.click(intercambiaClases);
		}
			
		//Funcion controladora de evento del enlace 1
		function actualizaNumAleatorio() {
		
			var miCapa = $('#capa1');
			var num = Math.random()*100;	//Calcular primer numero
			miCapa.html("Numero aleatorio: "+num);
			
			var miCapa2 = $('#capa2');
			var num = Math.round(Math.random()*100);	//Calcular y redondear segundo numero
			miCapa2.html("Otro aleatorio: "+num);
			
		}
			
		//Funcion controladora de evento click del enlace 2
		function intercambiaClases() {
			var miCapa = $('#capa1');
			var miCapa2 = $('#capa2');
			
			//Obtener el nombre de la clase asignada al Div1
			var claseActual = $('#capa1').attr('class');
			
			if( claseActual=='estilo1' ) {					
				miCapa.removeClass("estilo1");
				miCapa.addClass("estilo2");
				miCapa2.removeClass("estilo2");
				miCapa2.addClass("estilo1");
			}
			else {
				miCapa.removeClass("estilo2");
				miCapa.addClass("estilo1");
				miCapa2.removeClass("estilo1");
				miCapa2.addClass("estilo2");				
			}
			
		}
    </script>
   </head>
  <style type="text/css">
    <!--
    .estilo1 {
		font-size:22px;
		color:#FF8800;
		font-weight:bold;
		text-shadow:1px 1px 1px #8BD4EF;
		}
    .estilo2 {
		font-size:16px;
		color:#9F28D6;
		font-weight:bold;
		text-shadow:1px 1px 1px #CCFF66;
		}
    -->
  </style>
   <body>
		<div class="estilo1" id="capa1">	</div>
		<br/>
		<div  class="estilo2"  id="capa2">	</div>
		
		<br/><br/>
		<a href="#" id="enlace">Generar Numero Aleatorio</a>		
		<br/>
		<a href="#" id="enlace2">Intercambiar estilos (clases)</a>
		
   </body>
</html>

A continuacion una breve explicacion de las partes mas importantes del ejemplo:

En la linea 6 se importa la libreria JQuery que esta un nivel abajo de donde esta el archivo de este ejemplo (por eso los .. del atributo src).

	<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>

En la linea 09 y 10 se crea un objeto asociado al documento y se le asigna a su evento ready la funcion inicializaJQuery la cual se encarga, en resumen, de asignar a cada enlace una funcion distinta para controlar su evento Click:

		function inicializaJQuery() {
			$('#capa1').html("Contenido DIV1");	//Texto por default de capa1
			$('#capa2').html("Contenido DIV2");	//Texto por default de capa2
			
			var miEnlace = $('#enlace');
			//Asignar funcion controladora a evento click de enlace 1
			miEnlace.click(actualizaNumAleatorio);
			
			var miEnlace2 = $('#enlace2');
			//Asignar funcion controladora a evento click de enlace 2
			miEnlace2.click(intercambiaClases);
		}

En la primera y segunda linea de la funcion que copie anteriormente se crea un objeto asociado a cada capa y se ejecuta inmediatamente su metodo html() para establecer un texto por defecto en cada capa.

A continuacion se crea un objeto asociado al enlace 1 y se le asigna la funcion actualizaNumAleatorio a su evento click. Ahora la funcion actualizaNumAleatorio es el controlador del evento click del enlace 1.

Esta funcion como se observa a continuacion crea primeramente un objeto de la capa1, calcula un numero aleatoriamente y se lo asigna a la capa1 a travez de su metodo html(). Los mismo hace para la capa2 con la unica diferencia de que no redondea el numero:


			//Funcion controladora de evento click del enlace 1
			function actualizaNumAleatorio() {
			
				var miCapa = $('#capa1');
				var num = Math.random()*100;	//Calcular primer numero
				miCapa.html("Numero aleatorio: "+num);
				
				var miCapa2 = $('#capa2');
				var num = Math.round(Math.random()*100);	//Calcular y redondear segundo numero
				miCapa2.html("Otro aleatorio: "+num);
				
			}			

La funcion intercambiaClases es el controlador de evento click del enlace 2. Esta funcion como se observa, crea un objeto por cada capa y a continuacion recupera el nombre del estilo de la capa1. Observe como se recupera el valor de un atributo de un objeto; para esto se utiliza el metodo attr(), la sintaxis es objeto.attr(‘nomAtributo’) en este caso se recupera el atributo ‘class’ del objeto asociado a la capa1. Si el estilo que tiene la capa1 se llama ‘estilo1’ entonces se quita el estilo1 y se asigna la clase estilo2. A la capa2 se le quita el estilo2 y se le asigna el estilo1. Creo que es muy facil de entender, asi que ya no explico mas:

		//Funcion controladora de evento click de enlace2
		function intercambiaClases() {
			var miCapa = $('#capa1');
			var miCapa2 = $('#capa2');
			
			//Obtener el nombre de la clase asignada al Div1
			var claseActual = miCapa.attr('class');
			
			if( claseActual=='estilo1' ) {					
				miCapa.removeClass("estilo1");
				miCapa.addClass("estilo2");
				miCapa2.removeClass("estilo2");
				miCapa2.addClass("estilo1");
			}
			else {
				miCapa.removeClass("estilo2");
				miCapa.addClass("estilo1");
				miCapa2.removeClass("estilo1");
				miCapa2.addClass("estilo2");				
			}
			
		}

Espero que hayas entendido la mayoria del codigo del ejemplo, ¿Sencillo, no?. A continuacion pongo una imagen del ejemplo ejecutandose en Chrome:
Ejecucion de Ejemplo2 de JQuery.

Para ver en funcionamiento el ejemplo da click en el siguiente enlace: index.html

Bueno pues, aqui termina el pequeño ejemplo, y como siempre que escribo algo; espero que ha alguien le sirva. Si gustas dejar un comentario constructivo sera bien recibido.

Saludos cordiales.

Introduccion a JQuery

Breve introduccion a JQuery; que es, donde conseguirlo, etc. JQuery es un Framework de Javascript; es decir, un conjunto de rutinas escritas en javascript listas para usarse y que nos hacen mas facil acceder a los objetos del DOM.

Con este Framework podras realizar tareas cotidianas dentro de tu pagina web sin tener que codificarlas pues ya vienen incluidas por defecto y ademas, ya estan probadas que funcionan de manera exacta y correcta en distintos navegadores. Ademas de las tareas cotidianas podras realizar mucho mas, por ejemplo, podras hacer mas bonitas tus interfaces de usuario y agregarles efectos de animacion. Al enriquecer un sitio web con estos componentes y funcionalidades se podria decir que pasando a la web 2.0.

Por si te da flojera aprender Javascript o no lo usas mucho, cuando realizes los primeros ejemplos de este sitio te daras cuenta que JQuery es muy facil de utilizar y no lo cambiaras por nada, lo usaras en todas las paginas donde necesites usar Javascript.

¿JQuery tiene algun costo?
No, JQuery es gratuito, los puedes usar de manera personal o en tus proyectos comerciales. JQuery tiene licencias MIT License y GPL. Puedes leer mas aqui: http://jquery.org/license/.

¿Donde consigo JQuery?
Lo puedes descargar desde aqui http://jquery.com/. A la fecha actual la version mas reciente es esta: http://code.jquery.com/jquery-1.8.0.min.js (para bajarlo en Firefox; Da click derecho sobre el enlace, y elije la opcion Guardar vinculo como…).

¿Realmente necesito usar un Framework?
Pues, como te explico, mira; si quieres reinventar la rueda y pelearte con los niveles mas bajos de programacion en Javascript o simplemente si lo que estas buscando es aprender Javascript no aprendas JQuery (todavia). Porque presisamente para eso fue creado JQuery; para no tener que implementar las funciones (a manitaa) para realizar las tareas mas basicas del lado cliente.

Y si deseas ahorrar tiempo; sí, si necesitas usar un framework.

¿Que necesito para aprender JQuery?

  1. El Framework en sí.
  2. Conocimientos basicos de Programación Orientada a Objetos (POO).

En resumen el Framework jQuery nos brinda las siguientes ventajas:

  • Escribimos menos codigo y hacemos mas.
  • No tienes que preocuparte por la compatibilidad de tu codigo Javascript en los diferentes navegadores.
  • El manejo de objetos es mucho mas sencillo.
  • Permite agregar efectos de animacion muys vistosos a capas y a componentes de la GUI de manera muy facil.
  • Contiene bastantes capacidades para hacer uso de Ajax.
  • Es extensible; es decir, le puedes agregar plugins para ampliar las capacidades de este Framework.

Animo! despues de que comprendas las grandes ventajas de usar JQuery te daras cuenta que el esfuerzo que invertiste en aprenderlo valio la pena. Sigue leyendo.

Como usar JQuery
A continuacion una imagen de la estructura de carpetas que utilizare para mostrar los ejemplos con JQuery. Para cada ejemplo, como puedes ver, voi a crear una carpeta que contendra todos los archivos relacionados con dicho ejemplo:
Estructura de carpetas de los ejemplos.
Como se observa, he creado una carpeta llamada ejemplo 1 donde he guardado el archivo index.html que pongo a continuacion:

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>.::Ejemplo1 con JQuery::.</title>
    <script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>	

    <script type="text/javascript">
      $().ready(function() {
		$('#mensaje').html("<strong>Hola Mundo JQuery</strong>");

      });
    </script>
   </head>
   <body>
		<div id="mensaje"></div>
		
   </body>
</html>

El ejemplo es el tipico Hola mundo en una pagina web HTML pero escrito con ayuda de JQuery. A continuacion doy una breve explicacion, pon mucha atencion:

En la linea 06 se esta importando el archivo jquery-1.8.0.min.js el cual contiene el codigo javascript de JQuery. En la linea 09 se coloco el evento Ready() el cual unicamente se activa (ejecuta) despues de que se han recibido completamente todos los archivos (por ejemplo; imagenes, texto, etc) de la pagina web. Como se observa dentro de este metodo he colocado una funcion y la llave de cierre de esta funcion esta en la linea 12, junto con el parentesis de cierre del metodo Ready().

Observa como estoy ejecutando este metodo sobre el objeto $() el cual hace referencia al documento HTML. Es decir, si quitara la funcion que esta dentro del metodo se veria asi $().Ready(). Este metodo es el lugar ideal para colocar todos los controladores de eventos que se requieran, inicializaciones o ejecutar algun otro codigo que quieras. Lo importante es que recuerdes que este metodo unicamente se ejecuta despues de que la pagina esta completamente cargada, es decir, despues de que el DOM esta listo.

Bien, ahora como puedes observar, dentro de la funcion he colocado unicamente una instruccion:

	$('#mensaje').html("<strong>Hola Mundo JQuery</strong>");

Esta linea hace referencia al DIV que he colocado en el cuerpo de la pagina (en el body, linea 16) a travez del ID de éste. Para hacer referencia a cualquier objeto a travez de su ID se escribe un simbolo de dolar y entre parentesis y comillas $(”) el ID precedido de simbolo de gato, #. Asi; $(‘#un_Id’). Una vez que obtengo la referencia al objeto le aplico el metodo html(), el cual permite cambiar el contendido html de un objeto.

Es por esto que al ejecutar el ejemplo se muestra el texto en negrita: “Hola Mundo JQuery”.

Hay varias formas de realizar la inicializacion del documento a travez de jQuery, pero me he encontrado que muchos desarrolladores lo realizan de la manera antes explicada. A continuacion pongo otra forma de inicializar con los comentarios respectivos para que lo entiendas mas facilmente:

index2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>.::Otra forma de inicializar con JQuery::.</title>
	<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>

    <script type="text/javascript">
		//Asigno al metodo Ready un controlador (una funcion que funcionara como tal).
		$().ready(inicializaJQuery);
	
		//Funcion que se ejecutara despues de que toda la pagina HTML haya sido recibida del servidor
		//Esta funcion funcionara como controlador para inicializar el documento HTML
		function inicializaJQuery() {
			var miCapa= $('#mensaje');	//Obtengo una referencia al objeto de la capa
			//Actualizo el contenido html de la capa a travez de la ref. antes obtenida
			miCapa.html("<strong>Hola Mundo JQuery</strong>");
		}
 
    </script>
   </head>
   <body>
		<div id="mensaje">	</div>
		
   </body>
</html>

Para que te quede maas claro a continuacion expongo otra tercera forma de inicializar el documento HTML con Jquery:

index3.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>.::Ejemplo1 con JQuery::.</title>
	<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>

    <script type="text/javascript">
		//Obtener referencia al objeto del documento HTML
		var miPaginaWeb = $(document);
		
		//Ejecutar el metodo ready sobre el objeto del documento, mandandole un controlador
		//No olvidar que este metodo solo se hace disponible despues de que todo
		//el contenido del documento html ha sido recibido del servidor.
		miPaginaWeb.ready(inicializaJQuery);
		
		//Funcion que servira como controlador para inicializar el documento.
		function inicializaJQuery() {
			var miCapa = $('#mensaje');	//Obtener referencia al DIV del body a travez de su ID
			//Contenido HTML de la capa
			var msgHola = "<strong>Hola Muundo JQuery</strong>";
			
			//Cambiar el HTMl de la capa a travez de la referencia obtenida anteriormente
			miCapa.html(msgHola);
		}
			
    </script>
   </head>
   <body>
		<div id="mensaje">	</div>
		
   </body>
</html>

Si abres cualquiera de los 3 archivos anteriores (index.html, index2.html ó index3.html ) el resultado que veras es el mismo, a continuacion la imagen de la ejecucion de index.html en el navegador Chrome:
Hola mundo en una pagina web al estilo Jquery
Para ver los ejemplos en linea, sigue los siguientes enlaces:
index.html     index2.html     index3.html

Eso es todo. Se aceptan comentarios constructivos. Hasta pronto y gracias x visitar mi blog.

A %d blogueros les gusta esto: