JavaScript é a linguagem que dá comportamento às páginas da web. Quando um menu abre, um formulário avisa que o e-mail está errado ou uma lista se atualiza sem recarregar a página, quase sempre há JavaScript por trás. Com o tempo, ela saiu do navegador e passou a rodar também em servidores, aplicativos e ferramentas de linha de comando.
Este guia funciona como um roteiro de curso: o que estudar, em que ordem e como praticar.
Onde o JavaScript roda
No navegador. Todo navegador moderno tem um motor que executa JavaScript. Ali, o código interage com a página por meio do DOM, que é a representação dos elementos HTML como objetos.
No servidor, com Node.js. O Node.js permite executar JavaScript fora do navegador. Com ele é possível criar APIs, ler arquivos, acessar bancos de dados e automatizar tarefas. Existem outros ambientes semelhantes, mas o Node.js é o mais difundido.
A linguagem é a mesma nos dois lugares. O que muda são os recursos disponíveis: no navegador há document e window; no Node.js há acesso ao sistema de arquivos e à rede.
Etapa 1: fundamentos
Comece por variáveis, tipos, operadores, condicionais, laços, funções, arrays e objetos. Use const por padrão e let quando o valor precisar mudar. Evite var, que tem regras de escopo confusas.
const produtos = [
{ nome: "Café", preco: 12.5 },
{ nome: "Pão", preco: 8 },
];
const total = produtos.reduce((soma, p) => soma + p.preco, 0);
console.log(`Total: R$ ${total.toFixed(2)}`);Aprenda bem os métodos de array (map, filter, find, reduce). Eles aparecem em praticamente todo projeto.
Etapa 2: manipulação do DOM
Com os fundamentos firmes, passe para o navegador. Selecione elementos, altere textos e classes, reaja a cliques e envios de formulário.
const botao = document.querySelector("#contador");
let cliques = 0;
botao.addEventListener("click", () => {
cliques += 1;
botao.textContent = `Cliques: ${cliques}`;
});Nessa fase, construa pequenas páginas: uma lista de tarefas, uma calculadora, um validador de formulário.
Etapa 3: código assíncrono e fetch
Muitas operações demoram: buscar dados de uma API, ler um arquivo, esperar um temporizador. O JavaScript lida com isso por meio de Promises e da sintaxe async/await.
async function carregarUsuarios() {
try {
const resposta = await fetch("https://exemplo.com/api/usuarios");
if (!resposta.ok) throw new Error(`Erro ${resposta.status}`);
const usuarios = await resposta.json();
console.log(usuarios);
} catch (erro) {
console.error("Não foi possível carregar:", erro.message);
}
}Entender quando o código espera e quando segue em frente é uma das partes mais importantes do aprendizado.
Etapa 4: módulos e ferramentas
Projetos reais são divididos em arquivos. Os módulos ES usam export e import para compartilhar funções entre eles.
// util.js
export function formatarPreco(valor) {
return valor.toLocaleString("pt-BR", { style: "currency", currency: "BRL" });
}
// app.js
import { formatarPreco } from "./util.js";
console.log(formatarPreco(19.9));Aqui também entram o gerenciador de pacotes (npm ou pnpm), o arquivo package.json e um empacotador como o Vite.
Etapa 5: TypeScript e frameworks
O TypeScript adiciona tipos ao JavaScript e aponta muitos erros antes de o código rodar. Vale aprender depois de dominar a linguagem base.
Em seguida, escolha um framework de interface, como React, Vue, Angular ou Svelte. Todos resolvem problemas parecidos: organizar a tela em componentes e manter a interface sincronizada com os dados. Escolha um e aprofunde-se nele antes de experimentar outros.
Erros comuns de quem está começando
- Pular os fundamentos e ir direto para um framework. Os erros do framework ficam incompreensíveis.
- Confundir
==com===. Prefira sempre===, que compara valor e tipo. - Esquecer o
awaite receber uma Promise no lugar do dado esperado. - Alterar objetos e arrays sem perceber, já que eles são passados por referência.
- Copiar código sem entender, o que dificulta corrigir problemas depois.
Como praticar
Estude com um editor de código e o console do navegador aberto. Escreva pequenos projetos completos, mesmo que simples, e publique no GitHub. Leia a documentação do MDN, que é a referência mais confiável sobre a linguagem. Quando travar, tente explicar o problema por escrito: muitas vezes a solução aparece no meio da explicação.
Constância conta mais do que intensidade. Uma hora por dia durante meses rende mais do que um fim de semana inteiro de estudo seguido de semanas parado.
E na sua empresa?
JavaScript está por trás de boa parte dos sites, painéis e sistemas que usamos no trabalho. Se a sua empresa precisa de um site rápido ou de um sistema sob medida, fale com a Witcode.