JavaScript do Zero

JavaScript faz as páginas web responderem ao usuário. Todo navegador o executa sem instalação, e ele também roda no servidor com o Node.js. Este artigo começa com variáveis e funções, depois trabalha com arrays e mostra como alterar uma página web.

Todos os exemplos fora da parte de DOM foram executados com Node.js e a saída mostrada é real. A parte de DOM precisa ser testada no navegador.

O que você precisa

• Qualquer navegador web (pressione F12 e abra a aba Console para testar comandos)
• Ou Node.js 18 ou mais recente, para executar arquivos `.js` no seu computador

Como funciona

Variáveis

Use `const` para valores que não mudam, e `let` para valores que mudam.

const nomeEscola = "Escola Exemplo";
let total = 0;
total = total + 1;
console.log(nomeEscola, total);

Funções

function conceito(nota) {
  if (nota >= 80) return "A";
  if (nota >= 70) return "B";
  if (nota >= 50) return "C";
  return "F";
}

Uma função recebe uma entrada, faz um trabalho e devolve um valor com `return`. As instruções `if` são verificadas em ordem, e a primeira condição verdadeira é executada.

Arrays com map, reduce e forEach

const alunos = [
  { nome: "Budi", nota: 85 },
  { nome: "Siti", nota: 72 },
  { nome: "Andi", nota: 45 },
];

function conceito(nota) {
  if (nota >= 80) return "A";
  if (nota >= 70) return "B";
  if (nota >= 50) return "C";
  return "F";
}

const listaConceitos = alunos.map(a => `${a.nome}: ${conceito(a.nota)}`);
const media = alunos.reduce((soma, a) => soma + a.nota, 0) / alunos.length;

console.log("Olá, JavaScript");
listaConceitos.forEach(linha => console.log(linha));
console.log("Média:", media.toFixed(2));

Saída real:

Olá, JavaScript
Budi: A
Siti: B
Andi: F
Média: 67.33

• `map` cria um novo array transformando cada item.
• `reduce` combina todos os itens em um único valor.
• `forEach` executa uma função em cada item sem criar um novo array.
• `toFixed(2)` arredonda o número para duas casas decimais na exibição.

Trabalhando com a página (DOM)

No navegador, o JavaScript lê e altera a página pelo DOM. Este exemplo muda o texto quando o botão é clicado:

<p id="mensagem">Ainda não clicado</p>
<button id="botao">Clique em mim</button>
<script>
  const mensagem = document.getElementById("mensagem");
  document.getElementById("botao").addEventListener("click", () => {
    mensagem.textContent = "Já clicado!";
  });
</script>

Salve como arquivo `.html` e abra no navegador. Clique no botão e o texto muda.

Erros comuns

• **Usar `=` em vez de `===`:** `===` compara valor e tipo ao mesmo tempo, por isso é o preferido.
• **Esquecer que `const` não aceita novo valor:** use `let` se o valor precisar mudar.
• **Usar elementos do DOM antes da página carregar:** coloque o script no fim do `<body>` ou use `defer`.

Próximos passos

Amplie o exemplo do DOM com uma caixa de entrada que calcula a nota enquanto você digita, depois estude `fetch` para carregar dados de um servidor.

Resumo

O JavaScript é construído sobre variáveis, funções e arrays, e trabalha com a página pelo DOM e por eventos. Praticar com exemplos curtos que você pode executar é a forma mais rápida de aprender.