├── .gitignore └── Revisao_Js ├── Conteudo ├── Aula1 │ ├── Array.js │ ├── Arrow_Functions.js │ ├── IndexOf.js │ ├── Map.js │ ├── Objetos.js │ ├── Rest.js │ ├── Spread.js │ ├── filter.js │ └── funcoes.js └── Aula2 │ ├── Closure │ ├── closure.js │ └── index.html │ ├── Destructuring.js │ ├── Fetch.js │ ├── Modules │ ├── Styles.css │ ├── index.html │ └── js │ │ ├── main.js │ │ └── utils.js │ └── index.html ├── Exercicios ├── Aula1 │ ├── Exercicio6.js │ ├── exercicio1.js │ ├── exercicio2.js │ ├── exercicio3.js │ ├── exercicio4.js │ └── exercicio5.js └── Aula2 │ ├── Buscando_Usuarios │ ├── index.html │ ├── script.js │ └── style.css │ ├── Closure │ ├── closure.js │ └── index.html │ ├── exercicio1.js │ ├── exercicio2.js │ └── exercicio3.js └── Respostas ├── Aula1 ├── Exercicio6.js ├── exercicio1.js ├── exercicio2.js ├── exercicio3.js ├── exercicio4.js └── exercicio5.js └── Aula2 ├── Buscando_Usuarios ├── index.html ├── script.js └── style.css ├── Closure ├── closure.js └── index.html ├── exercicio1.js ├── exercicio2.js └── exercicio3.js /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | Template_Atividade 3 | react-m5/ 4 | react-m5/ -------------------------------------------------------------------------------- /Revisao_Js/Conteudo/Aula1/Array.js: -------------------------------------------------------------------------------- 1 | const nomes = ["Harry", "Hermione", "Ron"]; 2 | console.log("Array original: ", nomes); 3 | 4 | //Adicionar no final 5 | nomes.push("Minerva"); 6 | console.log("Add no final: ", nomes); 7 | 8 | //Adicionar no Inicio 9 | nomes.unshift("Albus"); 10 | console.log("Add no inicio: ", nomes); 11 | 12 | //Retira do Final 13 | nomes.pop(); 14 | console.log("Remove no final: ", nomes); 15 | 16 | //Retira do Inicio 17 | nomes.shift(); 18 | console.log("Remove no inicio: ", nomes); 19 | -------------------------------------------------------------------------------- /Revisao_Js/Conteudo/Aula1/Arrow_Functions.js: -------------------------------------------------------------------------------- 1 | /*A arrow function é uma função inicialmente anônima, mas que é declarada de forma diferente das funções que estamos acostumados 2 | */ 3 | 4 | //Uma linha só com parametro 5 | const saudacao = (nome) => `Olá ${nome}`; 6 | saudacao("João"); 7 | 8 | //Uma linha só sem parametro 9 | const olaMundo = () => "Olá mundo"; 10 | 11 | //Uma linha só com + de um parametro 12 | const soma = (num1, num2) => num1 + num2; 13 | 14 | //Mais de uma linha 15 | const somaDebugg = (num1, num2) => { 16 | console.log("Somando números!"); 17 | return num1 + num2; 18 | }; 19 | -------------------------------------------------------------------------------- /Revisao_Js/Conteudo/Aula1/IndexOf.js: -------------------------------------------------------------------------------- 1 | //retorna o índice do item procurado, se não existir retorna -1 2 | 3 | //Usando com array 4 | const materialEscolar = ["Lápis", "Caderno", "Caneta", "Estojo"]; 5 | 6 | function procuraItem(array, item) { 7 | const indice = array.indexOf(item); 8 | console.log(indice); 9 | } 10 | procuraItem(materialEscolar, "Caderno"); // indice = 1 11 | 12 | //Usando com string 13 | 14 | function validaEmail(email) { 15 | if (email.indexOf("@") !== -1) { 16 | console.log("Email valido"); 17 | } else { 18 | console.log("Email invalido"); 19 | } 20 | } 21 | validaEmail("inara@resilia.com"); //Email valido 22 | validaEmail("inararesilia.com"); //Email invalido 23 | -------------------------------------------------------------------------------- /Revisao_Js/Conteudo/Aula1/Map.js: -------------------------------------------------------------------------------- 1 | //invoca uma função callback passada por argumento e devolve um novo array como resultado, deixando o original intacto 2 | 3 | const materialEscolar = ["Lápis", "Caderno", "Caneta", "Estojo"]; 4 | 5 | const novaLista = materialEscolar.map((item, index) => { 6 | return `Esse é o item numero: ${index + 1}- Nome do item: ${item}`; 7 | }); 8 | 9 | console.log(novaLista); 10 | // retorna uma lista enumerando todos os itens 11 | // novaLista = [‘1 - Lápis’, ‘2 - Caderno’, ‘3 - Caneta’, ‘4 - Estojo’] 12 | 13 | const numeros = [5, 6, 4, 95, 45, 26, 123, 27, 84, 69, 54, 26, 48, 15]; 14 | 15 | const vezesDez = numeros.map((numero) => numero * 10); 16 | console.log(vezesDez); 17 | // vezesDez = [50,60,40,950,450,260, 1230,270,840,690,540,260,480,150] 18 | -------------------------------------------------------------------------------- /Revisao_Js/Conteudo/Aula1/Objetos.js: -------------------------------------------------------------------------------- 1 | //Sempre use const para declarar objetos 2 | const cachorro = { 3 | nome: "Zé", 4 | raca: "doguinho caramelo", 5 | latir: () => { 6 | console.log(`${this.nome} latiu`); 7 | }, 8 | comer: () => { 9 | console.log(`${this.nome} comeu`); 10 | }, 11 | }; 12 | 13 | // Acessando Propriedades 14 | console.log(cachorro.nome); 15 | //Zé 16 | 17 | //alterando Propriedades 18 | cachorro.nome = "Zacarias"; 19 | console.log(cachorro); 20 | //Zacarias 21 | 22 | //Adicionando Propriedades 23 | cachorro["idade"] = 3; 24 | console.log(cachorro); 25 | -------------------------------------------------------------------------------- /Revisao_Js/Conteudo/Aula1/Rest.js: -------------------------------------------------------------------------------- 1 | //Utilizado quando não sabemos o numero de argumentos a ser recebido 2 | 3 | function exibeLista(empresa, turma, ...facilitadores) { 4 | facilitadores.map((facilitador) => { 5 | console.log(facilitador, "Trabalha na empresa", empresa); 6 | }); 7 | } 8 | exibeLista("Resilia", "Cinthia", "Aline", "Inara"); 9 | 10 | // exibe o nome da empresa (Resilia) e o nome de cada facilitador 11 | -------------------------------------------------------------------------------- /Revisao_Js/Conteudo/Aula1/Spread.js: -------------------------------------------------------------------------------- 1 | //Utilizado para espalhar os itens de arrays e objetos ou clonar objetos 2 | 3 | //Espalhando array 4 | function mesclaArrays(array1, array2) { 5 | console.log([...array1, ...array2]); 6 | } 7 | 8 | const comidas = ["Pizza", "Misto quente", "Pastel"]; 9 | const bebidas = ["Cerveja", "Café", "Refrigerante"]; 10 | 11 | // mesclaArrays(comidas, bebidas); 12 | 13 | //Espalhando objeto 14 | const comprador = { 15 | nome: "Irineu", 16 | cpf: 17117117171, 17 | }; 18 | 19 | const carro = { 20 | modelo: "Uno", 21 | cor: "Prata", 22 | }; 23 | 24 | function criaNotafiscal(comprador, carro) { 25 | console.log({ ...comprador, ...carro }); 26 | } 27 | 28 | // criaNotafiscal(comprador, carro); 29 | 30 | //Clonando Objeto 31 | 32 | const gato1 = { 33 | nome: "Panqueca", 34 | sexo: "F", 35 | idade: 1, 36 | miar: function () { 37 | console.log(`${this.nome} Miou`); 38 | }, 39 | }; 40 | 41 | gato1.miar(); 42 | 43 | const gato2 = { 44 | // ...gato1 45 | }; 46 | console.log(gato2); 47 | gato2.nome = "Dora"; 48 | gato2.miar(); 49 | gato1.miar(); 50 | -------------------------------------------------------------------------------- /Revisao_Js/Conteudo/Aula1/filter.js: -------------------------------------------------------------------------------- 1 | //invoca uma função callback passada por argumento, utilizada como teste lógico e devolve um novo array como resultado, deixando o original intacto 2 | 3 | const numeros = [720, 99, 23, 1024, 101, 428]; 4 | const numerosFiltrados = numeros.filter((item) => { 5 | return item > 100; 6 | }); 7 | // numerosFiltrados = [720, 1024, 101, 428] 8 | 9 | const gatosDaInara = [ 10 | { nome: "Dora", sexo: "F" }, 11 | { nome: "Tangerina", sexo: "M" }, 12 | { nome: "Panqueca", sexo: "F" }, 13 | { nome: "Gordinho", sexo: "M" }, 14 | { nome: "Jaquatirica", sexo: "F" }, 15 | { nome: "Maçaneta", sexo: "M" }, 16 | { nome: "Faisca", sexo: "F" }, 17 | ]; 18 | 19 | const gatas = gatosDaInara.filter((gato) => gato.sexo === "F"); 20 | console.log(gatas); 21 | /* 22 | gatas = [ 23 | { nome: 'Dora', sexo: 'F' }, 24 | { nome: 'Panqueca', sexo: 'F' }, 25 | { nome: 'Jaquatirica', sexo: 'F' }, 26 | { nome: 'Faisca', sexo: 'F' } 27 | ] 28 | */ 29 | const gatos = gatosDaInara.filter((gato) => gato.sexo === "M"); 30 | console.log(gatos); 31 | /* 32 | gatos = [ 33 | { nome: 'Tangerina', sexo: 'M' }, 34 | { nome: 'Gordinho', sexo: 'M' }, 35 | { nome: 'Maçaneta', sexo: 'M' } 36 | ] 37 | */ 38 | -------------------------------------------------------------------------------- /Revisao_Js/Conteudo/Aula1/funcoes.js: -------------------------------------------------------------------------------- 1 | /*As funções são blocos de construção essenciais no JavaScript 2 | São um conjunto de instruções que executa uma tarefa ou calcula um valor, seu retorno pode ser existente ou vazio 3 | 4 | OBS.: o fato do retorno ser vazio não significa que não houve uma tarefa sendo executada 5 | */ 6 | 7 | function soma(numero1, numero2) { 8 | return numero1 + numero2; 9 | } 10 | soma(56, 6); // 62 11 | 12 | function adcTitulo() { 13 | const titulo = document.getElementByID("title"); 14 | titulo.textContent = "Revisão JavaScript"; 15 | } 16 | adcTitulo(); 17 | /* não houve um retorno explícito, mas fizemos a manipulação do DOM e alteramos o conteúdo de texto do elemento com ID title, logo uma tarefa foi executada */ 18 | -------------------------------------------------------------------------------- /Revisao_Js/Conteudo/Aula2/Closure/closure.js: -------------------------------------------------------------------------------- 1 | function trocaCor(nomeDaCor, id) { 2 | let cor = ""; 3 | switch (nomeDaCor) { 4 | case "amarelo": 5 | cor = "#ffb200"; 6 | break; 7 | case "vermelho": 8 | cor = "#ff0000"; 9 | break; 10 | case "azul": 11 | cor = "#0ffff0"; 12 | break; 13 | default: 14 | cor = "tomato"; 15 | } 16 | 17 | console.log(cor); 18 | return () => { 19 | const item = document.getElementById(id); 20 | item.style.color = cor; 21 | }; 22 | } 23 | 24 | const amarelo = trocaCor("amarelo", "texto1"); 25 | amarelo(); 26 | 27 | const vermelho = trocaCor("vermelho", "texto2"); 28 | vermelho(); 29 | -------------------------------------------------------------------------------- /Revisao_Js/Conteudo/Aula2/Closure/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

Texto

11 |

Texto

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Revisao_Js/Conteudo/Aula2/Destructuring.js: -------------------------------------------------------------------------------- 1 | //Exemplo Array 2 | 3 | const frutas = ["Banana", "Uva"]; 4 | 5 | const [fruta1, fruta2] = frutas; 6 | console.log("fruta1", fruta1); 7 | console.log("fruta2", fruta2); 8 | 9 | //ou 10 | 11 | const comidas = ["arroz", "Feijão", "alface", "Bife"]; 12 | const [comida1, comida2, comida3, comida4] = comidas; 13 | console.log(comida1, comida4); 14 | //Exemplo Objetos --------------------------------------------------------- 15 | 16 | const pessoa = { 17 | nome: "Irineu", 18 | sobrenome: "Você não sabe nem eu", 19 | }; 20 | 21 | // const { nome, sobrenome } = pessoa; 22 | // console.log(nome, sobrenome); 23 | 24 | //Exemplo Objetos complexos--------------------------------------------- 25 | 26 | const compra = { 27 | comprador: { 28 | nome: "Zé", 29 | cpf: 17117117171, 30 | endereco: { 31 | logradouro: "Algum lugar", 32 | numero: 8, 33 | bairro: "nunca nem vi", 34 | cidade: "De ninguem ", 35 | }, 36 | }, 37 | produto: { 38 | nome: "café", 39 | preco: 23, 40 | sku: 2145786548, 41 | }, 42 | }; 43 | const { 44 | comprador: { 45 | nome, 46 | endereco: { logradouro }, 47 | }, 48 | produto: { nome: nomeDoProduto }, 49 | } = compra; 50 | console.log(nome, logradouro, nomeDoProduto); 51 | //Exemplo Objetos com array -------------------------------------------- 52 | 53 | const resilia = { 54 | empresa: "Resilia", 55 | facilitadores: [ 56 | { nome: "Inara", frente: "Tech" }, 57 | { nome: "Aline", frente: "Soft" }, 58 | { nome: "Thom", frente: "Soft" }, 59 | { nome: "Cinthia", frente: "Tech" }, 60 | ], 61 | }; 62 | 63 | const { 64 | empresa, 65 | facilitadores: [, facilitadora2, , facilitadora3], 66 | } = resilia; 67 | console.log(facilitadora2, facilitadora3); 68 | -------------------------------------------------------------------------------- /Revisao_Js/Conteudo/Aula2/Fetch.js: -------------------------------------------------------------------------------- 1 | // const buscarPokemon = (id) => { 2 | // fetch(`https://pokeapi.co/api/v2/pokemon/${id}`) 3 | // .then((response) => response.json()) 4 | // .then((json) => { 5 | // console.log(json); 6 | // }); 7 | 8 | // }; 9 | 10 | const buscarPokemon = async (id) => { 11 | const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`); 12 | const json = await response.json(); 13 | console.log(json); 14 | }; 15 | 16 | buscarPokemon(25); 17 | -------------------------------------------------------------------------------- /Revisao_Js/Conteudo/Aula2/Modules/Styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | background-color: #333; 6 | } 7 | -------------------------------------------------------------------------------- /Revisao_Js/Conteudo/Aula2/Modules/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Modules 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Revisao_Js/Conteudo/Aula2/Modules/js/main.js: -------------------------------------------------------------------------------- 1 | import { calculaMedia } from "./utils.js"; 2 | const notasPorBimestre = [7, 9, 4, 9]; 3 | console.log(calculaMedia(notasPorBimestre)); 4 | -------------------------------------------------------------------------------- /Revisao_Js/Conteudo/Aula2/Modules/js/utils.js: -------------------------------------------------------------------------------- 1 | export function calculaMedia(notas) { 2 | const total = notas.reduce((acc, atual) => { 3 | return acc + atual; 4 | }); 5 | return total / notas.length; 6 | } 7 | -------------------------------------------------------------------------------- /Revisao_Js/Conteudo/Aula2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Revisao_Js/Exercicios/Aula1/Exercicio6.js: -------------------------------------------------------------------------------- 1 | /* EXERCICIO 6 */ 2 | 3 | /* 4 | como poderiamos descobrir o maior numero sem usar nenhum loop? 5 | Dica: use o método max (Math.max) 6 | */ 7 | 8 | const numeros = [6, 24, 256, 47, 12, 450]; 9 | -------------------------------------------------------------------------------- /Revisao_Js/Exercicios/Aula1/exercicio1.js: -------------------------------------------------------------------------------- 1 | /* EXERCICIO 1 - Manipulação de array */ 2 | const nomes = ["Gabriela", "Junior", "Luciana", "Caroline", "Lucas"]; 3 | 4 | // adicione um nome ao final da lista de nome 5 | /* seu codigo aqui */ 6 | // exiba a lista modificada 7 | console.log("adição ao final:\n", nomes); 8 | 9 | // retire esse nome do fim da lista 10 | /* seu codigo aqui */ 11 | // exiba a lista modificada 12 | console.log("retirada do final:\n", nomes); 13 | 14 | // adicione um nome no início da lista 15 | /* seu codigo aqui */ 16 | // exiba a lista modificada 17 | console.log("inserção ao início:\n", nomes); 18 | 19 | // retire esse nome do início da lista 20 | /* seu codigo aqui */ 21 | // exiba a lista modificada 22 | console.log("retirada do início:\n", nomes); 23 | 24 | // exiba o indice do nome 'Luciana' 25 | /* seu codigo aqui */ 26 | -------------------------------------------------------------------------------- /Revisao_Js/Exercicios/Aula1/exercicio2.js: -------------------------------------------------------------------------------- 1 | /* EXERCICIO 2 - Array Filter */ 2 | 3 | /* 4 | o array abaixo armazena clientes, seus nomes e situação para 5 | solicitação de emprestimo estão representados nas propriedades 6 | */ 7 | const clientes = [ 8 | { 9 | nome: "Felipe", 10 | apto: true, 11 | }, 12 | { 13 | nome: "Eliane", 14 | apto: false, 15 | }, 16 | { 17 | nome: "Jane", 18 | apto: false, 19 | }, 20 | { 21 | nome: "Luiz", 22 | apto: true, 23 | }, 24 | ]; 25 | 26 | // Filtre apenas os clientes aptos para solicitar emprestimo 27 | /* seu codigo aqui */ 28 | 29 | /* 30 | Para aqueles não aptos, adicione uma propriedade verificacao 31 | para o time de dados verificar o por quê desses clientes não 32 | estarem aptos para solicitar emprestimo 33 | */ 34 | 35 | // ex.: { nome: 'Eliane', apto: false, verificacao: true } 36 | -------------------------------------------------------------------------------- /Revisao_Js/Exercicios/Aula1/exercicio3.js: -------------------------------------------------------------------------------- 1 | /* EXERCICIO 3 - Rest*/ 2 | /* 3 | Nesse exercicio temos um numero desconhecido de nomes que será passado via argumentos, complete a função para que mostre cada nome individualmente no console 4 | */ 5 | function exibeNomes(...nomes) { 6 | // seu código aqui 7 | } 8 | 9 | exibeNomes("Pedro", "Maria", "João"); 10 | exibeNomes("Marta", "Tiago"); 11 | -------------------------------------------------------------------------------- /Revisao_Js/Exercicios/Aula1/exercicio4.js: -------------------------------------------------------------------------------- 1 | /* EXERCICIO 4 - Spread */ 2 | // faça um clone do objeto cafe 3 | const cafe = { 4 | origem: "Cerrado brasileiro", 5 | torra: "media", 6 | moagem: "media fina", 7 | }; 8 | 9 | const clone = "Seu código aqui"; 10 | 11 | cafe.torra = "clara"; 12 | 13 | // ao exibir clone, torra deve ser 'media' e não 'clara', o que evidencia que foi, de fato, clonado 14 | console.log(clone.torra); 15 | -------------------------------------------------------------------------------- /Revisao_Js/Exercicios/Aula1/exercicio5.js: -------------------------------------------------------------------------------- 1 | /* EXERCICIO 5 */ 2 | // transforme a função comum em uma arrow function 3 | function multiplicacao(n1, n2, ...numeros) { 4 | let acimaDeDois = 1; 5 | if (numeros.length > 0) { 6 | acimaDeDois = numeros.reduce((acc, atual) => acc * atual); 7 | } 8 | return n1 * n2 * acimaDeDois; 9 | } 10 | multiplicacao(1, 2, 3, 4, 5); // retorna 120 11 | -------------------------------------------------------------------------------- /Revisao_Js/Exercicios/Aula2/Buscando_Usuarios/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Buscando Usuarios 9 | 10 | 11 |
12 |
13 | 17 |
18 |

Nome do usuário

19 | 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Revisao_Js/Exercicios/Aula2/Buscando_Usuarios/script.js: -------------------------------------------------------------------------------- 1 | // url para requisicao 2 | const randomUserUrl = "https://randomuser.me/api/"; 3 | 4 | async function gerarUsuario() { 5 | //Seu código aqui 6 | } 7 | 8 | gerarUsuario(); 9 | 10 | document.getElementById("changeUser").addEventListener("click", gerarUsuario); 11 | -------------------------------------------------------------------------------- /Revisao_Js/Exercicios/Aula2/Buscando_Usuarios/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | display: flex; 9 | align-items: center; 10 | flex-direction: column; 11 | padding-top: 2rem; 12 | } 13 | 14 | .photo { 15 | max-height: 128px; 16 | width: 128px; 17 | border-radius: 50%; 18 | overflow: hidden; 19 | margin-bottom: 0.5rem; 20 | } 21 | 22 | .photo img { 23 | max-width: 128px; 24 | } 25 | 26 | .container button { 27 | margin-top: 0.5rem; 28 | width: 100px; 29 | } 30 | -------------------------------------------------------------------------------- /Revisao_Js/Exercicios/Aula2/Closure/closure.js: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Revisao_Js/Exercicios/Aula2/Closure/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

Texto

11 |

Texto

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Revisao_Js/Exercicios/Aula2/exercicio1.js: -------------------------------------------------------------------------------- 1 | /*EXERCICIO 1 - Destructuring */ 2 | /*Acessar todos os itens do array alunos 3 | Se atentar caso haja necessidade de renomear algo*/ 4 | 5 | const alunos = [ 6 | "Alice", 7 | "Gabriela", 8 | "João", 9 | "Francisco", 10 | "Natália", 11 | "Giovana", 12 | "Gabriel", 13 | ]; 14 | -------------------------------------------------------------------------------- /Revisao_Js/Exercicios/Aula2/exercicio2.js: -------------------------------------------------------------------------------- 1 | /* EXERCICIO 2 - Destructuring */ 2 | 3 | // Acessar todos os itens do array, exceto o terceiro 4 | //Se atentar caso haja necessidade de renomear algo 5 | 6 | const disciplinas = [ 7 | "Matemática", 8 | "Física", 9 | "Química", 10 | "Língua Portuguesa", 11 | "Biologia", 12 | ]; 13 | -------------------------------------------------------------------------------- /Revisao_Js/Exercicios/Aula2/exercicio3.js: -------------------------------------------------------------------------------- 1 | /* EXERCICIO 3 - Destructuring */ 2 | 3 | //Acessar todos os itens dos dois objetos disponíveis 4 | //Se atentar caso haja necessidade de renomear algo 5 | 6 | const dadosCliente = { 7 | nome: "Fabio", 8 | idade: 45, 9 | endereco: { 10 | logradouro: "Rua das Palmeiras", 11 | numero: 42, 12 | bairro: "Barra da Tijuca", 13 | cidade: "Rio de Janeiro", 14 | }, 15 | assinanteDesde: 2017, 16 | }; 17 | 18 | const vestimenta = { 19 | camisa: { 20 | listrada: true, 21 | cor: "Vermelha e branca", 22 | colecao: "Outono/Inverno 2019", 23 | }, 24 | calca: { 25 | cor: "Azul escuro", 26 | colecao: "Primavera/Verão 2021", 27 | }, 28 | }; 29 | -------------------------------------------------------------------------------- /Revisao_Js/Respostas/Aula1/Exercicio6.js: -------------------------------------------------------------------------------- 1 | /* EXERCICIO 6 */ 2 | 3 | /* 4 | como poderiamos descobrir o maior numero sem usar nenhum loop? 5 | Dica: use o método max (Math.max) 6 | */ 7 | 8 | const numeros = [6, 24, 256, 47, 12, 450]; 9 | 10 | const max = Math.max(...numeros); 11 | console.log(max); 12 | -------------------------------------------------------------------------------- /Revisao_Js/Respostas/Aula1/exercicio1.js: -------------------------------------------------------------------------------- 1 | /* EXERCICIO 1 - Manipulação de array */ 2 | const nomes = ["Gabriela", "Junior", "Luciana", "Caroline", "Lucas"]; 3 | 4 | // adicione um nome ao final da lista de nome 5 | nomes.push("Maria"); 6 | // exiba a lista modificada 7 | console.log("adição ao final:\n", nomes); 8 | 9 | // retire esse nome do fim da lista 10 | nomes.pop(); 11 | // exiba a lista modificada 12 | console.log("retirada do final:\n", nomes); 13 | 14 | // adicione um nome no início da lista 15 | nomes.unshift("Maria"); 16 | // exiba a lista modificada 17 | console.log("inserção ao início:\n", nomes); 18 | 19 | // retire esse nome do início da lista 20 | nomes.shift(); 21 | // exiba a lista modificada 22 | console.log("retirada do início:\n", nomes); 23 | 24 | // exiba o indice do nome 'Luciana' 25 | /* seu codigo aqui */ 26 | -------------------------------------------------------------------------------- /Revisao_Js/Respostas/Aula1/exercicio2.js: -------------------------------------------------------------------------------- 1 | /* EXERCICIO 2 - Array Filter */ 2 | 3 | /* 4 | o array abaixo armazena clientes, seus nomes e situação para 5 | solicitação de emprestimo estão representados nas propriedades 6 | */ 7 | const clientes = [ 8 | { 9 | nome: "Felipe", 10 | apto: true, 11 | }, 12 | { 13 | nome: "Eliane", 14 | apto: false, 15 | }, 16 | { 17 | nome: "Jane", 18 | apto: false, 19 | }, 20 | { 21 | nome: "Luiz", 22 | apto: true, 23 | }, 24 | ]; 25 | 26 | // Filtre apenas os clientes aptos para solicitar emprestimo 27 | const aptos = clientes.filter((cliente) => cliente.apto); 28 | console.log(aptos); 29 | /* 30 | Para aqueles não aptos, adicione uma propriedade verificacao 31 | para o time de dados verificar o por quê desses clientes não 32 | estarem aptos para solicitar emprestimo 33 | */ 34 | 35 | const naoAptos = clientes.filter((cliente) => 36 | !cliente.apto ? (cliente["verificacao"] = true) : false 37 | ); 38 | console.log(naoAptos); 39 | // ex.: { nome: 'Eliane', apto: false, verificacao: true } 40 | -------------------------------------------------------------------------------- /Revisao_Js/Respostas/Aula1/exercicio3.js: -------------------------------------------------------------------------------- 1 | /* EXERCICIO 3 - Rest*/ 2 | /* 3 | Nesse exercicio temos um numero desconhecido de nomes que será passado via argumentos, construa a função que mostre cada um individualmente no console 4 | */ 5 | function exibeNomes(...nomes) { 6 | nomes.forEach((nome) => { 7 | console.log(nome); 8 | }); 9 | } 10 | 11 | exibeNomes("Pedro", "Maria", "João"); 12 | exibeNomes("Marta", "Tiago"); 13 | -------------------------------------------------------------------------------- /Revisao_Js/Respostas/Aula1/exercicio4.js: -------------------------------------------------------------------------------- 1 | /* EXERCICIO 4 - Spread */ 2 | // faça um clone do objeto cafe 3 | const cafe = { 4 | origem: "Cerrado brasileiro", 5 | torra: "media", 6 | moagem: "media fina", 7 | }; 8 | 9 | const clone = { ...cafe }; 10 | 11 | cafe.torra = "clara"; 12 | 13 | // ao exibir clone, torra deve ser 'media' e não 'clara', o que evidencia que foi, de fato, clonado 14 | console.log(clone.torra); 15 | -------------------------------------------------------------------------------- /Revisao_Js/Respostas/Aula1/exercicio5.js: -------------------------------------------------------------------------------- 1 | /* EXERCICIO 5 */ 2 | // transforme a função comum em uma arrow function 3 | const multiplicacao = (n1, n2, ...numeros) => { 4 | let acimaDeDois = 1; 5 | if (numeros.length > 0) { 6 | acimaDeDois = numeros.reduce((acc, atual) => acc * atual); 7 | } 8 | return n1 * n2 * acimaDeDois; 9 | }; 10 | multiplicacao(1, 2, 3, 4, 5); // retorna 120 11 | -------------------------------------------------------------------------------- /Revisao_Js/Respostas/Aula2/Buscando_Usuarios/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Atividade 9 | 10 | 11 |
12 |
13 | 17 |
18 |

Nome do usuário

19 | 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Revisao_Js/Respostas/Aula2/Buscando_Usuarios/script.js: -------------------------------------------------------------------------------- 1 | // url para requisicao 2 | const randomUserUrl = "https://randomuser.me/api/"; 3 | 4 | async function gerarUsuario() { 5 | //Buscando os dados da api e aguardando a chegada e salvamento na variavel response 6 | const response = await fetch(randomUserUrl); 7 | 8 | //A variavel response chegou como uma Promisse, precisamos aguardar o tratamento da Promisse e salvar o conteudo na variavel data 9 | const data = await response.json(); 10 | 11 | //Agora os dados da API já chegaram, então salvamos o index 0 do array results em uma variavel 12 | const results = data.results[0]; 13 | console.log(results); 14 | 15 | //Para completar o exercicio precisamos do primeiro nome do usuario e uma foto 16 | //Para acessar os dados usamos o destructuring 17 | const { 18 | name: { first: nome }, 19 | picture: { large: foto }, 20 | } = results; 21 | console.log(nome, foto); 22 | 23 | document.querySelector("#userPhoto").src = foto; 24 | document.querySelector("#name").innerText = nome; 25 | } 26 | 27 | gerarUsuario(); 28 | 29 | document.getElementById("changeUser").addEventListener("click", gerarUsuario); 30 | -------------------------------------------------------------------------------- /Revisao_Js/Respostas/Aula2/Buscando_Usuarios/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | display: flex; 9 | align-items: center; 10 | flex-direction: column; 11 | padding-top: 2rem; 12 | } 13 | 14 | .photo { 15 | max-height: 128px; 16 | width: 128px; 17 | border-radius: 50%; 18 | overflow: hidden; 19 | margin-bottom: 0.5rem; 20 | } 21 | 22 | .photo img { 23 | max-width: 128px; 24 | } 25 | 26 | .container button { 27 | margin-top: 0.5rem; 28 | width: 100px; 29 | } 30 | -------------------------------------------------------------------------------- /Revisao_Js/Respostas/Aula2/Closure/closure.js: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Revisao_Js/Respostas/Aula2/Closure/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

Texto

11 |

Texto

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Revisao_Js/Respostas/Aula2/exercicio1.js: -------------------------------------------------------------------------------- 1 | /*EXERCICIO 1 - Destructuring */ 2 | /*Acessar todos os itens do array alunos 3 | Se atentar caso haja necessidade de renomear algo*/ 4 | 5 | const alunos = [ 6 | "Alice", 7 | "Gabriela", 8 | "João", 9 | "Francisco", 10 | "Natália", 11 | "Giovana", 12 | "Gabriel", 13 | ]; 14 | 15 | const [aluno1, aluno2, aluno3, aluno4, aluno5, aluno6, aluno7] = alunos; 16 | console.log(aluno1); 17 | console.log(aluno2); 18 | console.log(aluno3); 19 | console.log(aluno4); 20 | console.log(aluno5); 21 | console.log(aluno6); 22 | console.log(aluno7); 23 | -------------------------------------------------------------------------------- /Revisao_Js/Respostas/Aula2/exercicio2.js: -------------------------------------------------------------------------------- 1 | /* EXERCICIO 2 - Destructuring */ 2 | 3 | // Acessar todos os itens do array, exceto o terceiro 4 | //Se atentar caso haja necessidade de renomear algo 5 | 6 | const disciplinas = [ 7 | "Matemática", 8 | "Física", 9 | "Química", 10 | "Língua Portuguesa", 11 | "Biologia", 12 | ]; 13 | 14 | const [disciplina1, , disciplina3, disciplina4, disciplina5] = disciplinas; 15 | console.log(disciplina1); 16 | console.log(disciplina3); 17 | console.log(disciplina4); 18 | console.log(disciplina5); 19 | -------------------------------------------------------------------------------- /Revisao_Js/Respostas/Aula2/exercicio3.js: -------------------------------------------------------------------------------- 1 | /* EXERCICIO 3 - Destructuring */ 2 | 3 | //Acessar todos os itens dos dois objetos disponíveis 4 | //Se atentar caso haja necessidade de renomear algo 5 | 6 | const dadosCliente = { 7 | nome: "Fabio", 8 | idade: 45, 9 | endereco: { 10 | logradouro: "Rua das Palmeiras", 11 | numero: 42, 12 | bairro: "Barra da Tijuca", 13 | cidade: "Rio de Janeiro", 14 | }, 15 | assinanteDesde: 2017, 16 | }; 17 | 18 | const { 19 | nome, 20 | idade, 21 | endereco: { logradouro, numero, bairro, cidade }, 22 | } = dadosCliente; 23 | console.log(nome, idade, logradouro, numero, bairro, cidade); 24 | const vestimenta = { 25 | camisa: { 26 | listrada: true, 27 | cor: "Vermelha e branca", 28 | colecao: "Outono/Inverno 2019", 29 | }, 30 | calca: { 31 | cor: "Azul escuro", 32 | colecao: "Primavera/Verão 2021", 33 | }, 34 | }; 35 | 36 | const { 37 | camisa: { listrada, cor: corCamisa, colecao: colecaoCamisa }, 38 | calca: { cor: corCalca, colecao: colecaoCalca }, 39 | } = vestimenta; 40 | console.log(listrada, corCamisa, colecaoCamisa); 41 | console.log(corCalca, colecaoCalca); 42 | --------------------------------------------------------------------------------