La propiedad history
Mediante la propiedad history podemos navegar hacia delante y hacia atrás dentro del conjunto de páginas visitadas. Se trata de un objeto que dispone de los métodos back y forward, para navegar hacia la página anterior y la siguiente, respectivamente. Este objeto también dispone de una propiedad length que indica el número de páginas visitadas y permite un control de errores.
Propiedades de window asociadas al Explorador
En el conjunto de propiedades del objeto window, algunas se refieren directamente a las características de la ventana que muestra el navegador. Por ejemplo, los mensajes de la barra de estado se pueden manejar mediante las propiedades defaultStatus y status. La primera determina el mensaje inicial (por defecto) del navegador, mientras que la segunda se permite la asignación de mensajes temporales.
El modelo de eventos (II)
Aquellos objetos capaces de recibir el foco pueden generar los eventos: onenter, onexit, onfocus, y onblur. Los dos primeros se producen cuando el ratón entra en el área de documento definida por un elemento, mientras que los dos siguientes les pueden producir el ratón o el teclado al recibir el foco un elemento, para similares circunstancias.
El lector podrá encontrar información específica para cada uno de los eventos disponibles en el modelo, tanto en el MSDN de Microsoft, como en la documentación de cualquiera de los productos de desarrollo para Internet. No obstante, a continuación incluimos una tabla con el modelo completo de eventos:
Algunos de estos eventos son específicos del navegador Internet Explorer, aunque la mayor parte se soportan por los dos navegadores.
Para concluir con éste apartado dedicado al objeto event, conviene recordar que algunos valores dinámicos relacionados con el evento producido, como la posición del ratón en pantalla, también son expuestos al programador en forma de propiedades del objeto event. Podemos conocer de esa forma las coordenadas de posición del ratón según se mueve por pantalla en valores absolutos (screenX, screenY), o relativos al navegador (clientX, clientY) o al objeto seleccionado (x,y), o incluso saber desde que elemento se desplaza el cursor cuando pierde el foco (fromElement) o hacia qué elemento se desplaza (toElement).
El lector podrá encontrar información específica para cada uno de los eventos disponibles en el modelo, tanto en el MSDN de Microsoft, como en la documentación de cualquiera de los productos de desarrollo para Internet. No obstante, a continuación incluimos una tabla con el modelo completo de eventos:
Para concluir con éste apartado dedicado al objeto event, conviene recordar que algunos valores dinámicos relacionados con el evento producido, como la posición del ratón en pantalla, también son expuestos al programador en forma de propiedades del objeto event. Podemos conocer de esa forma las coordenadas de posición del ratón según se mueve por pantalla en valores absolutos (screenX, screenY), o relativos al navegador (clientX, clientY) o al objeto seleccionado (x,y), o incluso saber desde que elemento se desplaza el cursor cuando pierde el foco (fromElement) o hacia qué elemento se desplaza (toElement).
El modelo de eventos (I)
Todos los elementos de un documento, comparten una serie de eventos comunes. Además, aquellos elementos que pueden recibir el foco disponen de una serie de eventos adicionales. La Tabla 2 lista los eventos comunes a todos los elementos de un documento:
Un manejador genérico de eventos. (II)
Hay que significar que el evento onmousedown, tiene precedencia sobre el evento onclick, por lo que éste último no se ejecuta dentro de esta rutina tal y como se presenta aquí. Si anulamos, la primera opción de comprobación del evento onmousedown (if (event.button == 1) alert('Hola desde mousedown'), comprobaremos como entonces sí que se ejecuta el código del evento onclick al pulsar el botón izquierdo y el del evento onmousedown, al pulsar el botón derecho.
Naturalmente, necesitamos conocer qué significan los valores devueltos por el evento para poder codificar un comportamiento adecuado. De acuerdo con el manual de referencia, las propiedades asociadas a valores del ratón o de teclado para el objeto event son los que se indican en la Tabla 1.
Con esto presente, pueden programarse acciones complejas o comportamientos especiales que
requieran combinaciones de teclas, como por ejemplo, información de seguridad, acceso a socios, etc.
Naturalmente, necesitamos conocer qué significan los valores devueltos por el evento para poder codificar un comportamiento adecuado. De acuerdo con el manual de referencia, las propiedades asociadas a valores del ratón o de teclado para el objeto event son los que se indican en la Tabla 1.
requieran combinaciones de teclas, como por ejemplo, información de seguridad, acceso a socios, etc.
Un manejador genérico de eventos. (I)
Otras propiedades interesantes del objeto event, tienen que ver directamente con las características de producción del evento: por ejemplo, type, devuelve el nombre del evento sin el prefijo on, lo que permite crear manejadores genéricos de eventos (rutinas que determinen el tipo de evento que se ha producido y dependiendo del que se trate, programen diferentes acciones).
Pongamos que se desea determinar el tipo de respuesta asociada a un mismo objeto, pero subordinada al evento producido: por ejemplo, queremos que una caja de texto muestre dos respuestas distintas dependiendo de si pulsamos el botón izquierdo o derecho del ratón: un manejador de eventos que distinga esa situación basándose en la propiedad button del objeto event, adoptaría la forma que muestra el Código fuente 7.
Pongamos que se desea determinar el tipo de respuesta asociada a un mismo objeto, pero subordinada al evento producido: por ejemplo, queremos que una caja de texto muestre dos respuestas distintas dependiendo de si pulsamos el botón izquierdo o derecho del ratón: un manejador de eventos que distinga esa situación basándose en la propiedad button del objeto event, adoptaría la forma que muestra el Código fuente 7.
function ManejadorEventos() {
//Primero miramos si se trata de un evento de ratón usando la propiedad //button
switch (event.type) {
case 'click':
alert('Hola desde onclick');
break;
case 'mousedown':
if (event.button == 1) alert('Hola desde mousedown')
else alert('Has pulsado el botón derecho');
break;
}
}
//y en otra parte del código...
<BODY onclick= "ManejadorEventos()" onmousedown= "ManejadorEventos()">
Código fuente 7
Otras propiedades del objeto event
Además de la propiedad srcElement, event posee propiedades adicionales para informar al programador de características adicionales del evento que se produce. Por ejemplo, la propiedad cancelBuble, permite anular la promoción del evento hacia los objetos superiores en la jerarquía. Por defecto, este valor es false. En caso de asignarle un valor True, se detiene dicha promoción, pero sólo para la instancia actual de evento, no para otros eventos que puedan producirse.
Otra propiedad interesante es returnValue, que sirve para anular la acción predeterminada de un evento, cuando asignamos el valor false a ésta propiedad. Observe el lector que el mecanismo de anulación del evento utilizado en el ejemplo anterior, se basa en una palabra reservada de Javascript} (return), que actualiza la propiedad returnValue cuando el controlador del evento devuelve el control al Explorador.
Otra propiedad interesante es returnValue, que sirve para anular la acción predeterminada de un evento, cuando asignamos el valor false a ésta propiedad. Observe el lector que el mecanismo de anulación del evento utilizado en el ejemplo anterior, se basa en una palabra reservada de Javascript} (return), que actualiza la propiedad returnValue cuando el controlador del evento devuelve el control al Explorador.
Ficheros de script independientes
Con idea de crear rutinas genéricas que puedan ser utilizadas en diversos documentos sin necesidad de duplicar el código también es posible situar las rutinas en ficheros independientes. La gran ventaja es que al residir en un fichero aparte, conseguimos crear auténticas librerías de scripts que pueden ser utilizadas dentro de un proyecto para diferentes páginas web. Suele asignársele la extensión asociada con el lenguaje en que están escritas, generalmente .JS (para Javascript) y .VBS (para VBScript). Lo único que se precisa es hacer referencia a la librería mediante el establecimiento de un vínculo, usando el atributo SRC de la etiqueta <SCRIPT>.
<SCRIPT LANGUAGE=”Javascript” SRC=”Librería.js”></SCRIPT>
Código fuente 6
Otras formas de asociar código de script a eventos (IV)
En el caso de que la asignación de estilo sea dinámica (en tiempo de ejecución), la propiedad className de cada elemento será la que nos permita realizar la nueva asignación.
En el ejemplo, utilizamos la definición de dos estilos de usuario (Normal y Resaltado). Observe el lector la asignación inicial al objeto document de las acciones a realizar cuando el cursor pasa por encima de un elemento (onmouseover) y cuando sale de él (onmouseout). Utilizamos la propiedad className del objeto document, que es el equivalente del atributo class para etiquetas de HTML Dinámico. Como cada elemento genera sus propios eventos, si no tienen ninguna acción asociada, se produce la promoción del evento hasta llegar a algún elemento de orden superior que sí tenga una acción asociada: document, en este caso. Entonces, se determina cual es el elemento que ha producido el evento y se le trata aplicándole el estilo correspondiente.
En el ejemplo, utilizamos la definición de dos estilos de usuario (Normal y Resaltado). Observe el lector la asignación inicial al objeto document de las acciones a realizar cuando el cursor pasa por encima de un elemento (onmouseover) y cuando sale de él (onmouseout). Utilizamos la propiedad className del objeto document, que es el equivalente del atributo class para etiquetas de HTML Dinámico. Como cada elemento genera sus propios eventos, si no tienen ninguna acción asociada, se produce la promoción del evento hasta llegar a algún elemento de orden superior que sí tenga una acción asociada: document, en este caso. Entonces, se determina cual es el elemento que ha producido el evento y se le trata aplicándole el estilo correspondiente.
También podemos incluir elementos ocultos, que solo se muestren tras la ejecución de un evento. El
estilo de presentación display, puede adoptar los valores “hidden” (oculto, los elementos no se
visualizan) o vacío “”, que significa que se permite la visualización. Veremos muchas de estas
características en el capítulo dedicado a las hojas de estilo en cascada.
Otras formas de asociar código de script a eventos (III)
Aunque estudiaremos las Hojas de Estilo más adelante, anticipemos para este ejemplo que, lo mismo que hemos definido una presentación asignando a un atributo style unos valores, podemos separar esas definiciones de estilo, situándolas esta vez dentro de una etiqueta <STYLE>, permitiendo que sean accesibles a todo el documento. Cuando operamos así, la manera de aplicar uno de los estilos definidos es mediante el atributo class del elemento, tal y como aparece en las definiciones iniciales.
<span class=Normal>Lagarto Juancho</span>
Código fuente 5
Otras formas de asociar código de script a eventos (II)
El lector puede copiar el Código fuente 3 fuente a una página cualquiera y comprobar su funcionamiento, como aparece en la Figura 3 En el caso de disponer de una serie de ítem a los que queremos aplicar un comportamiento común, podemos usar ésta técnica junto a la capacidad de promoción de eventos, para programar con un único código ese comportamiento múltiple.
<html>
<head>
<style>
.Normal {
cursor: hand;
font-family: verdana;
font-size: 20;
font-style: normal;
background-color: blue;
color: white;
display: block
}
.Resaltado {
cursor: hand;
font-family: verdana;
font-size: 20;
font-style: italic;
background-color: white;
color: blue;
display: block
}
</style>
</head>
<body>
<P style="FONT-FAMILY:Arial;font-size:21">Seleccione un Bicho</P><HR>
<span class=Normal>Lagarto Juancho</span><br>
<span class=Normal>Leoncio el León</span><br>
<span class=Normal>Pepe Pótamos</span><br>
<span class=Normal>Gorila Magilla</span><br>
<span class=Normal>Gato Silvestre</span><br>
<script>
// Asignamos comportamiento por defecto al objeto document
//lo que se aplica a cada uno de sus nodos hijos.
document.onmouseover = MostrarEspecial;
document.onmouseout = MostrarNormal;
function MostrarEspecial() {
//si el estilo es Normal, cambiar a Resaltado
if (window.event.srcElement.className == "Normal") {
window.event.srcElement.className = "Resaltado";
}
}
function MostrarNormal() {
//si el estilo es Resaltado, cambiar a Normal
if (window.event.srcElement.className == "Resaltado") {
window.event.srcElement.className = "Normal";
}
}
</script>
</body>
</html>
Código fuente 4
Otras formas de asociar código de script a eventos (I)
Otra posibilidad para codificar procedimientos dentro de una página web, consiste en utilizar los atributos que DOM asigna a cada elemento cuando lo convierte en un objeto programable.
Una de las transformaciones más importantes que DOM realiza es la de asignar a cada etiqueta dinámica un atributo por cada evento al que es capaz de responder. Para programar una acción, basta con asignar como valor del atributo el nombre de una función escrita en uno de los lenguajes de script válidos, o invocar un método o propiedad de los objetos disponibles en el modelo DOM.
Podemos ver este comportamiento codificando otro efecto muy conocido actualmente, consistente en el cambio dinámico de estilos cuando el cursor pasa por encima de algún elemento.
Se puede utilizar la propiedad srcElement, teniendo en cuenta que se trata de un objeto que hace
referencia al elemento que se haya seleccionado, y la característica que hace que cualquier elemento
DHTML disponga de una propiedad (style), para modificar los valores que determinan su presentación.
Eso significa que todo lo que tenemos que hacer es asignar a los atributos onmouseover (pasar el ratón por encima de un área) y onmouseout (abandonar el área) la ejecución del código correspondiente (nótese que no estamos invocando a ninguna función incluida en etiquetas de script, sino que asignamos el código a ejecutar directamente a los atributos del elemento).
Imaginemos que nuestra página dispone de una par de elementos <P> con un cierto contenido y que queremos que cuando el usuario pase el cursor por encima de un de ellos, cambie automáticamente su estilo a color rojo y tamaño de letra de 20 píxeles. También queremos que cuando el cursor salga de la zona correspondiente al elemento, éste vuelva a su estado original.
Una de las transformaciones más importantes que DOM realiza es la de asignar a cada etiqueta dinámica un atributo por cada evento al que es capaz de responder. Para programar una acción, basta con asignar como valor del atributo el nombre de una función escrita en uno de los lenguajes de script válidos, o invocar un método o propiedad de los objetos disponibles en el modelo DOM.
Podemos ver este comportamiento codificando otro efecto muy conocido actualmente, consistente en el cambio dinámico de estilos cuando el cursor pasa por encima de algún elemento.
Se puede utilizar la propiedad srcElement, teniendo en cuenta que se trata de un objeto que hace
referencia al elemento que se haya seleccionado, y la característica que hace que cualquier elemento
DHTML disponga de una propiedad (style), para modificar los valores que determinan su presentación.
Eso significa que todo lo que tenemos que hacer es asignar a los atributos onmouseover (pasar el ratón por encima de un área) y onmouseout (abandonar el área) la ejecución del código correspondiente (nótese que no estamos invocando a ninguna función incluida en etiquetas de script, sino que asignamos el código a ejecutar directamente a los atributos del elemento).
Imaginemos que nuestra página dispone de una par de elementos <P> con un cierto contenido y que queremos que cuando el usuario pase el cursor por encima de un de ellos, cambie automáticamente su estilo a color rojo y tamaño de letra de 20 píxeles. También queremos que cuando el cursor salga de la zona correspondiente al elemento, éste vuelva a su estado original.
<P style=”font-family:Arial; font-size=14”
onmouseover="window.event.srcElement.style.color='Red'"
onmouseout="window.event.srcElement.style.color = 'Black'">
Primer ítem que cambiará de estilo</P>
<P style=”font-family:Arial; font-size=14”
onmouseover="window.event.srcElement.style.color='Red'"
onmouseout="window.event.srcElement.style.color = 'Black'">
Segundo ítem que cambiará de estilo</P>
Código fuente 3
La propiedad event y el modelo de objetos de HTML Dinámico IV
El problema aquí es que las versiones 4.x de Netscape Navigator ignoran estos atributos, intentando ejecutar las acciones del script inmediatamente.
Este problema del soporte de navegadores parece que está empezando a diluirse a medida que las compañías distribuidoras de software de navegadores comienzan a basarse en los estándares. Por ejemplo, Netscape 4.x tampoco soporta la propiedad innerHTML para los contenidos de los objetos mientras que la versión 6.0 sí lo
hace. Lo mismo sucede con los atributos para la identificación de objetos: mientras las versiones 4.x de Netscape solo soportan el atributo NAME, en la versión 6.0 ya se soporta el atributo ID, y en general existe un soporte más próximo al estándar DOM de la W3C.
Se debe de tener cuidado con los nombres de los eventos si no especifica un lenguaje predeterminado o si explícitamente se indica Javascript como lenguaje a utilizar, porque en ambos casos, es el motor de interpretación de Javascript el que se pone en marcha y es sensible a mayúsculas y minúsculas.
Este problema del soporte de navegadores parece que está empezando a diluirse a medida que las compañías distribuidoras de software de navegadores comienzan a basarse en los estándares. Por ejemplo, Netscape 4.x tampoco soporta la propiedad innerHTML para los contenidos de los objetos mientras que la versión 6.0 sí lo
hace. Lo mismo sucede con los atributos para la identificación de objetos: mientras las versiones 4.x de Netscape solo soportan el atributo NAME, en la versión 6.0 ya se soporta el atributo ID, y en general existe un soporte más próximo al estándar DOM de la W3C.
Se debe de tener cuidado con los nombres de los eventos si no especifica un lenguaje predeterminado o si explícitamente se indica Javascript como lenguaje a utilizar, porque en ambos casos, es el motor de interpretación de Javascript el que se pone en marcha y es sensible a mayúsculas y minúsculas.
Suscribirse a:
Entradas (Atom)