Buscador

Cómo solicitar información del usuario: métodos prompt() y confirm() (II)

Por su parte, el método Prompt(), equivale a un InputBox() en VBScript. Podemos combinar esta capacidad de solicitud de datos junto con el recurso de los contenidos dinámicos para crear páginas de presentación y/o de respuesta, dependiendo de los datos recibidos. Una forma sencilla de codificar esto sería plantear una página que en la entrada (evento onLoad(), de la página) pidiese al usuario su nombre, para mostrarlo a continuación, gracias a la propiedad innerHTML de cualquier elemento. El Código fuente 12 conseguiría ese resultado.

<SCRIPT Language=”Vbscript”>
Sub PedirDatos()
Dim Respuesta
Respuesta = window.prompt(‘Introduzca su nombre’,’Usuario’)
PNOMBRE.innerHTML = Respuesta
End Sub
</SCRIPT>
<BODY onLoad=”PedirDatos”>
<!-- y en cualquier otro elemento <P>...
<P ID=”PNOMBRE”>Aquí va el nombre del usuario</P>
</BODY>
Código fuente 12

Cómo solicitar información del usuario: métodos prompt() y confirm() (I)

El método confirm(), se diferencia de alert() en que presenta al usuario una alternativa de selección, que podemos recoger en una variable de tipo boolean. Por ejemplo, al pedir confirmación para una acción escribiríamos lo que se muestra en el Código fuente 11. Y se presentaría la caja de mensaje que muestra laFigura 5
<SCRIPT Language=”Vbscript”>
Sub PedirConfirmacion()
Dim Respuesta
Respuesta = window.confirma(‘¿Acepta las condiciones?’)
If Respuesta then
‘Rutina para el tratamiento de la Respuesta
End if
27
End Sub
</SCRIPT>
Código fuente 11

Cajas de mensaje estándar: alert() (II)

alert(window.event.srcElement.innerHTML)
Código fuente 10
y obtendríamos resultados casi idénticos. Con casi idénticos, queremos decir que –en algunos casos- la precisión es mayor con éste método, pues el ejemplo anterior reconocía las tablas, las celdas y algunos objetos más, pero englobaba al resto de objetos como elementos de <BODY>. Con este sistema se reconoce cada elemento individual, obteniendo un control más fino de los elementos de la página.

Cajas de mensaje estándar: alert() (I)

El objeto window dispone además de una propiedad especial, event, que se actualiza automáticamente con información relativa al evento que acaba de tener lugar en el proceso de visualización de una página. Por ejemplo, podemos acceder a la misma información que leíamos antes a través del objeto document, utilizando una propiedad del objeto event. En concreto, event dispone de una propiedad llamada srcElement, que almacena los datos pertinentes al objeto que es receptor del evento: una tabla, una celda, un gráfico, etc. Veamos algún ejemplo de su uso.
Podemos sustituir el código de acceso a los elementos mediante el Código fuente 9, con el Código
fuente 10.
Msgbox document.documentElement.outerHTML
Código fuente 9

Métodos de window para creación de ventanas

Hasta ahora, hemos utilizado casi siempre el lenguaje VBScript para mostrar cajas de mensaje con el contenido de los elementos que seleccionábamos. La razón es, por un lado, mostrar que los navegadores pueden ejecutar distintos lenguajes de script, y por otro, que no hemos llegado todavía al capítulo dedicado a Javascript. Aunque este procedimiento sea válido a efectos didácticos, la metodología estándar para hacerlo no es esa, por dos razones: primera, por que se prefiere utilizar el lenguaje estándar Javascript de cara a las páginas de cliente, ya que es compatible con casi todos los navegadores (Netscape no soporta VBScript). En segundo lugar, por que es preferible utilizar siempre que sea posible el modelo de objetos en lugar de recursos que pertenezcan a un lenguaje dado.
El objeto window dispone de varios métodos asociados con la producción de ventanas, tanto de sistema, como personalizadas. En el primer caso, para la presentación de cajas de mensaje, el objeto window dispone de varias posibilidades: los métodos alert(), confirm() y prompt(). Mientras alert() presenta una caja estándar de sistema, a la que se le puede pasar como argumento la cadena a mostrar (es equivalente al Msgbox de VBScript), confirm() presenta una caja similar, pero con dos botones de confirmación (Aceptar y Cancelar), pudiendo recoger la selección del usuario en una variable.

Finalmente, prompt() pide una entrada de datos al usuario y devuelve el dato introducido como valor de retorno (equivale a InputBox en VBScript).
Para el caso de que queramos mostrar cajas no estándar (Ventanas de Usuario), disponemos de los métodos createPopup(), showHelp(), showModalDialog() y ShowModelessDialog(), que cumplen esa función. Incluso podemos abrir otra ventana del propio explorador con una página adicional, como a menudo se utiliza actualmente para presentar pantallas de tipo publicitario u ofrecer contenidos añadidos, usando el método open(). Vamos a revisar brevemente estas posibilidades.

Temporizadores: los métodos setTimeout(), setInterval(), clearTimeout() y clearInterval() (II)

El Código fuente 8, utiliza el método setTimeout para establecer un temporizador que se ejecutará cada 1000 milisegundos, lanzando la ejecución de la función DejarPagina() y en cada ejecución resta una unidad a la variable Segundos. Cuando ésta es 0, se navega otra ubicación mediante la propiedad location del objeto document. Aunque el objeto CuentaAtras es una etiqueta <P>, podría ser cualquier otro elemento que poseyera una propiedad innerHTML para ir mostrando el tiempo transcurrido.

Temporizadores: los métodos setTimeout(), setInterval(), clearTimeout() y clearInterval() (I)

Se trata de un método que permite la asignación de un temporizador a la ventana de navegación. Un temporizador, dispara un evento una vez que ha transcurrido un tiempo determinado por código.
Por ejemplo, se puede implementar una rutina para que una vez transcurridos 5 segundos la página activa se traslade automáticamente a otra mediante una rutina similar a la que se muestra en el Código fuente 8.
<SCRIPT LANGUAGE=”Javascript”>
var Segundos = 5;
function DejarPagina() {
if (Segundos == 0) //Cambiamos de página
document.location = ‘Nueva página.htm’;
else
//Aquí se hace la cuenta atrás y se visualiza el tiempo transcurrido
//en la etiqueta <P Id=’CuentaAtras’>
Segundos -= 1;
document.all.CuentaAtras.innerHTML = ‘Quedan ’ + Segundos + ‘...’
setTimeout(‘DejarPagina’, 1000);
}
}
</SCRIPT>
Código fuente 8

La propiedad screen

Proporciona información acerca de la pantalla del usuario, lo que permite al código adaptarse a esas circunstancias si fuera conveniente. Posee las propiedades width (anchura), height (altura), availWidth (anchura disponible) y availHeight (altura disponible), además de colorDepth (Bits por punto de pantalla).

La propiedad location

Se trata de un objeto que almacena información acerca de la URL que se está visitando. Dado que el formato genérico de una URL es protocolo://equipo:puerto/ruta?búsqueda#hash, location trocea ese contenido en propiedades más sencillas de utilizar. Des esta forma, la propiedad host devuelve el equipo, seguido por dos puntos y el puerto. La propiedad href contiene el URL completo como una cadena única.
Location, dispone de métodos para el manejo de URLs. Por ejemplo, el método reload([force]), permite volver a cargar una página, pudiendo forzar su carga incluso si el servidor informa de que la página no ha cambiado, y el método replace(URL) carga una página nueva. Funciona como la propiedad href salvo que la página no se añade a la lista del historial.

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 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.

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.
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.

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.


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.
<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.