Aprender JavaScript: guia para principiantes e plano de 30 dias

O JavaScript é a única linguagem de programação que todos os navegadores executam de forma nativa. Aprender JavaScript é, portanto, aprender a dar vida a uma página web: reagir a um clique, validar um formulário, carregar dados sem recarregar a página. Este guia é a porta de entrada do tutorial de JavaScript da Gekkode: diz-te por onde começar, em que ordem avançar, quanto tempo contar e como confirmar que estás a progredir.

Serve tanto a quem nunca programou como a quem já copiou e colou JavaScript sem perceber bem o que fazia. Não é preciso saber programar. O curso é gratuito, em português, e cada capítulo acaba com um exercício.

Porquê aprender JavaScript hoje

Três razões práticas, sem conversa de marketing:

• Está em todo o lado na web. Um site de apresentação, uma loja online, uma aplicação de gestão: assim que uma página faz algo mais do que mostrar texto, há JavaScript por trás. É a linguagem do navegador, e o navegador é o ambiente de execução mais difundido do mundo.
• Não fica pelo navegador. Com o Node.js, a mesma linguagem escreve servidores, ferramentas de linha de comandos e scripts de automatização. Não aprendes uma linguagem para o front-end e outra para o resto.
• O ciclo de aprendizagem é imediato. Escreves três linhas, recarregas a página, vês o resultado. Sem compilação, sem instalação complicada: um ficheiro de texto e um navegador chegam para começar.

Os assistentes de código mudaram uma coisa: escrevem depressa JavaScript aceitável. Não mudaram nada quanto ao essencial, que é perceber esse código para o corrigir, o reler e o fazer evoluir. As bases continuam a ser o melhor investimento.

O que é preciso saber antes de começar

O estritamente necessário, nada mais:

• Um pouco de HTML e de CSS. Saber o que é uma tag, um atributo, uma classe. Se não for o caso, um dia sobre as bases do HTML chega para seguires este curso; não precisas de dominar a maquetização.
• Um editor de código. O Visual Studio Code é gratuito e colore o JavaScript sem qualquer configuração. Qualquer editor de texto simples também serve.
• Um navegador recente com a sua consola de desenvolvimento (tecla F12). A consola é a tua primeira ferramenta: mostra os resultados e, sobretudo, os erros, indicando a linha em causa.

Não precisas de instalar o Node.js, o npm nem uma framework para os doze capítulos. Essas ferramentas chegam quando já sabes programar.

O curso passo a passo: doze capítulos por ordem

O programa segue uma progressão deliberada: cada capítulo só usa aquilo que os anteriores já introduziram. Conta vinte a quarenta minutos por capítulo, exercício incluído.

1. Introdução ao JavaScript: onde colocar um script numa página HTML, a tag script, um primeiro «Hello World» e a consola.
2. Variáveis e tipos de dados: let, const, strings, números, booleanos, undefined e null.
3. Operadores e expressões: aritmética, comparação (=== em vez de ==), lógica, concatenação e template literals.
4. As condições: if, else, switch e o operador ternário.
5. Os ciclos: for, while, for…of e forEach nos arrays.
6. As funções: declaração, parâmetros, valor de retorno, arrow functions e scope das variáveis.
7. Os objetos: criar, ler, alterar, percorrer e apagar propriedades.
8. O objeto Math: arredondamentos, números aleatórios, mínimo e máximo.
9. Manipular a página HTML: selecionar um elemento, mudar o seu texto e as suas classes, criar e remover elementos (o DOM).
10. Os eventos: reagir a um clique, a uma escrita, ao envio de um formulário com addEventListener.
11. Os módulos ES6: dividir o código em ficheiros com import e export.
12. Projeto final: um jogo de adivinhar: tudo o que vem antes, reunido num pequeno jogo jogável no navegador.

O sumário completo, com o teu progresso, fica visível na coluna da esquerda de cada capítulo.

O teu primeiro programa JavaScript, comentado

Antes do capítulo 1, eis o aspeto de um programa JavaScript completo. Não tentes perceber tudo: repara apenas nas cinco ideias que o curso vai detalhar.

// 1. Dados: um array de objetos
const panier = [
  { nom: 'Clavier', prix: 49.9, quantite: 1 },
  { nom: 'Souris', prix: 19.5, quantite: 2 },
];

// 2. Uma função: um cálculo reutilizável
function totalHT(articles) {
  let total = 0;
  for (const article of articles) {        // 3. Um ciclo
    total += article.prix * article.quantite;
  }
  return total;
}

// 4. Uma condição
const ht = totalHT(panier);
const fraisDePort = ht >= 50 ? 0 : 4.9;

// 5. Uma saída no ecrã
console.log(`Total HT : ${ht.toFixed(2)} €`);
console.log(`Frais de port : ${fraisDePort.toFixed(2)} €`);
console.log(`Total TTC : ${((ht + fraisDePort) * 1.2).toFixed(2)} €`);

Resultado na consola:

Total HT : 88.90 €
Frais de port : 0.00 €
Total TTC : 106.68 €

Dados, uma função, um ciclo, uma condição, uma saída no ecrã: qualquer programa, por maior que seja, é feito destes blocos. O capítulo 2 começa pelo primeiro, as variáveis.

Um plano de aprendizagem de trinta dias

Este plano parte de uma hora por dia, cinco dias por semana. Não tem nada de obrigatório: é um ritmo que deixa tempo para praticar sem esquecer o que se viu na véspera.

Duas regras tornam este plano eficaz: refazer o exercício do capítulo anterior antes de abrir o seguinte, e escrever cada exemplo à mão em vez de o copiar.

Cinco exercícios para principiantes

Para fazer na consola do navegador ou num ficheiro exercices.js. As soluções usam apenas os capítulos 1 a 7.

1. Conversor: escrever uma função celsiusVersFahrenheit(c) que devolva a temperatura convertida (fórmula: c * 9 / 5 + 32). Confirmar que celsiusVersFahrenheit(100) devolve 212.
2. Par ou ímpar: para cada número de 1 a 20, mostrar «par» ou «ímpar» na consola. Pista: o operador % dá o resto de uma divisão.
3. O maior: escrever maximum(tableau), que devolve o maior valor de um array de números, sem usar Math.max.
4. Contar as vogais: escrever compterVoyelles(texte); «JavaScript» deve dar 3.
5. Livro de endereços: criar um array de três objetos { nom, ville } e depois mostrar uma frase por pessoa com um template literal.

Solução dos exercícios 1, 3 e 4:

function celsiusVersFahrenheit(c) {
  return c * 9 / 5 + 32;
}
console.log(celsiusVersFahrenheit(100)); // 212

function maximum(tableau) {
  let max = tableau[0];
  for (const valeur of tableau) {
    if (valeur > max) {
      max = valeur;
    }
  }
  return max;
}
console.log(maximum([3, 17, 8, 42, 5])); // 42

function compterVoyelles(texte) {
  let total = 0;
  for (const lettre of texte.toLowerCase()) {
    if ('aeiouy'.includes(lettre)) {
      total += 1;
    }
  }
  return total;
}
console.log(compterVoyelles('JavaScript')); // 3

Se o exercício 3 te fez sofrer, é normal: obriga a guardar um valor em memória durante um ciclo. É exatamente a competência que o capítulo 5 instala.

Quanto tempo demora a aprender JavaScript?

A pergunta aparece sempre no arranque, e a resposta honesta depende daquilo a que se chama «aprender»:

• Ler e alterar um script existente: uma a duas semanas, a uma hora por dia.
• Escrever sozinho um pequeno programa interativo (formulário, calculadora, jogo simples): três a quatro semanas, e é este o objetivo do curso.
• Ser autónomo num projeto real, com dados remotos e uma framework: vários meses de prática regular.

O que faz a diferença não é o número de horas, mas a sua regularidade. Trinta minutos por dia valem mais do que quatro horas ao domingo.

JavaScript, Python ou TypeScript?

O Python é mais simples de ler logo no início e excelente para dados e scripts. Mas se o teu objetivo é a web, o JavaScript é incontornável: nenhuma outra linguagem corre no navegador. Os dois não se excluem; começa pelo que corresponde ao que queres construir.

O TypeScript é JavaScript com tipos. Aprende-se depois, não em vez dele: tudo o que vais ver aqui continua válido em TypeScript, e os tipos percebem-se muito melhor quando já se encontraram os erros que eles evitam.

Recursos gratuitos para continuar

• A documentação da MDN, em francês: a referência a manter aberta, com cada método explicado através de exemplos.
• javascript.info, em inglês: o curso online mais completo, útil assim que quiseres aprofundar um ponto.
• Os artigos de JavaScript da Gekkode para a continuação: as classes, bind, call e apply, converter uma string em número, validar um e-mail com uma regex.
• E quando a linguagem estiver assente, o tutorial de Vue 3 para descobrires uma framework.

Para um método de trabalho, o artigo 5 conselhos para aprender de forma eficaz completa este guia.

Perguntas frequentes

É preciso instalar alguma coisa? Não. Um editor de texto e um navegador chegam para os doze capítulos.

Java e JavaScript é a mesma coisa? Não. São duas linguagens sem relação entre si; o nome é um acidente histórico de 1995.

Dá para aprender JavaScript sem saber HTML? Os capítulos 1 a 8 quase não pedem HTML. A partir do capítulo 9, saber ler uma página HTML passa a ser necessário.

Que navegador usar? Chrome, Firefox, Edge ou Safari numa versão recente. Todos têm uma consola de desenvolvimento e executam o JavaScript moderno deste curso.

Por onde começar? Pelo capítulo 1, Introdução ao JavaScript: vinte minutos para mostrares a tua primeira mensagem numa página web.