miércoles, julio 11, 2012

Tutorial de desarrollo web, Parte XL: Eventos (II)

¡Hola! Esta semana, de forma inusual, este curso se publica ewl miércoles en lugar del martes, debido a que ayer era el "cumpleaños" del blog y, como tal, había que "celebrarlo". Pero aquí estamos de vuelta para seguir el tema tal donde lo dejamos la semana pasada, aprendiendo los eventos en JavaScript.
La semana pasada aprendimos lo que eran los eventos y conocimos algunos de ellos, los eventos de ratón. Esta semana vamos a aprender más eventos distintos, pero para los siguientes eventos, probablemente necesitamos rescatar uno de los elementos que aprendimos en el curso de HTML y que, sin embargo, hasta el momento nos ha sido bastante inútil: los formularios.
Recordaréis que, durante unas cuantas lecciones, aprendimos distintas etiquetas HTML que nos servían para crear un formulario. Sin embargo, a pesar de poder crear cajas de texto, casillas para marcar y botones (entre otras cosas), estos elementos eran completamente decorativos y no llegaban a servir para absolutamente nada. Por suerte, eso cambiará a partir de hoy, ya que, usando la etiqueta input, vamos a aprender los eventos de teclado.
Para ello creemos una etiqueta "input" de la siguiente manera:

<input type="text" name="texto" onkeypress="javascript:alert('Has pulsado.');"/>

Aunque no 100% necesário, recordemos que lo normal es que los elementos de formulario se encuentren dentro de un elemento form. Ahora le vamos a ir añadiendo los siguientes eventos:
  • onkeypress o onkeydown: Estos dos eventos, a diferencia de lo que ocurría con el ratón, no tienen ninguna diferencia entre ellos. Ambos ocurren si el usuario pulsa una tecla mientras tiene seleccionado el elemento (en este caso el "input") o si el usuario, teniendo una tecla pulsada, entra en dicho elemento. En definitiva, siempre que el teclado interactúe con un elemento con uno de estos dos eventos, se activará.
  • onkeyup: Muy parecido al anterior, sin embargo sólo funciona cuando el usuario suelta la tecla estando dentro del elemento. O sea, el usuario puede seleccionar el elemento y pulsar una tecla y mantenerla pulsada. Si el usuario sale de dicho elemento sin haber dejado de pulsar la tecla  (por ejemplo, haciendo click fuera), el evento no se ejecuta. En los demás casos, funciona igual que los otros dos eventos.
Realmente, de teclado sólo existen estos tres eventos (aunque con el tiempo comprobaremos que se puede dar mucho juego con estos eventos, pero tiempo al tiempo). Algo bastante simple, ¿no? Por eso, ahora vamos a pasar a ver los siguientes eventos: los eventos de formulario.
  • onfocus: Este evento se ejecutará mientras el elemento del formulario en cuestión esté seleccionado. Por ejemplo, que entremos dentro de un cuadro de texto.
  • onblur: Casi el contrario de "onfocus", este evento se activa justo en el momento en el que abandonamos dicho elemento para seleccionar otro (o no seleccionar nada).
  • onchange: Este evento, que servirá para los select, los input y los textarea, se activará en el momento en el que interactuemos con el elemento del formulario en cuestión, modificándolo (véase: cambiando el texto o modificando la selección).
  • onreset: Este evento sólo se podrá usar en la etiqueta form y para que se active deberemos haber hecho un input de tipo reset. De este modo, si el usuario pulsa dicho botón, este evento se activará.
  • onsubmit: Este último evento, al igual que en el anterior, sólo pertenece a la etiqueta form y se activará cuando se pulse un input de tipo submit dentro del formulario.
De este modo, nuestros formularios empiezan a tener un poco más de sentido, aunque todavía, como podréis comprobar, poco podremos hacer con ellos. Pero algo se podrá hacer, y, como no quiero hacer un post demasiado denso con demasiadas cosas, mejor paramos aquí y pasamos a hacer un ejercicio:

EJERCICIO

En esta ocasión vamos a coger el archivo que hicimos en en el ejercicio de la parte 16 (aquí podéis encontrar el código) e incluirle eventos que suelten alert: los input de tipo radio y checkbox deberán mostrar cuál casilla se ha activado (o desactivado) al clickar sobre ellos. Los campos de texto deberán avisar cuándo se escriba algún texto en él, y los botones (reset y submit) deberán avisar de qué acción están realizando.

Y eso, de momento, es todo. La semana que viene empezaremos a tratar la información con la que trabajamos en los formularios. No os ilusionéis demasiado, hasta que no veamos PHP los formularios no serán completamente operativos, pero algunas cosas interesantes podemos hacer en JavaScript.

No hay comentarios: