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 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.
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="Ábreme, 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.
<HTML> <HEAD> </TITLE>Prueba de close()</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> // La única desventaja es que depliega una caja de confirmación. this.close(); </SCRIPT> </BODY> </HTML>
<HTML>
<HEAD>
<TITLE>Prueba setTimeout #01</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var Hora;
function Reloj()
{
alert("¡¡Se cumplió el tiempo!!");
defaultStatus=OldStatus;
}
Hora=new Date();
defaultStatus=Hora.getHours()+":"+Hora.getMinutes()+":"+Hora.getSeconds();
alert("Mire la 'Barra de Estado' y pulse [Aceptar]");
setTimeout("Reloj1();",5000); // Se ejecuta después de 5 segundos.
</SCRIPT>
</BODY>
</HTML>
Aquí se ve un caso en que la función se ejecuta sólo una vez. Ahora veremos cómo hacer para que se repita en forma contínua:
<HTML>
<HEAD>
<TITLE>Prueba de setTimeout #02</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var Repetir=(1==0); // Asigna 'FALSE'
var OldDefaultStatus=defaultStatus;
function Reloj()
{
var Hora=new Date();
if(Repetir)
{
// Establece la hora en la barra de estado.
defaultStatus=Hora.getHours()+":"+Hora.getMinutes()+":"+Hora.Seconds();
seTimeout("Reloj();", 1000); // Vuelve a activar el 'Reloj'.
}
else
defaultStatus=OldDefaultStatus;
}
Repetir=(1==1); // Asigna 'TRUE'
// LLama a 'Reloj()' cada 1 segundo.
setTimeout("Reloj();", 1000);
</SCRIPT>
</BODY>
</HTML>
Como nota importante, quisiera acotar que los despliegues de cajas de diálogo, como alert, detienen momentáneamente la ejecución del programa activado con setTimeout.
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ágina';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.
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..