Browser Object Model e o Objeto window - JavaScript

A interação com o navegador web e seus objetos é crucial em JavaScript. Utilizar objetos do navegador permite manipular elementos HTML na página ou interagir com o usuário.

Todos os objetos por meio dos quais o JavaScript interage com o navegador são descritos pelo conceito de Modelo de Objeto do Navegador (Browser Object Model, BOM).

O BOM pode ser visualizado como a seguinte estrutura:

No topo da estrutura, está o objeto principal, o window, que representa o navegador como um todo. Este objeto contém vários outros objetos, incluindo o document, que representa a página web exibida no navegador.

O Objeto window

O objeto window é a janela do navegador web onde as páginas da web são exibidas. Sendo um objeto global, não é necessário prefixar seus métodos e propriedades com o nome window. Por exemplo, o método alert() pode ser invocado como window.alert("Olá, mundo!") ou simplesmente alert("Olá, mundo!").

No entanto, sendo um objeto global, isso impõe algumas restrições. Por exemplo:

var alert = function(message) {
  console.log("Mensagem: ", message);
};
window.alert("Olá, mundo!");

Aqui, uma variável global alert é definida com var. Todas as variáveis globais ou funções declaradas são automaticamente adicionadas ao objeto window. Se uma nova função tiver o mesmo nome que um método existente, como alert(), isso redefinirá o método no objeto window com a nova função.

Além disso, se declararmos qualquer variável global, ela estará acessível como uma propriedade do objeto window:

var message = "hello";
console.log(window.message);

Propriedades do window

As propriedades do objeto window fornecem várias informações sobre a janela do navegador:

• innerHeight: altura da janela incluindo barras de rolagem horizontais.

• innerWidth: largura da janela incluindo barras de rolagem verticais.

• outerHeight: altura externa da janela do navegador incluindo todas as barras de rolagem.

• outerWidth: largura externa da janela do navegador incluindo todas as barras de rolagem.

• pageXOffset: alias para window.scrollX.

• pageYOffset: alias para window.scrollY.

• screenX: posição da janela do navegador em relação ao lado esquerdo da tela.

• screenY: posição da janela do navegador em relação ao topo da tela.

• scrollX: quantidade de pixels que a página da web foi rolada horizontalmente.

• scrollY: quantidade de pixels que a página da web foi rolada verticalmente.

Componentes do navegador

A janela do navegador geralmente consiste em vários componentes que podem variar dependendo do navegador e das configurações pessoais. Em geral, uma janela típica de navegador inclui:

• Barra de endereços para inserir URLs ou consultas de pesquisa(Address Bar).

• Barra de status que indica se a página web está carregada ou em processo de carregamento(Status Bar).

• Barra de menus(Menu Bar).

• Barra de ferramentas(ToolBar).

• Uma "barra pessoal" que pode conter, por exemplo, favoritos(Personal Bar).

• Barras de rolagem que mostram a posição horizontal e vertical(Horizontal/Vertical ScrollBar).

O objeto window tem capacidades limitadas para interagir com esses componentes. Em particular, para verificar a presença desses componentes, o objeto window possui algumas propriedades:

• locationbar: contém um objeto que indica se a barra de endereços está sendo exibida ou não.

• menubar: indica se a barra de menu está sendo exibida ou não.

• personalbar: indica se a barra pessoal (por exemplo, a barra de favoritos) está sendo exibida ou não.

• scrollbars: indica se as barras de rolagem estão sendo exibidas ou não.

• statusbar: indica se a barra de status está sendo exibida ou não.

• toolbar: indica se a barra de ferramentas está sendo exibida ou não.

Por exemplo, vamos verificar se a barra pessoal está sendo exibida:

A propriedade retornará um objeto BarProp, no qual a propriedade visible indica se a barra está sendo exibida ou não.

O Objeto screen

O objeto screen fornece informações sobre a tela:

• availTop: altura dos componentes fixos na parte superior do navegador.

• availLeft: largura dos componentes fixos na lateral esquerda do navegador.

• availHeight: altura máxima disponível menos a altura das barras superior e inferior.

• availWidth: largura máxima disponível menos a largura das barras laterais.

• colorDepth: profundidade de cor da tela.

• height: altura da tela em pixels.

• orientation: objeto que fornece informações sobre a orientação do dispositivo.

• pixelDepth: profundidade de pixel da tela.

• width: largura da tela em pixels.

Exemplo de uso:

console.log(screen.availTop);       // 25
console.log(screen.availLeft);      // 0
console.log(screen.availHeight);    // 695
console.log(screen.availWidth);     // 1280
console.log(screen.width);          // 1280
console.log(screen.height);         // 800
console.log(screen.pixelDepth);     // 24
console.log(screen.colorDepth);     // 24