🌐 3. BOM – Browser Object Model
Visão Geral: O BOM (Browser Object Model) é a interface que permite ao JavaScript interagir com o navegador em si. Ao contrário do DOM (que lida com o conteúdo da página), o BOM gerencia janelas, abas, URLs, histórico e propriedades do navegador .
3.1 Objeto window
O objeto window é o objeto global no contexto do navegador:
console.log(window.innerWidth); // largura da janela em pixels
Dica: Todas as variáveis e funções globais viram propriedades do objeto window.
🧪 Demonstração: Objeto Window
Informações da Janela
Informações da Tela
Redimensionar (Demo)
// Informações da janela aparecerão aqui
3.2 Objeto location
Manipula e acessa a URL da página atual:
console.log(window.location.href); // retorna a URL completa
window.location.reload(); // recarrega a página
Exemplo prático:
if (location.hostname === "localhost") {
alert("Ambiente local detectado!");
}
🧪 Demonstração: Objeto Location
Informações da URL
Alterar Hash
Mostrar Protocolo
// Informações da localização aparecerão aqui
3.3 Objeto navigator
Oferece informações sobre o navegador e o sistema:
console.log(navigator.userAgent);
console.log(navigator.language);
Pode ser usado para detectar o tipo de navegador, versão, idioma, plataforma etc.
🔍 navigator.userAgent
String identificando o navegador e sistema operacional
🌍 navigator.language
Idioma preferido do usuário
📱 navigator.platform
Plataforma do sistema operacional
🔌 navigator.onLine
Status da conexão com a internet
🧪 Demonstração: Objeto Navigator
Informações do Navegador
Status Online
Idioma e Localização
// Informações do navegador aparecerão aqui
3.4 Objeto screen
Retorna informações sobre a resolução da tela:
console.log(screen.width);
console.log(screen.availHeight);
Atenção: Esses dados referem-se à tela do dispositivo , não à janela do navegador.
3.5 Objeto history
Permite navegar pelo histórico de navegação da aba:
history.back(); // vai para a página anterior
history.forward(); // vai para a próxima página (se houver)
history.length mostra o número de páginas visitadas no histórico da aba.
🧪 Demonstração: Histórico e Tela
Informações do Histórico
Simular Voltar
Detalhes da Tela
// Informações do histórico aparecerão aqui
3.6 Métodos e alertas do window (.extra)
O objeto window também fornece métodos para interação direta com o usuário:
📢 Alertas, confirmação e entrada:
alert("Mensagem simples ao usuário");
const resposta = confirm("Deseja continuar?");
const nome = prompt("Qual o seu nome?");
⏰ Temporizadores:
setTimeout(() => {
console.log("Executado após 2 segundos");
}, 2000);
let intervalo = setInterval(() => {
console.log("Repetindo a cada segundo");
}, 1000);
clearInterval(intervalo); // cancela o intervalo
Evite abusar de alert, confirm e prompt — eles bloqueiam a interface.
🧪 Demonstração: Alertas e Temporizadores
Segundos para o timer:
Mostrar Alert
Mostrar Confirm
Mostrar Prompt
Iniciar Timer
Iniciar Intervalo
Parar Intervalo
// Resultados dos alertas e timers aparecerão aqui
🧠 Resumo
O BOM é usado para interagir com o navegador, fora da página HTML.
window é o objeto global e pai de todos os outros.location, navigator, screen, e history fornecem informações e controle sobre o ambiente do navegador.Métodos como alert, setTimeout e confirm fazem parte do window.
📋 Perguntas de Revisão
1. Qual a diferença entre window e document?
window é o objeto global do navegador, enquanto document representa o conteúdo HTML da página.
2. Como acessar a URL atual com JavaScript?
Usando window.location.href ou simplesmente location.href.
3. Para que serve o navigator.userAgent?
Identifica o navegador, versão e sistema operacional do usuário.
4. Como funcionam setTimeout e setInterval?
setTimeout executa uma função após um tempo. setInterval executa repetidamente em intervalos.
5. O que history.back() faz?
Navega para a página anterior no histórico do navegador.
✅ Marcar Como Concluído