🚀 Capítulo 13: Dataset

🎯 Objetivo da Aula

Ao final desta aula, você saberá como guardar informações secretas (dados) direto nas tags HTML usando os atributos data-* e como lê-los no JavaScript usando o objeto dataset.

---

🏢 O Cenário Prático (Seu Desafio)

Cada nave no radar tem um nível de perigo secreto! Seu desafio é guardar esse nível no HTML usando data-perigo e, quando o usuário clicar na nave, o JavaScript lê esse valor e diz se é perigoso ou não!

---

🧠 Fundamentos: A Teoria Traduzida

O HTML nos permite criar atributos personalizados. Eles PRECISAM começar com data-.

• Exemplo no HTML: <div data-id="123" data-tipo="caca"></div>

Para ler esses dados no JavaScript, usamos a propriedade dataset. O hífen some e vira CamelCase!

• elemento.dataset.id (lê o data-id)
• elemento.dataset.tipo (lê o data-tipo)

---

📖 Exemplo Guiado: Lendo o Perigo

<div class="nave" data-perigo="alto">X-Wing</div>
<div class="nave" data-perigo="baixo">TIE Fighter</div>

const naves = document.querySelectorAll('.nave');
 
naves.forEach(nave => {
  nave.addEventListener('click', (e) => {
    const nivel = e.target.dataset.perigo;
    alert('O nível de perigo é: ' + nivel);
  });
});

---

🛠️ Prática Obrigatória 1

Crie um elemento com o atributo data-planeta="Tatooine". Use o JavaScript para ler esse valor e mostrar em um alerta.

---

🛠️ Prática Obrigatória 2

Mude o valor do dataset pelo JavaScript: elemento.dataset.planeta = 'Hoth'.

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

alert(elemento.dataset.planeta);

---

← Capitulo Anterior | Proximo Capitulo →