Artigos HTML e CSS Explorando as propriedades do objeto window em JavaScript

Introdução

Neste artigo vamos falar sobre objeto Window e suas propriedades, que podemos denominar como o principal objeto da Javascript, assumindo o nível mais alto na hierarquia dos objetos disponíveis nessa lingugem. Veja na figura 1.

Hierarquia Objeto Window

Figura 1: Hierarquia Objeto Window

O objeto window faz a manipulação das janelas do navegador. Sempre que abrirmos o navegador automaticamente esse objeto é gerado, isso acontece porque esse objeto representa exatamente essa janela que foi aberta. Para esse objeto ser criado não precisamos usar nenhum tipo de linguagem, como HTML, pois isso é feito automaticamente pelo navegador.

Esse objeto permite aos desenvolvedores criar e abrirem novas janelas de maneiras diferentes. Esses processos são possíveis através das propriedades e métodos que o objeto window possui. Para utiliza-los basta seguirmos a seguinte sintaxe.

  • window.propriedade
  • window.metodo

Propriedades

As propriedades do objeto window tem como propósito modificar os aspectos em relação à janela do navegador e de suas frames, se existentes.

Closed: Esta propriedade tem a retorna um valor booleano indicando se a janela foi fechada.

DefaulStatus: Com esta propriedade conseguimos definir uma mensagem padrão que será exibida na barra de status do navegador.

Document: Esta propriedade possui todas as características da página HTML, como por exemplo, cor das letras, cor do fundo, imagens que possamos utilizar como plano de fundo.

Frames []: Array de frames em uma janela.

History: Esta propriedade contém uma lista representando as URLs que o usuário já visitou. Podemos acessar todas as URLs visitadas pelos usuários atribuindo os seguintes métodos a essa propriedade: current, next e previous.

InnerHeigth: Com esta propriedade podemos definir ou obter a altura da área onde o conteúdo é apresentado, não a altura do navegador em si.

InnerWidth: Com esta propriedade podemos definir ou obter a largura da área onde o conteúdo é apresentado, não a largura do navegador em si.

Length: Informa a quantidade de frames existentes em uma janela.

Location: Esta propriedade tem informações referentes ao endereço corrente. Um exemplo é a propriedade hostname, que retorna o nome do servidor que está hospedando a página carregada. Nessa propriedade temos mais dois métodos:

  • Reload: Que força o navegador a carregar a página.
  • Replace: Que carrega a URL informada.

Name: Podemos utilizar para definir ou obter o nome da janela.

Navigator: Esta propriedade contém informações sobre o navegador, nome, versão, e outras informações. O objeto navigator possui também um método interessante:

  • javaEnabled(): Que informa se o navegador está com o Java habilitado.

Opener: Esta propriedade pode ser usada a partir de uma sub-janela para fazer referência a janela pai que criou essa sub-janela.

OuterHeight: Com esta propriedade podemos definir ou obter a altura da área onde o conteúdo é apresentado junto com os menus e barra de status do navegador, caso existente.

OuterWidth: Com esta propriedade podemos definir ou obter a largura da área onde o conteúdo é apresentado junto com os menus e barra de status do navegador, caso existente.

PageXOffset: Com esta propriedade podemos definir ou retornar a posição X corrente da página em relação ao canto esquerdo superior da área de conteúdo da janela.

PageYOffset: Com esta propriedade podemos definir ou retornar a posição Y corrente da página em relação ao canto esquerdo superior da área de conteúdo da janela.

Parent: Esta propriedade representa a janela pai ou frame-pai.

Screen: Esta propriedade contém informações sobre a tela do usuário. Invocando alguns métodos desse objeto podemos obter informações tais como.

  • screen.availHeight: Retorna a altura da tela do usuário, incluindo a barra de status do Windows, em pixels.
  • screen.availwidth: Retorna a largura da tela do usuário incluindo a barra de status do Windows em pixel.

ScreenLeft: Retorna a posição horizontal da janela com relação à tela (screen).

ScreenTop: Retorna a posição vertical da janela com relação à tela (screen).

ScreenX: Semelhante ao screenLeft, retorna o valor da coordenada X (horizontal) da janela em relação à tela.

ScreenY: Semelhante ao screenTop, retorna o valor da coordenada Y (vertical) da janela em relação à tela.

Self: Esta propriedade representa a janela atual ou frame.

Status: Esta propriedade define uma mensagem que será apresentada na barra de status.

Top: Esta propriedade representa a janela superior do navegador.

Diferença entre as propriedades status e defaultstatus

Essas duas propriedades são utilizadas para atribuir uma mensagem à barra de status, a diferença é que a propriedade defaultstatuspode ser utilizada como um objeto simples, apesar de ser uma propriedade do objeto window. Além disso, a propriedade defaultstatus nos permite armazenar uma mensagem padrão para ser exibida, ou seja, aquela que voltará a aparecer após modificações temporárias provocadas por mensagens usadas na propriedade status.

Exemplo de uso das propriedades innerWidth e innerHeight

Com essas duas propriedades vamos criar um documento HTML que vai servir para obtermos a largura e altura referente à área de conteúdo apresentado no navegador.

Listagem 1: Exibindo largura e altura da janela.


<html>
<head>
<script>
function myFunction()
	{
		var w=window.innerWidth;
		var h=window.innerHeight;
		x=document.getElementById("demo");
		x.innerHTML="Largura: " + w + " Altura: " + h;
	}
</script>
</head>
<body>

	<p id="demo">Clique no botão para exibir a altura e largura dessa janela (Não incluindo toolbars e scrollbars).</p>

	<button onclick="myFunction()">Try it</button>
</body>
</html>

Resultado do código:

Executando documento HTML

Figura 2: Executando documento HTML

O resultado, ao clicar no botão “clique aqui”, com a janela maximizada, é exibido na imagem a seguir.

Resultado largura e altura janela maximizada

Figura 3: Resultado largura e altura janela maximizada

Agora se redimensionarmos a janela para um tamanho diferente e clicarmos novamente no botão “Clique aqui”, a largura e altura retornarão resultados diferentes veja na figura abaixo.

Largura e altura redimensionada

Figura 4: Largura e altura redimensionada

Vamos ficando por aqui com mais este artigo. Espero que as informações contidas nesse artigo tenham sido úteis e de agrado de todos os leitores.

Um abraço a todos.