Programación en JavaScript (IV)

Por Miguel Angel Alvarez

 

Los eventos en Javascript

 

Los eventos son la manera que tenemos en Javascript de controlar las acciones de los visitantes y definir un comportamiento de la página cuando se produzcan. Cuando un usuario visita una página web e interactúa con ella se producen los eventos y con Javascript podemos definir qué queremos que ocurra cuando se produzcan. 

Con javascript podemos definir qué es lo que pasa cuando se produce un evento como podría ser que un usuario pulse sobre un botón, edite un campo de texto o abandone la página. 

El manejo de eventos es el caballo de batalla para hacer páginas interactivas, porque con ellos podemos responder a las acciones de los usuarios. Hasta ahora en este manual hemos podido ver muchos ejemplos de manejo de uno de los eventos de Javascript, el evento onclick, que se produce al pulsar un elemento de la página. Hasta ahora siempre hemos aplicado el evento a un botón, pero podríamos aplicarlo a otros elementos de la página. 

Cómo se define un evento 

Para definir las acciones que queremos realizar al producirse un evento utilizamos los manejadores de eventos. Existen muchos tipos de manejadores de eventos, para muchos tipos de acciones del usuario. El maneador de eventos se coloca en la etiqueta HTML del elemento de la página que queremos que responda a las acciones del usuario. 

Por ejemplo tenemos el manejador de eventos onclick, que sirve para describir acciones que queremos que se ejecuten cuando se hace un click. Si queremos que al hacer click sobre un botón pase alguna cosa, escribimos el manejador onclick en la etiqueta <INPUT type=button> de ese botón. Algo parecido a esto. 

<INPUT type=button value="pulsame" onclick="sentencias_javascript..."> 

Se coloca un atributo nuevo en la etiqueta que tiene el mismo nombre que el evento, en este caso onclick. El atributo se iguala a las sentencias Javascript que queremos que se ejecuten al producirse el evento. 

Cada elemento de la página tiene su propia lista de eventos soportados, vamos a ver otro ejemplo de manejo de eventos, esta vez sobre un menú desplegable, en el que definimos un comportamiento cuando cambiamos el valor seleccionado. 

<SELECT onchange="window.alert('Cambiaste la selección')"> 
<OPTION value="opcion1">Opcion 1 
<OPTION value="opcion2">Opcion 2 
</SELECT> 


En este ejemplo cada vez que se cambia la opción muestra una caja de alerta. Podemos verlo en una página aparte. 

Dentro de los manejadores de eventos podemos colocar tantas instrucciones como deseemos, pero siempre separadas por punto y coma. Lo habitual es colocar una sola instrucción, y si se desean colocar más de una se suele crear una función con todas las instrucciones y dentro del manejador se coloca una sola instrucción que es la llamada a la función. 

Vamos a ver cómo se colocarían en un manejador varias instrucciones. 

<input type=button value=Pulsame 
   onclick="x=30; window.alert(x); window.document.bgColor = 'red'"> 


Son instrucciones muy simples como asignar a x el valor 30, hacer una ventana de alerta con el valor de x y cambiar el color del fondo a rojo. Podemos ver el ejemplo en una página aparte. 

Sin embargo, tantas instrucciones puestas en un manejador quedan un poco confusas, habría sido mejor crear una función así. 

<script> 
function ejecutaEventoOnclick(){ 
    x = 30 
    window.alert(x) 
    window.document.bgColor = 'red' 
} 
</script> 

<FORM> 
<input type=button value=Pulsame onclick="ejecutaEventoOnclick()"> 
</FORM> 


Ahora utilizamos más texto para hacer lo mismo, pero seguro que a la mayoría les parece más claro este segundo ejemplo. Si se desea, se puede ver esta última página en una ventana aparte 

Jerarquía desde el objeto window 

En los manejadores de eventos se tiene que especificar la jerarquía entera de objetos del navegador, empezando siempre por el objeto window. Esto es necesario porque hay algún browser antiguo que no sobreentiende el objeto window cuando se escriben sentencias Javascript vinculadas a manejadores de eventos.

 

Los manejadores de eventos en Javascript

 

Ahora vamos a ver una lista de los manejadores de eventos que hay disponibles en Javascript, ofreciendo una pequeña descripción de cada uno.

Si queremos saber previamente qué es un evento y como se tratan en Javascript, podemos consultar el artículo anterior del manual: Los eventos en Javascript 

Nota: Estos manejadores de eventos son los más comunes, presentes en Javascript 1.2 de Netscape Navigator. Existen otros manejadores que también son muy interesantes y veremos más adelante en capítulos de temas avanzados de eventos.

La lista de manejadores de eventos contiene el nombre del manejador en negrita, su descripción y finalmente la versión de Javascript que incorporó dicho manejador.


onabort 
Este evento se produce cuando un usuario detiene la carga de una imagen, ya sea porque detiene la carga de la página o porque realiza una acción que la detiene, como por ejemplo irse de la página. 
Javascript 1.1 

onblur 
Se desata un evento onblur cuando un elemento pierde el foco de la aplicación. El foco de la aplicación es el lugar donde está situado el cursor, por ejemplo puede estar situado sobre un campo de texto, una página, un botón o cualquier otro elemento. 
Javascript 1.0 

onchange 
Se desata este evento cuando cambia el estado de un elemento de formulario, en ocasiones no se produce hasta que el usuario retira el foco de la aplicación del elemento. Javascript 1.0 
Javascript 1.0 

onclick 
Se produce cuando se da una pulsación o clic al botón del ratón sobre un elemento de la página, generalmente un botón o un enlace. 
Javascript 1.0 

ondragdrop 
Se produce cuando un usuario suelta algo que había arrastrado sobre la página web. 
Javascript 1.2 

onerror 
Se produce cuando no se puede cargar un documento o una imagen y esta queda rota. 
Javascript 1.1 

onfocus 
El evento onfocus es lo contrario de onblur. Se produce cuando un elemento de la página o la ventana ganan el foco de la aplicación. 
Javascript 1.0 

onkeydown 
Este evento se produce en el instante que un usuario presiona una tecla, independientemente que la suelte o no. Se produce en el momento de la pulsación. 
Javascript 1.2 

onkeypress 
Ocurre un evento onkeypress cuando el usuario deja pulsada una tecla un tiempo determinado. Antes de este evento se produce un onkeydown en el momento que se pulsa la tecla.. 
Javascript 1.2 

onkeyup 
Se produce cuando el usuario deja de apretar una tecla. Se produce en el momento que se libera la tecla. 
Javascript 1.2 

onload 
Este evento se desata cuando la página, o en Javascript 1.1 las imágenes, ha terminado de cargarse. 
Javascript 1.0 

onmousedown 
Se produce el evento onmousedown cuando el uuario pulsa sobre un elemento de la página. onmousedown se produce en el momento de pulsar el botón, se suelte o no. 
Javascript 1.2 

onmousemove 
Se produce cuando el ratón se mueve por la página. 
Javascript 1.2 

onmouseout 
Se desata un evento onmuoseout cuando el puntero del ratón sale del área ocupada por un elemento de la página. 
Javascript 1.1 

onmouseover 
Este evento se desata cuando el puntero del ratón entra en el área ocupada por un eolemento de la página. 
Javascript 1.0 

onmouseup 
Este evento se produce en el momento que el usuario suelta el botón del ratón, que previamente había pulsado. 
Javascript 1.2 

onmove 
Evento que se ejecuta cuando se mueve la ventana del navegador, o un frame. 
Javascript 1.2 

onresize 
Evento que se produce cuando se redimensiona la ventana del navegador, o el frame, en caso de que la página los tenga. 
Javascript 1.2 

onreset 
Este evento está asociado a los formularios y se desata en el momento que un usuario hace clic en el botón de reset de un formulario. 
Javascript 1.1 

onselect 
Se ejecuta cuando un usuario realiza una selección de un elemento de un formulario. 
Javascript 1.0 

onsubmit 
Ocurre cuando el visitante apreta sobre el botón de enviar el formulario. Se ejecuta antes del envío propiamente dicho. 
Javascript 1.0 

onunload 
Al abandonar una página, ya sea porque se pulse sobre un enlace que nos lleve a otra página o porque se cierre la ventana del navegador, se ejecuta el evento onunload. 
Javascript 1.0

 

Ejemplos de eventos en Javascript. Onabort

 

Veamos un primer ejemplo, en este caso sobre el evento onabort. Este evento se activa al cancelarse la carga de una página, ya sea porque se pulsa el botón de cancelar o porque el usuario se marcha de la página por otro enlace. 

Este ejemplo contiene una imagen que tiene el evento onabort asignado para que se ejecute una función en caso de que la imagen no llegue a cargarse. La función informa al usuario de que la imagen no se ha llegado a cargar y le pregunta si desea cargarla otra vez. Si el usuario contesta que sí, entonces se pone a descargar la imagen otra vez. Si dice que no, no hace nada. La pregunta se hace con una caja confirm de Javascript. 

<html> <head> 
    <title>Evento onabort</title> 

<script> 
function preguntarSeguir(){ 
    respuesta = confirm ("Has detenido la carga de la página y hay una imagen que no estás viendo.\n¿Deseas cargar la imagen?") 
    if (respuesta) 
       document.img1.src = "http://ipaginate.iespana.es/ipaginate/desarrollogrande.gif" 
} 
</script> 

</head> 
<body> 
<img name=img1 src="http://ipaginate.iespana.es/ipaginate/desarrollogrande.gif" width=500 height=458 alt="Imagen que pesa 115K" border="0" onabort="preguntarSeguir()"> 
<br> 
Pulsa el botón de parar la carga de la página y se pondrá en marcha el evento onerror 

</body> 
</html> 


Este ejemplo estaría bien si siempre se detuviese la carga por pulsar el botón de cancelar, pero si lo que pasa es que el usuario ha cancelado por irse a otra página a través de un enlace, saldrá la caja de confirmación pero no ocurrirá nada independientemente de lo que se responda y el navegante se marchará irremediablemente a la nueva página. 

Se puede ver en una página aparte.

 

Ejemplo del evento onblur en Javascript

 

Onblur se activa cuando el usuario retira el foco de la aplicación de un elemento de la página. El foco de la aplicación es el lugar donde está el cursor. 

Si por ejemplo, estamos situados en un campo de texto y nos vamos de dicho campo, ya sea porque pulsamos con el ratón en otro campo del formulario o en un área vacía, ya sea porque el usuario a apretado el botón tabulador (Tab) que mueve el foco hasta el siguiente elemento de la página. 

Si yo deseo que, al situarse fuera de un campo de texto, se compruebe que el valor introducido es correcto puedo utilizar onblur y llamar a una función que compruebe si el dato es correcto. Si no es correcto puedo obligar al foco de la aplicación a situarse nuevamente sobre el campo de texto y avisar al usuario para que cambie dicho valor. 

Puede ser una manera interesante de asegurarnos que en un campo de texto se encuentra un valor válido. Aunque tiene alguna pega, como veremos más adelante. 

Vamos a empezar por un caso sencillo, en el que solamente deseamos comprobar un campo de texto para asegurarnos que es un número entero. 

Referencia: La función que valida un entero la hemos explicado en un taller anterior de Javascript: Validar entero en campo de formulario.


<html> 
<head> 
    <title>Evento onblur</title> 

<script> 
function validarEntero(valor){ 
    //intento convertir a entero. 
    //si era un entero no le afecta, si no lo era lo intenta convertir 
    valor = parseInt(valor) 

    //Compruebo si es un valor numérico 
    if (isNaN(valor)) { 
       //entonces (no es numero) devuelvo el valor cadena vacia 
       return "" 
    }else{ 
       //En caso contrario (Si era un número) devuelvo el valor 
       return valor 
    } 
} 

function compruebaValidoEntero(){ 
    enteroValidado = validarEntero(document.f1.numero.value) 
    if (enteroValidado == ""){ 
       //si era la cadena vacía es que no era válido. Lo aviso 
       alert ("Debe escribir un entero!") 
       //selecciono el texto 
       document.f1.numero.select() 
       //coloco otra vez el foco 
       document.f1.numero.focus() 
    }else 
       document.f1.numero.value = enteroValidado 
} 
</script> 
</head> 
<body> 
<form name=f1> 
Escriba un número entero: <input type=text name=numero size=8 value="" onblur="compruebaValidoEntero()">
</form> 

</body> 
</html> 


Al salirse del campo de texto (onblur) se ejecuta compruebaValidoEntero(), que utiliza la función validarEntero, explicada en un taller de Javascript. Si el valor devuelto por la función no es el de un entero, en este caso se recibiría una cadena vacía, muestra un mensaje en una caja alert, selecciona el texto escrito en la caja y coloca el foco de la aplicación en la caja de texto, para que el usuario coloque otro valor. 

Hasta que el visitante no escriba un número entero en el campo de texto el foco de la aplicación permanecerá en el campo y continuará recibiendo mensajes de error. 

Podemos ver este ejemplo en marcha en una página aparte.

 

Hemos visto en el ejemplo del método onblur relatado anteriormente una posible técnica para comprobar los datos de un campo de formulario. Ahora vamos a ver cómo evolucionar esta técnica si tenemos más de un campo a validar, dado que se puede complicar bastante el problema. 

De hecho, antes de leer nuestra solución propuesta, creo que sería un buen ejercicio a realizar por el lector la práctica de hacer ese mismo ejemplo para dos campos y trabajar un poco con la página a ver si encontramos algún problema. 

Muy probablemente nos encontraremos con un curioso bucle infinito que nos va a dar más de un quebradero de cabeza para solucionarlo. 

En la práctica, el lector puede intentar validar un número entero y un código postal. Para validar un código postal necesitamos comprobar que es una cadena de texto compuesta por 5 caracteres y todos son enteros, por lo menos para los códigos en España. 

Por si alguien lo quiere intentar, la función para validar un código postal sería algo parecido a esto: 

function ValidoCP(){ 
    CPValido=true 
    //si no tiene 5 caracteres no es válido 
   if (document.f1.codigo.value.length != 5) 
         CPValido=false 
      else{ 
         for (i=0;i<5;i++){ 
            CActual = document.f1.codigo.value.charAt(i) 
            if (validarEntero(CActual)==""){ 
               CPValido=false 
               break; 
            } 
         } 
      } 
   return CPValido 
} 


Simplemente se encarga de comprobar que el campo de texto contiene 5 caracteres y hacer un recorrido por cada uno de los caracteres para comprobar que todos son enteros. Al principio se supone que el código postal es correcto, colocando la variable CPValido a true, y si alguna comprobación falla se cambia el estado correcto a incorrecto, pasando dicha variable a false. 

Se puede probar a montar el ejemplo con dos campos... nosotros ahora vamos a dar una solución al problema bastante complicadilla, ya que incluimos instrucciones para evitar el efecto del bucle infinito. No vamos a ver el ejemplo que daría el error, lo dejamos para el que desee intentarlo por si mismo y recomendamos hacerlo porque así comprenderemos mejor el siguiente código. 

<html> 
<head> 
    <title>Evento onblur</title> 

<script> 
avisado=false 
function validarEntero(valor){ 
      //intento convertir a entero. 
      //si era un entero no le afecta, si no lo era lo intenta convertir 
       valor = parseInt(valor) 

      //Compruebo si es un valor numérico 
      if (isNaN(valor)) { 
         //entonces (no es numero) devuelvo el valor cadena vacia 
         return "" 
      }else{ 
         //En caso contrario (Si era un número) devuelvo el valor 
         return valor 
      } 
} 

function compruebaValidoEntero(){ 
   enteroValidado = validarEntero(document.f1.numero.value) 
   if (enteroValidado == ""){ 
      //si era la cadena vacía es que no era válido. Lo aviso 
      if (!avisado){ 
         alert ("Debe escribir un entero!") 
         //selecciono el texto 
         document.f1.numero.select() 
         //coloco otra vez el foco 
         document.f1.numero.focus() 
         avisado=true 
         setTimeout('avisado=false',50) 
      } 
   }else 
      document.f1.numero.value = enteroValidado 
} 

function compruebaValidoCP(){ 
   CPValido=true 
   //si no tiene 5 caracteres no es válido 
   if (document.f1.codigo.value.length != 5) 
      CPValido=false 
   else{ 
      for (i=0;i<5;i++){ 
         CActual = document.f1.codigo.value.charAt(i) 
         if (validarEntero(CActual)==""){ 
            CPValido=false 
            break; 
         } 
      } 
   } 
   if (!CPValido){ 
      if (!avisado){ 
         //si no es valido, Lo aviso 
         alert ("Debe escribir un código postal válido") 
         //selecciono el texto 
         document.f1.codigo.select() 
         //coloco otra vez el foco 
         //document.f1.codigo.focus() 
         avisado=true 
         setTimeout('avisado=false',50) 
      } 
   }
} 
</script> 

</head> 
<body> 

<form name=f1> 
Escriba un número entero: <input type=text name=numero size=8 value="" onblur="compruebaValidoEntero()">
<br> 
Escriba un código postal: <input type=text name=codigo size=8 value="" onblur="compruebaValidoCP()"> *espera una cadena con 5 carácteres numéricos 

</form> 

</body> 
</html> 


Este ejemplo sigue la guía del primer ejemplo de onblur de este artículo, incluyendo un nuevo campo a validar. 

Para solucionar el tema del bucle infinito, que habréis podido investigar por vosotros mismos y en el que se mostraban una caja de alerta tras otra indefinidamente, hemos utilizado una variable llamada avisado que contiene un true si ya se ha avisado de que el campo estaba mal y un false si no se ha avisado todavía. 

Cuando se va a mostrar la caja de alerta se comprueba si se ha avisado o no al usuario. Si ya se avisó no se hace nada, evitando que se muestren más cajas de alerta. Si no se había avisado todavía se muestra la caja de alerta y se coloca el foco en el campo que era incorrecto. 

Para restituir la variable avisado a false, de modo que la próxima vez que se escriba mal el valor se muestre el mensaje correspondiente, se utiliza el método setTimeout, que ejecuta la instrucción con un retardo, en este caso de 50 milisegundos. Lo suficiente para que no se meta en un bucle infinito. 

Nota: Después de todos los parches que hemos tenido que colocar para que este evento se comporte correctamente para cumplir el cometido deseado, es posible que no merezca la pena utilizarlo para este cometido. Podemos hacer uso del evento onchange, o comprobar todos los campos de una sola vez cuando el usuario ha decidido enviarlo.


Podemos ver en marcha este ejemplo en una página aparte.

 

Elementos de formulario select asociados

 

Vamos a conocer uno de los trucos más solicitados de Javascript, que tiene mucha relación con el tema de formularios y donde se utiliza el evento onchange de Javascript. Es un ejemplo sobre cómo realizar una página con un par de selects donde, según el valor escogido en uno de ellos, cambien las opciones posibles del otro select. 

Lo mejor para ver lo que vamos a hacer es ver una página web donde se muestra en funcionamiento el script. Para ver su funcionamiento debemos cambiar la selección del primer select y comprobaremos como las opciones del segundo select cambian automáticamente. 

El ejemplo que hemos ilustrado utiliza provincias y países. Al escoger en el primer select un país, en el segundo debe mostrarnos las provincias de ese país para que escojamos una provincia, pero sólo una que tenga que esté en el país seleccionado en primer término. 

Conocer el objeto select y los option 

Es importante conocer los objetos de formulario select y los option. Los select corresponden con las cajas de selección desplegables y los option con cada una de las opciones de la caja desplegable. Podemos ver un artículo que habla de ello. 

En concreto nos interesa hacer varias cosas que tienen que ver con extraer el valor de un select en cualquier momento, fijar su número de opciones y, para cada opción, colocar su valor y su texto asociado. Todo esto aprenderemos a hacerlo en este ejemplo. 

Referencia: Para conocer el trabajo con formularios y la jerarquía de objetos javascript (Todo eso es la base del trabajo con los elementos de las páginas en Javascript) debemos haber leer el manual de Javascript II.


Modo de llevar a cabo el problema 

Para empezar, vamos a utilizar un formulario con dos selects, uno para el país y otro para la provincia. 

<form name="f1"> 
<select name=pais onchange="cambia_provincia()"> 
<option value="0" selected>Seleccione... 
<option value="1">España 
<option value="2">Argentina 
<option value="3">Colombia 
<option value="4">Francia 
</select> 

<select name=provincia> 
<option value="-">- 
</select> 
</form> 


Nos fijamos en el select asociado al país de este formulario que, cuando se cambia la opción de país, se debe llamar a la función cambia_provincia(). Veremos más adelante esta función, ahora es importante fijarse que está asociada al evento onchange que se activa cuando cambia la opción en el select. 

Todo lo demás será código Javascript. Empezamos definiendo un montón de arrays con las provincias de cada país. En este caso tenemos sólo 4 países, entonces necesitaré 4 arrays. En cada array tengo la lista de provincias de cada país, colocada en cada uno de los elementos del array. Además, dejaré una primera casilla con un valor "-" que indica que no se ha seleccionado ninguna provincia. 

var provincias_1=new Array("-","Andalucía","Asturias","Baleares","Canarias","Castilla y León","Castilla-La Mancha","...") 
var provincias_2=new Array("-","Salta","San Juan","San Luis","La Rioja","La Pampa","...") 
var provincias_3=new Array("-","Cali","Santamarta","Medellin","Cartagena","...") 
var provincias_4=new Array("-","Aisne","Creuse","Dordogne","Essonne","Gironde ","...") 


Hay que fijarse que los índices del array de cada país se corresponden con los del select del país. Por ejemplo, la opción España, tiene el valor asociado 1 y el array con las provincias de España se llama provincias_1. 

El script se completa con una función que realiza la carga de las provincias en el segundo select. El mecanismo realiza básicamente estas acciones:

La función tiene el siguiente código. Está comentado para que se pueda entender mejor. 

function cambia_provincia(){ 
    //tomo el valor del select del pais elegido 
    var pais 
    pais = document.f1.pais[document.f1.pais.selectedIndex].value 
    //miro a ver si el pais está definido 
    if (pais != 0) { 
       //si estaba definido, entonces coloco las opciones de la provincia correspondiente. 
       //selecciono el array de provincia adecuado 
       mis_provincias=eval("provincias_" + pais) 
       //calculo el numero de provincias 
       num_provincias = mis_provincias.length 
       //marco el número de provincias en el select 
       document.f1.provincia.length = num_provincias 
       //para cada provincia del array, la introduzco en el select 
       for(i=0;i<num_provincias;i++){ 
          document.f1.provincia.options[i].value=mis_provincias[i] 
          document.f1.provincia.options[i].text=mis_provincias[i] 
       }
    }else{ 
       //si no había provincia seleccionada, elimino las provincias del select 
       document.f1.provincia.length = 1 
       //coloco un guión en la única opción que he dejado 
       document.f1.provincia.options[0].value = "-" 
       document.f1.provincia.options[0].text = "-" 
    } 
    //marco como seleccionada la opción primera de provincia 
    document.f1.provincia.options[0].selected = true 
} 


Podemos ver una página con el ejemplo en funcionamiento.

 

Evento onunload de Javascript

 

Veamos un ejemplo del evento onunload, que, recordamos, se activa cuando el usuario ha abandona la página web. Por tanto, onunload sirve para ejecutar una acción cuando el usuario se marcha de la página, ya sea porque pulsa un enlace que le lleva fuera de la página o porque cierra la ventana del navegador. 

El ejemplo que deseamos mostrar sirve para abrir una página web en otra ventana cuando el usuario abandona la página. De este modo actúan muchos de los molestos popups de las páginas web, abriéndose justo cuando abandonamos el sitio que estábamos visitando. 

<html> 
<head> 
    <title>Abre al salir</title> 
    <script> 
    function abreventana(){ 
       window.open("http://www.google.es","venta","") 
    } 
    </script> 
</head> 

<body onunload="abreventana()"> 


<a href="http://www.desarrolloweb.com">DW!!</a> 
</body> 
</html> 


El ejemplo es tan sencillo que casi sobran las explicaciones. Simplemente creamos una función que abre una ventana secundaria y la asociamos con el evento onunload, que se coloca en la etiqueta <body>. 

Se puede ver en marcha en una página aparte. 

 

Evento onload de Javascript

 

El evento onload de Javascript se activa cuando se termina de cargar la página. Se ha de colocar en la etiqueta <body>, aunque en versiones modernas de Javascript, también lo aceptan otros elementos como las imágenes. 

Con el evento onload podemos ejecutar acciones justo cuando se han terminado de cargar todos los elementos de la página. Es un evento bastante utilizado pues es muy habitual que se deseen llevar a cabo acciones en ese preciso instante. En nuestro ejemplo vamos a ver cómo podríamos hacer un script para motivar a nuestros visitantes a que nos voten en un ranking cualquiera de páginas web. 

La idea es que la página se cargue entera y, una vez está cargada, aparezca una ventana de Javascript donde se proponga al visitante votar a la página. Es interesante esperar a que termine de cargar la página entera para que el visitante pueda ver la web que se propone votar, antes de que realmente le pidamos su voto. 

El código sería el siguiente: 

<html> 
<head> 
    <title>Votame!!</title> 
<script language="JavaScript"> 
function pedirVoto(){ 
    if (confirm("Esta página está genial (ya la puedes ver). ¿Me das tu voto?")){ 
       window.open("http://www.loquesea.com/votar.php?idvoto=12111","","") 
    } 
} 
</script> 
</head> 

<body onload="pedirVoto()"> 
<h1>Página SuperChula</h1> 
<br> 
Esta página está muy bonita. Soy su autor y te puedo asegurar que no hay muchas páginas con tanta calidad en Internet 
<br> 
<br> 
<a href="#">Entrar</a> 

</body> 
</html> 


Nos fijamos que en la etiqueta <body> tenemos el evento onload="pedirVoto()". Es decir, que cuando se cargue la página se llamará a una función llamada pedirVoto(), que hemos definido en el bloque de script que tenemos en la cabecera. 

La función pedirVoto() utiliza una caja confirm para saber si realmente el usuario desea votarnos. La función confirm() muestra una caja con un texto y dos botones, para aceptar o cancelar. El texto es lo que se recibe por parámetro. Dependiendo de lo que se pulse en los botones, la función confirm() devolverá un true, si se apretó el botón aceptar, o un false, en caso de que se pulsase sobre cancelar. 

La función confirm() está a su vez metida dentro de un bloque condicional if, de modo que, dependiendo de lo que se pulsó en la caja confirm, el if se evaluará como positivo o negativo. En este caso sólo se realizan acciones si se pulsó sobre aceptar. 

Para acceder a la página donde se contabiliza nuestro voto tenemos el método window.open(), que sirve para abrir ventanas secundarias o popups. Mostramos la página donde se vota en una ventana secundaria para que el visitante no se marche de nuestra web, ya que acaba de entrar y no deseamos que se vaya ya. 

Con esto queda más o menos ilustrado cómo hacer uso del evento onload. Seguro que en vuestras creaciones habrá muchos más casos donde utilizarlo.

 

Manejadores de eventos en Javascript 1.3

 

En artículos anteriores de DesarrolloWeb.com vimos diversas informaciones relativas a los eventos en Javascript. En esta ocasión vamos a proporcionar un listado que sirva como referencia para los programadores con Javascript 1.3. 

En concreto, vimos con anterioridad estos artículos que conviene repasar: 


En el artículo de manejadores de eventos de Javascript vimos los eventos de las versiones de Javascript 1.0, 1.1 y 1.2, pero en este caso vamos a presentar el listado de los manejadores de eventos de Javascript 1.3. 

Cada evento tiene un nombre, por ejemplo "click". Los manejadores eventos, que son usados para invocar una serie de comandos cuando se produce un evento, tienen siempre la palabra "on" seguida del nombre del evento. Por ejemplo, "onclick". 

Manejadores de eventos (Event Handlers) en Javascript 1.3 

Abort (onabort): Se lanza cuando se abortó la carga de un elemento de la página, por ejemplo una imagen. 

Blur (onblur): Se procesa este evento cuando un elemento de la página, generalmente un elemento de formulario, pierde el foco de la aplicación. 

Change (onchange): Este evento se produce cuando el usuario cambia el contenido de un elemento de formulario, tipo select, input o textarea. 

Click (onclick): Se lanza cuando el usuario hace clic sobre un elemento de la página, que puede ser un botón, un enlace, etc. 

DblClick (ondblclick): Este evento es lanzado cuando el usuario hace doble click en un elemento de formulario o un link. 

DragDrop (ondragdrop): Este evento se produce cuando el usuario arrastra y suelta un objeto en la ventana del navegador. 

Error (onerror): producido cuando hubo un error en la carga de un elemento de la página o de un documento. 

Focus (onfocus): Se produce este evento cuando un elemento de la página, generalmente un elemento de formulario, gana el foco de la aplicación. 

KeyDown (onkeydown): Este evento se lanza cuando el usuario pulsa una tecla. 

KeyPress (onkeypress): Se lanza el evento onkeypress cuando el usuario pulsa o mantiene pulsada una tecla. 

KeyUp (onkeyup): Se produce cuando el usuario suelta una tecla que tenía pulsada. 

Load (onload): Se ejecuta cuando se termina de cargar la página, o bien todos los frames del conjunto de FRAMESET. 

MouseDown (onmousedown): Este evento se produce cuando el usuario aprieta el botón del ratón. 

MouseMove (onmousemove): Se ejecuta cuando el usuario mueve el ratón. 

MouseOut (onmouseout): Se lanza cuando el usuario retira el puntero del ratón. Por ejemplo, si colocamos onmouseout sobre una imagen, el evento se lanzaría en el momento que el usuario sale con el puntero del ratón de esa imagen. 

MouseOver (onmouseover): Este evento se desata cuando el usuario mueve el puntero del ratón sobre un elemento. Imaginemos que colocamos este evento en una imagen, entonces se lanza, una sola vez, en el momento de entrar con el puntero en el área que ocupa esa imagen. 

MouseUp (onmouseup): Este evento se produce cuando el usuario suelta o deja de apretar el botón del ratón. 

Move (onmove): Se produce cuando el usuario o un script mueven la ventana del navegador. 

Reset (onreset): El evento se ejecuta cuando se resetea el contenido de un formulario, haciendo clic en un botón de reset del formulario, si es que lo tiene. 

Resize (onresize): Se lanza cuando el usuario, o un script, alteran el tamaño de una ventana del navegador o de un frame. 

Select (onselect): El evento se produce cuando el usuario selecciona un texto de un textarea o bien de un campo de texto normal. 

Submit (onsubmit): Se lanza cuando se aprieta el botón de submitir de un formulario, así que permite ejecutar código cuando el usuario envía el formulario. 

UnLoad (onunload): Evento que se produce cuando el usuario sale de un documento, osea, al salir de la página web, ya sea por pulsar un enlace que lleva a otra página o por cerrar la ventana del navegador.

 

Cláusulas try catch: detectar y cazar errores en Javascript

 

Muchos lenguajes de programación utilizan las cláusulas try catch para cazar errores y realizar cosas cuando ocurran, por ello, lo que vamos a comentar aquí para Javascript puede resultar muy familiar a los programadores. Estas cláusulas las podemos utilizar para tratar de ejecutar una porción de código, que sabemos que podría desatar un error en tiempo de ejecución. 

Cuando ocurre un error en Javascript, se hace un tratamiento determinado (mostrar el error al usuario, ya sea mediante un mensaje o la consola Javascript, o simplemente mostrar un icono y detener la ejecución de ese código). Nosotros con try catch podemos evitar que el error se trate de manera predeterminada y que se realicen unas acciones determinadas ante el error. Además, podemos conseguir que el código se siga ejecutando sin ningún problema. 

Con try especificamos una serie de sentencias Javascript que vamos a tratar de ejecutar. Con catch especificamos lo que queremos realizar si es que se ha cazado un error en el bloque try. La sintaxis de utilización es la siguiente:

try {
   //intento algo que puede producir un error
}catch(mierror){
   //hago algo cuando el error se ha detectado
} 


El Bloque try se ejecuta tal cual, hasta que un posible error se ha detectado. 


Si nos fijamos, podemos ver que el bloque catch recibe un dato, que en este caso hemos almacenado en la variable "mierror". Esa variable contiene información sobre el error detectado, que puede ser útil para realizar el tratamiento al error. Veamos este código: 


try {
   //intento algo que puede producir un error
   funcion_que_no_existe()
}catch(mierror){
   alert("Error detectado: " + mierror.description)
}

Cuando se ejecute el try, se detectará un error, al tratar de ejecutar una función que no existe. Entonces se ejecutará la cláusula catch, mostrando el error que se ha detectado. Si nos fijamos, se muestra una descripción del error detectado mediante mierror.description. 

Pero la propiedad description del error sólo existe en Internet Explorer. En Firefox, para mostrar una descripción del error lo hacemos directamente con la variable. Así: 

try {
   //intento algo que puede producir un error
   funcion_que_no_existe()
}catch(mierror){
   alert("Error detectado: " + mierror)
} 


Entonces, para hacer un bloque trycatch como este que funcione en los dos navegadores deberíamos hacer esto: 

try {
   //intento algo que puede producir un error
   funcion_que_no_existe()
}catch(mierror){
   if (mierror.description){
      alert("Error detectado: " + mierror.description)
   }else{
      alert("Error detectado: " + mierror)
   }
} 


Lanzar una excepción nosotros mismos 

También, dentro de un bloque try, podemos lanzar nosotros mismos una excepción, sin que tenga por qué haberse producido un error. Esto lo hacemos con la sentencia trow. 

try {
throw "miexcepcion"; //lanza una excepción
}
catch (e) {
//tratamos la excepción
alert(e);
} 


Este código, válido tanto para Internet Explorer como Firefox, lanza una excepción en el bloque try. Luego, en el bloque catch, se muestra la excepción que se ha detectado.

 

Hojas de referencia Javascript

 

En DesarrolloWeb.com ofrecemos diversos manuales para aprender Javascript, que se pueden consultar todos a través de la sección Javascript a fondo. En esta sección encontraréis numerosos textos explicativos para aprender a trabajar con el lenguaje, tanto para dar los primeros pasos como realizar operaciones más complicadas. 

Nuestros manuales vienen con explicaciones detalladas sobre Javascript, pero siempre es bueno tener a mano unas "chuletas", o más dicho de forma más elegante, hojas de referencia rápida. En éstas se encuentran multitud de nombres de funciones, métodos y distintos usos del lenguaje, que son repetidos a menudo durante la programación. 

En Internet se pueden encontrar diversas hojas de referencia muy útiles, completas y bien presentadas, que nos pueden ayudar en nuestro día a día con el lenguaje, si las tenemos impresas en papel y a mano para consulta. Lo bueno es que las ofrecen programadores de manera gratuita, con lo que podemos verlas y si nos parece que pueden ayudarnos, se pueden imprimir libremente. 

Os paso algunos enlaces interesantes para encontrar estas chuletas de Javascript: 

Javascript Quick Reference Card 
Chuleta de referencia Javascript escrita en dos páginas, con conceptos bastante básicos sobre estructuras de control, operadores, etc, así como objetos y métodos. 

JavaScript and Browser Objects Quick Reference 
8 páginas con un listado de todos los objetos del navegador y sus propiedades y métodos. Está sacada del libro "Javascript Bible". 

Javascript Cheat Sheet: 
En una sola página se muestran algunas notas sobre sintaxis, los métodos básicos de Javascript, eventos, los métodos DOM e incluso algunas ayudas sobre Ajax. 

JavaScript in one page 
No se podría imprimir en una sola página, pero muestra una completa tabla sobre Javascript, de la que se podría incluso aprender con las escuetas explicaciones. 

Referencia Javascript 
Otra pedazo página-resumen de Javascript, pero que ocupa varias páginas, con referencia sobre sintaxis, orientación a objetos, así como compatibilidad de distintos componentes de la tecnología con cada navegador. 

Expresiones regulares en Javascript 
Con explicaciones muy rápidas y esquemáticas sobre expresiones regulares. 

Jquery Cheat Sheet 
Una página con una referencia rápida para los que trabajan con Jquery 1.2. 
Ver también esta otra chuleta a color de Jquery. 

Prototype Javascript Library 1.5.0 
Una superconcentrada hoja de clases y métodos de Prototype. 

A field guide to scriptaculous combination effects 
Referencia rápida a efectos con Scriptaculous. 

Mootools 1,1 Cheat Sheet 
Hoja de referencia a las clases de Mootools. 

Chuleta DOM 
Todos los métodos del DOM de Javascript con rápidas explicaciones.