Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 17
Visitas el mes pasado: 58
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
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:
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.
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
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.
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.
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.
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