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: