Hasta ahora todos nuestros ejemplos se han producido de forma automática al ejecutar nuestro código, pero ahora vamos a ver la introducción a los eventos en JavaScript, descubriendo una enorme potencia  en el desarrollo de nuestras futuras aplicaciones y el dinamismo de las mismas.

En la programación orientada a eventos los scripts esperan a que el usuario realice alguna acción interactuando con ellos, respondiendo a la acción y generando un resultado.

Por medio de los eventos los usuarios pueden transmitir información a los programas para que estos respondan de forma adecuada a las necesidades requeridas por el usuario.

En JavaScript es posible asignar una función a cada uno de los eventos, de esta forma cuando alguno se activa se pone en funcionamiento su función específica. Este tipo de funciones se llaman en inglés «event handlers» lo que puede traducirse por «manejadores de eventos».

Algunos modelos de eventos

Aunque los veremos con más detenimiento en las siguientes entradas, podemos hacer una primera lista del tipo de eventos que podemos encontrar:

• Cuando se hace click con el ratón
• Cuando se ha cargado la página web
• Cuando se carga una imagen
• Cuando el ratón se mueve sobre un elemento
• Al cambiar, seleccionar… un campo de entrada
• Interactuar una tecla
• Al enviar un formulario

Reaccionando a eventos

Como una forma previa a lo que vamos a ver, podemos adelantar que los eventos pueden reaccionar desde el mismo html utilizando atributos, desde funciones o de forma automática cuando ocurren sucesos en la web.

En la siguiente línea que se trata tan solo de un simple ejemplo podemos ver como al hacer click sobre el h1 se va a modificar el texto con tan solo un atributo, onclick:

<h1 onclick="this.innerHTML='Hola mundo!'">¡Haz Cick aquí!</h1>

Aunque esta no es la forma más recomendada de hacerlo, ya que estamos introduciendo el código JavaScript dentro del html, podríamos hacer lo mismo por medio de una llamada a una función como a continuación:

<h1 onclick="changeText(this)">¡Haz click aquí!</h1>
<script>
function changeText(id) {
    id.innerHTML = "Hola Mundo!";
}
</script>

El resultado es el mismo, aunque ahora tenemos nuestro código JS apartado del HTML (como siempre recomiendo que el código JS se encuentre en un archivo aparte, aunque en los ejemplos lo pongamos en el mismo). Aunque podemos pensar que es escribir más código, pensemos que tenemos que tratar datos y controlar la secuencia de flujo de los mismos por medio de condicionales y bucles, en ese caso es mejor tener el JS aparte y bien legible, cosa que no ocurre si lo introducimos dentro del atributo.

Pero también podemos jugar con las ids de los elementos y hacer que interaccionen por medio de las mismas como en el siguiente ejemplo:

<button id="boton">Pulsa</button>
<span id="demo"></span>
<script>
document.getElementById("boton").onclick = mostrarFecha;

function mostrarFecha() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

De este modo también podemos interactuar con los elementos cuando hay modificaciones por medio de onchange como en el siguiente ejemplo:

Introduzca su nombre: <input type="text" id="nombre" onchange="funcion()">
<script>
function funcion() {
    var x = document.getElementById("nombre");
    x.value = x.value.toUpperCase();
}
</script>

Aquí al escribir algo en el input y hacer intro se convertirá en mayúsculas.

No solo existen estos, sino muchos otros que veremos en el siguiente artículo y que iremos trabajando poco a poco para lograr hacer que nuestras webs se conviertan en algo más que texto, colores e imágenes.