JavaScript: a página que reage

Uma página feita só de HTML e CSS não muda depois que carrega. Ela mostra o que o servidor mandou e para por aí. O JavaScript é a parte que roda depois, dentro do navegador da pessoa, e responde ao que ela faz.

O que o JavaScript resolve

Sem ele, qualquer mudança na tela custa uma viagem inteira ao servidor. A pessoa clica, o navegador pede a página de novo, tudo pisca e volta. Um total que precisa somar, um menu que abre, um campo que avisa "esse e-mail está sem arroba" antes do envio, nada disso existe se a página só sabe carregar uma vez.

O JavaScript resolve isso deixando código rodar dentro da página que já está aberta. Ele escuta o que a pessoa faz, calcula, e troca pedaços da tela no lugar. O mesmo idioma serve fora do navegador, num servidor, com o Node.js, e essa página prova as duas coisas com um arquivo só.

Os conceitos que você precisa antes da primeira linha

• Valor e variável. Um valor é um dado: o número 2, o texto "Olá". Uma variável é um nome que guarda esse dado para você usar depois. Você declara com let quando o valor vai mudar e com const quando não vai.
• Função. Um pedaço de código com nome, que recebe entradas e devolve uma saída. Escrever a regra uma vez e chamar em vários lugares evita copiar a mesma conta pela página inteira.
• DOM. Quando o navegador lê seu HTML, ele monta uma árvore de objetos na memória. Essa árvore é o DOM, e é nela que o JavaScript mexe. Trocar o texto de um parágrafo pelo DOM muda o que está na tela na hora, sem tocar no arquivo salvo no disco.
• Evento e ouvinte. Clique, tecla, rolagem e envio de formulário são eventos. Com addEventListener você registra uma função que o navegador chama quando aquele evento acontece naquele elemento. A documentação da MDN chama isso de registrar um ouvinte num alvo, e o alvo pode ser um elemento, o documento ou a janela.
• Motor e ambiente. A linguagem tem um padrão próprio, chamado ECMAScript. Quem executa o código é um motor, e cada ambiente traz o seu: o navegador roda com acesso ao DOM, o Node.js roda no terminal com acesso a arquivos e rede. A gramática é a mesma nos dois, o que muda é o que está disponível em volta.

A linguagem por dentro: tipos, funções e objetos

O JavaScript tem tipagem dinâmica: o tipo vive no valor, não na variável. A mesma variável pode guardar um número agora e um texto depois, e ninguém reclama até algo quebrar em tempo de execução. É por isso que a comparação tem dois operadores: == converte os tipos antes de comparar e reserva surpresas, === compara valor e tipo e é o que se usa.

• Os tipos que você vai usar todo dia: number (inteiro e decimal são o mesmo tipo), string, boolean, null e undefined (dois jeitos de "nada": o intencional e o que ninguém preencheu), object e o array, que é um objeto com ordem.
• Função é valor. Dá pra guardar função em variável, passar função pra outra função e devolver função. É a base de metade do JavaScript que você vai ler, incluindo o addEventListener do hello world.
• Objeto é um saco de pares nome-valor. { nome: "Ana", idade: 30 }. A sintaxe de class existe e organiza a criação de objetos parecidos, com construtor, método e herança com extends.

// tipos, função e classe em dez linhas
const precos = [12.5, 30, 7];                  // array
const total = precos.reduce((soma, p) => soma + p, 0);

function formata(valor) {                      // função clássica
  return `R$ ${valor.toFixed(2)}`;             // template string
}

class Carrinho {                               // orientação a objetos
  constructor() { this.itens = []; }
  add(item) { this.itens.push(item); }
}

console.log(formata(total));                   // R$ 49.50

Leia esse trecho antes de rodar o hello world: tudo que aparece lá embaixo é combinação desses blocos.

O exercício abaixo escreve uma função só e usa ela nos dois lugares. Primeiro no terminal, depois na página.

1. Abra o terminal e confira o Node.js:

   node --version

   Se aparecer um número de versão, está instalado. Se aparecer "command not found" ou "não é reconhecido", baixe o instalador em nodejs.org. A versão LTS publicada lá em 15/08/2026 é a v24.19.0.

2. Crie a pasta do exercício e entre nela:

   mkdir ola-js
   cd ola-js

3. Crie o arquivo ola.js dentro dessa pasta, com este conteúdo:

   function proximaFrase(cliques) {
     if (cliques === 0) {
       return "Ninguém clicou ainda.";
     }
     if (cliques === 1) {
       return "Você clicou 1 vez, e a página não recarregou.";
     }
     return "Você clicou " + cliques + " vezes, e a página continua a mesma.";
   }
   
   if (typeof window === "undefined") {
     console.log(proximaFrase(0));
     console.log(proximaFrase(1));
     console.log(proximaFrase(2));
   }

   O bloco do fim só roda onde não existe janela de navegador, que é o caso do terminal. Na página, ele fica quieto.

4. Rode o arquivo, ainda sem navegador nenhum:

   node ola.js

5. Na mesma pasta, crie ola.html:

   <!DOCTYPE html>
   <html lang="pt-BR">
     <head>
       <meta charset="UTF-8" />
       <title>Minha primeira página que reage</title>
     </head>
     <body>
       <h1>Olá, mundo</h1>
       <p id="saida">Ninguém clicou ainda.</p>
       <button id="botao" type="button">Clique aqui</button>
   
       <script src="ola.js"></script>
       <script>
         var cliques = 0;
         var botao = document.getElementById("botao");
         var saida = document.getElementById("saida");
   
         botao.addEventListener("click", function () {
           cliques = cliques + 1;
           saida.textContent = proximaFrase(cliques);
         });
       </script>
     </body>
   </html>

6. Dê dois cliques em ola.html para abrir no navegador, e clique duas vezes no botão.

O que o JavaScript não é

JavaScript não tem parentesco com Java. O nome veio de um acordo comercial de 1995, quando Java era o assunto do momento, e ficou. São linguagens com sintaxe, semântica e usos diferentes, como a própria MDN faz questão de avisar logo na abertura da referência. Saber uma não ajuda a ler a outra, e vaga de Java não se responde com JavaScript.

Sobra ainda a confusão de nome do padrão. A linguagem padronizada chama ECMAScript, e "JavaScript" é como todo mundo fala dela no dia a dia. Quando você vir ES2015 ou ES6 num tutorial, é disso que estão falando.

Fontes

• MDN Web Docs, JavaScript, onde estão a definição da linguagem, a menção ao ECMAScript e o aviso de que Java e JavaScript são coisas distintas. Conferida em 15/08/2026.
• MDN Web Docs, addEventListener, a assinatura do método e a lista de alvos que aceitam um ouvinte. Conferida em 15/08/2026.
• Node.js, documentação da linha de comando, onde o ponto de entrada do programa e a opção --version estão descritos. Conferida em 15/08/2026.
• Node.js, página de download, de onde saiu o número da versão LTS citado no passo 1. Conferida em 15/08/2026.

Em 15/08/2026, os dois arquivos deste hello world foram criados e executados numa máquina Linux com Node.js v22.23.0. O comando node ola.js imprimiu as três linhas descritas acima. A página ola.html foi aberta num navegador e, depois de dois cliques no botão, o parágrafo mostrava "Você clicou 2 vezes, e a página continua a mesma." sem nenhum recarregamento.

Para continuar

Se você ainda não passou pelo CSS, ele vem antes na ordem natural, porque muita coisa que parece trabalho de JavaScript é só uma classe trocada. Depois disso, React mostra o que acontece quando a página tem dezenas desses estados para controlar ao mesmo tempo. O caminho inteiro está no mapa da stack web.

O curso desta trilha está em preparação. A lista paga menos.

Os tutoriais daqui continuam gratuitos. O que está a caminho é um curso pago que transforma esse mapa em formação guiada, na ordem certa e com projeto. Deixe seu e-mail: você recebe os estudos novos gratuitos e, no lançamento, o desconto de quem entrou na lista primeiro.