Browser Object Model e o Objeto window em 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 chamado 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:

console.log(window.personalbar); // BarProp {visible: true} ou BarProp {visible: false}

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