Javascript: El objeto window
Como ya comentamos en la entrada dedicada a DOM, el objeto window y sus propiedades y métodos asociados nos permiten la interacción con el navegador, mientras que los objetos de la jerarquía DOM (los qe están por debajo del objeto document en la jerarquía) nos permiten interactuar con el documento en si.
También comentamos que el objeto window es la raíz de la jerarquía, lo cual significa que todos los objetos de la jerarquía 'derivan' de window y que las variables globales se consideran propiedades de window.
Cada una de las ventanas (y de los marcos) en un navegador web esta representado por un objeto window que es la raíz de su propia jerarquía y el objeto global. El que window sea el objeto global significa que cuando no se indica que una propiedad o método pertenece a un objeto se comprueba si pertenece a window, por lo que si tenemos una propiedad window.propiedad por ejemplo, podemos ahorranos el indicar que propiedad pertenece al objeto window y escribir simplemente propiedad.
Vamos a ver algunos de los métodos y propiedades mas interesantes de window através de ejemplos. Lo primero que vamos a ver es como interactuar con el usuario mediante tres métodos de window: alert(texto a mostrar) que simplemente muestra un diálogo con el texto que se le paso como parámetro, prompt(texto a mostrar, valor inicial) que de igual forma que alert muestra un texto al usuario, pero incluye una caja de texto para permitir al usuario introducir una respuesta (y devuelve como valor de retorno lo que halla escrito el usuario) y confirm(texto a mostrar) que muestra una ventana de confirmación y devuelve true o false dependiendo de si el usuario pulsó aceptar o cancelar respectivamente. Veamos un ejemplo:
window.alert("Encantado de conocerte " + window.prompt("Y este de prompt, para preguntarte por ejemplo como te llamas","Este texto será el que se verá en la caja de texto por defecto"));
/*Cuando los métodos o propiedades pertenecen al objeto global no hace falta poner el nombre del objeto antes. Podemos escribir simplemente el nombre del método o propiedad*/
if(confirm("¿Sabías que para window se puede omitir el objeto sobre el que se hace la llamada? Esto es así porque window es el objeto global"))
alert("¿Si lo sabías? Que inteligente");
else
alert("Bueno, pues ya lo sabes.");
Para ver este pequeño script en acción pulsa aquí.
Podemos crear ventanas usando el método open del objeto window actual
que crea una ventana con las propiedades definidas en sus parámetros y devuelve una referencia a la ventana creada. Las características son una lista de valores separados por comas para los siguientes atributos (no son todos los que son, IE por ejemplo tiene left y top para especificar las coordenadas en que se mostrará la ventana):
- location, determina si la nueva ventana debe o no tener una barra de dirección (yes o no)
- menubar, determina si la nueva ventana debe o no tener una barra de menú (yes o no)
- scrollbars, mostrar o no las barras de desplazamiento (yes o no)
status, mostrar o no la barra de estado (yes o no) - toolbar, le indicamos si queremos que la ventana tenga barra de herramientas (yes o no)
- resizable, establecemos si la ventana puede redimensionarse por el usuario (yes o no)
- height, alto de la ventana en pixels.
- width, ancho de la ventana en pixels.
Todos los argumentos del método open son opcionales. Si no especificamos una dirección URL, simplemente se abrirá una ventana vacía; si no especificamos las características de la ventana se le dará un tamaño, posición y características estándar.
En el caso de que el segundo argumento, el nombre de la ventana (cuidado porque el nombre de la ventana no se refiere al título. Se usa como target para enlaces o formularios), sea el nombre de una ventana que ya existe, simplemente se devolverá una referencia a la ventana ya existente, no se creará una nueva ventana. El cuarto argumento de open solo tiene sentido en este caso y especifica si se debe crear una nueva entrada en el historial (false) o reemplazar la entrada actual (true). Veamos un ejemplo:
//ventanaGoogle también es un objeto de tipo window, por lo que también tiene un método open
ventanaGoogle.open('http://zootropo.blogspot.com/');
Para mover o redimensionar una ventana una vez ha sido creada se utilizan los métodos moveBy(desplazamientoX, desplazamientoY) para desplazar la ventana la cantidad de pixeles especificados como argumentos; moveTo(x, y) para desplazar la ventana a las coordenadas especificadas y resizeBy(diferenciaAncho, diferenciaAlto) y resizeTo(ancho, alto) para redimensionar la ventana indicando en el primer caso la diferencia en pixeles con el tamaño actual (positivo si queremos agrandarla y negativo si queremos hacerla mas pequeña) y en el segundo caso las medidas exactas. Además window.sizeToContent() redimensionaría la ventana según el contenido de la misma.
Como ejemplo, si hacemos click sobre este enlace el tamaño de la ventana cambiará a 300x300, es decir el código es resizeTo(300,300). Si pulsamos sobre este otro que ejecuta el código moveBy(100,100); la ventana se moverá 100 pixeles hacia abajo y 100 hacia la derecha.
Para terminar con los métodos de window, algunos de los mas interesantes que aún no hemos comentado son blur(), que quita el foco de la ventana actual; focus(), que hace lo contrario, nos da el foco; back() y forward() con los que nos movemos hacia atrás y hacia delante en el historial y por último close(), que cierra la ventana.
Una vez vistos los métodos mas importantes, vamos ahora con las propiedades. Una de las mas importantes es el objeto navigator, que encapsula información sobre el navegador que utiliza el usuario. Sus propiedades mas importantes son appName, una cadena que representa el nombre del navegador; appVersion, la versión del navegador, userAgent, cookieEnabled, un booleano que informa si las cookies están activadas; language, que devuelve una cadena compuesta por un par de caracteres que identifica el idioma; oscpu, el sistema operativo que el usuario utiliza y plugins, un array de objetos plugin en el que se indican los plugins soportados por el navegador.
Veamos un ejemplo que simplemente muestre en pantalla la información del usuario:
alert(texto);
Para ver que mostraría ese alert pulsa aquí.
Otro objeto interesante es screen, que nos proporciona información sobre la resolución (mediante las propiedades width y height) y profundidad de color (con la propiedad colorDepth) del usuario. Por ejemplo:
Tenemos también entre los objetos 'derivados' de window el objeto location, que nos permite obtener o modificar la dirección web en la que se encuentra el usuario:
//y ahora nos movemos a google
window.location = 'http://www.google.com/';
Ejemplo (cuidado, si pulsas te llevará a google)
Para terminar con esta pequeña introducción a las propiedades y métodos de window las últimas propiedades que quedaban en el tintero:
- document, raíz de la jerarquía DOM y que veremos en próximas entradas. Es una referencia al documento que muestra la ventana del navegador correspondiente.
- opener, una referencia al objeto de tipo window que creó la ventana actual.
- parent, si la ventana es un marco (los marcos también son objetos window) devuelve una referencia a la ventana o marco en que está contenido. Si es una ventana devuelve una referencia a si mismo.
- self, una referencia a la propia ventana.
- status, texto de la barra de estado.
escrito por Zootropo @ 8/10/2004 04:00:00 p. m.
|
<< Home