Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.

6. Eventos (II)

6.2 Manejar eventos.

Formas de insertar eventos

Veremos aquí la forma de insertar los eventos en la página. En realidad algunas de estas formas ya las hemos usado al utilizar eventos en páginas anteriores, pero aquí las explicaremos con más detalle.

Tres son las formas de insertar los eventos en la página. Las dos primeras utilizan el atributo del evento en la etiqueta HTML del elemento al que se refiere. En la tercera llamamos al elemento desde el mismo código javascript. Veamos cuáles son esas formas:

Código javascript en la página

En la misma etiqueta HTML que produce el evento insertamos el nombre del evento como un atributo de la misma. El valor del atributo será el código javascript que queramos insertar. Por ejemplo:

<p ondblclick="alert('esto es un evento')">Haz doble clic para que se produzca el evento</p>

Este ejemplo lo veremos así en el navegador:

Haz doble click para que se produzca el evento

Este método sirve sólo para código javascript muy corto, una o dos sentencias a lo sumo, ya que si no se alargan excesivamente las etiquetas de HTML, y se mezclan los códigos de Javascript y de HTML, cosa nada recomendable si queremos hacer después una revisión de la página, o cambiar algo de alguno de los códigos.

Llamada a una función desde código HTML

Sin embargo si queremos poner un código algo más largo, podemos escribir en el código HTML el atributo del evento, y como valor hacemos una llamada a una función. Esta función será la que contenga el código javascript que queramos que se ejecute con el evento. Veamos un ejemplo, en el código HTML pondremos:

<p onclick="abrir()">Abrir dos ventanas emergentes</p>

y en un script aparte, insertaremos la siguiente función:

function abrir() {
         var ventanas =["http://www.google.com","http://www.yahoo.es"];
         open(ventanas[0],"google","top=50,left=50,scrollbars=yes")
         open(ventanas[1],"yahoo","top=100,left=100,scrollbars=yes")
         }

Evidentemente este código sería demasiado largo para colocarlo como atributo de un elemento HTML, por lo que lo ponemos dentro de una función, y desde el atributo onclick hacemos la llamada a la función.

Puedes ver el resultado del evento anterior si pulsas en el siguiente párrafo:

Abrir dos ventanas emergentes

Llamada a una funcion desde el mismo código javascript

Esta forma de incluir un evento en la página, consiste en escribir primero una función que se quiere ejecutar con el evento, y llamarla después desde el propio código javascript. Al llamarla haremos referencia al elemento, en el cual se incluye el evento como una propiedad de éste.

Por ejemplo, queremos que al pasar el ratón por encima de un texto, éste cambie su letra a itálica. aplicaremos para ello los eventos onmouseover para ponerlo en itálica al pasar por él el ratón, y onmouseout para que vuelva a su estado normal cuando apartemos el ratón

las funciones necesarias serán las siguientes:

function italica() {
         document.getElementById("texto").style.fontStyle = "italic";
         }
function normal() {
         document.getElementById("texto").style.fontStyle = "normal";
         }

Hasta ahora el código javascript es el mismo que cuando llamamos a la función desde el código HTML (atributo que empieza por "on"), pero aquí no vamos a llamar a la funcion desde su atributo, sino que incluiremos esa llamada en el código javascript.

La forma de llamarlo es la siguiente:

document.getElementById("texto").onmouseover = italica

Accedemos primero al párrafo donde debe ir el evento - document.getElementById("texto) y después añadimos el evento como una propiedad del mismo - .onmouseover - ; luego le asignamos como valor el nombre de la función - = italica . Observa que al asignarle el nombre de la función debemos escribirla sin paréntesis, ya que si la escribieramos con paréntesis le estariamos pasando el valor del return de la función como valor del evento, y no la ejecución de la función.

La etiqueta HTML que llama al evento no tiene ahora ningún atributo de evento, sólo necesitamos ponerle el atributo id para identificarlo y poder llamarlo. En el ejemplo anterior podría ser el siguiente:

<p id="texto">Pasa el ratón por este texto y cambiará a itálica.</p>

Y el código javascript completo para que se produzca el evento, sería el siguiente.

function italica() {
         document.getElementById("texto").style.fontStyle = "italic";
         }
function normal() {
         document.getElementById("texto").style.fontStyle = "normal";
         }
document.getElementById("texto").onmouseover = italica;	
document.getElementById("texto").onmouseout = normal;

Para que el script funcione debemos ponerlo después del elemento que produce el evento, es decir en el body en cualquier sitio después del elemento al que le aplicamos la propiedad del evento.

Esto es debido a que la página se va cargando de manera secuencial, en el mismo orden en que está escrita. Si lo ponemos antes, cuando javascript llama al elemento, éste no está todavía cargado, por lo que no lo encuentra, y da el error de que no existe.

función anónima onload

Para poder corregir el error anterior, y poder poner el script delante de la página, debemos forzar mediante una función, a que el código javascript no se carge hasta que el resto de la página esté cargado. La función en concreto es la siguiente:

window.onload = function() {
... código javascript que debe ser cargado después de la página ...
}

Esta función también nos sirve para poner el código en el que buscamos un elemento de la página (por ejemplo mediante document.getElementById("...")) antes del mismo (por ejemplo en la etiqueta <head>), ya que el código no se ejecutará hasta que la página esté cargada.

Se dice que es una función anónima porque la función en realidad no tiene nombre, sin embargo sí que requiere unas condiciones para que se ejecute, y estas son las que se indican delante del signo igual: (window.onload).

Si no estamos muy seguros de cual es el elemento que requiere que la página esté cargada para que se ejecute el código, podemos englobar todo el código javascript dentro de esta función.

En concreto en el ejemplo anterior el código quedará así:

window.onload = function() {
function italica() {
         document.getElementById("texto").style.fontStyle = "italic";
         }
function normal() {
         document.getElementById("texto").style.fontStyle = "normal";
         }
document.getElementById("texto").onmouseover = italica;	
document.getElementById("texto").onmouseout = normal;
}

Ahora podemos poner el código en cualquier parte de la página (por ejemplo en la cabecera), y el script funcionará perfectamente.

Puedes ver el script funcionando en el siguiente párrafo:

Pasa el ratón por este texto y cambiará a itálica.

Variable this

A veces queremos modificar el propio elemento sobre el que interactuamos para que se produzca el evento. entonces en lugar de acceder al elemento mediante los métodos del DOM para buscarlo, podemos utilizar la variable this

Por ejemplo, queremos que al pulsar sobre un párrafo, éste cambie de color. En lugar de acceder al elemento que lo contiene llamándole desde document. escribimos la variable this. la cual hace referencia al elemento que provoca el evento.

así por ejemplo tenemos el siguiente código para provocar un cambio de color en el elemento:

<p id="cambiar" onclick="document.getElementById('cambiar').style.color='green'"
    ondblclick="document.getElementById('cambiar').style.color='red'">
    Pulsa para cambiar el color de este párrafo: un  click en verde, doble 
    clik en rojo</p>

El código anterior puede acortarse si en lugar de escribir document.getElementById("cambiar") escribimos this. El código quedará así:

<p id="cambiar" onclick="this.style.color='green'"
    ondblclick="this.style.color='red'">
    Pulsa para cambiar el color de este párrafo: un  click en verde, doble 
    clik en rojo</p>

Este script puedes ver como funciona en el siguiente párrafo:

Pulsa para cambiar el color de este párrafo: un click en verde, doble clik en rojo

La variable this funciona, como hemos podido ver, dentro del atributo HTML del evento, sin embargo si desde el atributo HTML llamamos a una función para que ésta ejecute el código, la variable this no funciona, debiendo acceder al elemento llamándolo desde document.

Sin embargo si llamamos al evento desde el código javascript mediante la forma:

document.getElementById("cambiar").onclick = verde

Dentro de la función sí que podemos utilizar la variable this para referirnos al propio elemento que provoca el evento.

El código anterior lo podríamos poner dentro de un script de la siguiente manera:

window.onload = function() {
function verde() {
         this.style.color = "green";
         }
function rojo() {
         this.style.color = "red";
         }
document.getElementById("cambiar").onclick = verde;
document.getElementById("cambiar").ondblclick = rojo;
}

Como puede verse, dentro de las funciones, hemos sustituido el acceso al elemento por la variable this, con lo cual el código queda bastante más corto

En la siguiente página veremos cómo obtener información sobre algunos eventos, en concreto sobre la posición del ratón.

Eventos del ratón.

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com