F3 — JavaScript (a lógica)

Objectivo: dar comportamento à página — reagir a cliques, calcular, mudar conteúdo e ir buscar dados. Resultado final: uma página interactiva que gera uma lista a partir de dados e busca informação de uma API.

1. O que é JavaScript

JavaScript (JS) é a linguagem de programação do navegador. Enquanto o HTML estrutura e o CSS embeleza, o JS faz coisas acontecerem: cliques, contas, mostrar/esconder, falar com servidores.

Liga-se ao HTML assim:

<script src="app.js"></script>   <!-- antes de fechar o </body> -->

2. Variáveis (guardar valores)

const nome = "Ana";   // const = não muda
let idade = 30;       // let = pode mudar
idade = 31;

Usa const por defeito; só let quando o valor vai mesmo mudar.

3. Tipos de dados

const texto   = "Olá";        // string (texto)
const numero  = 1000;          // number
const ligado  = true;          // boolean (true/false)
const lista   = ["a", "b"];    // array (uma lista)
const pessoa  = { nome: "Ana", idade: 31 };  // object (chave: valor)

4. Operadores

1 + 2        // 3   (soma)
"Olá " + nome // "Olá Ana"  (juntar texto)
10 > 5       // true
idade === 31 // true  (=== compara igualdade)

5. Condições (decidir)

if (idade >= 18) {
  console.log("Maior de idade");
} else {
  console.log("Menor de idade");
}

console.log(...) escreve no Console (F12 no navegador) — a tua ferramenta nº1 para ver o que se passa.

6. Ciclos (repetir)

for (let i = 1; i <= 3; i++) {
  console.log("Volta " + i);   // imprime 1, 2, 3
}

7. Funções (blocos reutilizáveis)

function saudar(nome) {        // 'nome' é um parâmetro
  return "Olá, " + nome + "!";
}
saudar("Ana");                 // "Olá, Ana!"

// versão curta (arrow function)
const dobro = (n) => n * 2;
dobro(5);                      // 10

8. Arrays e objectos na prática

const precos = [1000, 2500, 500];
precos.length;                 // 3
precos.forEach(p => console.log(p + " Kz"));

const cliente = { nome: "Ana", nif: "0051..." };
console.log(cliente.nome);     // "Ana"

9. Eventos + DOM (reagir e mudar a página)

O DOM é a página vista como objectos que o JS pode mexer.

<button id="btn">Clica-me</button>
<p id="saida"></p>

const botao = document.getElementById("btn");
botao.addEventListener("click", () => {
  document.getElementById("saida").textContent = "Carregaste!";
});

10. JSON e `fetch` (falar com APIs)

JSON é o formato de texto em que os sistemas trocam dados (parece um objecto JS).

async function carregar() {
  const resposta = await fetch("https://api.exemplo.com/clientes");
  const dados = await resposta.json();   // transforma em objecto/array
  console.log(dados);
}
carregar();

async/await = “espera pela resposta antes de continuar”. Buscar dados demora, por isso é assíncrono.

11. Erros e debug

Abre o Console (F12) — os erros aparecem a vermelho com a linha.
console.log(...) em pontos-chave para ver os valores.
Lê a mensagem com calma: quase sempre diz o ficheiro e a linha.

✅ Exercícios

Botão que conta — um botão que, a cada clique, aumenta um número mostrado no ecrã.
Lista a partir de dados — tens const servicos = ["GPS", "Recargas", "Facturação"]; gera uma <ul> com um <li> por serviço usando JS.
Calculadora de IVA — função que recebe um preço e devolve o preço com 14% de IVA.
Buscar dados — usa fetch numa API pública gratuita (ex.: https://api.github.com/users/divaldo-code) e mostra um campo no ecrã.

Dica: experimenta tudo no Console (F12) primeiro — escreves uma linha e vês logo o resultado.

⚠️ Erros comuns

Usar var — usa const (ou let). var causa surpresas de alcance.
Comparar com == — usa === (compara valor e tipo).
Esquecer await num fetch — recebes uma “promessa”, não os dados.
Mexer no DOM antes de existir — põe o <script> no fim do <body>.

✅ Soluções dos exercícios

Tenta sozinho primeiro.

1 (botão que conta):

let n = 0;
botao.addEventListener("click", () => {
  n++;
  saida.textContent = n;
});

2 (lista a partir de dados):

const servicos = ["GPS", "Recargas", "Facturação"];
const ul = document.createElement("ul");
servicos.forEach((s) => {
  const li = document.createElement("li");
  li.textContent = s;
  ul.appendChild(li);
});
document.body.appendChild(ul);

3 (IVA 14%):

function comIVA(preco) {
  return preco * 1.14;
}
comIVA(1000); // 1140

4 (buscar dados):

async function carregar() {
  const r = await fetch("https://api.github.com/users/divaldo-code");
  const dados = await r.json();
  document.body.textContent = "Repositórios: " + dados.public_repos;
}
carregar();