BOM - Browser Object Model
O Browser Object Model representa a janela do Browser. A partir dele nós conseguimos interagir com certas propriedades do browser, como o tamanho da janela, a posição do cursor, a barra de rolagem, etc.
Assim como o DOM é acessado por meio do objeto document, o BOM é acessado por meio do objeto window.
console.log(window.innerWidth); /* Esta propriedade retorna a largura interna do browser,
sem contar as barras de ferramentas e de rolagem */
Como estamos trabalhando com o Javascript client-side onde tudo acontece dentro do browser, pode-se dizer que quase tudo está dentro do objeto window, até mesmo o elemento document.
window.document.getElementById("teste").innerHTML = "podemos alterar desta maneira o inner html do elemento teste";
Como é de se imaginar, não precisamos sempre mencionar o objeto window, tanto é que usamos diretamente o objeto document nas aulas anteriores sem nenhum problema. Até mesmo no primeiro exemplo, poderíamos ter feito diretamente:
console.log(innerWidth);
Porém, para evitar erros e confusões, é recomendável mencionar o objeto window quando não estivermos trabalhando dentro do objeto document. Vamos agora ver alguns exemplos interessantes que podemos fazer usando o BOM.
window.onmousemove
O evento onmousemove representa o movimento do cursor pela página. Podemos utilizá-lo para monitorar a posição do cursor em relação às bordas superior e esquerda do browser e mostrar uma mensagem quando o cursor estiver em uma determinada posição.
window.onmousemove = function(e){
if (e.pageY < 5) {
alert('Não perca os descontos exclusivos na seção de promoções');
}
};
/* Vamos lembrar que se passarmos um argumento na função para um evento,
podemos usá-lo dentro da função para obter informações sobre esse evento.
Neste exemplo a propriedade pageY pode nos ser bastante útil */