martes, julio 03, 2012

Curso de desarrollo web, Parte XXXIX: Eventos (I): eventos de ratón

Otra semana más en que no he arreglado los anteriores posts... Acabaréis por matarme, lo sé. Bueno, al menos no os dejo colgados y todas las semanas tengo cosas nuevas, ¿no? De todos modos, estad atentos porque la semana que viene el post de desarrollo web se posteará el miércoles en lugar del martes. Y, sin más dilación, aquí va la explicación de esta semana.
La semana pasada aprendimos el segundo de los tres métodos para introducir JavaScript en nuestra página web. Ahora podemos escribir nuestro código directamente en la página, como llevamos haciendo desde el comienzo, o escribirlo aparte en un archivo externo y linkarlo, lo cual, entre otras cosas, puede servir para tener todo más ordenado. Pero existe un tercer método, pero para entender este tercer método primero tenemos que entender un nuevo e interesante concepto: los eventos.
En varias ocasiones desde que comenzamos este tutorial he hablado de cómo JavaScript sirve para hacer páginas más dinámicas de las que podíamos hacer con HTML y CSS. Sin embargo, hasta el momento, el dinamismo de la página sólo ocurría en el momento de cargarse: a través de "prompt" pedíamos algún dato al usuario y, una vez lo teníamos, mostrábamos la página con aquellos datos que hubieramos recolectado, convirtiéndose en una página web sosa y con poca interactividad (sólo aquella que los enlaces nos permitieran). Sin embargo, los eventos nos permitirán evitar eso. Vamos a ver cómo.
Los eventos, en programación, son aquellos momentos en que algún elemento de nuestra aplicación sufre un cambio de estado por algún motivo, lo cual puede llevar a ejecutar una instrucción. Para entenderlo facilmente, un evento inherente al HTML es que, cuando se pulse sobre un enlace, desaparezca la página en que estamos (o no) y se cargue una nueva. El evento en este ejemplo es el pulsar sobre el enlace, y el abrir la nueva página son las instrucciones lanzadas por dicho evento.
La mayoría (si no todas) las etiquetas HTML pueden contener eventos. Hay eventos para cuando el usuario pulse en un lugar determinado de la página, también hay eventos para cuando pulse alguna tecla, eventos que se disparan cuando se carga la página o cuando se intenta salir de ella... La mayoría de las posibles situaciones que se pueden presentar mientras un usuario interactúa con una página pueden disparar eventos, y dentro de estos eventos podremos escribir instrucciones JavaScript. Vamos a ver cómo.
Imaginemos que tenemos una imagen, la cual queremos que, cuando un usuario pulse sobre ella, se muestre un "alert" con una descripción de la imagen. Eso sí, no queremos que el usuario abandone la página y tenga que volver a cargarla para ello, así que no vamos a incluir la imagen dentro de un hipervínculo. Entonces, ¿qué podemos hacer?

<img src="http://lh4.googleusercontent.com/-sptvhGXA_pM/AAAAAAAAAAI/AAAAAAAAHKo/5XbR0Te29L0/s512-c/photo.jpg" onclick="javascript: alert('Mi avatar');" />

Si ponemos ese código veremos la imagen en nuestra página pero no veremos ninguna indicación de que vaya a ocurrir nada al pulsar sobre él. Sin embargo, si lo hacemos, podremos ver que un "alert" se dispara mostrándonos el texto "Mi avatar". Eso, señores, es un evento.

Como véis, esta tercera manera de incluir código JavaScript en nuestra página es a través de unos atributos llamados "atributos de evento", que suelen ser todos muy descriptivos: Este que hemos usado es el "onclick", aunque existen "onkeydown" (al pulsar una tecla), "onmouseover" (al pasar el cursor por encima), "onblur" (cuando un elemento de un formulario deja de estar seleccionado), etcétera.
También podemos advertir que dentro del atributo hemos incluído algo de código que no conocemos, aunque no es difícil adivinar para qué es. Ese "javascript: " que hemos incluído antes de comenzar el código, como podéis imaginar, sirve para lo mismo que el atributo "type" que usábamos en la etiqueta "script". Aunque en este caso no es obligatorio, ya que la mayoría de los navegadores lo interpretan como JavaScript si no tienen otra indicación, siempre es recomendable incluirlo, ya que puede que algún día nos topemos con un navegador que no lo interprete así, y nuestra aplicación no funcione.
Esto parece sencillo, ¿no? Pues bien, vamos a ver algunos de los distintos eventos que podemos encontrarnos. Estos eventos son los eventos relacionados con el ratón:

  • onclick: El que hemos visto justo ahora, se ejecuta en el momento en el que alguien pulsa sobre el elemento que tengamos.
  • ondblclick: Parecido al anterior, pero esta vez necesitamos que el usuario haga "doble click" en vez de un click simple, como ocurría con el "onclick".
  • onmousedown: Este evento puede parecer muy parecido al "onclick", pero hay una pequeña diferencia. El "onclick" funciona cuando se hace el proceso completo de pulsar sobre un elemento, pero si intentamos "arrastrar" el elemento con el ratón pulsado, ya no funciona el "onclick". El "onmousedown", por contra, ocurre desde el momento en el que el usuario pulsa el botón del ratón, sin esperar a que lo suelte, de modo que ni siquiera da tiempo al usuario a arrastrar, ya que antes de poder intentarlo ya se ha ejecutado. Bastante más útil que el "onclick" si queréis que funcione siempre que se pulse sobre un determinado elemento.
  • onmouseup: Éste es el contrario del "onmousedown", en este caso el evento se aplica cuando el usuario libera el botón del ratón sobre el elemento en cuestión. Esto significa que el usuario puede hacer click fuera y luego arrastrar el ratón con el botón pulsado hasta el elemento, y una vez ahí liberarlo, activando el evento. Claro que este evento no se activará en caso de que el usuario pulse sobre el elemento y salga del elemento antes de liberar el botón.
  • onmousemove: Este evento se activará siempre que el usuario tenga el ratón encima del elemento. O sea, que la única manera de que deje de ejecutarse las instrucciones del "onmousemove" es que saque el ratón del elemento.
  • onmouseover: A diferencia del "onmousemove", el "onmouseover" sólo se activa una vez, en el momento en el que el ratón entra en el área del elemento, y no se volverá a activar hasta que el ratón no salga y vuelva a entrar.
  • onmouseout: El contrario del "onmouseover", este se activará en el momento en el que el ratón abandone el área del elemento, y no volverá a activarse hasta que el ratón no vuelva a entrar en el elemento y vuelva a salir.
Nunca se os había ocurrido que podíais  hacer tantas cosas sólo con el ratón, ¿eh? La verdad, son unos eventos un tanto extraños, y sobre todo algunos como el "onmousedown" y "onmouseup" parecen un poco abstractos (sobre todo si hacéis caso de la mayoría de las descripciones que hay en la mayoría los manuales y tutoriales... yo he aprendido a usarlos por experiencia, porque si es por cómo me lo explican... espero que de esta manera lo hayáis entendido bien), así que lo mejor que podéis hacer es coger el código que hemos visto más arriba e ir cambiando el evento por cada uno de estos para poder entender correctamente cómo funciona cada uno.
Y, por esta semana, aquí lo dejo. La semana que viene seguiremos viendo más tipos de eventos, ahora que se supone que más o menos empezáis a entender lo que es un evento.

EJERCICIO

Bueno, la idea esta semana será probar todos esos eventos mediante una pequeña aplicación con una imagen que vaya soltando "alerts" según lo que el usuario esté haciendo sobre la imagen (arrastrar algo hasta ella, abandonarla, entrar, hacer click...). Realmente no hay mucho más que podamos hacer con el contenido de esta semana. Ya la semana que viene habrá algo más interesante.

Antes de despedirme, vuelvo a recordar que el post de desarrollo web de la semana que viene se escribirá el miércoles. También, para aquellos que no sigan el blog con regularidad, les recomiendo mirar el post del sábado pasado si les interesa ver una explicación del trabajo que realicé en Berlín, que fue con interfaz web, así que puede parecerles curioso ver cosas de nivel avanzado para que sepáis lo que vamos a ir logrando poco a poco.

No hay comentarios: