📖 Manual Rápido e Documentação da Plataforma
Bem-vindo ao Centro de Documentação! Aqui podes consultar as regras de sintaxe, funções principais e guias de integração entre HTML, CSS, JSON e JavaScript.
🌐 1. Fluxo de Integração Full-Stack
Nos exercícios Full-Stack, as tecnologias trabalham em equipa:
- JSON: Armazena os dados (ex: listas de produtos, perfis).
- JavaScript: Lê o JSON usando
JSON.parse() e injeta elementos no DOM HTML.
- HTML: Serve de estrutura/esqueleto com IDs para o JS selecionar (ex:
<tbody id="corpo">).
- CSS: Dá estilo às classes adicionadas ao HTML (ex:
.card ou .destaque).
⚡ 2. Cheatsheet de JavaScript e DOM
| Comando / Método |
Descrição e Função |
document.getElementById('id') |
Seleciona um elemento HTML pelo seu ID. |
JSON.parse(stringJSON) |
Converte texto formatado em JSON num objeto ou array JavaScript. |
elemento.innerText = "texto" |
Altera o texto simples de um elemento. |
elemento.innerHTML = "<p>...</p>" |
Injeta estrutura HTML dentro de um elemento. |
elemento.classList.add('classe') |
Adiciona uma classe de estilo CSS a um elemento. |
array.filter(item => item.preco < 30) |
Filtra um array retornando apenas os elementos que cumprem a condição. |
📦 3. Exemplo Prático Integrado
Abaixo está um exemplo completo da sintaxe utilizada nos laboratórios Full-Stack:
// 1. JSON
{ "nome": "Teclado", "preco": 25 }
// 2. JavaScript
const item = JSON.parse(jsonDados);
const div = document.getElementById('resultado');
div.innerHTML = `<h2 class="card">${item.nome} - ${item.preco}€</h2>`;
/* 3. CSS */
.card { color: #38bdf8; padding: 10px; border: 1px solid #334155; }