O Poder do JavaScript no Navegador

O JavaScript é a linguagem fundamental para criar experiências web interativas. Ele permite desde a animação de elementos visuais, como carrosséis e menus dinâmicos, até a implementação de lógicas complexas de validação de formulários e comunicação assínccrona com servidores.

Estruturas de Dados e Funções

Arrays (Matrizes)

Arrays são estruturas utilizadas para armazenar múltiplos valores em uma única variável. A prática moderna recomenda a notação de colchetes e o uso de const ou let.

const frutas = ['Maçã', 'Banana', 'Laranja'];
const primeiraFruta = frutas[0];
console.log(primeiraFruta); // Saída: Maçã

Funções

Funções são blocos de código reutilizáveis projetados para executar uma tarefa específica. Elas não são executadas automaticamente; é necessário invocá-las. A sintaxe moderna utiliza arrow functions.

const calcularArea = (largura, altura) => {
  return largura * altura;
};

const area = calcularArea(5, 10);
console.log(`A área é: ${area}`);

Gerenciamento de Eventos

Eventos são ações detectáveis pelo navegador, como cliques, movimentos do mouse ou interações com o teclado. A abordagem recomendada hoje é utilizar addEventListener para separar a estrutura HTML da lógica JavaScript.

• click: Disparado ao clicar em um elemento.
• mouseover / mouseout: Disparados ao entrar ou sair de um elemento com o ponteiro.
• focus / blur: Disparados ao ganhar ou perder o foco do teclado.
• input / change: Disparados ao alterar o valor de um campo de formulário.
• DOMContentLoaded: Equivalente moderno ao onload, disparado quando o HTML foi completamente carregado e analisado.

const botao = document.querySelector('#meuBotao');
botao.addEventListener('click', () => {
  console.log('Botão clicado!');
});

Objetos Nativos do JavaScript

Tudo no JavaScript pode ser tratado como um objeto, possuindo propriedades e métodos. Abaixo estão os objetos nativos mais utilizados.

Objeto Date

Utilizado para manipular datas e horas. O método getDay() retorna o dia da semana (0-6), enquanto getTime() retorna o timestamp em milissegundos.

const hoje = new Date();
const diasSemana = ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'];
const diaAtual = diasSemana[hoje.getDay()];

// Adicionando 2 horas ao tempo atual
const futuro = new Date(hoje.getTime() + (2 * 60 * 60 * 1000));
console.log(`Hoje é ${diaAtual}. Daqui a 2 horas será: ${futuro}`);

Objeto String

Fornece métodos para manipulação de texto. Métodos como charAt(), indexOf(), split() e substring() são essenciais para processamento de strings.

const url = 'https://exemplo.com/artigos';
const partes = url.split('/');
const dominio = partes[2];
const indiceArtigo = url.indexOf('artigos');

console.log(dominio); // exemplo.com
console.log(url.substring(indiceArtigo)); // artigos

Objeto Math

Diferente de outros objetos, Math é estático e não precisa ser instanciado. Oferece constantes e funções matemáticas prontas para uso.

const raio = 5;
const areaCirculo = Math.PI * Math.pow(raio, 2);
const numeroAleatorio = Math.floor(Math.random() * 100) + 1; // Entre 1 e 100

console.log(`Área: ${areaCirculo.toFixed(2)}, Sorteio: ${numeroAleatorio}`);

Objeto Array (Métodos Avançados)

Além de armazenar dados, arrays possuem métodos poderosos para transformação, filtragem e ordenação.

const notas = [45, 80, 90, 30, 100];
const notasOrdenadas = [...notas].sort((a, b) => a - b);
const aprovados = notas.filter(nota => nota >= 50);
const listaFormatada = aprovados.join(' | ');

console.log(notasOrdenadas);
console.log(listaFormatada);

Objetos do Navegador (BOM)

O Browser Object Model (BOM) permite interagir com a janela do navegador e o ambiente do sistema operacional.

• window: O objeto global. Inclui temporizadores como setTimeout e setInterval.
• history: Permite navegar pelo histórico da aba (back(), forward(), go()).
• location: Manipula a URL atual (href, reload()).
• navigator: Fornece informações sobre o ambiente do usuário (userAgent, language).
• screen: Retorna dimensões da tela do usuário (width, availHeight).

// Temporizador que executa uma função após 3 segundos
const timerId = setTimeout(() => {
  console.log('Executado após 3 segundos');
}, 3000);

// Navegação programática
// window.history.back();
// window.location.href = 'https://novo-site.com';

Modelo de Objeto de Documento (DOM)

O DOM representa a página HTML como uma árvore de nós. Cada tag, atributo e texto é um nó que pode ser acessado e modificado via JavaScript.

Seleção e Manipulação de Atributos

const link = document.querySelector('a.principal');
const urlDestino = link.getAttribute('href');
link.setAttribute('target', '_blank');
link.classList.add('link-externo');

Propriedades dos Nós

• nodeName: O nome da tag (ex: 'DIV', 'A') ou '#text' para nós de texto.
• nodeType: Um número que indica o tipo (1 para elemento, 3 para texto, 8 para comentário).
• nodeValue: O conteúdo de nós de texto ou atributos.

Navegação na Árvore DOM

É possível transitar entre pais, filhos e irmãos. Para evitar problemas com nós de texto em branco gerados por quebras de linha no HTML, utilize as propriedades modernas que ignoram esses nós ou filtre por nodeType === 1.

const lista = document.querySelector('ul');
const primeiroItem = lista.firstElementChild; // Ignora nós de texto vazios
const ultimoItem = lista.lastElementChild;
const pai = lista.parentNode;
const irmaoSeguinte = lista.nextElementSibling;

Criação, Inserção e Remoção de Nós

Para modificar a estrutura da páginna dinamicamente, criamos novos nós e os injetamos na árvore.

// Criando um novo elemento e nó de texto
const novoParagrafo = document.createElement('p');
const texto = document.createTextNode('Este é um conteúdo gerado dinamicamente.');
novoParagrafo.appendChild(texto);

// Inserindo na página
const container = document.getElementById('conteudo');
container.appendChild(novoParagrafo);

// Inserindo antes de um elemento existente
const referencia = document.getElementById('alvo');
container.insertBefore(novoParagrafo, referencia);

// Removendo um nó
if (container.contains(novoParagrafo)) {
  container.removeChild(novoParagrafo);
}

// Substituindo um nó
const noAtualizado = document.createElement('span');
noAtualizado.textContent = 'Texto substituído';
container.replaceChild(noAtualizado, referencia);