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.

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:

Figura 2: Executando documento HTML

O resultado, ao clicar no bot�o �clique aqui�, com a janela maximizada, � exibido na imagem a seguir.

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.

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.

Explorando as propriedades do objeto window em JavaScript

Veja neste artigo as propriedades do objeto window da linguagem JavaScript, largamente utilizado quando se necessita manipular informações das janelas dos browser.

Introduç�o

Propriedades

Diferença entre as propriedades status e defaultstatus

Exemplo de uso das propriedades innerWidth e innerHeight

Artigos relacionados