Pular para o conteúdo
Cursos

DevClub

LógicaFront-endBack-endMobile

IA Club

IA na prática
Estudar programaçãoEstudar IA

Trilha · Iniciante

JavaScript do zero

A trilha completa de JavaScript, em ordem de estudo: da primeira variável ao código assíncrono. Cada lição com código executado.

69 lições em ordem de estudo

Começando

  1. 01IntroduçãoJavaScript é a única linguagem que o navegador executa nativamente, e com o Node ela roda no servidor. O que é, onde roda e por que não é Java.testado
  2. 02Onde escreverRodar JavaScript no console, em arquivo com o Node e dentro de uma página HTML — com defer, async, type=module e o erro do script parado no head.testado
  3. 03Saída no consoleImprimir valor, objeto e lista no JavaScript com log, table e dir — o que o console esconde por profundidade e por que o objeto logado engana.testado

Fundamentos

  1. 04VariáveisDeclarar, atribuir e ler valores em JavaScript, com tipagem dinâmica, regras de nome e o ReferenceError que aparece quando o nome não confere.testado
  2. 05var, let e constEscopo de bloco contra escopo de função, zona morta temporal e por que const com objeto continua mutável — com o erro real de cada caso no Node.testado
  3. 06Tipos de dadosOs sete primitivos e o object, o que typeof responde em cada um e por que typeof null devolve "object" desde 1995 — com o erro que isso provoca.testado
  4. 07null, undefined e NaNOs dois vazios do JavaScript e o número que não é número: quando usar cada um, por que null == undefined é true e por que NaN nunca é igual a NaN.testado
  5. 08Conversão de tipoNumber, parseInt, parseFloat e o unário mais: o que cada um devolve, o radix esquecido e como o NaN silencioso vira um "R$ NaN" na tela do cliente.testado
  6. 09Template literalsCrase, ${} e string multilinha sem barra-n: como montar texto e HTML em JavaScript sem concatenar, com a saída real de cada exemplo rodada no Node 24.testado

Operadores

  1. 10AritméticosSoma, subtração, resto com negativos, exponenciação e o clássico 0.1 + 0.2 — com a saída real de cada conta no Node e o bug silencioso do + com string.testado
  2. 11ComparaçãoA tabela de coerção do ==, por que NaN não é igual a NaN e como objetos comparam por referência — com cada caso rodado no Node e o bug do if (x == false).testado
  3. 12LógicosOs operadores && e || não devolvem booleano: devolvem um dos operandos. Curto-circuito, valor padrão, nullish e o bug do || que apaga o zero, no Node 24.testado
  4. 13Truthy e falsyA lista fechada dos oito valores falsy, por que array vazio e objeto vazio são truthy, e o if que sempre passa — com cada conversão executada no Node 24.testado

Textos e números

  1. 14StringsPor que toda string é imutável, como o length conta emoji e acento, e o erro de aspas não fechadas — com cada exemplo executado e a saída real no Node 24.testado
  2. 15Métodos de stringRecortar com slice, trocar com replaceAll, quebrar com split e alinhar com padStart — cada método rodado no Node, com a saída real e a pegadinha de cada.testado
  3. 16NúmerosPor que 0.1 + 0.2 não dá 0.3, por que toFixed devolve string e arredonda errado, e como somar dinheiro sem perder centavo — tudo executado no Node 24.testado
  4. 17Moeda e IntlIntl.NumberFormat em pt-BR, o espaço não-quebrável que derruba o seu teste e a função que traz "1.234,56" de volta para número — executado no Node 24.testado
  5. 18Math.randomMath.random vai de 0 até quase 1 e nunca chega a 1 — é isso que explica o + 1 da fórmula. Com o off-by-one e o embaralhamento enviesado provados por amostra.testado

Condições e laços

  1. 19if e elseO if não testa true, testa truthiness. Ordem do else if, o if sem chaves que engana, early return e o SyntaxError Unexpected token else, tudo executado.testado
  2. 20TernárioO ternário é expressão, não instrução — por isso cabe dentro de template literal e de JSX. Aninhamento, comparação com ?? e o SyntaxError do : sozinho.testado
  3. 21switchO switch compara com === estrito, então "1" não bate com case 1. Fall-through sem break, agrupamento de cases, o truque switch(true) e o erro do let solto.testado
  4. 22forAs três partes do cabeçalho, let contra var no contador, break e continue, label em laço aninhado, for...of e o RangeError de estourar a pilha com spread.testado
  5. 23whileQuando o número de voltas não é conhecido: fila, paginação e retentativa. Por que do while roda ao menos uma vez e como um laço congela a aba inteira.testado

Funções

  1. 24FunçõesDeclaração, expressão, arrow function, hoisting, callback, parâmetro default e rest — com código executado no Node e os erros que cada um provoca.testado
  2. 25Parâmetros e retornoJavaScript não confere quantos argumentos você passou. Veja parâmetro padrão, rest, o objeto arguments e o return que devolve undefined sem avisar ninguém.testado
  3. 26Expression e IIFEAs duas formas de criar função em JavaScript não são intercambiáveis: hoisting, nome na stack trace e IIFE, com o erro de cada escolha rodando no Node 24.testado
  4. 27Arrow functionsA arrow function é curta, mas abriu mão de this, arguments, prototype e new. Cada ausência explicada com código executado no Node e o erro que ela provoca.testado
  5. 28CallbacksCallback é a função que você passa sem os parênteses para outra chamar depois. De forEach a setTimeout, com o erro dos parênteses a mais reproduzido no Node.testado

Escopo e contexto

  1. 29EscopoEscopo léxico, cadeia de escopos, sombreamento e a variável global criada sem querer — os três níveis com código executado no Node e o erro de cada um.testado
  2. 30Hoistingvar vira undefined, function sobe inteira, let e class caem na zona morta temporal. Os quatro comportamentos de hoisting com o erro real de cada um.testado
  3. 31ClosuresA função lembra o escopo onde nasceu. Contador privado, fábrica de funções e o laço com var que imprime 3,3,3 — tudo executado no Node com a saída real.testado
  4. 32this, bind e callO this é definido na chamada, não na declaração. As quatro regras, a perda de contexto em callback e a diferença de bind, call e apply, com saída real.testado

Arrays

  1. 33ArraysArray em JavaScript é um objeto com chaves numéricas — por isso typeof devolve object, existem buracos e índice fora do range volta undefined, não erro.testado
  2. 34Adicionar e removerpush, pop, shift, unshift e splice mudam o array original mesmo declarado com const — e por que delete deixa buraco. Com toSpliced e with, do ES2023.testado
  3. 35Percorrerfor...of itera valores, for...in itera chaves e pega as herdadas, e forEach não aceita break nem continue. Qual laço usar em cada caso, com saída real.testado
  4. 36map, filter e reducemap devolve um array do mesmo tamanho, filter devolve menos ou igual e reduce devolve qualquer coisa. Com os dois erros que cada um provoca no Node.testado
  5. 37Buscar elementofind devolve o elemento, findIndex o índice e filter um array. Veja também por que indexOf não acha objeto igual nem NaN, com saída real no Node.testado
  6. 38Ordenar com sortPor que sort() sem comparador devolve 1, 10, 2 e como corrigir com subtração, toSorted sem mutar o original e localeCompare para acentos em pt-BR.testado
  7. 39Array de objetosReceitas de array de objetos: somar com reduce, filtrar por propriedade, agrupar com Object.groupBy e achar duplicado — tudo executado no Node 24.testado

Objetos

  1. 40ObjetosNotação de ponto contra colchetes, chave dinâmica, chave computada, shorthand e delete — com o SyntaxError que a chave numérica provoca no Node.testado
  2. 41Percorrer objetoObjeto não é iterável e quebra no for-of. Veja for-in, Object.keys, values e entries, hasOwn e a ordem real das chaves, com saída no Node 24.16.0.testado
  3. 42Spread e restDesestruturar objeto por nome e array por posição, renomear, dar valor padrão e usar os três pontos dos dois lados do igual — com saída real no Node 24.testado
  4. 43Optional chainingComo o operador ?. devolve undefined em vez de quebrar, as versões para índice e chamada, e por que ?? não é a mesma coisa que || — com saída real no Node.testado
  5. 44JSONAs regras que o JSON não perdoa, o que o stringify descarta em silêncio e como ler os dois erros mais comuns: token < inesperado e estrutura circular.testado
  6. 45DatasPor que getMonth devolve 2 em março, por que a data ISO volta um dia no fuso de Brasília e como formatar em dd/mm/aaaa sem cair no Invalid Date.testado
  7. 46ClassesConstructor, campo privado com cerquilha, getter, setter e static — e por que class é açúcar sintático sobre protótipos, com os erros reais no Node 24.testado
  8. 47Herança e prototypeA herança do JavaScript é prototipal, não baseada em classes. Veja a cadeia impressa, por que super vem antes de this e onde o instanceof mente.testado

Assíncrono

  1. 48Event loopUma thread, uma pilha e duas filas: por que um laço longo congela a página e em que ordem síncrono, microtask e macrotask realmente saem no console.testado
  2. 49TimersO atraso que você pede é o mínimo, nunca o exato. Como agendar, cancelar e medir timers em JavaScript sem vazar intervalo nem congelar a interface.testado
  3. 50PromisesOs três estados de uma Promise, por que then sempre devolve outra Promise e o return esquecido que quebra a cadeia — com cada saída rodada no Node 24.testado
  4. 51async e awaitasync devolve Promise, await só vive dentro dela, e trocar série por paralelo corta o tempo em três — com medições reais e o erro do forEach que não espera.testado
  5. 52Fetch APIfetch não rejeita em erro HTTP, o corpo é uma segunda Promise e só pode ser lido uma vez. GET, POST, CORS e AbortController com respostas reais do Node.testado
  6. 53Promise.allQuatro formas de combinar Promises e o que muda entre elas: fail-fast, relatório completo, primeira resposta — com o tempo medido em requisições de verdade.testado

DOM

  1. 54O que é o DOMO DOM é a árvore de objetos que o navegador monta a partir do HTML. Entenda document, window, nós e por que nada disso existe quando você roda no Node.testado
  2. 55Selecionar elementosComo achar um elemento na página com querySelector, getElementById e querySelectorAll — e por que HTMLCollection viva quebra o seu laço de remoção.testado
  3. 56Alterar HTMLComo trocar o conteúdo de um elemento com textContent, innerHTML e insertAdjacentHTML — com o XSS reproduzido e a medição do custo de concatenar.testado
  4. 57Alterar CSSComo aplicar estilo pelo JavaScript com classList e element.style, por que getComputedStyle existe e o motivo de uma largura sem unidade falhar calada.testado
  5. 58Criar elementosComo criar elementos com createElement, inserir com append e prepend, remover com remove e clonar um template — com a medição real do DocumentFragment.testado

Eventos

  1. 59addEventListenerComo escutar clique com addEventListener, empilhar mais de um listener, usar once e passive e remover o listener certo — com a saída real de cada clique.testado
  2. 60Objeto eventO parâmetro event que o navegador entrega sozinho, a diferença entre target e currentTarget, as três fases do evento e delegação com saída real de cada uma.testado
  3. 61Valor de inputvalue é sempre string, checked resolve checkbox e radio, files carrega upload e valueAsNumber evita a concatenação — cada caso com a saída real no terminal.testado
  4. 62Validar formulárioSubmit com preventDefault, checkValidity, o objeto validity e setCustomValidity para regras próprias — com o motivo real de cada campo inválido no terminal.testado

Navegador

  1. 63localStoragelocalStorage guarda só string, é síncrono e devolve null em chave inexistente — com JSON.stringify, o limite de 5MB e o erro de salvar objeto sem converter.testado
  2. 64window.locationhref, assign, replace e reload, mais URLSearchParams para ler a query string — com a URL real a cada passo e o laço de redirecionamento infinito reproduzido.testado

Erros e depuração

  1. 65try e catchComo o try/catch funciona, por que ele não pega erro dentro de setTimeout, o que finally faz com o return e como usar Error.cause — tudo rodado no Node.testado
  2. 66Tipos de erroOs sete erros nativos da linguagem, o que cada mensagem quer dizer e como ler uma stack trace de cima para baixo — com cada erro reproduzido no Node 24.testado
  3. 67Depurar no DevToolsBreakpoint, breakpoint condicional, watch, call stack e step into/over/out no painel Sources — com o bug reproduzido e o console usado além do log.testado

Avançado

  1. 68MódulosNamed e default export, live bindings, escopo de módulo e por que ES Modules não abrem em file:// — com os dois erros que travam todo mundo reproduzidos.testado
  2. 69RegexLiteral e new RegExp, grupos nomeados, matchAll e a armadilha da flag global que faz o test alternar entre true e false a cada chamada — tudo executado.testado