Curso gratuito de Fundamentos do JavaScript

Módulo 1 do curso gratuito: introdução ao JavaScript

• Por que aprender JavaScript?
• O que é uma linguagem Web?
• Diferenças entre JavaScript e Java
• Linguagem transpilada, compilada e interpretada

O primeiro módulo explica por que o JavaScript ocupa um lugar tão central no desenvolvimento web. Afinal, ele é a linguagem que os navegadores executam para dar comportamento às páginas.

Um ponto que costuma confundir iniciantes é o nome. Apesar da semelhança, JavaScript e Java são linguagens diferentes, com propósitos, sintaxes e ecossistemas próprios.

O módulo também apresenta a diferença entre linguagens transpiladas, compiladas e interpretadas. Esse conceito ajuda você a entender como o código que escreve chega até o navegador.

De forma resumida, uma linguagem compilada passa por um compilador que gera outro formato antes da execução. Já uma linguagem interpretada é lida e executada por um programa, como o motor JavaScript do navegador.

A transpilação, por sua vez, converte o código de uma linguagem para outra de nível parecido. Por exemplo, o TypeScript é transpilado para JavaScript antes de rodar no navegador.

Entender essa base no início do curso gratuito de JavaScript evita confusões mais tarde. Afinal, você vai ouvir esses termos com frequência ao estudar ferramentas do ecossistema.

Se quiser uma introdução antes das aulas, leia o artigo sobre o que é JavaScript.

Módulo 2: iniciando no JavaScript

• Estrutura de um arquivo JavaScript
• Variáveis e constantes
• Como utilizar condições
• Uso de funções
• Como utilizar comentários
• Uso de alertas

O segundo módulo coloca a mão no código. Primeiro, você conhece a estrutura de um arquivo .js e aprende a declarar variáveis e constantes.

// Constante: o valor não pode ser reatribuído
const storeName = 'My Store';

// Variável: o valor pode mudar ao longo do código
let itemCount = 0;
itemCount = itemCount + 1;

Depois, o módulo avança para condições e funções, que são a base de qualquer lógica. Assim, você passa a tomar decisões no código e a reaproveitar trechos sempre que precisar.

function getGreeting(hour) {
  if (hour < 12) {
    return 'Good morning';
  }

  return 'Good afternoon';
}

alert(getGreeting(9));

As condições ganham mais força com o else if e com os operadores de comparação. No JavaScript, o operador === compara valor e tipo, enquanto o == tenta converter os tipos antes de comparar.

const paymentMethod = 'pix';

if (paymentMethod === 'card') {
  console.log('Card payment');
} else if (paymentMethod === 'pix') {
  console.log('Instant payment');
} else {
  console.log('Unknown method');
}

Por isso, a recomendação mais comum é usar o === na maior parte do tempo. Assim, você evita resultados inesperados causados pela conversão automática de tipos.

Os comentários também aparecem nesse módulo. Eles servem para explicar trechos do código e não interferem na execução.

// Comentário de uma linha

/*
  Comentário de
  várias linhas
*/

Já o alert exibe uma caixa de mensagem no navegador. Ele é simples, mas útil para ver resultados logo nas primeiras aulas do curso gratuito de JavaScript.

Para aprofundar esses temas, confira os artigos sobre variáveis no JavaScript e sobre funções no JavaScript.

Módulo 3: trabalhando com arrays

• Como os arrays funcionam
• Adicionando e removendo elementos
• Utilizando Slice e Splice
• Como concatenar arrays
• Acessando posições no array

Os arrays guardam listas de valores e aparecem em praticamente toda aplicação. Por isso, o terceiro módulo dedica atenção especial a eles.

Você aprende a adicionar e remover elementos e a acessar posições pelo índice. Além disso, entende a diferença entre slice e splice, dois métodos com nomes parecidos e comportamentos bem diferentes.

const products = ['Keyboard', 'Mouse', 'Monitor'];

// Adiciona um item no fim do array
products.push('Headset');

// slice devolve uma cópia de parte do array, sem alterá-lo
const firstTwo = products.slice(0, 2);

// splice remove itens do próprio array original
products.splice(1, 1);

// concat junta dois arrays em um novo array
const allItems = firstTwo.concat(['Webcam']);

Para acessar uma posição, você usa o índice entre colchetes, lembrando que a contagem começa em zero. Com a propriedade length, você descobre quantos itens o array tem e chega facilmente ao último elemento.

const colors = ['red', 'green', 'blue'];

console.log(colors[0]);                 // red
console.log(colors[colors.length - 1]); // blue

Em resumo, o slice não modifica o array original, enquanto o splice altera o array em que você o chama. O artigo guia básico sobre arrays no JavaScript complementa esse módulo.

Módulo 4 do curso gratuito: laços em JavaScript

• Como os laços funcionam
• Incremento e decremento
• Uso do for(), while() e foreach()
• Laços aninhados

Os laços repetem um bloco de código enquanto uma condição for verdadeira. Com eles, você percorre listas, processa dados e evita repetir instruções manualmente.

const prices = [10, 25, 40];

// for clássico com incremento
for (let i = 0; i < prices.length; i++) {
  console.log(prices[i]);
}

// forEach executa uma função para cada item
prices.forEach((price) => console.log(price));

O módulo também cobre o while e os laços aninhados. Nesse caso, um laço roda dentro do outro, algo comum ao trabalhar com tabelas e listas de listas.

let stock = 3;

// while repete enquanto a condição for verdadeira
while (stock > 0) {
  console.log(`Items left: ${stock}`);
  stock--;
}

// Laço aninhado percorrendo linhas e colunas
for (let row = 1; row <= 2; row++) {
  for (let column = 1; column <= 3; column++) {
    console.log(row, column);
  }
}

Repare no operador --, que decrementa o valor da variável. Da mesma forma, o operador ++ incrementa, e os dois aparecem o tempo todo nos laços.

Módulo 5: JavaScript moderno

• Template strings
• Block scoped
• Arrow functions

O quinto módulo apresenta recursos que deixam o código mais limpo e seguro. As template strings, por exemplo, permitem montar textos com variáveis sem concatenar com o sinal de mais.

const customerName = 'Maria';
const total = 150;

// Template string com interpolação
const message = `Hello, ${customerName}. Your total is ${total}.`;

// Arrow function: sintaxe mais curta para funções
const applyDiscount = (value) => value * 0.9;

O escopo de bloco, trazido por let e const, limita a variável ao bloco em que você a declarou. Já as arrow functions oferecem uma sintaxe mais curta para escrever funções.

if (true) {
  var oldStyle = 'visible outside';
  let blockScoped = 'visible only here';
}

console.log(oldStyle);    // Funciona
// console.log(blockScoped); // Erro: blockScoped não existe aqui

No exemplo, a variável declarada com var escapa do bloco, enquanto a declarada com let não. Por isso, o curso gratuito de JavaScript recomenda os recursos modernos para evitar comportamentos inesperados.

Para ver mais sobre esse tema, leia o artigo de boas-vindas ao JavaScript moderno.

Módulo 6: projeto mão na massa

• Clonando e conhecendo o projeto
• Criando um arquivo .js
• Manipulação de listas de produtos
• Interação com elementos da interface
• Implementação de funcionalidades como subtotal, adição e remoção de itens

O último módulo junta tudo em um projeto prático. Você clona o projeto, cria o arquivo .js e implementa o comportamento de uma lista de produtos.

Durante o projeto, você manipula listas, interage com elementos da interface e calcula o subtotal. Também implementa a adição e a remoção de itens, aplicando arrays, laços e funções em um cenário real.

Dessa forma, o conteúdo dos módulos anteriores deixa de ser teoria. Você termina o curso gratuito de JavaScript com um exemplo funcional, construído do zero.