Eventos sólo en el código JavaScript

Enviado por Alex el Lun, 03/12/2007 - 17:38

Posted in coding | es | web | blog de Alex | agregar nuevo comentario | 668 lecturas »

La semana pasada escribí un articulillo sobre jQuery, una biblioteca muy interesante para facilitar la programación con JavaScript. Fue muy interesante, porque programar con jQuery es muy divertido, y tiene unas peculiaridades bastante curiosas. Más tarde, este fin de semana, he estado también programando con JavaScript. No es que sepa mucho, así que no ha sido nada serio, sólo una práctica de la universidad en la que nos hacen hacer la típica validación de un formulario. Pero he aprovechado para poner en práctica alguna cosilla que he aprendido mientras escribía sobre jQuery.

Muchos de los que empiezan a programar con JavaScript en el navegador, suelen probar un ejemplo muy parecido a este:

<html>
<head><title>Prueba</title></head>
<body onload="alert('Si puedes leer esto, JavaScript no está desactivado');">
</body>
<html>

Eso no está mal para hacer una prueba, pero si hay que hacer varias operaciones cuando el documento se carga, estaremos metiendo demasiado código. Así que la solución habitual es llamar a una función en el código HTML, y definir esa función en el código JavaScript. Eso tampoco está mal, pero requiere declarar con un elemento META que el código que pongamos en el documento será JavaScript (que es un estándar de facto, pero no es el único lenguaje posible), y tiene dos inconvenientes. Uno, que no se separa del todo la lógica de la estructura, y dos, que hace que los eventos sean estáticos (siempre los mismos en lugar de definidos a nuestra conveniencia). Es posible, y además muy fácilmente, definir la función a ejecutar en el evento onload en el propio código JavaScript. También es posible hacer lo mismo para otros elementos del documento, y en el siguiente ejemplo se hace justamente eso para un formulario que tiene «userdata» como identificador.

// init, without (), is a reference to the function to be called
window.onload = init;

function init()
{
	// Retrieve the form element.
	f = document.getElementById("userdata");

	// If the form is not found, fallback gracefully.
	// That way the JS file can be included always, in the whole site.
	if (f == null)
		return;

	// Execute the validate() function when the form is submitted.
	f.onsubmit=validate;
}

Hay que recordar que los nombres de las funciones, no son cadenas de texto como las que se pasan a setTimeout, sino que son referencias. Es algo similar a los punteros a funciones de C. Si tenéis algún libro sobre JavaScript, consultad la sección sobre funciones, porque tienen posibilidades muy interesantes con este lenguaje.

Como propina, una función que a veces me es útil para saber que métodos están disponibles en un objeto, o que tipo es este:

function introspect(variable)
{
	alert(variable);

	var methods = "";
	for (var method in variable)
	{
		methods += method + "\n";
	}
	alert(methods);
}

Y recordad que si el cuadro de diálogo del alert() es demasiado grande para moverlo con la barra de título, podéis moverla manteniendo pulsado alt y pulsando y arrastrando desde cualquier lugar de la ventana. Esto usando X11, claro está.