Introdução ao Desenvolvimento de Sistemas com

JavaScript
JavaScript é uma das linguagens mais populares e versáteis da atualidade. Ele é
utilizado para construir desde sites interativos até aplicativos complexos e sistemas
backend. Vamos explorar conceitos fundamentais e, em seguida, montar um plano de
30 dias para que você se torne um especialista em desenvolvimento com JavaScript.

Conceitos Importantes

1. Sintaxe Básica e Fundamentos

Entenda variáveis, tipos de dados, operadores, loops e funções. Esses são os
blocos de construção do JavaScript.

Exemplo:

let name = "João";

console.log(`Olá, ${name}!`);

2. DOM (Document Object Model)

Permite manipular elementos HTML e criar interatividade em páginas web.

Exemplo:

document.getElementById("botao").addEventListener("click", function() {

alert("Botão clicado!");

});

3. Eventos e Manipulação
Trabalhe com cliques, teclado, mouse, e outros eventos.

4. Programação Assíncrona (Promises e Async/Await)

Essencial para operações como buscar dados de uma API.

Exemplo:

fetch('https://api.example.com/data')

.then(response => response.json())

.then(data => console.log(data))

.catch(error => console.error(error));

5. ES6+ (Modern JavaScript)

Inclui funcionalidades como classes, arrow functions e destruturação.

Exemplo:

const [a, b] = [1, 2];

console.log(a, b); // 1 2
 6. Desenvolvimento Backend com Node.js
Use JavaScript para construir servidores e APIs.

7. Frameworks Frontend (React, Vue, Angular)

Escolha frameworks para criar interfaces ricas e dinâmicas.

8. Testes Automatizados
Garanta que seu código funcione conforme esperado usando testes.

9. Gerenciamento de Estado (Redux, Context API)

Essencial em aplicações maiores para gerenciar dados compartilhados.

Plano de 30 Dias: Desenvolvimento com JavaScript

Estrutura

 Semana 1: Fundamentos de JavaScript

 Semana 2: Interatividade e DOM

 Semana 3: Programação Assíncrona e Backend com Node.js

 Semana 4: Projeto Final e Frameworks Frontend

Semana 1: Fundamentos do JavaScript

Dia 1: Sintaxe Básica

Objetivo: Entender variáveis, operadores e funções.

 Crie um programa que calcule o dobro de um número.

 Estude let, const, if-else, for e while.

Dia 2: Arrays e Objetos

Objetivo: Trabalhar com coleções de dados.

 Crie uma lista de tarefas e adicione/remova itens dinamicamente.

Exemplo:

let tasks = ["Comprar pão", "Estudar JavaScript"];

tasks.push("Fazer exercícios");

console.log(tasks);

Dia 3: Funções e Escopos

Objetivo: Escreva funções e entenda o escopo.

 Crie uma função que retorna o nome completo de uma pessoa.

Exemplo:

function nomeCompleto(nome, sobrenome) {

return `${nome} ${sobrenome}`;

console.log(nomeCompleto("João", "Silva"));

Dia 4: Arrow Functions e ES6

Objetivo: Trabalhe com funções modernas.

 Reescreva funções com a sintaxe de arrow functions.

Exemplo:

const somar = (a, b) => a + b;

console.log(somar(3, 4)); // 7

Dia 5: Classes e Prototipagem

Objetivo: Crie classes e entenda herança.

 Crie uma classe Carro e instancie objetos.

Exemplo:

class Carro {

constructor(marca, modelo) {

this.marca = marca;

this.modelo = modelo;

detalhes() {

return `${this.marca} ${this.modelo}`;

let carro = new Carro("Toyota", "Corolla");

console.log(carro.detalhes());

Dia 6: Manipulação de Strings e Datas

Objetivo: Use métodos para trabalhar com strings e datas.

 Formate datas para "DD/MM/AAAA".

Dia 7: Mini-Projeto: Calculadora

 Construa uma calculadora simples que permita ao usuário realizar operações

básicas.

Esse é o plano inicial para a primeira semana. Caso queira, posso detalhar as semanas
seguintes, indo desde a manipulação do DOM até a construção do projeto final. O que
acha?

4o

Você disse:

Seguindo sua indicação gere material de estudos com explicação, exemplos e desafios
práticos para a primeira semana de estudos, relativo aos fundamentos de JavaScript.

O ChatGPT disse:

ChatGPT

Semana 1: Fundamentos de JavaScript

Nesta semana, você aprenderá os fundamentos do JavaScript. Vamos abordar

conceitos como variáveis, funções, estruturas de controle e manipulação de dados.

Dia 1: Sintaxe Básica e Operadores

Explicação

O JavaScript é uma linguagem de programação de fácil aprendizado. Ele usa variáveis,

operadores e estruturas de controle para realizar cálculos e lógicas simples.

Conceitos-Chave:

1. Variáveis: Declaradas com var, let ou const.

o let e const são preferidos por serem mais seguros.

let nome = "João";

const idade = 30;

2. Tipos de Dados: Incluem string, number, boolean, array, object, etc.

let ativo = true; // booleano

let preco = 19.99; // número

3. Operadores: Para cálculos (+, -, *, /) e comparações (===, !==, >, <).

let resultado = 10 + 5; // 15
Exemplo

let a = 10;

let b = 5;

console.log(`A soma de ${a} e ${b} é ${a + b}`); // A soma de 10 e 5 é 15

Desafio do Dia

1. Crie variáveis para armazenar seu nome, idade e cidade.

2. Faça um programa que calcule a soma de dois números e exiba o resultado.

Dia 2: Arrays e Objetos

Explicação

 Arrays: Armazenam listas de itens.

let frutas = ["Maçã", "Banana", "Laranja"];

console.log(frutas[0]); // Maçã

 Objetos: Estruturas que armazenam dados com chave e valor.

let pessoa = { nome: "João", idade: 25 };

console.log(pessoa.nome); // João

Exemplo

let livros = ["JS para Iniciantes", "HTML5 e CSS3"];

livros.push("Node.js Essentials");

console.log(livros); // Adiciona um livro à lista

Desafio do Dia

1. Crie um array com 5 filmes favoritos.

2. Crie um objeto para armazenar informações sobre você (nome, idade, hobby
favorito) e exiba os valores.

Dia 3: Funções

Explicação

Funções ajudam a organizar o código, tornando-o mais reutilizável.

1. Declaração de Funções

function saudacao(nome) {

return `Olá, ${nome}!`;

}
 console.log(saudacao("Maria")); // Olá, Maria!

2. Parâmetros e Retornos

function soma(a, b) {

return a + b;

console.log(soma(3, 7)); // 10

Desafio do Dia

1. Crie uma função que receba dois números como parâmetros e retorne a soma.

2. Faça uma função que exiba "Bom dia, [nome]" onde o nome é passado como
argumento.

Dia 4: Condicionais e Loops

Explicação

 Condicionais (if/else): Executam diferentes códigos com base em condições.

let idade = 20;

if (idade >= 18) {

console.log("Maior de idade");

} else {

console.log("Menor de idade");

 Loops (for/while): Repetem um bloco de código.

for (let i = 0; i < 5; i++) {

console.log(i); // 0, 1, 2, 3, 4

Desafio do Dia

1. Crie um programa que verifique se uma pessoa é maior ou menor de idade.

2. Faça um loop que exiba os números de 1 a 10 no console.

Dia 5: Arrow Functions e ES6

Explicação

1. Arrow Functions: Uma maneira mais curta de declarar funções.

 const somar = (a, b) => a + b;

console.log(somar(2, 3)); // 5

2. Template Literals: Concatene strings usando crases `` e ${}.

const nome = "Carlos";

console.log(`Bem-vindo, ${nome}!`);

3. Destructuring: Extraia valores de arrays ou objetos.

const [x, y] = [10, 20];

console.log(x, y); // 10 20

Desafio do Dia

1. Reescreva uma função usando arrow functions.

2. Use destructuring para obter o primeiro item de um array de frutas.

Dia 6: Manipulação de Strings e Datas

Explicação

 Métodos de Strings

let texto = "JavaScript é incrível!";

console.log(texto.toUpperCase()); // JAVASCRIPT É INCRÍVEL!

 Manipulação de Datas

let hoje = new Date();

console.log(hoje.toLocaleDateString()); // Exibe a data atual

Desafio do Dia

1. Crie um programa que converta uma frase para maiúsculas e minúsculas.

2. Exiba a data atual formatada no estilo "DD/MM/AAAA".

Dia 7: Mini-Projeto: Calculadora

Objetivo

Construa uma calculadora que:

1. Aceite dois números e uma operação (+, -, *, /).

2. Exiba o resultado no console.

Exemplo

function calculadora(a, b, operacao) {

switch (operacao) {
 case "+":

return a + b;

case "-":

return a - b;

case "*":

return a * b;

case "/":

return a / b;

default:

return "Operação inválida";

console.log(calculadora(5, 3, "+")); // 8

Desafio do Dia

Implemente a calculadora acima e permita que o usuário insira os valores e a

operação.
Semana 2: Interatividade e Manipulação do DOM

Na segunda semana, você aprenderá a criar páginas interativas utilizando JavaScript

para manipular o DOM (Document Object Model). O DOM permite acessar e
modificar elementos HTML e CSS dinamicamente.

Dia 8: Introdução ao DOM

Explicação

O DOM é uma representação estruturada da página web. Com ele, você pode acessar
elementos HTML e manipulá-los.

1. Selecionando Elementos

o getElementById: Seleciona um elemento pelo ID.

o querySelector: Seleciona um elemento com seletor CSS.

Exemplo:

let titulo = document.getElementById("titulo");

let paragrafo = document.querySelector(".descricao");

2. Alterando Conteúdo

o Use innerHTML ou textContent para modificar textos ou HTML.

titulo.textContent = "Novo Título!";

Exemplo

html

<h1 id="titulo">Bem-vindo!</h1>

<script>

document.getElementById("titulo").textContent = "Olá, Mundo!";

</script>

Desafio do Dia

1. Crie um HTML com um título e um parágrafo. Use JavaScript para alterar o texto
de ambos.

2. Adicione um elemento com ID meuBotao e use JavaScript para alterá-lo.

Dia 9: Eventos no DOM

Explicação

Eventos são ações como cliques, movimentos de mouse ou teclas pressionadas.

1. Adicionando Eventos
 o Use addEventListener para vincular uma função a um evento.

let botao = document.querySelector("#botao");

botao.addEventListener("click", function () {

alert("Botão clicado!");

});

2. Tipos Comuns de Eventos

o click: Disparado ao clicar.

o mouseover: Disparado ao passar o mouse.

o keyup: Disparado ao soltar uma tecla.

Exemplo

html

<button id="meuBotao">Clique Aqui</button>

<script>

document.getElementById("meuBotao").addEventListener("click", () => {

alert("Você clicou!");

});

</script>

Desafio do Dia

1. Adicione um botão à página que exibe uma mensagem de alerta ao ser clicado.

2. Crie um evento que altera o texto de um parágrafo ao passar o mouse sobre ele.

Dia 10: Alterando Estilos com JavaScript

Explicação

Você pode alterar estilos de elementos dinamicamente usando a propriedade style.

1. Alterando Propriedades de CSS

o Altere estilos como color, backgroundColor, fontSize, etc.

let titulo = document.querySelector("h1");

titulo.style.color = "blue";

titulo.style.fontSize = "24px";

2. Classes CSS Dinâmicas

o Adicione ou remova classes com classList.

titulo.classList.add("ativo");
 titulo.classList.remove("inativo");

Exemplo

html

<h1 id="titulo">Texto Estilizado</h1>

<button id="botao">Mudar Cor</button>

<script>

let titulo = document.getElementById("titulo");

document.getElementById("botao").addEventListener("click", () => {

titulo.style.color = "red";

});

</script>

Desafio do Dia

1. Crie um botão que altere a cor de fundo de um elemento ao ser clicado.

2. Adicione e remova uma classe CSS de um elemento ao clicar em outro botão.

Dia 11: Criando e Removendo Elementos no DOM

Explicação

Você pode criar e remover elementos HTML dinamicamente usando JavaScript.

1. Criar Elementos

o Use createElement e appendChild para adicionar novos elementos.

let novoParagrafo = document.createElement("p");

novoParagrafo.textContent = "Este é um novo parágrafo.";

document.body.appendChild(novoParagrafo);

2. Remover Elementos

o Use removeChild ou remove para excluir elementos.

let titulo = document.querySelector("#titulo");

titulo.remove();

Exemplo

html
 <button id="adicionar">Adicionar Parágrafo</button>

<script>

document.getElementById("adicionar").addEventListener("click", () => {

let paragrafo = document.createElement("p");

paragrafo.textContent = "Novo conteúdo adicionado!";

document.body.appendChild(paragrafo);

});

</script>

Desafio do Dia

1. Crie um botão que adicione um novo parágrafo à página.

2. Crie outro botão que remova um elemento existente.

Dia 12: Navegando no DOM

Explicação

O DOM permite acessar elementos relacionados como pais, filhos e irmãos.

1. Propriedades Principais

o parentElement: Retorna o pai de um elemento.

o children: Retorna uma coleção de filhos.

o nextElementSibling: Retorna o próximo irmão.

Exemplo:

let lista = document.querySelector("ul");

console.log(lista.children[0]); // Primeiro item da lista

2. Iterando sobre Elementos

let itens = lista.children;

for (let item of itens) {

console.log(item.textContent);

Desafio do Dia

1. Exiba no console todos os itens de uma lista HTML.

2. Alterne o estilo de cada item da lista para cores diferentes (exemplo: alternar
entre azul e vermelho).
Dia 13: Validação Simples de Formulários

Explicação

Você pode validar dados do usuário com JavaScript antes de enviá-los.

1. Obtendo Valores

o Use value para acessar o texto digitado em um campo.

let nome = document.getElementById("nome").value;

2. Verificando Dados

o Valide se o campo está vazio antes de enviar.

if (nome === "") {

alert("O campo nome é obrigatório!");

Exemplo

html

<form id="meuForm">

<input id="nome" type="text" placeholder="Digite seu nome">

<button type="submit">Enviar</button>

</form>

<script>

document.getElementById("meuForm").addEventListener("submit", (event)
=> {

event.preventDefault();

let nome = document.getElementById("nome").value;

if (nome === "") {

alert("Preencha o nome!");

} else {

alert(`Olá, ${nome}!`);

});

</script>

Desafio do Dia
 1. Crie um formulário com um campo de texto e botão de envio. Exiba um alerta se
o campo estiver vazio.

2. Valide que um campo de email tenha "@" no texto digitado.

Dia 14: Mini-Projeto: Lista de Tarefas

Objetivo

Crie uma lista de tarefas interativa onde o usuário possa:

1. Adicionar novas tarefas.

2. Remover tarefas existentes.

3. Marcar tarefas como concluídas.

Exemplo

html

<ul id="tarefas"></ul>

<input id="novaTarefa" type="text" placeholder="Digite uma nova tarefa">

<button id="adicionarTarefa">Adicionar</button>

<script>

let lista = document.getElementById("tarefas");

document.getElementById("adicionarTarefa").addEventListener("click", () => {

let novaTarefa = document.getElementById("novaTarefa").value;

if (novaTarefa.trim() !== "") {

let item = document.createElement("li");

item.textContent = novaTarefa;

item.addEventListener("click", () => item.classList.toggle("concluida"));

lista.appendChild(item);

});

</script>

<style>

.concluida {

text-decoration: line-through;

color: gray;

}
 </style>

Desafio do Dia

Implemente a lista de tarefas e permita que o usuário remova itens ao clicar em um

botão de exclusão ao lado da tarefa.
Semana 3: Programação Assíncrona e Backend com Node.js

Na terceira semana, você aprenderá a trabalhar com programação assíncrona em

JavaScript e terá seu primeiro contato com Node.js, uma plataforma de execução de
JavaScript no lado do servidor.

Dia 15: Introdução à Programação Assíncrona

Explicação

A programação assíncrona permite executar tarefas que podem demorar (como

carregar dados da internet) sem bloquear o restante do programa.

1. Callback: Uma função passada como argumento para outra função.

function saudacao(nome, callback) {

console.log(`Olá, ${nome}`);

callback();

saudacao("João", () => {

console.log("Bem-vindo!");

});

2. Promises: Representam um valor que pode estar disponível agora, no futuro ou

nunca.

let promessa = new Promise((resolve, reject) => {

let sucesso = true;

if (sucesso) resolve("Tudo certo!");

else reject("Algo deu errado.");

});

promessa

.then((resposta) => console.log(resposta))

.catch((erro) => console.error(erro));

Desafio do Dia

1. Crie uma função que receba um callback para exibir uma mensagem após uma
saudação.

2. Implemente uma promise que simule um carregamento com sucesso ou erro.

Dia 16: Async/Await

Explicação

Async/Await é uma forma mais simples de lidar com operações assíncronas.

1. Funções async e await

Uma função async sempre retorna uma promise. Dentro dela, você pode usar
await para esperar que uma promise seja resolvida.

async function carregarDados() {

let dados = await fetch("https://jsonplaceholder.typicode.com/posts");

let json = await dados.json();

console.log(json);

carregarDados();

2. Tratamento de Erros com Try/Catch

async function carregarDados() {

try {

let dados = await fetch("https://jsonplaceholder.typicode.com/posts");

let json = await dados.json();

console.log(json);

} catch (erro) {

console.error("Erro ao carregar dados:", erro);

Desafio do Dia

1. Crie uma função assíncrona que simule uma API de consulta de dados.

2. Use fetch para obter dados de uma API pública e exibi-los no console.

Dia 17: Introdução ao Node.js

Explicação
O Node.js permite executar JavaScript fora do navegador. É amplamente utilizado
para backend.

1. Instalação e Primeiros Passos

o Instale o Node.js: https://nodejs.org/

o Verifique a instalação:

bash

Copiar código

node -v

2. Primeiro Programa com Node.js

o Crie um arquivo app.js e execute com node app.js.

javascript

Copiar código

console.log("Olá, Node.js!");

3. Módulo fs para Manipular Arquivos

const fs = require("fs");

fs.writeFileSync("mensagem.txt", "Olá, Mundo!");

console.log("Arquivo criado.");

Desafio do Dia

1. Crie um programa no Node.js que exiba "Bem-vindo ao Node.js".

2. Use o módulo fs para criar um arquivo com uma mensagem.

Dia 18: Criando um Servidor HTTP com Node.js

Explicação

Com Node.js, você pode criar um servidor HTTP básico.

1. Módulo http

const http = require("http");

const servidor = http.createServer((req, res) => {

res.writeHead(200, { "Content-Type": "text/plain" });

res.end("Bem-vindo ao meu servidor Node.js!");

});
 servidor.listen(3000, () => {

console.log("Servidor rodando em http://localhost:3000");

});

2. Resposta com HTML

res.writeHead(200, { "Content-Type": "text/html" });

res.end("<h1>Meu Servidor Node.js</h1>");

Desafio do Dia

1. Crie um servidor HTTP básico que exiba "Olá, Mundo!".

2. Modifique o servidor para exibir uma página HTML simples.

Dia 19: Trabalhando com o NPM

Explicação

O NPM (Node Package Manager) gerencia pacotes de bibliotecas para projetos

Node.js.

1. Iniciando um Projeto

bash

npm init -y

2. Instalando Pacotes

o Use npm install <nome-do-pacote> para instalar pacotes.

bash

npm install express

3. Utilizando Pacotes

const express = require("express");

const app = express();

app.get("/", (req, res) => {

res.send("Olá, Express!");

});

app.listen(3000, () => {

console.log("Servidor rodando em http://localhost:3000");

});
Desafio do Dia

1. Inicie um projeto Node.js com NPM.

2. Instale o pacote chalk e use-o para exibir mensagens coloridas no console.

Dia 20: Criando uma API REST com Node.js

Explicação

Uma API REST permite que aplicações se comuniquem entre si.

1. Criando Rotas com Express

const express = require("express");

const app = express();

app.use(express.json());

app.get("/api", (req, res) => {

res.json({ mensagem: "Bem-vindo à API!" });

});

app.listen(3000, () => console.log("API rodando em http://localhost:3000/api"));

2. Rotas de CRUD

o GET: Obter dados.

o POST: Criar novos dados.

o PUT: Atualizar dados.

o DELETE: Remover dados.

Desafio do Dia

1. Crie uma API com uma rota /api que retorne uma mensagem JSON.

2. Adicione uma rota para adicionar e listar itens de uma lista.

Dia 21: Mini-Projeto: Gerenciador de Tarefas com Node.js

Objetivo

Crie uma API para gerenciar tarefas com as seguintes funcionalidades:

 1. Listar tarefas: Retorna todas as tarefas.

2. Adicionar tarefa: Adiciona uma nova tarefa.

3. Remover tarefa: Remove uma tarefa pelo ID.

Exemplo

const express = require("express");

const app = express();

app.use(express.json());

let tarefas = [];

app.get("/tarefas", (req, res) => res.json(tarefas));

app.post("/tarefas", (req, res) => {

const { titulo } = req.body;

const novaTarefa = { id: Date.now(), titulo };

tarefas.push(novaTarefa);

res.status(201).json(novaTarefa);

});

app.delete("/tarefas/:id", (req, res) => {

tarefas = tarefas.filter(tarefa => tarefa.id !== parseInt(req.params.id));

res.status(204).end();

});

app.listen(3000, () => console.log("API rodando em

http://localhost:3000"));

Desafio do Dia

Implemente a API acima e teste todas as rotas com ferramentas como Postman ou
Insomnia.

Semana 4: Projeto Final e Introdução a Frameworks Frontend

Na última semana, você consolidará os conhecimentos adquiridos em JavaScript e
aprenderá os fundamentos de frameworks frontend modernos, com foco no React.js. O
objetivo é criar um Projeto Final utilizando JavaScript no frontend e backend.

Dia 22: Introdução a Frameworks Frontend e React.js

Explicação

Frameworks como React.js facilitam a criação de interfaces dinâmicas e reutilizáveis. O

React é baseado em componentes, que são blocos independentes de UI.

1. Conceitos Básicos

o Componentes: Funções ou classes que retornam HTML.

o JSX: Uma sintaxe que mistura HTML e JavaScript.

function Saudacao() {

return <h1>Olá, Mundo!</h1>;

2. Instalando React

o Use create-react-app para iniciar um projeto.

bash

npx create-react-app meu-projeto

cd meu-projeto

npm start

3. Estrutura Básica

o O React utiliza um único arquivo HTML (normalmente public/index.html) e

renderiza componentes nele.

Desafio do Dia

1. Instale o React e crie um projeto básico.

2. Crie um componente Saudacao que exiba uma mensagem de boas-vindas.

Dia 23: Componentes e Propriedades no React

Explicação
Propriedades (props) são parâmetros passados para componentes para torná-los
dinâmicos.

1. Componente com Props

function Saudacao(props) {

return <h1>Olá, {props.nome}!</h1>;

2. Passando Props

<Saudacao nome="João" />

3. Componentes Aninhados

function App() {

return (

<div>

<Saudacao nome="Maria" />

<Saudacao nome="Pedro" />

</div>

);

Desafio do Dia

1. Crie um componente Usuario que receba nome e idade como props e exiba-os.

2. Renderize múltiplos componentes Usuario com diferentes dados.

Dia 24: Estado e Eventos no React

Explicação
Estado (state) é uma forma de armazenar dados que podem mudar ao longo do
tempo em um componente.

1. Usando useState

import { useState } from "react";

function Contador() {

const [contador, setContador] = useState(0);

return (

<div>

<p>Contador: {contador}</p>

<button onClick={() => setContador(contador +

1)}>Incrementar</button>

</div>

);

2. Eventos

o Adicione eventos como onClick, onChange e outros para interatividade.

Desafio do Dia

1. Crie um componente Contador que incremente e decremente um número.

2. Crie um componente Input que atualize o texto exibido enquanto o usuário

digita.

Dia 25: React e APIs

Explicação

No React, você pode usar fetch ou bibliotecas como Axios para consumir APIs e exibir
dados.

1. Consumindo uma API com Fetch

import { useEffect, useState } from "react";

function App() {

const [posts, setPosts] = useState([]);

 useEffect(() => {

fetch("https://jsonplaceholder.typicode.com/posts")

.then((res) => res.json())

.then((data) => setPosts(data));

}, []);

return (

<ul>

{posts.map((post) => (

<li key={post.id}>{post.title}</li>

))}

</ul>

);

Desafio do Dia

1. Consuma a API https://jsonplaceholder.typicode.com/posts e exiba os títulos dos

posts.

2. Adicione um botão que atualize os dados da API.

Dia 26: Planejamento do Projeto Final

Explicação

O projeto final será uma aplicação To-Do List com frontend React e backend Node.js.
Ela terá as seguintes funcionalidades:

1. Adicionar tarefas.

2. Listar tarefas.

3. Remover tarefas.

Estrutura:

 Frontend: React para interface e consumo de API.

 Backend: Node.js para gerenciar tarefas.

Desafio do Dia

1. Estruture o projeto criando pastas para o frontend e backend.

2. Inicie o backend com uma API de tarefas (como visto na semana 3).
Dia 27: Criando o Frontend do Projeto

Explicação

Implemente a interface do To-Do List com React.

1. Estrutura do Componente

o Um componente principal para gerenciar a lista de tarefas.

import { useState } from "react";

function App() {

const [tarefas, setTarefas] = useState([]);

const [novaTarefa, setNovaTarefa] = useState("");

const adicionarTarefa = () => {

setTarefas([...tarefas, novaTarefa]);

setNovaTarefa("");

};

return (

<div>

<input

type="text"

value={novaTarefa}

onChange={(e) => setNovaTarefa(e.target.value)}

/>

<button onClick={adicionarTarefa}>Adicionar</button>

<ul>

{tarefas.map((tarefa, index) => (

<li key={index}>{tarefa}</li>

))}

</ul>

</div>

);

}
export default App;

Desafio do Dia

1. Crie a interface do To-Do List com funcionalidades de adicionar tarefas.

2. Estilize a interface com CSS.

Dia 28: Integração Frontend e Backend

Explicação

Conecte o React ao backend Node.js para gerenciar as tarefas.

1. Consumindo a API

o Use fetch para carregar tarefas do backend.

useEffect(() => {

fetch("http://localhost:3000/tarefas")

.then((res) => res.json())

.then((data) => setTarefas(data));

}, []);

2. Adicionar e Remover Tarefas

o Faça requisições POST e DELETE para gerenciar tarefas.

Desafio do Dia

1. Integre o frontend com a API de backend para listar tarefas.

2. Adicione funcionalidades de adicionar e remover tarefas usando a API.

Dia 29: Refinando e Testando o Projeto

Explicação

Revise o código, otimize e adicione validações ou melhorias visuais.

1. Validações

o Impeça o envio de tarefas vazias.

o Exiba mensagens de erro para operações inválidas.

2. Melhorias Visuais

o Use bibliotecas como Bootstrap ou Tailwind CSS para estilizar.

Desafio do Dia

1. Adicione validações para evitar tarefas duplicadas ou vazias.

 2. Melhore a interface do usuário com animações simples.

Dia 30: Apresentação do Projeto

Explicação

Conclua e apresente o projeto.

1. Estrutura Final

o Certifique-se de que o backend e frontend estejam funcionando

corretamente.

o Documente o código com comentários explicativos.

2. Publicação

o Use serviços como Vercel (frontend) e Railway ou Render (backend)

para publicar seu projeto.

Desafio do Dia

1. Publique o projeto final em plataformas gratuitas.

2. Compartilhe seu trabalho com amigos ou em redes sociais para obter feedback.
Material de Estudos: Utilização de APIs, Funções e Objetos em JavaScript

Neste material, vamos abordar os conceitos fundamentais sobre APIs, funções e

objetos no JavaScript, essenciais para construir aplicações modernas e interativas.

Parte 1: Utilizando APIs em JavaScript

Uma API (Application Programming Interface) é um conjunto de regras que

permite a interação entre sistemas. No contexto de JavaScript, usamos APIs para obter
ou enviar dados a servidores.

Conceitos Fundamentais

1. Fetch API: Usada para fazer requisições HTTP.

fetch("https://jsonplaceholder.typicode.com/posts")

.then(response => response.json())

.then(data => console.log(data))

.catch(error => console.error("Erro:", error));

2. Métodos HTTP:

o GET: Recupera dados.

o POST: Envia dados.

o PUT/PATCH: Atualiza dados.

o DELETE: Remove dados.

3. Requisições Assíncronas:

o Async/Await facilita o trabalho com promessas.

async function carregarPosts() {

try {

const response = await

fetch("https://jsonplaceholder.typicode.com/posts");

const data = await response.json();

console.log(data);

} catch (error) {

console.error("Erro:", error);

carregarPosts();
Exemplo Prático: Consumindo uma API Pública

Crie uma página HTML que exiba uma lista de posts obtidos de uma API.

html

Copiar código

<!DOCTYPE html>

<html lang="pt-BR">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Posts da API</title>

</head>

<body>

<h1>Posts da API</h1>

<ul id="posts"></ul>

<script>

async function carregarPosts() {

const response = await fetch("https://jsonplaceholder.typicode.com/posts");

const posts = await response.json();

const lista = document.getElementById("posts");

posts.slice(0, 5).forEach(post => {

const item = document.createElement("li");

item.textContent = `${post.title}: ${post.body}`;

lista.appendChild(item);

});

carregarPosts();

</script>

</body>

</html>

Desafio Prático
 1. Altere o exemplo acima para exibir apenas os 5 primeiros posts.

2. Adicione um botão que recarregue os dados da API.

Parte 2: Funções em JavaScript

Conceitos Fundamentais

1. Declaração de Função:

function saudacao(nome) {

return `Olá, ${nome}!`;

console.log(saudacao("João"));

2. Funções Anônimas e Arrow Functions:

const soma = (a, b) => a + b;

console.log(soma(2, 3));

3. Funções de Alta Ordem:

Aceitam outras funções como argumentos ou retornam funções.

javascript

Copiar código

const calcular = (a, b, operacao) => operacao(a, b);

const multiplicar = (a, b) => a * b;

console.log(calcular(4, 5, multiplicar)); // 20

4. Parâmetros Opcionais e Valores Padrão:

javascript

Copiar código

function cumprimentar(nome = "Visitante") {

console.log(`Bem-vindo, ${nome}!`);

cumprimentar(); // Bem-vindo, Visitante!

Exemplo Prático: Funções Dinâmicas

Crie uma função que permita calcular diferentes operações matemáticas.

javascript

Copiar código

function calcular(a, b, operacao) {

switch (operacao) {

case "soma":

return a + b;

case "subtracao":

return a - b;

case "multiplicacao":

return a * b;

case "divisao":

return a / b;

default:

return "Operação inválida";

console.log(calcular(10, 5, "soma")); // 15

console.log(calcular(10, 5, "divisao")); // 2

Desafio Prático

1. Implemente a função calcular acima com arrow functions.

2. Adicione tratamento para valores inválidos (ex.: divisões por zero).

Parte 3: Objetos em JavaScript

Conceitos Fundamentais

1. Criação de Objetos:

javascript

Copiar código

const pessoa = {

nome: "Ana",

idade: 25,
 falar: function() {

return `Olá, meu nome é ${this.nome}`;

};

console.log(pessoa.falar());

2. Acessando Propriedades:

o Notação de ponto: pessoa.nome

o Notação de colchetes: pessoa["idade"]

3. Métodos e this:

o Métodos são funções dentro de objetos.

o this refere-se ao próprio objeto.

4. Iteração sobre Objetos:

javascript

Copiar código

const carro = { marca: "Ford", modelo: "Fiesta", ano: 2020 };

for (const chave in carro) {

console.log(`${chave}: ${carro[chave]}`);

5. Desestruturação de Objetos:

javascript

Copiar código

const { nome, idade } = pessoa;

console.log(nome, idade);

Exemplo Prático: Gerenciando Tarefas com Objetos

Crie uma lista de tarefas usando objetos.

javascript

Copiar código

const tarefas = [

{ id: 1, descricao: "Estudar JavaScript", concluida: false },

{ id: 2, descricao: "Ler um livro", concluida: true },

];
tarefas.forEach(tarefa => {

console.log(`${tarefa.id}: ${tarefa.descricao} - ${tarefa.concluida ? "Feita" :

"Pendente"}`);

});

Desafio Prático

1. Adicione uma função para marcar uma tarefa como concluída.

2. Crie uma função para remover tarefas concluídas da lista.

Parte 4: Integração de APIs, Funções e Objetos

Combine os conhecimentos para consumir uma API e manipular os dados obtidos

como objetos.

Exemplo Prático

Crie uma página que exiba informações de usuários e permita marcar usuários como
"favoritos".

javascript

Copiar código

let usuariosFavoritos = [];

async function carregarUsuarios() {

const resposta = await fetch("https://jsonplaceholder.typicode.com/users");

const usuarios = await resposta.json();

usuarios.forEach(usuario => {

console.log(`${usuario.id}: ${usuario.name}`);

});

function adicionarFavorito(id, usuarios) {

const usuario = usuarios.find(u => u.id === id);

if (usuario) {

usuariosFavoritos.push(usuario);

console.log(`${usuario.name} adicionado aos favoritos.`);

 }

carregarUsuarios();

Desafio Prático

1. Liste os usuários obtidos da API em uma tabela HTML.

2. Adicione botões para marcar/desmarcar usuários como favoritos.