1. BOM (Browser Object Model)

---

O BOM permite que o JavaScript interaja com o navegador. É um conjunto de APIs focadas em tarefas do ambiente do navegador, como gerenciamento de janelas, navegação, cookies e localização.

1.1 Objeto window

O objeto window representa a janela do navegador.

window.open(url, nome, características)

O parâmetro nome (opcional) identifica a janela. Valores especiais incluem:

• _blank: Abre em uma nova aba/janela (padrão).
• _self: Abre na janela/aba atual.
• _parent: Abre no frame pai.
• _top: Abre na janela mais externa.

window.open("https://example.com", "minhaJanela", "width=600,height=400");
window.open("https://example.com", "_blank", "width=600,height=400");

window.close(): Fecha a janela atual.

Temporizadores

setTimeout(funcaoAtraso, milissegundos): Executa uma função após um atraso.

const temporizadorAtraso = setTimeout(() => {
    console.log("Executado após 5 segundos");
}, 5000);

setInterval(funcaoIntervalo, milissegundos): Executa uma função repetidamente em intervalos definidos.

const temporizadorIntervalo = setInterval(() => {
    console.log("Executado a cada 2 segundos");
}, 2000);

Cancelar temporizadores: clearTimeout(identificador) e clearInterval(identificador).

let contadorExecucoes = 0;
const intervalo = setInterval(() => {
    contadorExecucoes++;
    if (contadorExecucoes >= 5) {
        clearInterval(intervalo);
        console.log("Intervalo interrompido após 5 execuções");
    }
}, 1000);

Caixas de Diálogo

• window.alert(mensagem): Exibe uma caixa de alerta.
• window.confirm(mensagem): Exibe uma caixa de confirmação, retorna true ou false.
• window.prompt(mensagem, valorPadrao): Exibe uma caixa para entrada de dados.

Dimensões da Janela

• window.innerHeight: Altura da área de visualização em pixels.
• window.innerWidth: Largura da área de visualização em pixels.

1.2 Sub-objetos do window

A referência window pode ser omitida no código.

window.location: Fornece informações e métodos sobre a URL atual.

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

window.history: Manipula o histórico de navegação.

• window.history.back(): Navega para a página anterior.
• window.history.forward(): Navega para a próxima página.

window.navigator: Contém informações sobre o navegador e o dispositivo.

2. DOM (Document Object Model)

---

O DOM é uma interface de programação que representa documentos HTML/XML como uma árvore de objetos. Permite criar, acessar, modificar e deletar elementos da página.

Cada componente HTML é um nó: documento, elemanto, texto, atributo ou comentário.

2.1 Seleção de Elementos

Seleção Direta

• document.getElementById('id'): Seleciona um elemento pelo seu atributo id.
• document.getElementsByClassName('classe'): Seleciona uma coleção (HTMLCollection) de elementos pela classe.
• document.getElementsByTagName('tag'): Seleciona uma coleção (HTMLCollection) de elementos pela tag.

Observação: O script deve ser executado após o carregamento dos elementos DOM. Uma solução é posicionar o script no final do corpo do documento.

Seleção Indireta (Navegação na Árvore)

Dado um elemento el:

• el.parentElement: Elemento pai.
• el.children: Coleção de filhos imediatos.
• el.firstElementChild: Primeiro filho elemento.
• el.lastElementChild: Último filho elemento.
• el.nextElementSibling: Próximo irmão elemento.
• el.previousElementSibling: Irmão elemento anterior.

2.2 Manipulação de Nós e Propriedades

Criação e Inserção

const novoParagrafo = document.createElement('p');
novoParagrafo.textContent = 'Conteúdo dinâmico.';
document.body.appendChild(novoParagrafo);

Propriedades de Texto e Conteúdo

• elemento.textContent: Define ou obtém apenas o texto puro.
• elemento.innerHTML: Define ou obtém o conteúdo HTML (pode incluir tags). Usar com cautela devido a riscos de injeção de código.

Manipulação de Atributos

const imagem = document.getElementById('foto');
imagem.setAttribute('src', 'nova-imagem.jpg');
imagem.getAttribute('src'); // 'nova-imagem.jpg'
imagem.removeAttribute('alt');

Atributos padrão (como id, class, value) também podem ser acesados/modificados diretamente via propriedades do elemento (ex.: elemento.id, elemento.value).

Manipulação de Classes (classList)

const caixa = document.querySelector('.caixa');
caixa.classList.add('ativo');
caixa.classList.remove('oculto');
caixa.classList.toggle('destaque');
const temClasse = caixa.classList.contains('ativo'); // true

Estilo Inline

const titulo = document.getElementById('titulo');
titulo.style.color = 'blue';
titulo.style.fontSize = '24px';

2.3 Obtenção de Valores (Formulários)

Para elementos de formulário (input, select, textarea), use a propriedade value.

Para input[type="file"], use a propriedade files para acessar a lista de arquivos selecionados.

const seletorArquivo = document.getElementById('upload');
seletorArquivo.addEventListener('change', function() {
    const listaArquivos = this.files;
    for (const arquivo of listaArquivos) {
        console.log(arquivo.name, arquivo.type, arquivo.size);
    }
});

2.4 Eventos

Eventos são ações que ocorrem no navegador (cliques, digitação, carregamento) e que podem disparar funções (handlers).

Categorias Comuns de Eventos

• Mouse: click, dblclick, mouseover, mouseout
• Teclado: keydown, keyup
• Formulário: submit, change, focus, blur, input
• Documento: load, DOMContentLoaded

Vinculação de Eventos

1. Atributo HTML: <button onclick="executar()">Clique</button>

2. Propriedade do Elemento: ``` const botao = document.getElementById('btn'); botao.onclick = function() { alert('Clicado!'); };

Exemplos Práticos

Validação de Formulário:

const campoUsuario = document.getElementById('usuario');
const mensagemErro = document.getElementById('erro');

campoUsuario.addEventListener('input', function() {
    if (this.value.length < 3) {
        mensagemErro.textContent = 'O usuário deve ter pelo menos 3 caracteres.';
    } else {
        mensagemErro.textContent = '';
    }
});

Campo de Busca com Placeholder Dinâmico:

const campoBusca = document.getElementById('pesquisa');
const textoPadrao = 'Pesquisar...';
campoBusca.value = textoPadrao;

campoBusca.addEventListener('focus', function() {
    if (this.value === textoPadrao) {
        this.value = '';
    }
});

campoBusca.addEventListener('blur', function() {
    if (this.value === '') {
        this.value = textoPadrao;
    }
});

Seletores Dependentes (País/Cidade):

const selectPais = document.getElementById('pais');
const selectCidade = document.getElementById('cidade');
const dados = {
    'Brasil': ['São Paulo', 'Rio de Janeiro'],
    'Argentina': ['Buenos Aires', 'Córdoba']
};

// Preencher o select de países
for (const pais in dados) {
    const opcao = document.createElement('option');
    opcao.value = pais;
    opcao.textContent = pais;
    selectPais.appendChild(opcao);
}

selectPais.addEventListener('change', function() {
    const cidadeAtual = this.value;
    const cidades = dados[cidadeAtual] || [];
    
    selectCidade.innerHTML = '<option value="">-- Selecione uma cidade --</option>';
    
    cidades.forEach(cidade => {
        const opcaoCidade = document.createElement('option');
        opcaoCidade.value = cidade;
        opcaoCidade.textContent = cidade;
        selectCidade.appendChild(opcaoCidade);
    });
});

2.5 Exercício de Consolidação: Cronômetro na Página

Implementar um cronômetro com botões "Iniciar" e "Parar", exibindo a hora atual em um campo de texto.

Versão Simplificada (com falha no reinício):

const display = document.getElementById('exibir-hora');
const botaoIniciar = document.getElementById('iniciar');
const botaoParar = document.getElementById('parar');
let timerID = null;

function atualizarDisplay() {
    display.value = new Date().toLocaleTimeString();
}

botaoIniciar.addEventListener('click', () => {
    // Inicia um novo intervalo a cada clique, criando múltiplos timers
    timerID = setInterval(atualizarDisplay, 1000);
});

botaoParar.addEventListener('click', () => {
    clearInterval(timerID);
});

Versão Corrigida (gestão adequada do timer):

const exibicao = document.getElementById('exibir-tempo');
const btnComecar = document.getElementById('comecar');
const btnParar = document.getElementById('parar');
let cronometro = null;

function exibirTempoAtual() {
    exibicao.value = new Date().toLocaleTimeString();
}

btnComecar.addEventListener('click', function() {
    // Evita criar múltiplos timers
    if (!cronometro) {
        cronometro = setInterval(exibirTempoAtual, 1000);
        exibirTempoAtual(); // Exibe imediatamente
    }
});

btnParar.addEventListener('click', function() {
    clearInterval(cronometro);
    cronometro = null; // Limpa a referência para permitir novo início
});

A solução final garante que: 1) Apenas um timer está ativo por vez; 2) O timer pode ser reiniciado corretamente após ser parado.