JavaScript — história,
DOM, eventos e funções

<!-- 1. Inline — evitar -->
<button onclick="alert('clicou!')">Clique</button>

<!-- 2. Internal — dentro do HTML -->
<script>
  console.log('olá do script interno');
</script>

<!-- 3. External — arquivo separado (melhor prática) -->
<script src="script.js"></script>

<!-- ⚠️ Sempre coloque o script antes do </body>
     para garantir que o HTML já foi carregado -->

// const — valor não muda (use sempre que possível)
const nome = 'Lucilia';
const idade = 30;
const ativo = true;

// let — valor pode mudar
let pontos = 0;
pontos = 10;   // reatribuição ok
pontos += 5;   // pontos agora é 15

// Tipos de dados
const texto   = 'string — texto entre aspas';
const numero  = 42;           // number — inteiro ou decimal
const decimal = 3.14;
const ligado  = true;         // boolean
const vazio   = null;         // null — sem valor intencional
let   naodef;                 // undefined — não inicializada

// Template literal — string com variável dentro
console.log(`Olá, ${nome}! Você tem ${idade} anos.`);
// → Olá, Lucilia! Você tem 30 anos.

// 1. Function declaration — içamento (hoisting) automático
function somar(a, b) {
  return a + b;
}

// 2. Function expression — guardada em variável
const multiplicar = function(a, b) {
  return a * b;
};

// 3. Arrow function (ES6) — forma moderna e curta
const dividir = (a, b) => a / b;

// Chamando as funções
console.log(somar(3, 4));         // → 7
console.log(multiplicar(3, 4));  // → 12
console.log(dividir(10, 2));     // → 5

// Parâmetro com valor padrão
function saudacao(nome = 'visitante') {
  return `Olá, ${nome}!`;
}

console.log(saudacao('Lucilia'));  // → Olá, Lucilia!
console.log(saudacao());           // → Olá, visitante!

// Função sem retorno — só executa uma ação
function mostrarMensagem(msg) {
  console.log('📢 ' + msg);
}

mostrarMensagem('Bem-vinda ao JavaScript!');

// Selecionando um elemento pelo ID
const titulo = document.getElementById('meu-titulo');

// Selecionando pelo seletor CSS (mais moderno e flexível)
const botao  = document.querySelector('#btn-salvar');
const card   = document.querySelector('.card');       // primeiro .card
const todos  = document.querySelectorAll('.card');   // todos os .card

// Formas antigas (ainda funcionam)
document.getElementsByClassName('card');
document.getElementsByTagName('p');

const titulo = document.querySelector('#titulo');

// Mudar o texto
titulo.textContent = 'Novo título!';

// Mudar o HTML interno (aceita tags)
titulo.innerHTML = 'Título com <em>itálico</em>';

// Mudar estilos CSS
titulo.style.color = '#c84b31';
titulo.style.fontSize = '24px';

// Adicionar e remover classes CSS
titulo.classList.add('destaque');
titulo.classList.remove('oculto');
titulo.classList.toggle('ativo');     // adiciona ou remove

// Ler e mudar atributos
titulo.getAttribute('id');
titulo.setAttribute('data-valor', '42');

const btn = document.querySelector('#meu-botao');

// addEventListener(evento, função)
btn.addEventListener('click', function() {
  console.log('Botão clicado!');
});

// Com arrow function (mais moderno)
btn.addEventListener('click', () => {
  alert('Olá!');
});

// Usando o objeto de evento (e) para mais informações
document.addEventListener('keydown', (e) => {
  console.log('Tecla pressionada:', e.key);
});

// Evento de scroll
window.addEventListener('scroll', () => {
  const btn = document.getElementById('back-to-top');
  btn.classList.toggle('visible', window.scrollY > 400);
});

<!-- HTML -->
<button id="btn-tema">Ativar modo escuro</button>
<div id="caixa">Conteúdo da página</div>

// JavaScript
const btn  = document.getElementById('btn-tema');
const box  = document.getElementById('caixa');
let   dark = false;

btn.addEventListener('click', () => {
  dark = !dark;  // inverte o valor

  box.style.background = dark ? '#1c1917' : '#fff';
  box.style.color      = dark ? '#faf7f2' : '#1c1917';
  btn.textContent      = dark ? 'Desativar modo escuro' : 'Ativar modo escuro';
});

// Exibir valores — o mais usado
console.log('mensagem normal');
console.log(variavel, outra);      // pode passar vários valores

// Tipos de mensagem
console.warn('atenção — amarelo');
console.error('erro — vermelho');
console.info('informação — azul');

// Mostrar objeto formatado como tabela
const usuarios = [
  { nome: 'Lucilia', idade: 30 },
  { nome: 'Vinicius', idade: 32 }
];
console.table(usuarios);

// Medir tempo de execução
console.time('minhaOperacao');
// ... código ...
console.timeEnd('minhaOperacao');  // ex: minhaOperacao: 3.2ms