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: 48
Visitas el mes pasado: 131
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.
Los eventos definen lo que hace el usuario en la página, o en el elemento de la página al que se le aplica. Cualquier acción que haga el usuario es un evento: mover el raton, hacer click o doble click, pulsar una tecla, entrar con el ratón en un elemento, seleccionarlo con el ratón o con la tecla TAB, etc. Incluso el hecho de acabar de cargarse la página es un evento.
En Javascript se puede detectar cuando se produce un determinado evento, y aplicarle un código para que al producirse el evento se ejecute ese código. De esta forma se interactúa con el usuario, el cual al provocar el evento desencadena la ejecución del código javascript asociado.
Ya hemos visto y usado algunos eventos en páginas anteriores de este manual; en concreto los
eventos onclick
, onmouseover
y onmouseout
, pero hay mas
eventos que veremos a continuación.
Aunque hay más eventos de los que se dan en la lista siguiente, éstos no son compatibles con todos los navegadores, por lo que daremos aquí sólo los que pueden usarse en todos los navegadores, la lista es bastante amplia y permite prácticamente controlar cualquier acción del usuario o variación que se produzca en la página.
Para construir el nombre del evento se utiliza el prefijo on seguido del nombre
en inglés de la acción que produce el evento. así por ejemplo el hecho de pulsar el raton
se denomina onclick
y el hecho de moverlo se denomina onmousemove
.
La lista de los eventos mas importantes compatibles con todos los navegadores es la siguiente:
Evento | Descripción | Elementos a los que se aplica |
---|---|---|
onblur | Deseleccionar el elemento | <button>, <input>, <label>, <select>, <textarea>, <body> |
onchange | Deseleccionar un elemento que se ha modificado | <input>, <select>, <textarea> |
onclick | Pulsar y soltar el ratón | Todos los elementos |
ondblclick | Pulsar y soltar el ratón dos veces seguidas | Todos los elementos |
onfocus | Seleccionar un elemento (con el ratón o con el tabulador) | <button>, <input>, <label>, <select>, <textarea>, <body> |
onkeydown | Pulsar una tecla (sin soltar) | elementos de formulario y <body> |
onkeypress | Pulsar una tecla | elementos de formulario y <body> |
onkeyup | Soltar una tecla pulsada | elementos de formulario y <body> |
onload | La página se ha cargado completamente | <body> |
onmousedown | Pulsar (sin soltar) un botón del ratón | todos los elementos |
onmousemove | Mover el ratón | todos los elementos |
onmouseout | El ratón "sale" del elemento (pasa por encima de otro elemento) | todos los elementos |
onmouseover | El ratón "entra" en el elemento (pasa por encima del elemento) | todos los elementos |
onmouseup | Soltar el botón que estaba pulsado en el ratón | todos los elementos |
onreset | Inicializar el formulario (borrar todos sus datos) | <form> |
onresize | Modificar el tamaño de la ventana del navegador | <body> |
onselect | Seleccionar un texto | <input>, <textarea> |
onsubmit | Enviar un formulario | <form> |
onunload | abandonar o cerrar la página | <body> |
Podemos clasificar los eventos en varios tipos, dependiendo de la manera de interactuar con ellos del usuario. estos son:
También podemos utilizar los enlaces para llamar al código javascript. En este caso el
enlace se comporta de la misma manera que si pusieramos el evento onclick
, es decir,
al pulsar sobre el enlace se activa el código javascript.
Para ello debemos escribir el enlace de la siguiente manera:
<a href="javascript: funcionJavascript()">Texto del enlace</a>
En el atributo href
escribimos como valor la palabra javascript seguida de
dos puntos. Después llamamos a la función javascript que contiene
el código.
veamos ahora una página de ejemplo donde se llama al código javascript con los enlaces:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Javascript en enlaces:</title> <script type="text/javascript"> function cambia(col) { document.getElementById('cambiar').style.color = col } </script> </head> <body> <h1>Javascript en enlaces</h1> <a href="javascript:cambia('red')">Cambiar a rojo</a><br/> <a href="javascript:cambia('blue')">Cambiar a azul</a><br/> <h2 id="cambiar">Esta línea debe cambiar de color.</h2> </body> </html>
En el siguiente enlace se muestra como queda esta página:
En la próxima página veremos cómo utilizar los eventos en la página
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