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.

Anuncios

Acerca de gonzasilve
Freelance Web Developer.

2 Responses to Introduccion a JQuery

  1. Pingback: JQuery | Annotary

  2. Pingback: JQuery UI: Como usar el control Tab con MySql « .::programming notes::. Gonzalo Silverio

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: