JavaScript Window Object

JavaScript Window es una Interfaz global (tipo de objeto) que se utiliza para controlar el ciclo de vida de la ventana del navegador y realizar varias operaciones sobre ella.

Una variable global window, que representa la ventana actual del navegador en la que se está ejecutando el código, está disponible en nuestro código JavaScript y se puede acceder directamente utilizando window literal.

Representa una ventana que contiene una página web que a su vez está representada por el objeto documento. Una ventana puede ser una nueva ventana, una nueva pestaña, un conjunto de marcos o un marco individual creado con JavaScript.

En el caso de un navegador con varias pestañas, un objeto ventana representa una sola pestaña, pero algunas de sus propiedades como innerHeight, innerWidth y métodos como resizeTo() afectarán a toda la ventana del navegador.

Cada vez que se abre una nueva ventana o pestaña, se crea automáticamente un objeto ventana que representa esa ventana/pestaña.

Las propiedades de un objeto ventana se utilizan para recuperar la información sobre la ventana que está abierta en ese momento, mientras que sus métodos se utilizan para realizar tareas específicas como abrir, maximizar, minimizar la ventana, etc.

Para entender el objeto ventana, vamos a utilizarlo para realizar algunas operaciones y ver cómo funciona.

Usando el objeto ventana de JavaScript

Usemos el objeto ventana de JavaScript para crear una nueva ventana, utilizando el método open(). Este método crea una nueva ventana y devuelve un objeto que además se puede utilizar para gestionar esa ventana.

En el código anterior, hemos utilizado el objeto ventana de la ventana existente para crear una nueva ventana utilizando el método open(). En el método open() podemos proporcionar la URL que se abrirá en la nueva ventana(también podemos dejarla en blanco), el nombre de la ventana, la anchura y la altura de la ventana que se creará.

La siguiente es la sintaxis del método open() del objeto ventana:

let newWindow = window.open(url, windowName, );

Podemos proporcionar, tantas propiedades como queramos, mientras creamos una nueva ventana.

Cuando se ejecuta el método open(), devuelve la referencia del objeto ventana para la nueva ventana creada, que se puede asignar a una variable, como hemos hecho en el código anterior. Hemos asignado el valor devuelto por el método window.open() a la variable win.

Hemos utilizado la variable win para acceder a la nueva ventana, como obtener el nombre de la ventana, obtener la ubicación de la ventana que abrió la nueva ventana, etc.

Hay muchas propiedades y métodos para el objeto ventana, que hemos enumerado a continuación.

Buscar las dimensiones de una ventana

Podemos obtener la altura y la anchura de una ventana utilizando las propiedades incorporadas al objeto ventana.

También podemos acceder al objeto documento utilizando un objeto ventana(window.document) que nos da acceso al documento HTML, por lo que podemos añadir nuevos elementos HTML, o escribir cualquier contenido en el documento, como hicimos en el ejemplo anterior.

Propiedades del objeto ventana en JavaScript

Las propiedades del objeto ventana se refieren a las variables creadas dentro del objeto ventana.

En JavaScript, todos los datos disponibles se adjuntan al objeto ventana como propiedades.

Podemos acceder a las propiedades del objeto ventana como: window.propertyname donde propertyname es el nombre de la propiedad.

A continuación se muestra una tabla con las propiedades más populares de los objetos ventana:

.

Property	Description
closed	retorna un valor booleano que especifica si una ventana ha sido cerrada o no
document	especifica un objeto documento en la ventana.
historia	especifica un objeto historia para la ventana.
frames	especifica un array de todos los frames de la ventana actual
defaultStatus	especifica el mensaje por defecto que debe aparecer en la barra de estado de Window.
innerHeight	especifica la altura interior del área de contenido de la ventana.
innerWidth	especifica la anchura interior del área de contenido de la ventana.
length	especifica el número de marcos que contiene la ventana.
location	especifica el objeto de localización de la ventana
name	especifica el nombre de la ventana
top	especifica la referencia de la ventana superior del navegador.
self	retorna la referencia del marco o ventana activa actual.
parent	retorna el marco o ventana padre de la ventana actual.
status	especifica el mensaje que se muestra en la barra de estado de la ventana cuando se realiza una actividad en la Ventana.
screenleft	especifica la coordenada x de la ventana relativa a la pantalla del monitor del usuario
screenTop	Especifica la coordenada y de la ventana relativa a la pantalla del monitor del usuario
screenX	Especifica la coordenada x de la ventana relativa a la pantalla del monitor de un usuario
screenY	Especifica la coordenada y de la ventana relativa a la pantalla del monitor de un usuario

Veamos un ejemplo para ver algunas de estas propiedades en acción:

En el ejemplo anterior, hemos creado una nueva ventana, sólo para que te familiarices con la creación de nuevas ventanas y también, para que entiendas que cuando creamos una nueva ventana, entonces la ventana actual tiene un objeto ventana diferente y la nueva ventana tendrá un objeto ventana separado.

Después hemos intentado acceder a algunas propiedades de la nueva ventana creada.

Tarea: Probar algunas propiedades más de las ventanas en el campo de juego del código anterior para practicar y entender cómo funcionan las propiedades de las ventanas.

Métodos del objeto ventana de JavaScript

Los métodos del objeto ventana se refieren a las funciones creadas dentro del objeto ventana, que se pueden utilizar para realizar varias acciones en la ventana del navegador, como por ejemplo, cómo muestra un mensaje u obtiene entradas del usuario.

A continuación hemos enumerado algunos de los métodos del objeto ventana más utilizados:

Método	Descripción
alert()	Especifica un método que muestra un cuadro de alerta con un mensaje y un botón OK.
blur()	especifica un método que quita el foco de la ventana actual.
clearInterval()	especifica un método que borra el temporizador, que se establece mediante el método setInterval().
close()	especifica un método que cierra la ventana actual.
confirm()	especifica un método que muestra un cuadro de diálogo con un mensaje y dos botones Aceptar y Cancelar
focus()	especifica un método que establece el foco en la ventana actual.
open()	especifica un método que abre una nueva ventana del navegador
moveTo()	especifica un método que mueve una ventana a una posición especificada
moveBy()	especifica un Método que mueve una ventana en relación a su posición actual.
prompt()	especifica un método que solicita la entrada.
print()	especifica un método que envía un comando de impresión para imprimir el contenido de la ventana actual.
setTimeout()	especifica un método que evalúa una expresión después de un número especificado de milisegundos.
setInterval()	especifica un método que evalúa una expresión a intervalos de tiempo especificados (en milisegundos)
resizeBy()	especifica la cantidad en que se redimensionará la ventana
resizeTo()	utilizada para redimensionar dinámicamente la ventana
scroll()	desplaza la ventana a un lugar determinado del documento
scrollBy()	desplaza la ventana por el valor dado
stop()	este método detiene la carga de la ventana

Tomemos un ejemplo y veamos algunos de los métodos anteriores en acción:

En el ejemplo anterior, hemos utilizado algunos métodos de ventana, puedes probar más métodos. En el próximo tutorial aprenderemos sobre el objeto Historia, que es una propiedad del objeto ventana.