JavaScript Window é uma interface global (tipo de objeto) que é usada para controlar o ciclo de vida da janela do navegador e realizar várias operações nela.
Uma janela variável global, que representa a janela atual do navegador na qual o código está sendo executado, está disponível em nosso código JavaScript e pode ser acessada diretamente usando window literal.
Representa uma janela contendo uma página da Web que, por sua vez, é representada pelo objeto de documento. Uma janela pode ser uma nova janela, uma nova aba, um conjunto de quadros ou um quadro individual criado com JavaScript.
No caso de navegador com várias abas, um objeto de janela representa uma única aba, mas algumas de suas propriedades como innerHeight, innerWidth e métodos como resizeTo() afetarão toda a janela do navegador.
Quando você abre uma nova janela ou aba, um objeto de janela representando essa janela/aba é automaticamente criado.
As propriedades de um objeto janela são usadas para recuperar as informações sobre a janela que está atualmente aberta, enquanto seus métodos são usados para executar tarefas específicas como abrir, maximizar, minimizar a janela, etc.
Para entender o objeto janela, vamos usá-lo para executar algumas operações e ver como ele funciona.
Usando o objeto janela JavaScript
Vamos usar o objeto janela JavaScript para criar uma nova janela, usando o método open(). Este método cria uma nova janela e retorna um objeto que pode ser usado para gerenciar essa janela.
No código acima, nós usamos o objeto janela da janela existente para criar uma nova janela, usando o método open(). No método open() podemos fornecer a URL a ser aberta na nova janela (podemos mantê-la em branco também), nome da janela, a largura e a altura da janela a ser criada.
Seguir é a sintaxe para o objeto window open() method:
let newWindow = window.open(url, windowName, );Podemos fornecer, quantas propriedades quisermos, enquanto criamos uma nova janela.
Quando o método open() é executado, ele retorna a referência do objeto window para a nova janela criada, que você pode atribuir a uma variável, como nós fizemos no código acima. Atribuímos o valor retornado pelo método window.open() à variável win.
A variável win foi usada para acessar a nova janela, como obter o nome da janela, a localização da janela que abriu a nova janela, etc.
Existem muitas propriedades e métodos para o objeto janela, que listamos abaixo.
Voltar dimensões de uma janela
Podemos obter a altura e largura de uma janela, usando as propriedades embutidas do objeto janela.
Tambem podemos acessar o objeto documento usando um objeto janela(window.document) que nos dá acesso ao documento HTML, portanto podemos adicionar um novo elemento HTML, ou escrever qualquer conteúdo no documento, como fizemos no exemplo acima.
Propriedades do objeto janela JavaScript
As propriedades do objeto wondow referem-se às variáveis criadas dentro do objeto janela.
No JavaScript, todos os dados disponíveis são anexados ao objeto janela como propriedades.
Podemos acessar as propriedades do objeto janela como: window.propertyname onde nome de propriedade é o nome da propriedade.
A tabela de propriedades dos objetos de janela mais populares é dada abaixo:
| Propriedade | Descrição |
|---|---|
| fechada | devolve um valor booleano que especifica se uma janela foi fechada ou não |
| documento | especifica um objeto de documento na janela. |
| história | especifica um objeto de histórico para a janela. |
| frames | especifica um array de todos os frames na janela atual |
| estado por defeito | especifica a mensagem padrão que tem que aparecer na barra de status da janela. |
| alturainner | especifica a altura interna da área de conteúdo da janela. |
| largurainner | especifica a largura interna da área de conteúdo da janela. |
| comprimento | especifica o número de caixilhos contidos na janela. |
| localização | escreve o objeto de localização para a janela |
| nome | escreve o nome para a janela |
| top | escreve a referência da janela do browser mais alto. |
| self | retroduz a referência da moldura ou janela atual ativa. |
| parent | retroduz a moldura ou janela pai da janela atual. |
| status | escreve a mensagem que é exibida na barra de status da janela quando uma atividade é executada na Janela. |
| esquerda da tela | especifica a coordenada x da janela em relação à tela do monitor do usuário |
| screenTop | especifica a coordenada y da janela em relação à tela do monitor do usuário |
| screenX | especifica a coordenada x da janela em relação à tela do monitor do usuário |
| screenY | Especifica a coordenada y da janela em relação à tela do monitor do usuário |
Vejamos algumas dessas propriedades em ação:
No exemplo acima, criámos uma nova janela, apenas para o familiarizar com a criação de novas janelas e também, para o fazer compreender que quando criamos uma nova janela, então a janela actual tem um objecto de janela diferente e a nova janela terá um objecto de janela separado.
Tentamos então aceder a algumas propriedades da nova janela criada.
TASK: Tente mais algumas propriedades da janela no playground do código acima para praticar e subestimar como as propriedades da janela funcionam.
JavaScript Window Object Methods
Os métodos do objeto janela referem-se às funções criadas dentro do objeto janela, que podem ser usadas para executar várias ações na janela do navegador, como por exemplo, como ele exibe uma mensagem ou recebe entrada do usuário.
Below listamos alguns dos métodos de objetos window mais usados:
| Método | Descrição |
|---|---|
alert() |
especifica um método que exibe uma caixa de alerta com uma mensagem e um botão OK. |
blur() |
especifica um método que remove o foco da janela atual. |
clearInterval() |
especifica um método que limpa o temporizador, que é definido usando o método setInterval(). |
close() |
especifica um método que fecha a janela atual. |
confirm() |
especifica um método que exibe uma caixa de diálogo com uma mensagem e dois botões OK e Cancelar |
focus() |
especifica um método que define o foco na janela atual. |
open() |
especifica um método que abre uma nova janela do navegador |
moveTo()
|
especifica um método que move uma janela para uma posição especificada |
moveBy() |
especifica um método que move uma janela em relação à sua posição atual. |
prompt() |
especifica um método que solicita a entrada. |
print()
|
especifica um método que envia um comando de impressão para imprimir o conteúdo da janela atual. |
setTimeout() |
especifica um método que avalia uma expressão após um número especificado de milissegundos. |
setInterval() |
especifica um método que avalia uma expressão em intervalos de tempo especificados (em milissegundos) |
resizeBy() |
escreve a quantidade pela qual a janela será redimensionada |
resizeTo() |
utilizada para redimensionar dinamicamente a janela |
scroll() |
rola a janela para um determinado lugar no documento |
scrollBy() |
rola a janela pelo valor dado |
stop() |
este método pára o carregamento da janela |
Vejamos alguns dos métodos acima em ação:
No exemplo acima, nós usamos alguns métodos de janela, você pode tentar mais métodos. No próximo tutorial vamos aprender sobre o objeto History, que é uma propriedade do objeto window.