Aprende JavaScript
do zero ao avançado

JavaScript tem 7 tipos primitivos. Os mais usados são string, number e boolean.

const nome = "João";        // string
const idade = 28;           // number
const ativo = true;         // boolean
const preco = 9.99;         // number (decimais também)
const vazio = null;         // null
let indefinido;              // undefined

// Verificar tipo:
typeof nome;    // "string"
typeof idade;   // "number"
typeof ativo;   // "boolean"

Strings têm dezenas de métodos úteis. Aqui estão os que vais usar mais frequentemente.

const frase = "Olá, Mundo!";

frase.length;               // 11
frase.toUpperCase();         // "OLÁ, MUNDO!"
frase.toLowerCase();         // "olá, mundo!"
frase.includes("Mundo");    // true
frase.startsWith("Olá");   // true
frase.replace("Mundo", "JS"); // "Olá, JS!"
frase.split(", ");          // ["Olá", "Mundo!"]
frase.trim();                // remove espaços no início/fim
frase.slice(4, 9);          // "Mundo"

// Template literals (backticks)
const msg = `Olá, ${frase}! Tens ${28} anos.`;

JavaScript tem apenas um tipo numérico: number. Inclui inteiros e decimais (vírgula flutuante).

// Operadores básicos
10 + 3;   // 13
10 - 3;   // 7
10 * 3;   // 30
10 / 3;   // 3.333...
10 % 3;   // 1 (resto da divisão)
2 ** 8;   // 256 (potência)

// Math — objeto com funções matemáticas
Math.round(4.6);    // 5
Math.floor(4.9);    // 4
Math.ceil(4.1);     // 5
Math.abs(-7);       // 7
Math.max(3, 7, 2);  // 7
Math.random();      // 0.0 a 0.999...

// Cuidado com decimais!
(0.1 + 0.2).toFixed(1); // "0.3" (string!)

Condicionais permitem que o código tome decisões com base em valores.

const nota = 14;

// if / else if / else
if (nota >= 18) {
  console.log("Muito Bom");
} else if (nota >= 14) {
  console.log("Bom");
} else if (nota >= 10) {
  console.log("Suficiente");
} else {
  console.log("Negativo");
}

// Operador ternário — condição ? seVerdade : seFalso
const resultado = nota >= 10 ? "Passou" : "Reprovou";

// Operadores de comparação
5 === 5;   // true (igualdade estrita — sempre usar!)
5 !== 3;   // true
5 == "5";  // true (evitar — faz coerção de tipos)

Loops permitem repetir blocos de código. Cada tipo tem o seu caso de uso ideal.

// for clássico — quando sabes quantas iterações
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

// while — enquanto condição for verdade
let x = 10;
while (x > 0) {
  console.log(x);
  x -= 2;
}

// for...of — percorrer arrays (mais limpo)
const frutas = ["maçã", "banana", "laranja"];
for (const fruta of frutas) {
  console.log(fruta);
}

// for...in — percorrer propriedades de objetos
const pessoa = { nome: "Ana", idade: 30 };
for (const chave in pessoa) {
  console.log(chave, pessoa[chave]);
}

Funções podem ter valores por defeito para os parâmetros — muito útil para tornar argumentos opcionais.

// Sem valor por defeito — undefined se não for passado
function saudar(nome) {
  console.log(`Olá, ${nome}!`);
}
saudar(); // "Olá, undefined!"

// Com valor por defeito (ES6+)
function saudar(nome = "visitante") {
  console.log(`Olá, ${nome}!`);
}
saudar();          // "Olá, visitante!"
saudar("Ana");   // "Olá, Ana!"

// Rest params — número variável de argumentos
const somarTodos = (...nums) => nums.reduce((acc, n) => acc + n, 0);
somarTodos(1, 2, 3, 4); // 10

Em JavaScript, funções são cidadãs de primeira classe — podem ser guardadas em variáveis, passadas como argumento e retornadas de outras funções.

// Função como argumento (callback)
function executar(fn, valor) {
  return fn(valor);
}

const dobro = n => n * 2;
executar(dobro, 5); // 10

// setTimeout usa callback
setTimeout(() => {
  console.log("Passou 2 segundos!");
}, 2000);

// Função que retorna função (higher-order function)
function multiplicadorDe(n) {
  return x => x * n;
}
const triplicar = multiplicadorDe(3);
triplicar(7); // 21

O escopo define onde uma variável é acessível. Um closure ocorre quando uma função interna lembra o escopo da função externa, mesmo após esta ter terminado.

// Escopo de bloco com let/const
{
  let x = 10;
  console.log(x); // 10
}
// console.log(x); → ReferenceError!

// Closure — a função "lembra" variáveis do contexto pai
function criarContador() {
  let count = 0;
  return () => {
    count++;
    return count;
  };
}

const contador = criarContador();
contador(); // 1
contador(); // 2
contador(); // 3

Os três métodos funcionais mais importantes. Nunca mutam o array original — retornam sempre um novo valor.

const nums = [1, 2, 3, 4, 5];

// map — transforma cada elemento
const dobros = nums.map(n => n * 2);
// [2, 4, 6, 8, 10]

// filter — seleciona elementos
const pares = nums.filter(n => n % 2 === 0);
// [2, 4]

// reduce — acumula num único valor
const soma = nums.reduce((acc, n) => acc + n, 0);
// 15

// Encadear (chaining)
const resultado = nums
  .filter(n => n % 2 !== 0)  // [1,3,5]
  .map(n => n * n)              // [1,9,25]
  .reduce((acc, n) => acc + n, 0); // 35

Objetos são coleções de pares chave-valor. São a estrutura de dados mais comum em JavaScript.

const pessoa = {
  nome: "Ana",
  idade: 28,
  cidade: "Lisboa",
  ativo: true
};

// Acesso — dot notation ou bracket notation
pessoa.nome;          // "Ana"
pessoa["idade"];      // 28

// Adicionar / modificar / apagar
pessoa.email = "ana@mail.pt";
pessoa.idade = 29;
delete pessoa.ativo;

// Verificar se propriedade existe
"nome" in pessoa; // true

// Listar chaves / valores
Object.keys(pessoa);    // ["nome", "idade", ...]
Object.values(pessoa);  // ["Ana", 29, ...]
Object.entries(pessoa); // [["nome","Ana"], ...]

A desestruturação extrai valores de arrays e objetos de forma concisa. O spread (...) copia ou expande elementos.

// Desestruturação de objetos
const { nome, idade } = pessoa;
// Renomear
const { nome: nomeCompleto } = pessoa;
// Valor por defeito
const { pais = "Portugal" } = pessoa;

// Desestruturação de arrays
const [primeiro, segundo, ...resto] = [1, 2, 3, 4];
// primeiro=1, segundo=2, resto=[3,4]

// Spread — copiar objetos
const pessoaAtualizada = { ...pessoa, idade: 30 };

// Spread — juntar arrays
const todos = [...[1,2], ...[3,4]]; // [1,2,3,4]

// Desestruturação em parâmetros
function mostrar({ nome, idade }) {
  console.log(`${nome} tem ${idade} anos`);
}

Uma Promise representa um valor que ainda não está disponível, mas estará no futuro. Tem três estados: pending, fulfilled ou rejected.

// Criar uma Promise
const promessa = new Promise((resolve, reject) => {
  const sucesso = true;
  if (sucesso) {
    resolve("Deu certo!");
  } else {
    reject(new Error("Algo correu mal"));
  }
});

// Consumir com .then() / .catch() / .finally()
promessa
  .then(resultado => console.log(resultado))
  .catch(erro => console.error(erro.message))
  .finally(() => console.log("Terminado"));

// Promise.all — esperar por várias promises
const resultados = await Promise.all([promessa1, promessa2]);

async/await é açúcar sintático sobre Promises. Torna o código assíncrono mais legível — parece código síncrono.

// Função assíncrona
async function buscarUtilizador(id) {
  try {
    const resposta = await fetch(
      `https://jsonplaceholder.typicode.com/users/${id}`
    );

    if (!resposta.ok) {
      throw new Error(`Erro HTTP: ${resposta.status}`);
    }

    const utilizador = await resposta.json();
    return utilizador;

  } catch (erro) {
    console.error("Falhou:", erro.message);
    return null;
  }
}

// Usar
const user = await buscarUtilizador(1);
console.log(user.name);

Depois de selecionar um elemento, podes alterar o seu conteúdo, atributos e estilos.

const el = document.querySelector("#titulo");

// Conteúdo
el.textContent = "Novo título";     // só texto
el.innerHTML = "<em>Itálico</em>"; // com HTML

// Atributos
el.setAttribute("data-id", "42");
el.getAttribute("data-id"); // "42"
el.href = "https://exemplo.pt";

// Classes CSS
el.classList.add("ativo");
el.classList.remove("ativo");
el.classList.toggle("ativo");
el.classList.contains("ativo"); // true/false

// Estilos inline
el.style.color = "red";
el.style.display = "none";

Eventos permitem que o JavaScript reaja a interações do utilizador como cliques, teclas e movimentos do rato.

const btn = document.querySelector("#btn");

// Adicionar listener
btn.addEventListener("click", (evento) => {
  console.log("Clicado!", evento.target);
});

// Eventos comuns
// "click", "dblclick", "mouseover", "mouseout"
// "keydown", "keyup", "input", "change"
// "submit", "focus", "blur", "scroll"

// Prevenir comportamento padrão
form.addEventListener("submit", (e) => {
  e.preventDefault(); // evita reload da página
  // processar formulário
});

// Remover listener
const handler = () => console.log("clique");
btn.addEventListener("click", handler);
btn.removeEventListener("click", handler);

Podes criar novos elementos HTML com JavaScript e adicioná-los ao DOM em qualquer momento.

// Criar elemento
const li = document.createElement("li");
li.textContent = "Novo item";
li.classList.add("item");

// Adicionar ao DOM
const lista = document.querySelector("ul");
lista.appendChild(li);     // no fim
lista.prepend(li);         // no início

// innerHTML — criar múltiplos elementos
lista.innerHTML = `
  <li>Primeiro</li>
  <li>Segundo</li>
`;

// Remover elemento
li.remove();

// Exemplo prático — lista de tarefas
function adicionarTarefa(texto) {
  const li = document.createElement("li");
  li.textContent = texto;
  li.addEventListener("click", () => li.remove());
  lista.appendChild(li);
}

Classes são açúcar sintático sobre o sistema de protótipos do JavaScript. Tornam o código orientado a objetos mais legível.

class Animal {
  constructor(nome, especie) {
    this.nome = nome;
    this.especie = especie;
  }

  apresentar() {
    return `Sou ${this.nome}, um ${this.especie}`;
  }

  static criar(nome, especie) {
    return new Animal(nome, especie);
  }
}

// Herança
class Cao extends Animal {
  constructor(nome) {
    super(nome, "cão"); // chama o construtor pai
  }

  ladrar() {
    return "Au au!";
  }
}

const rex = new Cao("Rex");
rex.apresentar(); // "Sou Rex, um cão"
rex.ladrar();     // "Au au!"

Módulos ES6 permitem dividir o código em ficheiros reutilizáveis com export e import.

// utils.js — exportar
export const PI = 3.14159;

export function somar(a, b) {
  return a + b;
}

export default function principal() {
  return "função principal";
}

// main.js — importar
import principal from "./utils.js";         // default
import { PI, somar } from "./utils.js";      // named
import * as utils from "./utils.js";        // tudo
import { somar as add } from "./utils.js"; // renomear

Duas funcionalidades modernas que tornam o acesso a dados aninhados muito mais seguro e conciso.

const user = {
  nome: "Ana",
  endereco: {
    cidade: "Lisboa"
  }
};

// Optional Chaining (?.) — não lança erro se undefined
user?.nome;                    // "Ana"
user?.endereco?.rua;           // undefined (sem erro!)
user?.telefone?.numero;        // undefined
user?.metodo?.();              // chama se existir

// Nullish Coalescing (??) — valor por defeito
// Só substitui null e undefined (não 0 ou "")
user?.pais ?? "Portugal";     // "Portugal"
0 ?? "padrão";                 // 0 (diferente de ||)
0 || "padrão";                 // "padrão" (0 é falsy)

// Combinado — muito comum em React
const cidade = user?.endereco?.cidade ?? "Desconhecida";