O Que É a Linguagem de Programação JavaScript? Um Guia Simples da Linguagem da Web

Toda vez que você clica em "Curtir" num post, vê mensagens novas aparecerem sem recarregar a página, arrasta um mapa ou vê uma caixa de busca sugerir palavras enquanto você digita, é o JavaScript trabalhando.

O JavaScript é a linguagem de programação da web. Ele roda dentro de todos os grandes navegadores, e mais de 98% dos sites o usam. Ele também se espalhou muito além das páginas web, para servidores, apps de celular e programas de computador. Este artigo explica, em linguagem simples, o que é o JavaScript, como ele funciona e por que é uma das linguagens de programação mais usadas do mundo.

As três camadas de toda página web

As páginas web são feitas de três ingredientes principais, cada um com o seu trabalho:

• O HTML descreve o que está na página: títulos, parágrafos, imagens, botões. Pense nele como a estrutura de um prédio.
• O CSS descreve como ela fica: cores, fontes, espaçamentos, layout. Pense na pintura e na decoração.
• O JavaScript descreve o que ela faz: o que acontece quando você clica, digita, rola ou espera. Pense na eletricidade, que acende as luzes e faz o elevador andar.

Uma página só com HTML e CSS é como um pôster bonito. Acrescente JavaScript, e ela vira algo com que você pode interagir.

Como é o JavaScript

Aqui vai um exemplo pequeno, mas completo: um botão "Curtir" que conta os cliques.

1<button id="botao-curtir">👍 Curtir</button>
2<p id="total-curtidas">0 curtidas</p>
3<script>
4  const botao = document.getElementById("botao-curtir");
5  const textoTotal = document.getElementById("total-curtidas");
6  let curtidas = 0;
7
8  botao.addEventListener("click", () => {
9    curtidas = curtidas + 1;
10    textoTotal.textContent = curtidas + " curtidas";
11  });
12</script>

Em palavras simples, a parte em JavaScript (dentro de <script>) diz:

1. Encontre o botão e o texto na página.
2. Comece a contar do zero.
3. Sempre que o botão for clicado, some um e atualize o texto.

Clique três vezes e a página mostra "3 curtidas", na hora, sem recarregar. Esse estilo "sempre que isto acontecer, faça aquilo" é o coração do JavaScript.

O que acontece quando você clica

Todo navegador tem um motor de JavaScript embutido, um programa que lê e executa o código JavaScript: o V8 no Chrome e no Edge, o SpiderMonkey no Firefox e o JavaScriptCore no Safari.

O JavaScript gira em torno de eventos: cliques, teclas apertadas, uma página que termina de carregar, uma mensagem que chega de um servidor. O seu código diz "quando este evento acontecer, rode isto", e o navegador se encarrega de chamá-lo na hora certa.

Um bom jeito de imaginar é um garçom num restaurante. O garçom não fica parado na porta da cozinha esperando um prato. Ele anota um pedido, passa para a cozinha, atende outra mesa e volta quando a comida fica pronta. O JavaScript funciona do mesmo jeito: enquanto espera algo demorado, como dados vindos da internet, ele mantém a página respondendo, em vez de travar.

Nascido em 10 dias

Em 1995, a web era feita principalmente de páginas paradas, com texto e imagens. A empresa por trás do navegador mais popular da época, a Netscape, queria uma linguagem simples que qualquer pessoa pudesse colocar nas páginas para deixá-las interativas.

Ela contratou Brendan Eich, que escreveu a primeira versão em cerca de 10 dias, em maio de 1995. Ela se chamou primeiro Mocha, depois LiveScript e, por fim, JavaScript, uma jogada de marketing para pegar carona na fama do Java, a linguagem do momento.

Alguns momentos marcantes:

• 1997: o JavaScript virou um padrão oficial chamado ECMAScript, para que todos os navegadores implementassem a mesma linguagem. (É por isso que às vezes você vê versões chamadas "ES2015" ou "ES2024".)
• 2004–2005: o Gmail e o Google Maps mostraram que as páginas podiam se atualizar sozinhas, sem recarregar, uma técnica apelidada de Ajax. Os sites começaram a parecer aplicativos de verdade.
• 2008: o navegador Chrome, do Google, chegou com o V8, um motor tão mais rápido que os antigos que mudou o que as pessoas achavam que o JavaScript conseguia fazer.
• 2009: o Node.js tirou o motor V8 do navegador para que o JavaScript pudesse rodar também em servidores.
• 2015: o ES2015 (também chamado de ES6) foi a maior atualização da história da linguagem e, desde então, sai uma versão nova todo ano.

Por que o JavaScript fica mais rápido enquanto roda

O JavaScript antigo era lento, porque os navegadores liam o código linha por linha, como quem lê uma receita em voz alta, um passo de cada vez. Os motores modernos são muito mais espertos. Eles começam a rodar o seu código na hora, observam quais partes são mais usadas e então compilam essas partes para código de máquina rápido enquanto o programa roda. Isso se chama compilação JIT (just-in-time, "na hora certa").

Nós medimos isso. A mesma tarefinha (pontuar 20.000 palavras) rodou 40 vezes seguidas, uma vez normalmente e outra com o compilador desligado:

A primeira rodada levou 4,8 milissegundos, enquanto o motor ainda estava conhecendo o código. Lá pela segunda ou terceira rodada, o motor já tinha compilado tudo, e cada rodada seguinte levou cerca de 1,1 milissegundo. Com o compilador desligado, toda rodada ficou por volta de 14 a 15 milissegundos, umas 14 vezes mais lenta. Esse truque de "aquecimento" é um grande motivo para os apps web de hoje parecerem rápidos.

Onde o JavaScript roda hoje

• Páginas web: praticamente todo site que você visita.
• Servidores: com o Node.js, a mesma linguagem roda nos bastidores, a parte do site que você não vê.
• Apps de computador: uma ferramenta chamada Electron transforma páginas web em programas de computador. O Visual Studio Code, o Slack e o Discord são feitos assim.
• Apps de celular: o React Native permite criar apps de Android e iPhone com JavaScript.
• Jogos e automação: jogos no navegador e até scripts que automatizam o Google Planilhas e o Docs.

Além disso, o npm, o repositório de pacotes do JavaScript, guarda milhões de peças prontas e gratuitas que os desenvolvedores podem encaixar nos seus projetos. E, na pesquisa anual de desenvolvedores do Stack Overflow, o JavaScript é a linguagem mais usada há mais de uma década.

Uma linguagem com esquisitices

Como o JavaScript foi criado tão rápido, e como os sites antigos precisam continuar funcionando para sempre, ele tem alguns comportamentos famosamente estranhos que nunca podem ser removidos:

• "5" + 2 dá "52", mas "5" - 2 dá 3. O JavaScript tenta ajudar convertendo valores automaticamente, o que às vezes surpreende.
• 0.1 + 0.2 dá 0.30000000000000004. Essa não é culpa do JavaScript: a maioria das linguagens guarda números decimais em binário e mostra o mesmo errinho de arredondamento.
• typeof null responde "object". É um erro da primeiríssima versão, e corrigi-lo agora quebraria inúmeros sites existentes.

Um gostinho do JavaScript moderno

O JavaScript moderno é bem mais agradável do que a sua fama. Veja como separar os adultos de uma lista de pessoas e ordenar os nomes:

1const pessoas = [
2  { nome: "Maria", idade: 34 },
3  { nome: "Ana", idade: 17 },
4  { nome: "Pedro", idade: 25 },
5  { nome: "Lucas", idade: 15 },
6];
7
8const adultos = pessoas
9  .filter((pessoa) => pessoa.idade >= 18)
10  .map((pessoa) => pessoa.nome)
11  .sort();
12
13console.log(adultos.join(", ")); // Maria, Pedro

Dá para ler quase como uma frase em inglês: filter (filtrar) as pessoas com 18 anos ou mais, map (transformar) cada uma no seu nome e sort (ordenar) os nomes.

Vale a pena aprender JavaScript?

• Ótimos motivos: você quer criar sites ou aplicativos web; ele é a única linguagem que roda nativamente em todos os navegadores. Você também não precisa instalar nada para experimentar: todo navegador tem um console embutido onde dá para digitar JavaScript (aperte F12 e procure a aba "Console").
• Bom saber: o JavaScript é flexível e tolerante, o que facilita começar, mas essa mesma flexibilidade deixa erros passarem. Aprender bons hábitos cedo, ou migrar para o TypeScript depois, compensa.

Para praticar, veja dois projetos do arquivo: funções geradoras do JavaScript e um jogo da velha com HTML, CSS e JavaScript.

Um pequeno glossário

• JavaScript: a linguagem de programação que deixa as páginas web interativas, criada em 1995.
• HTML / CSS: as linguagens da estrutura e da aparência de uma página.
• ECMAScript: o padrão oficial que define o JavaScript.
• Motor: o programa dentro do navegador que roda o JavaScript, como o V8, o SpiderMonkey ou o JavaScriptCore.
• Evento: algo que acontece numa página, como um clique ou uma tecla, a que o código pode responder.
• Compilação JIT (na hora certa): transformar o código mais usado em código de máquina rápido enquanto o programa roda.
• Sandbox: o espaço protegido onde o JavaScript de uma página roda, isolado dos seus arquivos.
• Ajax: atualizar parte de uma página com dados novos sem recarregá-la.
• Node.js: um jeito de rodar JavaScript fora do navegador, principalmente em servidores.
• npm: a enorme biblioteca de pacotes prontos e gratuitos do JavaScript.
• TypeScript: JavaScript com tipos, criado pela Microsoft.

Concluindo

O JavaScript foi escrito em cerca de 10 dias para deixar as páginas web um pouco mais animadas e acabou movendo boa parte do mundo digital. O HTML monta a página, o CSS a deixa bonita e o JavaScript dá vida a ela, respondendo aos seus cliques e teclas e atualizando a página sem recarregar.

Ele tem as suas esquisitices, mas, graças a motores rápidos que compilam o código mais usado na hora, a melhorias que chegam todo ano e a ferramentas como o TypeScript, ele está mais capaz do que nunca. Então, da próxima vez que uma página reagir ao seu clique num piscar de olhos, você vai saber quem está fazendo o trabalho.