Atras Inicio Adelante
Manejadores de Eventos

Uno de los manejadores más básicos es OnClick que inicializa un script, como su propio nombre indica, cuando el usuario hace clic en un link de la ventana del browser. Todos los demás manejadores funcionan de la misma manera: evalúan la acción de un usuario y entonces llaman a un script que ejecuta el código.En este apartado vamos a ver manejadores de eventos de:
Hay que recordar que los casos a tratar suelen ser visibles con browsers como Internet Explorer 3.0 en adelante y Netscape Navigator 2.0 en adelante, aunque algunos necesitan versiones posteriores. Puede ocurrir que algunos de los ejemplos produzcan errores con MicroSoft Internet Explorer dado que MicroSoft ha desarrollado su propio lenguaje para estos menesteres llamado JScript y que, por supuesto, contiene algunas diferencias con el JavaScript desarrollado por Netscape.
Vamos a ir aprendiendo el uso de estos manejadores a través de ejemplos explicados.

1.Mensajes de Alerta - Manejador OnClick

El manejador OnClick, como ya se ha dicho anteriormente, es uno de los componentes más básicos y usados de JavaScript. El siguiente ejemplo utiliza este manejador para generar un mensaje de alerta en el browser.Los mensajes de alerta son utilizados para muy variados propósitos pero básicamente se usan para informar al usuario de algo a través de un cuadro de diálogo que aparece tras la acción del usuario.
<HTML>
<HEAD>
<TITLE> PRUEBA 1 </TITLE>
<SCRIPT>
function boton(){
alert("Esta página está en construcción, pero puedes echar un vistazo si quieres");}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#00AA00" TEXT="#FFFFFF" LINK="#0000FF"
VLINK="#0000FF" ALINK="#0000FF" >
<CENTER><H1>Esto es un ejemplo</H1></CENTER>
Visita nuestro <A HREF="MENU.HTM" onClick="boton();">menú </A>del día
</BODY>
</HTML>

Si quieres ver cómo funciona este código, pulsa aquí.

Como se puede ver insertamos el código de script en la cabecera del documento, definiendo una función, boton(), que contiene el método alert().Este código se ejecuta cuando el usuario hace clic sobre el link menú que antes de llevarle a la página MENU.HTM muestra el mensaje incluido con el método alert().

2.Botón de Navegación - Manejador OnClick, método go(), objeto history
Este ejemplo utiliza el método onClick para inicializar el método go(), perteneciente al objeto history que permite la navegación hacia delante y hacia atrás sobre el historial de un URL. El código de este ejemplo es el siguiente:
<HTML>
<HEAD>
<TITLE> PRUEBA 2 </TITLE>
<SCRIPT LANGUAGE="JavaScript">
function nav(x) {
      history.go(x);}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#00AA00" TEXT="#FFFFFF" LINK="#0000FF"
VLINK="#0000FF" ALINK="#0000FF" >
<CENTER><H1>Navegación con botones<H1>
<H2>Estos son dos botones hechos como componentes de un formulario:<H2><P>
<FORM>
<INPUT TYPE="button" VALUE="ATRAS" onClick="nav(-1);">
<INPUT TYPE="button" VALUE="ADELANTE" onClick="nav(1);">
</FORM><P>
<H2>Y este es un texto con un link de JavaScript.<H2><P>
<A HREF=javascript:history.go(-2);>ATRAS DOS PÁGINAS</A>
<P>
</CENTER>
</BODY>
</HTML>

Si quieres ver cómo funciona este código, pulsa aquí.
Pasemos a analizar el código. Definimos la función nav(x) que, a través de la variable x, da el número de saltos en páginas que el browser debe implementar. En este mismo ejemplo vamos a ver dos formas de hacer lo mismo. El método history.go(x) toma un valor entero x que en la primera parte del código es 1 ó -1
<INPUT TYPE="button" VALUE="ATRAS" onClick="nav(-1);">
<INPUT TYPE="button" VALUE="ADELANTE" onClick="nav(1);">

y carga el URL correspondiente al número adelante o atrás especificado en el historial de navegación de la sesión en curso. Este método toma el valor de la función nav(x), que es llamada al hacer clic en los botones definidos en el formulario. La segunda forma de hacer el mismo proceso, dando a la vez más libertad al desarrollador dado que permite diseñar el propio botón como un .GIF o como es el caso que nos ocupa, con texto, lo vemos en la línea
<A HREF=javascript:history.go(-2);>ATRAS DOS PÁGINAS</A>

en donde podemos ver cómo implementar un anclaje de JavaScript.

3.Botón de E-mail
Este ejemplo abre la ventana de correo electrónico para mandar un mensaje a la dirección especificada. Veamos primero el código:
<HTML>
<HEAD>
<TITLE> PRUEBA 3 </TITLE>
</HEAD>
<BODY BGCOLOR="#00AA00" TEXT="#FFFFFF" LINK="#0000FF"
VLINK="#0000FF" ALINK="#0000FF" >
<H1>Ejemplo de Botón de Correo</H1>
<CENTER><FORM>
<INPUT TYPE="button" VALUE="Enviar correo"
onClick="self.location='mailto:webmaster@cal.upco.es';">
</FORM>
</CENTER>
</BODY>
</HTML>

Si quieres ver cómo funciona este código, pulsa aquí.
En este ejemplo no definimos una función y directamente a través del manejador OnClick invocamos una propiedad, self, del objeto window. Ni que decir tiene que podemos sustituir la línea 'mailto:webmaster@cal.upco.es' por cualquier otro URL.

4.Barra de Estado con Mensaje
Con este ejemplo vamos a introducir un nuevo manejador:onMouseOver.¿Cuándo se "dispara" este manejador?: pues como su propio nombre indica al pasar el ratón por encima del elemento que tiene la llamada del manejador, es decir, al reconocer la presencia del ratón sobre el área de texto o imagen, lo que produce un mensaje predefinido que aparece en la barra de estado de la ventana del browser.
Tenemos dos tipos de links que cumplen el mismo propósito de generar un mensaje en la barra de estado: el enlace de texto,
<A HREF="link2.htm" onMouseOver="windows.status='Enlace a la página link2.htm';
return true">
<H1>Link Nº2</H1></A><P>

y el enlace de imagen,
<A HREF="link1.htm" onMouseOver="windows.status='Esto es un reloj';return true">
<IMG SRC="reloj.jpg"> </A>

De estas dos maneras conseguimos distintos mensajes sin necesidad de hacer efectivos los links. Este ejemplo también introduce una nueva propiedad del objeto window:status.Lo que hace es mostrar el texto asignado en la barra de estado (extremo inferior izquierdo) de la ventana del documento. El script debe contener la instrucción return true dentro del manejador de eventos onMouseOver para un correcto funcionamiento.

5.Mensaje de Alerta con Manejador onMouseOver
Este ejemplo es una simple combinación de dos de los anteriores para aunar conceptos: nos encontramos con una ventana de alerta al pasar el ratón por un área determinada. Podemos ver el código, que no necesita explicación adicional:
<SCRIPT LANGUAGE="JavaScript">
function TextoAlerta() {
      alert("Página en construcción.Lo sentimos mucho");}
</SCRIPT>
............................................................
<A HREF="link1.htm" onMouseOver="TextoAlerta();">Visita esta página </A>

6.Mensaje de Alerta con Manejador onMouseOut
En este ejemplo introducimos el último manejador de link:onMouseOut. Lo que hace este manejador es esperar a que el ratón abandone el área predefinida como link para disparar el mensaje de alerta. Resumiendo, para que se ejecute el script el ratón debe entrar y salir del área de link. Se podría utilizar este manejador para implementar juegos o en páginas donde es necesario que el usuario haga clic en una zona determinada (imagen, por ejemplo) para desencadenar una serie de acciones.Veamos cómo sería el código:
<H1><A HREF="hora.htm" onMouseOut="alert('Debe hacer clic
en la imagen para ver la hora');">
<IMG SRC="reloj.jpg"></A></H1>

7.Ejemplo de un Juego on line
Este ejemplo es un simple juego de preguntas y respuestas cuyo código no puede ser a estas alturas más simple. Combina el manejador onClick, con el método alert() y con etiquetas INPUT de botón. La ventaja de este ejemplo es que toda la funcionalidad del mismo reside en el cliente, cuando anteriormente se debía recurrir a un CGI para conseguir el mismo resultado. Como innovación se utiliza la propiedad checked aplicable a los objetos tipo button de un formulario, y que obviamente marcan la elección hecha. Veamos el código:
<HTML>
<HEAD>
<TITLE> PRUEBA 3 </TITLE>
</HEAD>
<BODY BGCOLOR="#00AA00" TEXT="#FFFFFF" LINK="#0000FF"
VLINK="#0000FF" ALINK="#0000FF" >
<CENTER><H1>¿Sabes Idiomas?<H1>
<FORM>
<STRONG><FONT SIZE=5>¿Qué significa en alemán HAUS?</FONT></STRONG>
<FONT SIZE=4><P>
<INPUT TYPE=RADIO name="b1" onClick="alert('Empezamos mal.');b1.checked;">
Nada en absoluto<BR>
<INPUT TYPE=RADIO name="b2" onClick="alert('Correcto.');b2.checked;">
Casa;BR>
<INPUT TYPE=RADIO name="b3" onClick="alert('Hay que saber idiomas.');b3.checked;">
Hay que usar corbatas en actos oficiales<BR>
</FONT>
</FORM>
</CENTER><BR><BR><H5>Con este tipo de ejecución se reduce la carga del servidor<H5>
</BODY>
</HTML>

Si quieres ver cómo funciona este código, pulsa aquí.

8.Eventos de Ventana
A continuación vamos a ver los eventos de ventana. Un evento de ventana puede ser definido como un evento disparado por alguna actividad relacionada con la ventana del browser como por ejemplo la carga o descarga de un documento, manejadores onLoad y onUnload, o la obtención o pérdida del foco, esto se refiere a que una ventana dentro de un grupo de ellas esté activa sobre las demás, manejadores onFocus y onBlur. Este tipo de eventos no sólo se aplica a ventanas completas sino también a frames, subventanas o marcos, dentro de ellas. Por ello las etiquetas HTML sobre los que irán estos manejadores serán <BODY>, para la ventana completa, y/o <FRAMESET>, para los frames.
A partir de la versión 3.0 de Netscape se introdujeron dos nuevos métodos a los objetos ventana y frame: blur() y focus(). De ellos surgieron los dos últimos manejadores de eventos anteriormente mencionados. En la práctica no son usados aunque sí se utilizan los métodos para dar y quitar el foco a una ventana o frame en ciertos momentos.
Veamos un ejemplo para obtener la hora exacta del sistema:
<SCRIPT LANGUAGE="JavaScript">
function horario() {
      var hoy=new Date();
      document.forms[0].elements[0].value=hoy.toString();
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#00AA00" TEXT="#FFFFFF" LINK="#0000FF"
VLINK="#0000FF" ALINK="#0000FF" ONLOAD="setTimeout('horario();',1000);" >
............................................
<FORM>
<INPUT TYPE="text" VALUE="" SIZE="19">
</FORM>
............................................

Con esto obtenemos en un formulario con una caja de texto la fecha y la hora del sistema. Para ello hemos definido en la cabecera del documento la función horario( ). En la variable hoy almacenamos el resultado de aplicar el método new date(). El método toString( ) convierte el valor de dicha variable en una cadena cuyo valor asigna al valor del primer elemento del formulario del documento, ventana, sobre el que estamos.El argumento 1000 representa 1000 milisegundos ó 1 segundo y es el tiempo que tarda en actualizar el valor de la fecha de la ventana a través del método setTimeout(), creando así la ilusión de un reloj digital.La llamada al script se realiza a través del manejador onLoad en la etiqueta del cuerpo del documento.


Veamos ahora un ejemplo que permite al usuario confirmar si desea cargar una página al comienzo del proceso.
<HTML>
<HEAD>
<TITLE> PRUEBA 4 </TITLE>
<SCRIPT LANGUAGE="JavaScript">
function confirma() {
     if (!confirm
      ("Debe tener usted los datos necesarios para seguir la ejecución.¿Desea seguir?"))
      history.go(-1);
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#00AA00" TEXT="#FFFFFF" LINK="#0000FF"
VLINK="#0000FF" ALINK="#0000FF" ONLOAD='confirma();'>
Cuerpo del Documento
</BODY>
</HTML>


La explicación es bastante sencilla. Definimos la función confirma(), que se invoca mediante el manejador onLoad en la carga de la página. Esta función controla mediante una sentencia de control if si el usuario ha pulsado "aceptar" o "cancelar".¿Que cómo?. En la línea
if (!confirm
("Debe tener usted los datos necesarios para seguir la ejecución.¿Desea seguir?"))
history.go(-1);

donde lo que está preguntando es si ha pulsado "cancelar" (el operador ! indica negación). En caso afirmativo atrasa en una página la navegación del browser a través de la línea
history.go(-1);


Por último vamos a ver el código de JavaScript que más a menudo se ve por el WWW. Una vez que una página está cargada, empieza a desplazarse de derecha a izquierda de la barra de estado de la ventana del browser una serie de textos. Veamos el código y lo comentamos:
<HTML>
<HEAD>
<TITLE> PRUEBA 5 </TITLE>
<SCRIPT LANGUAGE="JavaScript">
var timed=0;
var srollGo=false;
var delay=100;
var space=100;
function scroll1() {
     var i=0;
     msg="Este es el mensaje que aparece";
     for(i=0;i<space;i++)
           msg=" "+msg;
     scrollGo=true;
     timerid=window.setTimeout("scroll2(0)",delay);
}
function scroll2(pos){
      var out=" ";
      scrollGo=false;
      if (pos<msg.length)
         self.status=msg.substring(pos, msg.length);
...........................................................


Este ejemplo utiliza la propiedad status del objeto window. Manipulando la longitud del mensaje y añadiendo un retraso, a través de la variable delay, usando el método setTimeout obtenemos el efecto descrito. También son novedad en este ejemplo el método subString() y la propiedad length. El método subString() muestra una parte de una cadena de caracteres. Usa dos argumentos: el primero determina dónde comienza la subcadena a mostrar y el segundo dónde acaba. La propiedad length indica el número de elementos en un array, en nuestro caso la longitud del mensaje.
Atras Inicio Adelante