Javascript: Eventos con JQuery

Hemos visto como agregar eventos usando nada más que Javascript. Esa técnica es muy útil cuando tenemos algún tipo de proyecto pequeño y no se nos hace necesario cargar ningún tipo de librerías porque podría no sólo elevar el tamaño, sino también la memoria utilizada. Además, no tiene ningún sentido introducir complejidad si no se va a sacar ningún rédito.

En esta entrada vamos a repetir lo mismo que hicimos en el caso anterior, pero en esta ocasión vamos a utilizar el  framework JQuery.

Recuerden que pueden descargarlo del sitio oficial (http://jquery.com/) Algunos programadores optan por enlazar la librería a Google, que pone a disposición de la comunidad la última versión de este framework.

Empecemos con el siguiente documento

Veamos el código. En la sección <head> cargamos la librería del framework JQuery.  A continuación, aparece el código Javascript que incluí embebido directamente en el código HTML.

El HTML es muy sencillo. Consiste tan solo en un botón donde se puede cliquear.

Profundicemos en el código Javascript

El signo $ delante de un paréntesis es un selector de JQuery. Es una herramienta muy potente que permite seleccionar cualquier elemento del HTML. En este caso, document hace referencia al documento HTML en sí mismo. Tras el punto, ready se refiere al evento que indica que el DOM ya ha sido cargado. A function se la conoce como función anónima en Javascript, es decir una función sin nombre pero que se comporta como cualquier otra. En este caso, lo que pongamos dentro estará asociado al evento ready, es decir que se ejecutará cuando la página esté cargada.

La instrucción alert(“Inicio”) es tan sólo para avisar que la página se ha cargado.

Luego aparece:

El selector de JQuery hace referencia a #miBoton que es el id que tiene el botón en el código HTML. No es necesario ponerle un id porque si utilizamos este framework podemos hacer referencia a él de muchas otras maneras. A continuación aparece click, que hace referencia al evento click y luego otra función anónima que en este caso invoca a la función hola que se utiliza para enviar un mensaje de alerta

Al cargar la página obtendremos un mensaje de alerta cuando la página termina de cargar y otro cuando hacemos click en el botón.

Se puede hacer mucho más con JQuery, además de manejar eventos y seleccionar elementos HTML. De esas otras cosas nos ocuparemos en siguientes notas.

Soy programador web y me desempeño como Líder Técnico y de Proyectos en Polar Bear Development. Trabajo con tecnologías como PHP, Javascript, MySQL y HTML5 para el desarrollo de sitios y sistemas web. Me especializo en Zend Framework 2 y otros frameworks MVC, como también en WordPress y otros CMS. Lidero equipos de desarrolladores trabajando con Scrum. Vivo en Buenos Aires, Argentina.
 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*