Objeto Window
Es el objeto principal. Define la ventana sobre la que estamos trabajando
e incluye los objetos referentes a la barra de tareas, el documento o la
secuencia de direcciones de la última sesión. En este capítulo veremos los métodos
y propiedades más utilizadas, al menos por mí, dejando el estudio de dichos
objetos para sus capítulos correspondientes.
Aún cuando el objeto se llame Window,
disponemos siempre de una referencia a él llamada window
(recordad que Javascript distingue entre mayúsculas y minúsculas). Será con
esa referencia con la que trabajemos. Este hecho será común a todos los objetos
del DOM.
Por último, indicar que en Javascript, se supone que todas las propiedades
y métodos que llamamos sin utilizar ninguna referencia, en realidad se hacen
utilizando utilizando esa referencia window. Así,
por ejemplo, cuando ejecutamos el método alert en
realidad lo que estamos haciendo es ejecutar el método
window.alert.
- [Variable=][window.]open(URL, nombre, propiedades)
-
Permite crear (y abrir) una nueva ventana. Si queremos tener acceso a ella
desde la ventana donde la creamos deberemos asignarle una variable, si no
simplemente invocamos el método: el navegador automáticamente sabrá que
pertenece al objeto window. El parámetro
URL es una cadena que contendrá la dirección de
la ventana que estamos abriendo: si está en blanco, la ventana se abrirá con
una página en blanco. El nombre será el que
queramos que se utilize como parámetro de un TARGET
y las propiedades son una lista separada por
comas de algunos de los siguientes elementos:
- toolbar[=yes|no]
- location[=yes|no]
- directories[=yes|no]
- status[=yes|no]
- menubar[=yes|no]
- scrollbars[=yes|no]
- resizable[=yes|no]
- width=pixels
- height=pixels
Debemos tener cuidado con las propiedades que modifiquemos, es posible
que algunas combinaciones de los mismos no funcionen en todos los navegadores.
El Explorer 4, por ejemplo, da error ante la combinación
toolbar=no, directories=no, menubar=no. Veamos
un ejemplo:
ventanas.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function AbrirVentana() {
MiVentana=open("","MiPropiaVentana",
"toolbar=no,directories=no,menubar=no,status=yes");
MiVentana.document.write(
"<HEAD><TITLE>Una nueva ventana</TITLE></HEAD>");
MiVentana.document.write("<CENTER><H1><B>" +
"Esto puede ser lo que tu quieras</B></H1></CENTER>");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="Boton1" VALUE="Abreme, Sésamo"
onClick="AbrirVentana()">
</FORM>
</BODY>
</HTML>
Este ejemplo muestra la posibilidad de abrir nuevas ventanas de nuestro
navegador con JavaScript. Se llama a la función
AbrirVentana desde el evento
onClick, como ya sabemos hacer desde el primer
ejemplo. Esta función crea la nueva ventana
MiVentana y escribe en ella por medio del objeto
Document (tranquilos, en el próximo capítulo
se estudiará este objeto) todo el código HTML de la página. Aquí
debajo podéis probarlo.
- close()
-
Cierra la ventana. A no ser que hayamos acabado de abrirla nosotros
mostrará al usuario una ventana de confirmación para que decida él si quiere o
no cerrarla. Esto se hace por motivos de seguridad, ya que sería demasiado
fácil hacer un script de esos mal intencionados que nos
cerrase la ventana del navegador, con lo que fastidia eso.
- alert(mensaje)
-
Muestra una ventana de diálogo con el mensaje
especificado.
- confirm(mensaje)
-
Muestra una ventana de diálogo con el mensaje
especificado y dos botones. Si el usuario pulsa OK, el método devuelve
true. Si, en cambio, pulsa Cancelar, devolverá
false.
- prompt(mensaje, sugerencia)
-
Muestra una ventana de diálogo con el mensaje
especificado y un campo de texto en el que el usuario pueda teclear, cuyo valor
inicial será igual a sugerencia. Si el usuario
pulsa OK, el método devuelve la cadena introducida en el campo de texto. Si,
por el contrario, pulsa Cancelar, devolverá el valor
null. Dado que este valor se considera igual a
false, podemos comprabarlo directamente en una
condición para ver que ha hecho el usuario.
Por ejemplo, el siguiente código muestra un saludo sólo si el usuario
ha pulsado el botón de Aceptar:
var contestacion = prompt("¿Cómo te llamas, criatura?", "");
if (contestacion)
alert("Hola, " + contestacion);
- status
-
Define la cadena de caracteres que saldrá en la barra de estado en un
momento dado.
- defaultStatus
-
Define la cadena de caracteres que saldrá por defecto en la barra de
estado. Cuando no la especificamos, defaultStatus
será igual al último valor que tomó status.
- setTimeout("función",tiempo)
-
Llama a función cuando hayan pasado
tiempo milisegundos. Imprescindible a la
hora de realizar cualquier rutina que deba ejecutarse a cierta velocidad.
La barra de estado
En muchas páginas web se puede observar cómo sus creadores controlan por
completo la barra de estado del navegador. Quizá también hayas visto esos
scrolls tan bonitos, y que tan rápido cansan. Ahora voy a explicar cómo se hacen
ambas cosas, utilizando los que ya hemos visto del objeto Window.
Para empezar vamos con lo más sencillito: escribir mensajes diversos en la
barra de estado. En el capítulo en que hablábamos sobre los objetos predefinidos
aparecía el objeto window. En este objeto se
definían dos atributos: status y
defaultStatus. Para poner un mensaje en la barra
de estado nada más cargar el documento y que se mantenga ahí mientras no haya
otro más importante (un sustituto del famoso Document: Done
del Netscape, vamos) haremos:
<BODY onLoad=
"window.defaultStatus='El documento ya se ha leído';return true">
El código lo único que hace es modificar
defaultStatus y devolver true como resultado del
controlador de eventos. Por alguna misteriosa razón es obligatorio hacer esto
cuando modificas algo de la barra de estado. No me preguntéis por qué, al
parecer no es más que una convención.
Ahora veremos cómo se puede definir el valor de la barra de estado cuando
el ratón pasa por encima de un elemento <A>:
<A HREF="MiPagina.html" onMouseOver=
"window.status='Vente a mi pásgina';return true">
¿Fácil, no? Bueno, ahora vamos a ver cómo se hacen scrolls, que es mas
chulo todavía.
scrolls.html
<HTML>
<HEAD>
<TITLE>Ejemplo</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var texto=" Aquí está el mensaje que espero " +
"observes y leas con suma atención ";
var longitud=texto.length;
function scroll() {
texto=texto.substring(1,longitud-1)+texto.charAt(0);
window.status = texto;
setTimeout("scroll()",150);
}
</SCRIPT>
</HEAD>
<BODY onLoad="scroll();return true;">
Esta es la mejor pásgina del mundo conocido.
</BODY>
</HTML>
Como podéis ver, la cosa no es ni más larga ni más compleja que los
ejemplos anteriores. Simplemente escribe el texto en la barra de estado y luego
coge el caracter más a la izquierda del mismo y lo pone a la derecha, para
después volver a escribirlo. La única pega que tiene es cómo demonios hago
para que la función se llame cada cierto tiempo predeterminado para ir
desplazando el texto a una velocidad constante. Y la respuesta esta en el método
setTimeout.
Marcos (o frames)
Uno de los problemas más frecuentes a los que se enfrenta un programador
de Javascript es el manejo de marcos. Es decir, ¿cómo accedo yo al código
o a objetos como Window o
Document de otros marcos? Javascript propone
una manera bastante sencilla de hacerlo.
Javascript considera el documento de declaración de marcos (es decir,
aquel en el que escribimos las etiquetas FRAME
y FRAMESET) como un objeto
Window normal y corriente. Permite acceder
a los marcos que hemos declarado en él por medio del vector
frames. Es decir, si en nuestro documento
estuviera la siguiente línea:
<FRAME NAME="principal" SRC="MiPagina.html">
Podríamos acceder a su objeto Window por
medio de la referencia window.frames["principal"].
A su vez, desde el documento "hijo", es decir, desde el documento que
está encerrado en un marco, podemos acceder al padre por medio de la referencia
parent. También podemos acceder al documento
que esté arriba del todo en esta jerarquía por medio de
top. Por ejemplo:
window == window.top
Esta igualdad comprobará si nuestro documento está en la ventana principal
o en un marco. Comprueba si la ventana en la que está
(window) es igual a la ventana principal
(window.top). Mediante esta sencilla comprobación
podemos crear fácilmente (toda vez que conozcamos el manejo del objeto
Location), rutinas que aseguren que nuestra
ventana es la principal, o que recarguen nuestra estructura de marcos si algún
usuario pretende acceder a un marco específico, etc..
Tutoriales
