martes, agosto 21, 2012

Tutorial de desarrollo web, Parte LI: Eventos (III)

Bueno, ahora que ya sabemos lo que son las clases y los objetos, podemos volver al tema de los eventos que habíamos dejado aparcado hace unas semanas. Recordaremos que, para crear eventos, debíamos incluir un nuevo atributo en la etiqueta HTML en cuestión.
Sin embargo, una práctica bastante inteligente en programación es intentar que en cada documento sólo haya un único lenguaje. O sea, en un documento ".html" que sólo haya lenguaje HTML, en un lenguaje ".css" sólo haya CSS, en uno ".js" sólo haya JavaScript y así en adelante. Si usamos un atributo de evento en una etiqueta HTML estamos obligándonos a incluir HTML y JavaScript en un mismo documento, lo cual nos puede acabar llevando a lo que, peyorativamente, se conoce como spaghetti code, un caos de mezcla de códigos dentro de un mismo archivo. Por eso es siempre tan útil usar correctamente las etiquetas "id" y "class" en CSS, para evitar tener código CSS dentro del HTML.
De este modo, hoy vamos a aprender a manejar eventos desde un archivo externo de JavaScript, de modo que, si actuamos de modo inteligente, podamos crear una página que separe por completo los tres códigos HTML, JavaScript y CSS.
En primer lugar, recordemos cómo llamar a objetos HTML desde JavaScript. ¿Lo recordáis? Imaginemos que tengamos este código HTML:
<input type="submit" value="Aceptar" id="aceptar"/>
Para llamarlo desde JavaScript teníamos que hacer lo siguiente:
var botonAceptar = document.getElementById("aceptar");
¿Recordáis ese código? Ahora supongo que entenderéis un poco mejor ese código: "document" es un objeto y "getElementById()" un método de dicho objeto que retorna un elemento HTML. De modo que, al ejecutarse ese código, en la variable "botonAceptar" habrá un elemento HTML, en concreto un "input" de tipo "submit".
Un elemento HTML es a su vez también un objeto en JavaScript, por lo que tiene sus atributos y sus métodos. El otro día vimos que los atributos HTML pueden ser llamados como atributos HTML de una manera bastante simple. Por ejemplo:
document.write(botonAceptar.value);
En este código, "value" es un atributo de "botonAceptar". En nuestro ejemplo, el "value" que le dimos al "submit" era "Aceptar" y, por lo tanto, este código nos escribirá en pantalla "Aceptar". Y, del mismo modo que podemos recibir un valor, podemos darle un valor nuevo, por ejemplo:
botonAceptar.value = "Cancelar";
Si ejecutamos ese código veremos como el texto del botón ahora aparecerá como "Cancelar".
Bien, para incluir un evento sólo necesitaremos hacer algo similar a lo que hemos hecho ahora, ya que los eventos son, al fin y al cabo, atributos del elemento, así que, al igual que hacíamos para crear un método, podemos hacer lo siguiente:
botonAceptar.onclick = function()
{
alert("Usted ha aceptado.");
}

Simple, ¿no?
Realmente existen dos maneras más de incluir eventos en código JavaScript sin tocar el código HTML, y es posible que sean incluso más útiles, pero hoy el tiempo del que dispongo es escaso, así que por hoy os dejo con esto, y la semana que viene terminaremos de ver los eventos.

EJERCICIO

Como digo, poco tiempo esta semana, así que voy a recurrir a lo fácil: esta semana habrá que modificar el ejercicio de la parte XL y usarlo con este nuevo método.

Y, por hoy, me despido. Les aviso que ya estamos terminando con el JavaScript, y es posible que en un mes o así lo demos por concluído. Todavía estoy planteándome si seguir luego con los demás lenguajes orientados a la web o dar por concluído el curso con ésto. Ya me lo plantearé.

No hay comentarios: