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: 20
Visitas el mes pasado: 22
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.
Evento es todo lo que sucede en la página y que pueda ser detectado por javascript. Incluimos aquí los procesos que ocurren cuando se abre o cierra la página, lo que está haciendo el usuario, etc.
Con javascript se pueden detectar cuando se produce un cambio o evento en la página y a partir de ahí hacer que se aplique un determinado código cuando el evento se produce. De esta forma se puede interactuar con el usuario, el cual al provocar el evento desencadena una serie de acciones en la página.
El nombre del evento se construye con el prefijo "on" seguido del nombre en inglés de la acción que desencadena el evento.
Esta es una lista de eventos que funcionan en todos los navegadores:
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> |
Dependiendo de la manera de interactuar en la página podemos clasificarlos en:
Podemos usar un enlace para interactuar con javascript. Al pulsar el enlace nos envia a un código javascript el cual se ejecutará.
Para ello la ruta del enlace será como en el siguiente ejemplo:
<a href="javascript: mifuncion();">iniciar mi funcion</a>
Escribimos en el atributo href la palabra javascript seguida por dos puntos, y después la del código javascript; normalmente la llamada a la función que queremos ejecutar.
Tenemos tres maneras de insertar los eventos en la página:
En la etiqueta de HTML que debe producir el evento insertamos el evento como un atributo de la misma. El valor del atributo es el código javascript que queremos que se produzca al producirse el evento.
onclick="alert('hola mundo');"
Igual que el anterior, pero el código javascript consiste en llamar a una función que contiene el código que se va a ejecutar:
onclick="mifuncion();"
Primero creamos la función donde estará el código a ejecutar por el evento:
function mifuncion() { /*...*/}
Después buscamos en la página el elemento al que se le aplica el evento, para incorporar el evento como una propiedad:
document.getElementById("elem1").onclick = mifuncion
Como valor de la propiedad pasamos el nombre de la función (sin paréntesis).
Muchas veces necesitamos que la página ya se haya cargado completamente antes de ejecutar un código javascript. Tal es el caso de la búsqueda de elementos del DOM en la página. Utilizamos para ello el evento onload al que le aplicamos una función anónima:
window.onload = function () { /*código que se ejecutará después de cargarse la página completamente*/ }
La lectura de la página se realiza de manera secuencial, por lo que si llamamos a un elemento del DOM antes de que éste se haya cargado, javascript no lo encontrará, ignorando el código; sobre todo si ponemos el código al principio de la página.
Para evitar esto debemos poner las llamadas a elementos del DOM y el código que necesite que la página esté cargada dentro de esta función anónima.
Este elemento o palabra clave hace referencia al mismo elemento HTML en el que está el evento; de manera que no lo tengamos que buscar en el DOM. Según la forma de insertar el evento el código será distinto:
Si insertamos el evento directamente en el HTML pondremos "this" para referirnos al propio elemento:
<p onclick="this.style.color='green';">Pulsa para cambiar el color</p>
Si insertamos el código en el HTML mediante una función el elemento "this" debemos pasarlo como argumento de la función:
<p onclick="mifuncion(this);">Cambia el color del texto</p>
Recogemos en la función el argumento para usarlo como el acceso al propio elemento del DOM:
function mifuncion(elem) { elem.style.color="green"; }
Si insertamos el código directamente en javascript, podemos utilizar el elemento "this" dentro de la función, por ejemplo creamos primero la función.
function mifuncion() { this.style.color="green"; }
Después provocamos el evento con el código:
document.getElementById("texto1").onclick = mifuncion;
Una vez producido un evento a veces necesitamos tener más información sobre el mismo. Para ello utilizamos el objeto "event".
La mayoría de los navegadores obtienen este objeto al pasarlo como un argumento implícito a la función que es llamada por el evento. Sin embargo Internet Explorer la considera como una propiedad del objeto "window", por lo que el código es distinto.
El código compatible con todos los navegadores es el siguiente:
function manejaEventos(elEvento) { var evento = elEvento || window.event; /* código para extraer la información del evento */ }
Obtenemos así el objeto "event" en la variable evento, el cual tiene una serie de propiedades que nos darán la información sobre el evento.
La propiedad .type aplicada al objeto "event" nos dará la información del tipo de evento que se produce:
function manejaEventos(elEvento) { var evento = elEvento || window.event; tipo = evento.type; }
La variable tipo nos da el nombre del evento que se ha producido, pero sin el prefijo on. Por ejemplo si el evento es onclick, el valor de type será "click".
La información que más nos puede interesar sobre el ratón es la posición del mismo, es decir las coordenadas del puntero del ratón en la página.
Coordenadas del ratón
Una vez obtenido el objeto "event" (en evento), hay varias propiedades para obtener las coordenadas del ratón. Todas ellas se miden en píxeles. Dependiendo del origen de coordenadas tenemos:
Respecto a la pantalla completa : Origen de coordenadas en la esquina superior izquierda de la pantalla:
var ooordX = evento.screenX;
: Distancia horizontal al borde izquierdo de la pantalla.var ooordY = evento.screenY;
: Distancia vertical al borde superior de la pantalla.Respecto a la ventana del navegador : Origen de coordenadas en la esquina superior izquierda de la parte visible de la página (ventana del navegador donde se muestra la página)
var ooordX = evento.clientX;
: Distancia horizontal al borde izquierdo de ventana del navegador.var ooordY = evento.clientY;
: Distancia vertical al borde superior de la ventana del navegador.Respecto al origen de la página : Origen de coordenadas en la esquina superior izquierda de la propia página web (ésta puede estar desplazada y no verse completa en el navegador, por lo que puede no coincidir con el anterior).
var ooordX = evento.pageX;
: Distancia horizontal al borde izquierdo de la página.var ooordY = evento.pageY;
: Distancia vertical al borde superior de la página.Esta opción no es compatible con Internet Explorer. Para obtener las oordenadas en Internet Explorer, obtendremos las coordenadas del navegador y le sumaremos el desplazamiento de la página. El código es el siguiente:
coordX = evento.clientX + document.documentElement.scrollLeft;
coordY = evento.clientY + document.documentElement.scrollTop;
Los demás navegadores también admiten esta forma de obtener las coordenadas de la página.
botones del ratón
Otro tipo de información que podemos obtener es cuál es el botón que se ha pulsado en el ratón. Para ello utilizaremos la propiedad .button del objeto "event".
boton = evento.button;
La propiedad sólo funciona con los eventos onmousedown y onmouseup. Los demás eventos ignoran esta propiedad.
El resultado es un número que indica el botón pulsado. Sin embargo da distinto resultado en Internet Explorer que en el resto de navegadores:
El objeto "event" puede darnos información sobre los eventos que se producen desde el teclado. Para ello utiliza las propiedades .keyCode y .charCode.
Estas propiedades están disponibles para los eventos de teclado, los cuales se producen cuando el usuario pulsa una tecla. Al pulsar una tecla se producen los siguientes eventos y en este orden:
Las propiedades .keyCode y .charCode son admitidas por los eventos anteriores, pero su resultado es distinto dependiendo del evento al que se le aplique. Además en Internet Explorer hay algunos resultados que pueden ser diferentes.
Los datos que podemos obtener con estas propiedades son:
Para saber cuál es el carácter pulsado se utiliza la función String.fromCharCode(), que convierte el código de carácter a una cadena de texto que contiene el caracter pulsado.
caracter = String.fromCharCode(cod_Caracter)
La información que muestran las propiedades anteriores puede resumirse de la siguiente manera:
Eventos | Navegador | Propiedad | Valor obtenido |
---|---|---|---|
onkeydown onkeyup |
Todos | keyCode | Código interno |
charCode | No definido | onkeypress | Internet Explorer | keyCode | Código de carácter | charCode | No definido | Todos excepto Internet Explorer | keyCode | Teclas normales: no definido Teclas especiales: código interno |
charCode | Teclas normales: código carácter Teclas especiales: 0 |
Son teclas especiales aquellas que no sirven para escribir un carácter sino para cambiar algún aspecto de la escritura (mayúsculas, Alt, retroceso, tabulador, etc.).
En la siguiente página veremos cómo estructura javascript sus elementos en clases de objetos.
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