Pular para o conteúdo

Trilhas

Comece com JavaScript do zero, a trilha gratuita. Libere as outras trilhas e os projetos com o Pro.

JavaScript do zero10 lições · 63 exercíciosGratuita

Para quem nunca programou. Do primeiro console.log até funções, decisões e laços, sempre escrevendo e rodando código.

Ver página da trilha

Ao terminar, você consegue…

  • Criar funções que recebem valores e devolvem resultados.
  • Combinar decisões e repetições para resolver problemas.
  • Testar sua lógica com situações diferentes.

Minha caixa de ferramentas de lógica

Reúna funções para resolver pequenos problemas com números e textos.

Conhecer o projeto prático · Pro

Trilha gratuita

Primeiros passos

  1. Mostrando algo na telaSeu primeiro comando: console.log.
  2. Guardando valoresVariáveis com const e let.
  3. Fazendo contasOperadores de soma, subtração, multiplicação, divisão e resto.
  4. Trabalhando com textosJuntar textos, template literals, length e toUpperCase.

Funções

  1. Criando funçõesUm bloco de código com nome, que recebe valores e devolve um resultado.

Decisões

  1. Tomando decisõesif, else e else if.
  2. Combinando condiçõesOs operadores && (e), || (ou) e ! (não).

Repetição

  1. Repetindo com forO laço for e como acumular um resultado.
  2. Repetindo com whileRepetir enquanto uma condição for verdadeira.

Desafio final

  1. Desafio: problemas clássicosCinco problemas famosos de lógica, resolvidos com o que você já sabe.
Listas e objetos6 lições · 42 exercíciosPro

Para quem já sabe fazer funções e laços. Como guardar várias coisas juntas: listas, objetos e as ferramentas para trabalhar com eles.

Ver página da trilha

Ao terminar, você consegue…

  • Representar produtos com listas e objetos.
  • Filtrar, transformar e atualizar dados sem perder os originais.
  • Montar um relatório útil a partir dos produtos.

O estoque da minha loja

Calcule o valor do estoque, encontre produtos em falta e prepare um relatório.

Conhecer o projeto prático · Pro

Pro · assine para liberar as lições

Listas

  1. Guardando vários valoresListas (arrays), posições e push.Pro
  2. Percorrendo uma listaO laço for...of e como calcular uma média.Pro
  3. Transformando e filtrandomap, filter e funções seta.Pro

Objetos

  1. Guardando valores com nomeObjetos, propriedades e funções que devolvem objetos.Pro
  2. Listas de objetosJuntando listas e objetos, como em um carrinho de compras.Pro

Desafio final

  1. Desafio: o estoque da lojinhaJunte listas, objetos, for...of, filter e map num estoque de verdade.Pro
Listas e textos de verdade8 lições · 57 exercíciosPro

Para quem já passou pelos fundamentos. As ferramentas que quem programa usa todo dia: métodos de texto, find, reduce, sort, desestruturação e escopo.

Ver página da trilha

Ao terminar, você consegue…

  • Limpar e padronizar textos recebidos.
  • Agrupar pontuações e ordenar um ranking.
  • Combinar funções em uma sequência que produz um relatório.

Ranking do meu jogo

Transforme pontuações bagunçadas em um placar organizado por jogador.

Conhecer o projeto prático · Pro

Pro · assine para liberar as lições

Textos

  1. Ferramentas dos textostrim, toLowerCase, includes, slice e replaceAll.Pro
  2. Quebrando e juntando textossplit, join e reverse.Pro

Listas de verdade

  1. Procurando em listasfind, findIndex, some e every.Pro
  2. Juntando tudo num valor sóreduce e o acumulador.Pro
  3. Desmontando e copiandoDesestruturação, valores padrão e o operador ... (spread).Pro
  4. Ordenando listassort, a função de comparação e como não mexer na original.Pro

Funções por dentro

  1. Onde cada variável valeEscopo de função e de bloco, e funções que lembram valores (closures).Pro

Desafio final

  1. Desafio: o ranking do jogoTextos, reduce, sort e map juntos, para montar o ranking de um jogo.Pro
Erros e código assíncrono6 lições · 43 exercíciosPro

Para quem já domina listas e funções. Como lidar com o que dá errado (try/catch, throw) e com o que demora (temporizadores, promessas, async/await).

Ver página da trilha

Ao terminar, você consegue…

  • Carregar dados em paralelo sem interromper tudo por uma falha.
  • Usar promessas e async/await com tratamento de erros.
  • Adicionar novas tentativas, cache e um relatório de carregamento.

Meu carregador de dados

Simule buscas, trate falhas, tente novamente e evite pedidos repetidos.

Conhecer o projeto prático · Pro

Pro · assine para liberar as lições

Lidando com erros

  1. Quando algo dá erradotry, catch e finally.Pro
  2. Avisando que algo está erradothrow new Error e a validação de valores.Pro

Código que espera

  1. Esperando um poucosetTimeout, setInterval e funções de retorno (callbacks).Pro
  2. PromessasPromise, then, catch e Promise.all.Pro
  3. async e awaitEscrever código que espera com a cara de código normal.Pro

Desafio final

  1. Desafio: o carregador de dadosPromessas, async/await, erros e temporizadores juntos, num carregador que não desiste.Pro
DOM e eventos8 lições · 8 exercíciosPro

Transforme JavaScript em páginas interativas. Edite HTML, CSS e JS, veja o resultado e construa uma lista de tarefas. Para quem já conhece funções, listas e decisões.

Ver página da trilha

Pro · assine para liberar as lições

Conhecendo a página

  1. Encontre um elemento na páginaO DOM, document e querySelector.Pro
  2. Uma mudança em vários elementosquerySelectorAll e iteração sobre elementos.Pro
  3. Textos, estilos e atributosstyle e setAttribute para mudar a interface.Pro
  4. A aparência muda com classesclassList.add, remove e toggle.Pro
  5. Crie e adicione elementoscreateElement, textContent e append.Pro

Páginas que respondem

  1. Responda aos cliquesaddEventListener e estado da interface.Pro
  2. Leia e valide um formuláriosubmit, preventDefault, value e trim.Pro

Desafio final

  1. Construa sua lista de tarefasUm pequeno aplicativo com formulário, elementos e eventos.Pro