Roadmap Js

🧠 Roadmap Diário de Estudo – JavaScript Moderno

🗓️ Duração: 21 dias (3 semanas) 📌 Tempo sugerido por dia: 30 a 60 minutos
⸻
✅ Semana 1 – Fundamentos e Sintaxe Base
⸻
📅 Dia 1: Introdução + Variáveis e Tipos de Dados
• var, let, const: diferenças
• Tipos primitivos: string, number, boolean, undefined, null
• Operadores aritméticos e lógicos: +, -, *, /, ==, ===, !=, >, <
Exercício:
• Criar 3 variáveis: nome, idade e status de estudante.
• Exibir no console.log com uma frase formatada.
⸻
📅 Dia 2: Condicionais
• if, else, else if
• Operador ternário
• Boas práticas: evitar lógica aninhada demais
Exercício:
• Criar um programa que diga se uma pessoa pode dirigir baseado na idade.
⸻
📅 Dia 3: Loops
• for, while, do...while
• break e continue
• Diferença entre eles
Exercício:
• Criar uma tabuada do 5 com for
⸻
📅 Dia 4: Arrays
• Criar arrays e acessar itens
• Métodos principais: push, pop, shift, unshift, length
Exercício:
• Criar um array com nomes e exibir todos com for
⸻
📅 Dia 5: Objetos
• Criar objetos com chaves e valores
• Acessar e modificar propriedades
• Objetos dentro de arrays e vice-versa
Exercício:
• Criar um objeto usuario com nome, idade e uma lista de tecnologias que ele usa
⸻
📅 Dia 6: Funções
• Declaração e expressão
• Parâmetros e retorno
• Arrow functions
Exercício:
• Criar uma função que receba dois números e retorne a média
⸻
📅 Dia 7: Revisão + Projeto simples
• Criar um mini sistema de cadastro de alunos (array de objetos)
• Comandos: adicionar aluno, listar, buscar por nome
⸻
🧪 Semana 2 – JavaScript Moderno e DOM
⸻
📅 Dia 8: Arrays avançado
• map, filter, reduce, find, some, every
Exercício:
• Criar um array de produtos e usar map e filter para gerar um resumo
⸻
📅 Dia 9: Manipulando o DOM (HTML + JS)
• document.querySelector, getElementById, innerText, innerHTML, value
• Eventos: onclick, oninput, addEventListener
Exercício:
• Criar um botão que altera o texto de uma div ao ser clicado
⸻
📅 Dia 10: Eventos e Formulários
• Capturar dados do usuário
• Validar input
• Prevenir comportamento padrão
Exercício:
• Criar um formulário que exibe o nome digitado na tela
⸻
📅 Dia 11: Manipulação de classes e estilos
• classList.add, remove, toggle
• Alterar estilo com style
Exercício:
• Criar botão modo claro/escuro
⸻
📅 Dia 12: Temporizadores
• setTimeout, setInterval
• clearInterval
Exercício:
• Criar cronômetro que começa ao clicar em um botão
⸻
📅 Dia 13: Armazenamento local
• localStorage, sessionStorage
• Armazenar e recuperar dados
Exercício:
• Criar um contador de visitas usando localStorage
⸻
📅 Dia 14: Revisão + Mini projeto
Criar uma ToDo List com:
• Adição de tarefas
• Marcar como feita
• Remover
• Salvar tarefas no localStorage
⸻
🔄 Semana 3 – JS Assíncrono, Módulos e APIs
⸻
📅 Dia 15: Funções de alta ordem + Callbacks
• O que é uma função que recebe outra
• Criar callback personalizado
⸻
📅 Dia 16: Promises
• .then, .catch, .finally
• Promessa resolvida e rejeitada
• Boas práticas
⸻
📅 Dia 17: Async/Await
• Criar funções assíncronas
• Comparar com Promises
• Tratamento de erros com try/catch
Exercício:
• Criar função async que simula uma busca de dados com setTimeout
⸻
📅 Dia 18: Requisições HTTP
• fetch, axios
• Métodos GET, POST
• Cabeçalhos e JSON
Exercício:
• Fazer requisição para a API https://jsonplaceholder.typicode.com/users e exibir os nomes
⸻
📅 Dia 19: Módulos ES6
• import e export
• Separar lógicas em arquivos
• Boa organização
⸻
📅 Dia 20: Tratamento de erros e debugging
• try/catch
• throw
• console.log, console.error, debugger
⸻
📅 Dia 21: Revisão + Projeto final
Criar um sistema de busca de usuários
• Campo para digitar nome
• Botão de busca
• Consumir API externa
• Exibir nome, e-mail e empresa