Módulo 15: Integração Total (HTML, CSS e JS)

2. Resumo da Aula Anterior

Depois de aprenderes a tornar o teu site instalável com PWA, agora vamos focar na harmonia entre as três linguagens fundamentais da web: HTML para estruturar, CSS para decorar e JS para dar vida.

3. O Que Vais Aprender Hoje

✅ Como separar as responsabilidades de forma profissional.
✅ Usar Data Attributes para passar dados do HTML para o JS.
✅ Manipular o DOM (HTML) através de eventos de clique.
✅ Mudar estilos CSS dinamicamente com JavaScript.

4. Teoria: A Santíssima Trindade da Web

Conceito: Um site moderno não é apenas um ficheiro. É um sistema onde o HTML fornece o conteúdo, o CSS as regras visuais e o JS a lógica de negócio e interação.

👤 Analogia: O Corpo Humano

Pensa no desenvolvimento web como criar um ser humano:

HTML (Esqueleto): São os ossos. Dizem onde fica a cabeça, os braços e as pernas. Sem eles, o corpo não tem forma.
CSS (Pele e Roupa): É a cor dos olhos, o estilo do cabelo e a roupa que vestes. É o que te torna bonito e único.
JavaScript (Cérebro e Músculos): É o que te permite andar, falar e reagir quando alguém te toca. É a inteligência e o movimento.

5. Exemplos Práticos

Exemplo 1: Data Attributes (O Mensageiro)

Guardar informação no HTML para que o JS a encontre.

<button id="comprar" data-preco="100" data-nome="Curso Web">
  Comprar Agora
</button>

No JS, podes aceder a isto com botao.dataset.preco. É muito mais limpo do que inventar IDs para tudo.

Exemplo 2: Manipular Classes (A Transformação)

Mudar o visual reagindo a um clique.

const btn = document.querySelector('#tema');

btn.addEventListener('click', () => {
  document.body.classList.toggle('modo-escuro');
});

Em vez de mudar cada cor manualmente no JS, apenas mudamos uma "classe" e deixamos o CSS fazer o resto.

Exemplo 3: Injetar Conteúdo Dinâmico

Criar HTML "on the fly".

const lista = document.querySelector('#lista');
const novoItem = "✅ Tarefa Concluída!";

lista.insertAdjacentHTML('beforeend', novoItem);

Isto permite que o teu site se atualize sem precisar de recarregar a página (refresh).

6. Agora é a Tua Vez!

Vamos criar um contador simples:

Cria um <h1> com o número 0.
Cria um botão chamado "Incrementar".
No teu JavaScript, usa addEventListener para detetar o clique.
Sempre que clicares, soma 1 ao número e atualiza o texto do <h1>.

7. Verificação de Conhecimento

Carregando quiz...

8. Resumo do Que Aprendemos

📌 O segredo de um bom site é a separação de responsabilidades.
📌 Data Attributes são a ponte perfeita entre conteúdo e lógica.
📌 O JavaScript deve focar-se em mudar estados (ex: adicionar/remover classes).
📌 O DOM é a árvore que representa o teu HTML e que o JS pode "podar" ou "cultivar".

9. Desafios Práticos

Desafio 1: Onde colocar o Script?

Porque é que habitualmente colocamos a tag <script> antes do fecho do </body>?

Desafio 2: camelCase vs Kebab-case

Se no HTML definires data-user-id="5", como é que o encontras no JavaScript usando o dataset?

Desafio 3: CSS no JS?

É uma boa prática escrever el.style.backgroundColor = 'red' diretamente no JavaScript?