O que é o BOM?

O Browser Object Model (BOM) represanta a estrutura do navegador web, expondo seus componentes principais como objetos JavaScript. Diferente do DOM, que lida com o conteúdo da página, o BOM permite interagir com funcionalidades do próprio navegador, como janelas, histórico e localização.

Principais Objetos do BOM

• window: Objeto global que representa a janela do navegador.
• location: Fornece informações sobre a URL atual.
• history: Permite manipular o histórico de navegação.
• navigator: Contém dados sobre o navegador do usuário.
• screen: Oferece detalhes sobre a tela do dispositivo.

Objeto Window

O objeto window é o escopo global em ambientes de navegador. Todos os objetos globais são propriedades dele, e seu uso pode ser implícito.

Diálogos Simples

Oferece métodos integrados para interação rápida com o usuário:

• alert(): Exibe uma mensagem simples.
• confirm(): Retorna true ou false com base na escolha do usuário.
• prompt(): Solicita entrada textual do usuário.

const desejaSair = confirm("Tem certeza que deseja sair?");
if (desejaSair) {
  alert("Até logo!");
} else {
  alert("Continue navegando.");
}

const nome = prompt("Digite seu nome:");
console.log(`Olá, ${nome}`);

Controle de Janelas

Pode-se abrir e fechar janelas programaticamente usando open() e close().

let novaJanela;

document.getElementById('abrir').addEventListener('click', () => {
  novaJanela = open('https://www.google.com', '_blank', 'width=600,height=400');
});

document.getElementById('fechar').addEventListener('click', () => {
  if (novaJanela && !novaJanela.closed) {
    novaJanela.close();
  }
});

Temporizadores

Dois métodos permitem execução diferida ou repetida de código:

• setTimeout(): Executa uma função após um intervalo.
• setInterval(): Executa repetidamente em intervalos fixos.

const timerId = setTimeout(() => {
  console.log("Executado após 2 segundos");
}, 2000);

// Cancelar se necessário
clearTimeout(timerId);

const intervalId = setInterval(() => {
  console.log("Executando a cada segundo");
}, 1000);

// Parar depois de 5 segundos
setTimeout(() => clearInterval(intervalId), 5000);

Caso Prático: Carrossel de Imagens

Um carrossel automático pode ser implementado com setInterval().

let indiceImagem = 1;
const totalImagens = 3;
const imagemElemento = document.getElementById('carrossel');

function trocarImagem() {
  indiceImagem = (indiceImagem % totalImagens) + 1;
  imagemElemento.src = `img/banner_${indiceImagem}.jpg`;
}

setInterval(trocarImagem, 3000);

Objeto Location

Permite leitura e modificação da URL atual.

Métodos e Propriedades

• location.href: Obtém ou define a URL completa.
• location.reload(): Recarrega a página atual.

// Redirecionar para outra página
document.getElementById('irPara').addEventListener('click', () => {
  location.href = 'https://www.example.com';
});

// Recarregar a página
document.getElementById('atualizar').addEventListener('click', () => {
  location.reload();
});

Caso Prático: Redirecionamento Automático

Redireciona o usuário após contagme regressiva.

let tempoRestante = 5;
const contador = document.getElementById('contador');

const temporizador = setInterval(() => {
  tempoRestante--;
  contador.textContent = tempoRestante;

  if (tempoRestante <= 0) {
    clearInterval(temporizador);
    location.href = 'https://www.baidu.com';
  }
}, 1000);

Objeto History

Fornece acesso ao histórico de navegação do usuário dentro da janela atual.

Métodos Navegacionais

• back(): Volta à página anterior.
• forward(): Avança para a próxima página.
• go(n): Navega n posições no histórico (positivo = avançar, negativo = voltar).

document.getElementById('voltar').addEventListener('click', () => {
  history.back(); // ou history.go(-1)
});

document.getElementById('avançar').addEventListener('click', () => {
  history.forward(); // ou history.go(1);
});

Propriedade length

Retorna o número de itens no histórico da sessão.

console.log(`Você visitou ${history.length} páginas nesta sessão.`);

Uso em Aplicações Dinâmicas

O history é útil em SPAs (Single Page Applications) para menipular o estado sem recarregar a página completamente.