O que é JavaScript

docs.scrimba.com

Abra uma página da web e clique em um botão que abre um menu, digite em uma caixa de pesquisa que sugere resultados conforme você digita, ou veja um feed carregando mais posts enquanto você rola a página. Nada disso é HTML, e nada disso é CSS. É JavaScript: a linguagem que é executada dentro do navegador e faz uma página responder ao que você faz. Este capítulo é sobre o que essa linguagem é, onde ela é executada e como se encaixa com o HTML e CSS que você já conhece.

Uma linguagem para fazer as páginas funcionarem

JavaScript é uma linguagem de programação: uma forma de escrever instruções que um computador executa passo a passo. Onde HTML descreve o que está em uma página e CSS descreve como ela se parece, JavaScript descreve o que acontece. É a parte que reage.

Pense em uma página web como uma casa. HTML é a estrutura, as paredes e salas. CSS é a pintura e mobiliário. JavaScript é a eletricidade e encanamento: a fiação que faz um interruptor acender uma lâmpada, ou uma torneira produzir água. É o que faz a página fazer algo quando uma pessoa interage com ela.

JavaScript é a camada de comportamento de uma página web. HTML fornece estrutura e CSS fornece apresentação; JavaScript adiciona lógica e interatividade. Ele pode ler e alterar a página depois que ela é carregada, responder a eventos como cliques e pressionamentos de tecla, manter o controle do estado e conversar com servidores para carregar novos dados.

Ao contrário de HTML e CSS, que descrevem um resultado, JavaScript é uma linguagem de programação completa: tem variáveis, condições, loops e funções. Você não está apenas declarando o que deseja, está escrevendo os passos que o navegador executa. Essa é a mudança sobre a qual este manual trata: de descrever uma página para programá-la.

JavaScript é uma linguagem de programação dinamicamente tipada de alto nível (valores têm tipos, mas variáveis não estão presas a um, portanto um nome pode conter um número agora e uma string depois). No navegador, é a camada de comportamento: ela manipula o DOM (o Document Object Model, a árvore viva na memória que o navegador constrói a partir do seu HTML) em resposta a eventos, gerencia o estado e executa requisições de rede.

O enquadramento que vale a pena manter é que HTML e CSS são declarativos enquanto JavaScript é imperativo e Turing-completo: você expressa computação, não apenas um resultado desejado. Esse poder é por que ele carrega a interatividade da web inteira, e também por que a disciplina que HTML e CSS dificilmente precisam, nomeação, estrutura, tratamento de erros, se torna sua responsabilidade no momento em que a lógica entra na página. A maior parte deste manual é sobre exercer esse poder sem criar uma bagunça que apenas você consegue ler.

// HTML te dá um botão. JavaScript faz algo com ele.
const button = document.querySelector(".menu-toggle");
button.addEventListener("click", openMenu);

Você encontrará cada peça disso em capítulos posteriores. Por enquanto, observe a forma: JavaScript alcança a página (document.querySelector), e responde a algo que o usuário faz (addEventListener). Alcançar dentro e responder são a maioria do que o JavaScript do navegador faz.

JunoUma linguagem para fazer as páginas funcionarem HTML é estrutura, CSS é estilo, JavaScript é comportamento: a parte que reage quando alguém usa a página. É uma linguagem de programação real, então você escreve instruções que o navegador segue passo a passo. Essa é a mudança que você está começando: de descrever uma página para dizer a ela o que fazer.

JunoUma linguagem para fazer as páginas funcionarem JavaScript é a camada de comportamento: ele lê e altera a página, responde a eventos e conversa com servidores. Ao contrário de HTML e CSS, ele é uma linguagem completa com lógica e estado, então você programa a página em vez de declará-la. Manter esse trabalho claro em sua mente torna os outros dois mais fáceis de situar.

JunoUma linguagem para fazer as páginas funcionarem JavaScript é imperativo e Turing-completo, o que é por que ele carrega a interatividade da web inteira e por que a estrutura se torna seu trabalho no momento em que a lógica aparece. É dinamicamente tipado, então um nome pode conter qualquer tipo e as verificações de tipo acontecem no tempo de execução. A maior parte do ofício aqui é exercer esse poder sem escrever código que apenas você consegue ler.

Onde JavaScript é executado

JavaScript é executado dentro do navegador. Cada navegador, Chrome, Safari, Firefox, tem um engine integrado que lê seu JavaScript e o executa. Isso significa que não há nada para instalar para começar: se você consegue abrir uma página da web, você consegue executar JavaScript.

Você adiciona JavaScript a uma página com uma tag <script>, geralmente logo antes da tag de fechamento </body>. Para manter seu código em seu próprio arquivo, aponte a tag para ele com um atributo src que nomeia o arquivo, da mesma forma que uma tag de imagem aponta para uma imagem.

O lugar mais rápido para tentar uma linha de código é o console do navegador, um painel nas ferramentas de desenvolvedor onde você pode digitar JavaScript e ver o resultado imediatamente.

JavaScript é executado em um runtime: um ambiente que fornece o engine para executar seu código mais os recursos extras que esse código pode usar. No navegador, o runtime oferece o document para a página, window para a aba do navegador, fetch para requisições de rede e muito mais. A linguagem em si é pequena; a maioria do que você usa no navegador vem do runtime ao seu redor. Carregue um script externo com uma tag <script> e seu atributo src, e adicione defer para que o navegador termine de construir a página antes de executar o script, o que o poupa de uma classe de bugs "elemento não encontrado". O console nas ferramentas de desenvolvimento é um runtime vivo em que você pode digitar, e é onde você testará ideias mais rapidamente.

JavaScript é definido por uma especificação de linguagem (ECMAScript) e executado por um engine como V8 (Chrome, Node) ou JavaScriptCore (Safari). O engine é apenas metade da história: as capacidades úteis vêm do ambiente host, o runtime que incorpora o engine e expõe APIs para ele. No navegador, esse host é a página, fornecendo o DOM, timers, fetch, armazenamento e eventos; em um runtime de servidor como Node, é o sistema operacional, fornecendo arquivos e sockets.

Duas consequências práticas. Primeiro, a mesma linguagem é executada em lugares muito diferentes, então "isso é JavaScript ou um recurso do navegador" é uma distinção real: Array e Promise são a linguagem, enquanto document e localStorage são o navegador. Segundo, como um script é carregado afeta o comportamento: um <script> clássico bloqueia a análise, defer o executa depois que o DOM é construído em ordem, e type="module" adia por padrão e oferece import/export mais seu próprio escopo. Saber qual você está usando explica muito da confusão "por que isso foi executado antes da página existir".

JunoOnde JavaScript é executado JavaScript é executado no navegador, que já tem um engine para executá-lo, então não há nada para instalar. Você o adiciona a uma página com uma tag <script>, e o lugar mais rápido para tentar uma linha é o console nas ferramentas de desenvolvedor do navegador. Abra-o e digite algo, você não consegue quebrar nada.

JunoOnde JavaScript é executado O navegador oferece um runtime: o engine mais extras como document e fetch. Carregue seu código com <script src> e adicione defer para que ele seja executado depois que a página é construída. O console é um runtime vivo para testar ideias, e é o feedback mais rápido que você terá.

JunoOnde JavaScript é executado O engine executa a linguagem (ECMAScript); o ambiente host fornece as APIs, é por isso que Array é JavaScript mas document é o navegador. Como um script é carregado também importa: scripts clássicos bloqueiam a análise, defer executa após o DOM em ordem, e type="module" adia e adiciona escopo de importação. Essa distinção explica a maioria dos bugs "isso foi executado antes da página existir".

Seu primeiro olhar para JavaScript

Aqui está um minúsculo programa. Você não precisa entender cada parte ainda, os próximos capítulos cobrem cada uma, mas você já consegue ler a forma disso:

let name = "João";
console.log("Olá " + name); // Olá João

A primeira linha armazena o texto "João" sob o nome name. A segunda linha imprime uma mensagem no console, juntando "Olá " e o nome armazenado. console.log é como você pede ao JavaScript para mostrar a você um valor enquanto está aprendendo, e você o usará constantemente.

Um primeiro programa, pequeno mas completo:

let name = "João";
let greeting = "Olá " + name;
console.log(greeting); // Olá João

Três ideias já estão aqui: uma variável que contém um valor, uma expressão que combina valores ("Olá " + name), e uma declaração que faz algo com o resultado (console.log). Quase todo JavaScript é essas três coisas empilhadas: dar nome a alguns valores, computar com eles, e agir no resultado. console.log imprime no console e é sua ferramenta padrão para ver o que seu código está realmente fazendo.

O menor programa útil ainda mostra o loop central da linguagem:

const name = "João";
const greeting = `Olá ${name}`;
console.log(greeting); // Olá João

Observe as escolhas que um desenvolvedor que trabalha faz por reflexo aqui: const em vez de let porque a ligação nunca muda (sinalizando intenção e evitando reatribuição acidental), e um template literal (a string com acento grave com ${...}) em vez de concatenação + porque é mais fácil de ler e trata tipos de forma mais previsível. Nada disso é necessário para fazer a linha funcionar, que é exatamente o ponto: JavaScript aceitará a versão frouxa felizmente, então a qualidade do seu código vem de decisões que a linguagem não força. Este manual gasta muito de seu tempo nessas decisões, começando com variáveis a seguir.

JunoSeu primeiro olhar para JavaScript Um programa é principalmente isto: armazene alguns valores, combine-os e faça algo com o resultado. console.log imprime um valor para que você possa vê-lo, e é seu melhor amigo enquanto aprende. Não se preocupe com os detalhes ainda, você conhecerá cada parte propriamente nos próximos capítulos.

JunoSeu primeiro olhar para JavaScript A maioria do JavaScript é três coisas empilhadas: variáveis que contêm valores, expressões que as combinam e declarações que agem no resultado. Reconhecer esses três em qualquer trecho torna o código desconhecido muito menos intimidador. Mantenha console.log por perto, é como você verifica o que seu código está realmente fazendo.

JunoSeu primeiro olhar para JavaScript A linguagem executa a versão frouxa e a versão cuidadosa igualmente, então a qualidade vem de escolhas que ela nunca força: const sobre let quando uma ligação é fixa, template literals sobre + para legibilidade. Essa liberdade é a bênção e a armadilha do JavaScript. Os próximos capítulos tratam em grande parte de fazer essas chamadas bem, começando com variáveis.

O que "JavaScript moderno" significa

Você ouvirá pessoas falando sobre JavaScript moderno. JavaScript existe desde 1995 e recebe novos recursos a cada ano, mas o código antigo continua funcionando, então a linguagem acumulou algumas formas diferentes de fazer a mesma coisa ao longo dos anos.

A boa notícia: você não precisa do histórico. Este manual ensina a forma atual e recomendada de escrever cada coisa. Se você vir tutoriais mais antigos usando var para fazer variáveis, esse é o estilo antigo; você aprenderá let e const em vez disso, que é o que os desenvolvedores usam hoje.

"JavaScript moderno" geralmente significa a linguagem como ela tem sido desde uma grande atualização de 2015 (chamada ES2015, ou ES6) e as adições anuais desde então. Essa atualização adicionou let e const, arrow functions, template literals e muito mais, e é a linha de base que cada navegador atual suporta.

É importante porque você encontrará dois períodos de código. Materiais mais antigos usam var, expressões function em todos os lugares e concatenação de strings; código atual usa const/let, arrow functions e template literals. Este manual ensina o estilo moderno em todo o documento e nomeado as formas antigas apenas para que você as reconheça na natureza. Você não precisará de ferramentas de construção ou configuração para usar nenhuma delas; ele é executado no navegador assim.

JavaScript é padronizado como ECMAScript, e desde ES2015 a especificação é enviada anualmente (ES2016, ES2017 e assim por diante), cada uma adicionando um pequeno conjunto de recursos retrocompatíveis. "JavaScript moderno" é uma abreviação para escrever contra essa linguagem evoluída, const/let, arrow functions, template literals, destructuring, módulos, async/await, em vez dos idiomas pré-2015.

A razão pela qual isso fica simples na prática é o compromisso quase absoluto do JavaScript com retrocompatibilidade: nova sintaxe é adicionada, sintaxe antiga quase nunca quebra, então um script de uma década atrás ainda é executado. É por isso que você pode aprender apenas as formas modernas e tratar com segurança var e sua era como conhecimento somente leitura para manter código antigo. O único lugar onde o passado se intromete é quando você lê a base de código anterior de outra pessoa, e este manual sinaliza essas formas antigas conforme elas aparecem para que elas não o troplem. O próximo capítulo, variáveis, começa exatamente ali, com a forma moderna de nomear e armazenar valores.

JunoO que JavaScript moderno significa JavaScript é antigo e mantém seu código antigo funcionando, então há algumas formas de fazer algumas coisas. Você não precisa do histórico: este manual ensina a forma atual e recomendada cada vez. Se um tutorial usar var, esse é o estilo antigo, e você aprenderá let e const em vez disso.

JunoO que JavaScript moderno significa JavaScript moderno significa a linguagem desde a atualização de 2015: const e let, arrow functions, template literals. Você encontrará código anterior que usa var e concatenação, então este manual ensina o estilo moderno e nomeado as formas antigas apenas para que você as reconheça. Tudo é executado no navegador sem uma etapa de construção.

JunoO que JavaScript moderno significa ECMAScript é enviado anualmente e permanece retrocompatível, então nova sintaxe é adicionada e sintaxe antiga quase nunca quebra. É por isso que você pode aprender apenas as formas modernas e tratar var e sua era como conhecimento somente leitura para bases de código antigas. Escreva contra a linguagem evoluída e deixe o manual sinalizar as formas legadas conforme aparecem.

Para onde JavaScript vai daqui

JavaScript é uma linguagem grande, mas começa pequena: valores, nomes para eles e formas de combiná-los e agir sobre eles. Uma vez que esses cliquem, o resto deste manual se constrói: tomar decisões e repetir trabalho, organizar código em funções, manter coleções em arrays e objetos, e então alcançar a própria página com o DOM para construir coisas que as pessoas podem realmente usar.

O próximo capítulo, variáveis, é onde o trabalho real começa: como armazenar um valor, a diferença entre let e const, e o pequeno conjunto de regras sobre o qual toda o resto da linguagem é construído.