logo javascript

Aprenda javascript com facilidade do zero

Prof. Ivan Lourenço Gomes

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 */
                    
                

Índice de Aulas