├── 00-introducao-ao-curso ├── test-ambiente.js └── README.md ├── 07-ciclo-de-vida-javascript ├── arq3.txt ├── arq1.txt ├── arq2.txt ├── final.txt ├── demo-20-async-await.js ├── demo-18-callbacks.js ├── demo-19-promises.js └── README.md ├── memory-game ├── assets │ └── favicon.ico ├── src │ ├── util.js │ ├── tela.js │ └── jogoDaMemoria.js ├── index.js ├── README.md ├── index.html └── arquivos │ ├── padrao.svg │ ├── batman.svg │ ├── mulhermaravilha.svg │ ├── frank.svg │ └── groot.svg ├── 01-iniciando-com-javascript ├── demo-01-variaveis.js └── README.md ├── 03-tipos-de-dados-pt-02 ├── demo-04-comentarios.js ├── README.md ├── demo-06-booleanos.js ├── demo-05-undefined-e-null.js ├── demo-08-objetos.js └── demo-07-listas.js ├── 06-modulos-em-javascript ├── modulo-nodejs │ ├── matematica.js │ └── main.js ├── modulo-browser │ ├── matematica.js │ ├── main.js │ └── index.html └── README.md ├── 02-tipos-de-dados-pt-01 ├── README.md ├── demo-03-operadores.js └── demo-02-strings-e-numbers.js ├── 04-tipos-de-dados-pt-03 ├── demo-10-objetos-globais.js ├── demo-13-formas-funcoes.js ├── demo-09-object-get-set.js ├── demo-11-date.js ├── demo-14-classes.js ├── demo-12-functions.js └── README.md ├── 05-controlando-o-fluxo-de-dados ├── demo-17-while-do.js ├── README.md ├── demo-15-if-else.js ├── demo-18-for-forin-forof.js └── demo-16-switch-case.js └── README.md /00-introducao-ao-curso/test-ambiente.js: -------------------------------------------------------------------------------- 1 | console.log('Olá mundo!!!') -------------------------------------------------------------------------------- /07-ciclo-de-vida-javascript/arq3.txt: -------------------------------------------------------------------------------- 1 | haha 2 | check_box_outline_blank 3 | kkk 4 | oia -------------------------------------------------------------------------------- /07-ciclo-de-vida-javascript/arq1.txt: -------------------------------------------------------------------------------- 1 | Olá eu sou o arquivo 1 2 | agora sim 3 | vou aprender 4 | javascript -------------------------------------------------------------------------------- /memory-game/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leticiacamposs2/fundamentos-javascript/HEAD/memory-game/assets/favicon.ico -------------------------------------------------------------------------------- /07-ciclo-de-vida-javascript/arq2.txt: -------------------------------------------------------------------------------- 1 | Hello, I am arquive 2 2 | que curso 3 | maneiro 4 | vou sair daqui 5 | seniorzao 6 | kkkkkkkkkkkk 7 | -------------------------------------------------------------------------------- /memory-game/src/util.js: -------------------------------------------------------------------------------- 1 | class Util { 2 | static timeout(tempo) { 3 | return new Promise(resolve => setTimeout(resolve, tempo)) 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /01-iniciando-com-javascript/demo-01-variaveis.js: -------------------------------------------------------------------------------- 1 | let nome = 'Super man' 2 | let idade = 100 3 | let poder = 'Super força' 4 | 5 | nome = 'Batman' 6 | poder = 'Rico' 7 | 8 | console.log( 9 | `Nome: ${nome} 10 | Idade: ${idade} 11 | Poder: ${poder}` 12 | ) 13 | -------------------------------------------------------------------------------- /07-ciclo-de-vida-javascript/final.txt: -------------------------------------------------------------------------------- 1 | Olá eu sou o arquivo 1 2 | agora sim 3 | vou aprender 4 | javascript 5 | Hello, I am arquive 2 6 | que curso 7 | maneiro 8 | vou sair daqui 9 | seniorzao 10 | kkkkkkkkkkkk 11 | 12 | haha 13 | check_box_outline_blank 14 | kkk 15 | oia -------------------------------------------------------------------------------- /03-tipos-de-dados-pt-02/demo-04-comentarios.js: -------------------------------------------------------------------------------- 1 | // comentário em uma unica linha 2 | 3 | /** 4 | * Esse código é Hackerzão 5 | * Author: Leticia Campos 6 | * Data: 15/05/2020 7 | */ 8 | 9 | // ignorando a linha abaixo 10 | // const variavelConstante = 1+2+4+4 11 | const variavelConstante = 1 + 2 + 4 + 4 // na mesma linha -------------------------------------------------------------------------------- /06-modulos-em-javascript/modulo-nodejs/matematica.js: -------------------------------------------------------------------------------- 1 | class Matematica { 2 | static somar(valor1, valor2) { 3 | return valor1 + valor2 4 | } 5 | 6 | static multiplicar(valor1, valor2) { 7 | return valor1 * valor2 8 | } 9 | } 10 | 11 | // deixar o arquivo publico 12 | module.exports = Matematica -------------------------------------------------------------------------------- /memory-game/index.js: -------------------------------------------------------------------------------- 1 | function onLoad() { 2 | const dependencias = { 3 | tela: Tela, // a classe Tela é global 4 | util: Util 5 | } 6 | // inicializamos o jogo da memoria 7 | const jogoDaMemoria = new JogoDaMemoria(dependencias) 8 | jogoDaMemoria.inicializar() 9 | } 10 | 11 | window.onload = onLoad 12 | -------------------------------------------------------------------------------- /06-modulos-em-javascript/modulo-browser/matematica.js: -------------------------------------------------------------------------------- 1 | class Matematica { 2 | static dividir(valor1, valor2) { 3 | return valor1 / valor2 4 | } 5 | 6 | static subtrair(valor1, valor2) { 7 | return valor1 - valor2 8 | } 9 | } 10 | 11 | // já fica publico sozinho, só de importar no html não precisa de module.exports -------------------------------------------------------------------------------- /06-modulos-em-javascript/README.md: -------------------------------------------------------------------------------- 1 | # 🤯 Módulos em Javascript 2 | Com módulos é possível entender melhor como funciona a interação do Javascript no browser e a interação do Javascript no Node.js 3 | 4 | ---- 5 | 6 | ## 🎓 Aprendizagem 7 | 8 | - [x] Introdução ao capítulo 9 | - [x] [Módulos no Node.js](./modulo-nodejs) 10 | - [x] [Módulos em navegadores](./modulo-browser) 11 | -------------------------------------------------------------------------------- /02-tipos-de-dados-pt-01/README.md: -------------------------------------------------------------------------------- 1 | # 🤯 Tipo de dados em Javascript - parte 1 2 | Tipos numericos, operadores, classes e etc.. 3 | 4 | ---- 5 | 6 | ## 🎓 Aprendizagem 7 | 8 | - [x] Introdução ao capítulo 9 | - [x] Trabalhando com strings e number 10 | - [x] Demonstração: trabalhando com strings e numbers 11 | - [x] Strings e numbers 12 | - [x] Conhecendo os operadores do Javascript 13 | - [x] Demonstração: conhecendo os operadores do Javascript 14 | 15 | -------------------------------------------------------------------------------- /03-tipos-de-dados-pt-02/README.md: -------------------------------------------------------------------------------- 1 | # 🤯 Tipo de dados em Javascript - parte 2 2 | 3 | ---- 4 | 5 | ## 🎓 Aprendizagem 6 | 7 | - [x] Comentando código 8 | - [x] O que são os tipos undefined e null? 9 | - [x] Null e undefined 10 | - [x] Tipos Booleanos 11 | - [x] Demostração: Tipos Booleanos 12 | - [x] Trabalhando com arrays 13 | - [x] Demonstração: Trabalhando com arrays 14 | - [x] Trabalhando com objects 15 | - [x] Demonstração: Trabalhando com objects 16 | -------------------------------------------------------------------------------- /04-tipos-de-dados-pt-03/demo-10-objetos-globais.js: -------------------------------------------------------------------------------- 1 | console.log('keys', Object.keys({ nome: 'Leticia' })) //keys [ 'nome' ] 2 | console.log('values', Object.values({ nome: 'Leticia' })) //values [ 'Leticia' ] 3 | console.log('now', Date.now()) //now 1589671915896 4 | console.log('random', Math.random()) //random 0.14529393352855946 5 | 6 | // global 7 | console.log('global', global) //No node.js se chama global no browser this -- mostra listagem de funções précriadas do JS 8 | -------------------------------------------------------------------------------- /02-tipos-de-dados-pt-01/demo-03-operadores.js: -------------------------------------------------------------------------------- 1 | console.log('1 + 1 = ', 1 + 1) 2 | console.log('2 - 4 = ', 2 - 4) 3 | console.log('2 * 6 = ', 2 * 6) 4 | console.log('2 / 4 = ', 2 / 4) 5 | console.log('2 % 4 = ', 2 % 4) 6 | console.log('2 ** 4 = ', 2 ** 4) 7 | 8 | console.log('\n--- Operadores ----\n') 9 | console.log('1 > 2 = ', 1 > 2) 10 | console.log('2 < 4 = ', 2 < 4) 11 | console.log('1 === 2 = ', 1 === 2) 12 | console.log('1 !== 2 =', 1 !== 2) 13 | console.log('1 >= 1 =', 1 >= 1) 14 | console.log('1 <= 1 =', 1 <= 1) 15 | 16 | -------------------------------------------------------------------------------- /02-tipos-de-dados-pt-01/demo-02-strings-e-numbers.js: -------------------------------------------------------------------------------- 1 | let salarioDoAmigo = 1000 2 | let meuSalario = "2999" 3 | 4 | console.log( salarioDoAmigo + meuSalario ) 5 | 6 | console.log( 7 | typeof(salarioDoAmigo), 8 | salarioDoAmigo 9 | ) 10 | 11 | console.log( 12 | typeof(meuSalario), 13 | meuSalario 14 | ) 15 | 16 | console.log( 17 | isNaN(meuSalario) 18 | ) 19 | 20 | let minhaString = 'Olá mundo!' 21 | let minhaOutraString = 'Olá mundo2' 22 | let minhaStringComVariaveis = `${minhaString} - ${minhaOutraString}. AE!` 23 | 24 | console.log(minhaStringComVariaveis) -------------------------------------------------------------------------------- /05-controlando-o-fluxo-de-dados/demo-17-while-do.js: -------------------------------------------------------------------------------- 1 | // enquanto não mudar, não para! 2 | let termoDeParada = true 3 | let contador = 0 4 | while(termoDeParada) { 5 | termoDeParada = contador < 10 6 | if (contador % 2 === 0) { 7 | console.log('Numero par', contador) 8 | } 9 | contador += 1 10 | // contador = contador + 1 11 | } 12 | 13 | // roda a primeira vez e testa a variavel depois! 14 | do { 15 | console.log('Só uma vez! pois termoDeParada é', termoDeParada) 16 | } while(termoDeParada) 17 | 18 | 19 | while (termoDeParada) { 20 | // nao vai executar 21 | console.log('Nem vai executar!') 22 | } 23 | -------------------------------------------------------------------------------- /03-tipos-de-dados-pt-02/demo-06-booleanos.js: -------------------------------------------------------------------------------- 1 | const podeDirigir = true 2 | if (podeDirigir) { 3 | console.log('Ela pode dirigir') 4 | } 5 | 6 | const saldoEmConta = 1 7 | if (!saldoEmConta) { 8 | console.log('Não tem saldo!') 9 | } 10 | 11 | const boolComString = 'Ae Hackerzão!' 12 | 13 | // !! pega o valor e transforma em true ou false 14 | console.log('!!boolComString', !!boolComString) 15 | 16 | // negação 17 | console.log('!boolComString', !boolComString) 18 | 19 | // negação + forçar com o boolean (executa primeiro no parenteses depois o de fora) 20 | console.log( 21 | 'negação + forçar a booleano', 22 | ! (!!boolComString) 23 | ) 24 | -------------------------------------------------------------------------------- /05-controlando-o-fluxo-de-dados/README.md: -------------------------------------------------------------------------------- 1 | # 🤯 Controlando o fluxo de dados 2 | Baseados nos aprendizado das aulas anteriores, agora é o momento de transformar isso em uma aplicação inteligente, a partir da criação de estruturas para organizar o fluxo e controlar as ações dos usuários em suas aplicações. 3 | 4 | ---- 5 | 6 | ## 🎓 Aprendizagem 7 | 8 | - [x] Introdução ao capítulo 9 | - [x] Demonstração: Conhecendo o if, else e else if 10 | - [x] Conhecendo o Switch Case 11 | - [x] Demonstração: Conhecendo o Switch Case 12 | - [x] Conhecendo o While e Do..While 13 | - [x] Demonstração: Conhecendo o While e Do..While 14 | - [x] Demonstração: Trabalhando com For, ForIn e ForOf 15 | -------------------------------------------------------------------------------- /00-introducao-ao-curso/README.md: -------------------------------------------------------------------------------- 1 | # 🤯 Introdução ao curso 2 | Objetivos e desafios... 3 | 4 | ---- 5 | ## 🎓 Aprendizados 6 | 7 | ### Javascript 8 | 9 | - Variáveis 10 | - Tipos de dados 11 | - Funções 12 | - Operadores 13 | - Condicionais 14 | - Classes 15 | 16 | ### Manipulação de listas 17 | 18 | - For 19 | - Foreach 20 | - ForIn 21 | - Map 22 | - Find 23 | 24 | ### Modularização 25 | 26 | - Dividindo responsabilidades via Módulos 27 | 28 | ### Sincronia de funções Javascript 29 | 30 | - Callbacks 31 | - Promises 32 | 33 | ### Projeto final 34 | 35 | - Usando todos os conecitos aprendidos no curso 36 | 37 | ### Como executar arquivos JS pelo VSCode? 38 | 39 | - Digite no terminal `node` + o nome do arquivo ex: `node test-ambiente.js` -------------------------------------------------------------------------------- /03-tipos-de-dados-pt-02/demo-05-undefined-e-null.js: -------------------------------------------------------------------------------- 1 | // undefined = não foi definido, nunca recebeu um valor 2 | // por boa prática inicializamos uma variavel como null quando nao queremos que ela inicialize com valor 3 | 4 | let variavelSemInicializacao 5 | 6 | console.log( 7 | variavelSemInicializacao, 8 | typeof(variavelSemInicializacao) 9 | ) 10 | 11 | 12 | variavelSemInicializacao = 'Hello world!!' 13 | 14 | console.log( 15 | variavelSemInicializacao, 16 | typeof (variavelSemInicializacao) 17 | ) 18 | 19 | variavelSemInicializacao = null 20 | 21 | console.log( 22 | variavelSemInicializacao, 23 | typeof (variavelSemInicializacao) 24 | ) 25 | 26 | let podeViajar = null 27 | 28 | console.log( 29 | podeViajar, 30 | typeof(podeViajar) 31 | ) -------------------------------------------------------------------------------- /04-tipos-de-dados-pt-03/demo-13-formas-funcoes.js: -------------------------------------------------------------------------------- 1 | // usando function 2 | function minhaFuncao1(parametro1) { 3 | return `aeeeee` 4 | } 5 | 6 | // usando const 7 | const minhaFuncao2 = function(parametro1) { 8 | return `aeee ${parametro1}` 9 | } 10 | 11 | // usando arrow function 12 | const minhaFuncao3 = (parametro1) => { 13 | return `aeeee ${parametro1}` 14 | } 15 | 16 | // usando arrow function sem quebrar linha 17 | const minhaFuncao4 = parametro1 => `aeeee ${parametro1}` 18 | 19 | const obj1 = { 20 | minhaFuncao: parametro1 => `aeee ${parametro1}` 21 | } 22 | 23 | obj1.minhaFuncao('test') 24 | 25 | // sem a palavra function 26 | const obj2 = { 27 | minhaFuncao(parametro1) { 28 | return `aeee ${parametro1}` 29 | } 30 | } 31 | 32 | obj2.minhaFuncao('test') 33 | -------------------------------------------------------------------------------- /06-modulos-em-javascript/modulo-browser/main.js: -------------------------------------------------------------------------------- 1 | window.onload = () => { 2 | console.log('tela carregou!!') 3 | const btn = document.getElementById('btnCalcular') 4 | btn.onclick = click 5 | 6 | function obterValorInput(id) { 7 | const item = document.getElementById(id) 8 | return item.value 9 | } 10 | 11 | function click() { 12 | const tipoOperacao = obterValorInput('tipoOperacao') 13 | const valor1 = obterValorInput('valor1') 14 | const valor2 = obterValorInput('valor2') 15 | const resultado = Matematica[tipoOperacao](valor1, valor2) 16 | console.log('resultado', resultado) 17 | document.getElementById('resultado') 18 | .innerText = `A operação de ${tipoOperacao}, ${valor1} por ${valor2} é ${resultado}` 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /memory-game/README.md: -------------------------------------------------------------------------------- 1 | # 🤯 Projeto Final 2 | Construindo um jogo da memória, utilizando os principais conceitos abordados durante o curso. 3 | 4 | ---- 5 | 6 | ## 🎓 Aprendizagem 7 | 8 | - [x] O que faremos? 9 | - [x] Criando estrutura de pastas e esqueleto inicial 10 | - [x] Retornando imagens dinâmicas ao jogo 11 | - [x] Criando função para embaralhar o jogo 12 | - [x] Escondendo cartas 13 | - [x] Encontrando a combinação de cartas 14 | - [x] Exibir herois a partir da combinação correta 15 | - [x] Criando mensagens customizadas e utilitários 16 | - [x] Exibindo todas as cartas do jogo e adicionando timer 17 | - [x] Configurando ambiente 18 | - [x] Publicando jogo da memória na web 19 | 20 | ---- 21 | 22 | ## Ferramentas 23 | 24 | - [Bootstrap](https://getbootstrap.com/) 25 | - [Iconfinder](https://www.iconfinder.com/) 26 | -------------------------------------------------------------------------------- /04-tipos-de-dados-pt-03/demo-09-object-get-set.js: -------------------------------------------------------------------------------- 1 | const pessoa = { 2 | _nome: '', 3 | _idade: 20, 4 | get nome() { 5 | return this._nome 6 | }, 7 | set nome(valor) { 8 | this._nome = valor.toUpperCase() 9 | }, 10 | 11 | get podeDirigir() { 12 | return this._idade > 18 13 | }, 14 | set idade(valor) { 15 | this._idade = valor 16 | } 17 | } 18 | 19 | pessoa.nome = 'leticia campos' 20 | console.log(pessoa.nome) 21 | 22 | pessoa.idade = 16 23 | console.log(pessoa.podeDirigir) 24 | 25 | 26 | // -------------------- 27 | 28 | const animal = { 29 | _id: '123', 30 | _idade: '123', 31 | get id() { 32 | return this._id 33 | }, 34 | set idade(valor) { 35 | this._idade = valor 36 | } 37 | } 38 | 39 | console.log(animal.id) 40 | animal.idade = 10 41 | 42 | console.log(animal.idade) 43 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Fundamentos Javascript 🔥 2 | 🎓 Repositório com as aulas e exercícios do curso de Fundamentos de Javascript by Erick Wendel 3 | 4 | ---- 5 | 6 | ## 🤯 Aulas 7 | 8 | - [x] [Introdução ao curso](./00-introducao-ao-curso) 9 | - [x] [Iniciando com Javascript](./01-iniciando-com-javascript) 10 | - [x] [Tipos de dados - parte 01](./02-tipos-de-dados-pt-01) 11 | - [x] [Tipos de dados - parte 02](./03-tipos-de-dados-pt-02) 12 | - [x] [Tipos de dados - parte 03](./04-tipos-de-dados-pt-03) 13 | - [x] [Controlando o fluxo de dados](./05-controlando-o-fluxo-de-dados) 14 | - [x] [Módulos em Javascript](./06-modulos-em-javascript) 15 | - [x] [O Ciclo de vida Javascript](./07-ciclo-de-vida-javascript) 16 | - [x] [Projeto final: Construindo um jogo de Mémoria](./memory-game) 17 | - [x] Próximos passos 18 | 19 | ---- 20 | 21 | ## 🎓 Projeto Final 22 | Jogo da memória - Herois 23 | 24 | 25 | -------------------------------------------------------------------------------- /07-ciclo-de-vida-javascript/demo-20-async-await.js: -------------------------------------------------------------------------------- 1 | const readline = require('readline') 2 | const terminal = readline.createInterface({ 3 | input: process.stdin, 4 | output: process.stdout 5 | }) 6 | 7 | function questionAsync(texto) { 8 | return new Promise((resolve, reject) => { 9 | terminal.question(`${texto}\n`, msg => { 10 | !!msg ? resolve(msg) : reject(new Error('O campo não pode ser vazio!')) 11 | }) 12 | }) 13 | } 14 | 15 | // para informar o compilador do javascript que vai ser trabalhado com promisse, coloca async 16 | async function main() { 17 | try { 18 | const nome = await questionAsync('Qual é o seu nome?') 19 | const telefone = await questionAsync('Qual é seu telefone?') 20 | console.log(`Nome: ${nome}, Telefone: ${telefone}`) 21 | } catch (error) { 22 | console.log('Deu ruim***', error.stack) 23 | } 24 | finally { 25 | terminal.close() 26 | } 27 | } 28 | main() 29 | 30 | -------------------------------------------------------------------------------- /05-controlando-o-fluxo-de-dados/demo-15-if-else.js: -------------------------------------------------------------------------------- 1 | let frutaExistenteNoMercado = false 2 | let temCPUSuficiente = true 3 | 4 | // 5 | // obter valores do terminal 6 | const args = process.argv 7 | const saldo = args[args.length -1] 8 | // console.log('args', args) 9 | console.log('saldo', saldo) 10 | 11 | if (isNaN(saldo)) { 12 | console.log('valor invalido!!') 13 | return; 14 | } 15 | 16 | let tipoCliente = 'premium' 17 | if (saldo < 9) { 18 | tipoCliente = 'basic' 19 | } 20 | else if (saldo >= 10 && saldo < 20) { 21 | tipoCliente = 'gold' 22 | } 23 | else { 24 | tipoCliente = null 25 | } 26 | 27 | // null, undefined, vazia, 0 === false! 28 | if(!tipoCliente) { 29 | tipoCliente = 'indefinido' 30 | } 31 | 32 | console.log('tipoDoCliente', tipoCliente) 33 | 34 | const operadorOu = 1 > 2 || 2 > 1 35 | const operadorE = 1 === 1 && 2 !== 2 36 | const operadorNot = !(1==1) 37 | 38 | const idade = 18 39 | const resultado = idade >= 18 ? 'pode dirigir' : 'nao pode dirigir!!' 40 | console.log('resultado: ', resultado) 41 | -------------------------------------------------------------------------------- /04-tipos-de-dados-pt-03/demo-11-date.js: -------------------------------------------------------------------------------- 1 | // date começa com zero 2 | // as data no JS sempre começa de 1970 até hoje 3 | 4 | // meses começam do zero 5 | const dataAniversario = new Date(2020, 0, 20) 6 | // console.log(dataAniversario) 7 | 8 | const primeiraDataDoJS = new Date(0) //2020-01-20T02:00:00.000Z 9 | // console.log(primeiraDataDoJS) //1970-01-01T00:00:00.000Z 10 | 11 | const hoje = new Date() 12 | // console.log(hoje.toString()) //Sat May 16 2020 20:42:37 GMT-0300 (GMT-03:00) 13 | // console.log(hoje.toLocaleDateString()) 14 | 15 | 16 | // formato global recomendado! 17 | // console.log(hoje.toISOString()) 18 | 19 | const dia = hoje.getDate() 20 | hoje.setDate(dia + 5) // +5 dias depois de hoje 21 | hoje.setHours(10, 30, 0) 22 | 23 | console.log(` 24 | Dia: ${hoje.getDate()} 25 | Mes: ${hoje.getMonth()} 26 | Ano: ${hoje.getFullYear()} 27 | Hora: ${hoje.getHours()} 28 | Minute: ${hoje.getMinutes()} 29 | Seconds: ${hoje.getSeconds()} 30 | `) 31 | 32 | console.log( 33 | new Date(2020, 1, 20) > new Date(2020, 3, 20) 34 | ) 35 | 36 | 37 | -------------------------------------------------------------------------------- /03-tipos-de-dados-pt-02/demo-08-objetos.js: -------------------------------------------------------------------------------- 1 | const pessoa = 2 | { 3 | id: '0011AABBCC', 4 | nome: 'Xuxa da Silva', 5 | idade: 40, 6 | dataNascimento: new Date(2000, 6, 1), 7 | } 8 | 9 | // console.log(pessoa.id) 10 | // console.log(pessoa['nome']) 11 | // console.log(pessoa['nomeDaMae'] = 'Maria da Silva') 12 | 13 | // ------------------- 14 | 15 | const heroi = { 16 | nome: 'Flash', 17 | idade: 100, 18 | sexo: 'Masculino' 19 | } 20 | 21 | // console.log('nome', heroi.nome) 22 | // console.log('idade', heroi['idade']) 23 | // console.log('sexo', heroi['sexo']) 24 | // console.log('naoExiste', heroi.naoExiste) 25 | // heroi.id = 0001 26 | // console.log(heroi) 27 | 28 | // imprimo as chaves do meu objeto //[ 'nome', 'idade', 'sexo' ] 29 | // console.log(Object.keys(heroi)) 30 | 31 | // saber valores // [ 'Flash', 100, 'Masculino' ] 32 | // console.log(Object.values(heroi)) 33 | 34 | novaPessoa = { 35 | tamanho: '10 metros' 36 | } 37 | 38 | //juntas dois objetos 39 | const novoObj = Object.assign(heroi, novaPessoa) 40 | 41 | console.log(novoObj) 42 | delete novoObj.nome 43 | console.log(novoObj) 44 | // por convenção e padrão não alterar o objeto original e sempre criar um novo usando o assign 45 | 46 | -------------------------------------------------------------------------------- /06-modulos-em-javascript/modulo-nodejs/main.js: -------------------------------------------------------------------------------- 1 | // require(readline) // dessa forma eu pego dos modulos internos do nodejs 2 | // require(./readline) // dessa forma eu pego de um arquivo local indicado 3 | 4 | const Matematica = require('./matematica') 5 | // console.log(Matematica.somar(1, 4)) 6 | const readline = require('readline') 7 | const terminal = readline.createInterface({ 8 | input: process.stdin, 9 | output: process.stdout 10 | }) 11 | 12 | // primeiro valor do cliente e depois o segundo valor, por isso 2 funcoes 13 | terminal.question('Insira o primeiro valor\n', valor1 => { 14 | terminal.question('Insira o segundo valor\n', valor2 => { 15 | terminal.question('Insira a operação\n', tipoOperacao => { 16 | const resultado = Matematica[tipoOperacao]( 17 | Number(valor1), Number(valor2) 18 | ) 19 | console.log( 20 | `A operação ${tipoOperacao} de ${valor1} e ${valor2} é ${resultado}` 21 | ) 22 | terminal.close() 23 | }) 24 | }) 25 | }) 26 | 27 | // a classe no fim de tudo é convertida para objeto 28 | // para acessar o objeto usar ponto ou colchetes 29 | // Exemplo: console.log(Matematica['somar'], Matematica['multiplicar']) 30 | 31 | -------------------------------------------------------------------------------- /05-controlando-o-fluxo-de-dados/demo-18-for-forin-forof.js: -------------------------------------------------------------------------------- 1 | const textoPar = 'par' 2 | const textoImpar = 'impar' 3 | // for(let index = 0; index <= 10; index++) { 4 | // const decisao = index % 2 == 0 ? textoPar : textoImpar 5 | // console.log(`O numero ${index} é ${decisao}`) 6 | // } 7 | 8 | const minhaListaDeTarefas = [ 9 | { 10 | id: parseInt(Math.random() * 10), 11 | nome: 'Zezinho', 12 | superPoder: 'Valoz' 13 | }, 14 | { 15 | id: parseInt(Math.random() * 10), 16 | nome: 'Mariazinha', 17 | superPoder: 'Super força' 18 | }, 19 | ] 20 | // console.log(minhaListaDeTarefas) 21 | 22 | // for(let index = 0; index < minhaListaDeTarefas.length; index ++) { 23 | // const item = minhaListaDeTarefas[index] 24 | // console.log( 25 | // ` 26 | // id: ${item.id} 27 | // nome: ${item.nome} 28 | // ` 29 | // ) 30 | // } 31 | 32 | // não precisa do contador 33 | // usando o for in 34 | // for(const index in minhaListaDeTarefas) { 35 | // const item = minhaListaDeTarefas[index] 36 | // console.log('Nome', item.nome) 37 | // } 38 | 39 | // não precisa usar o index 40 | // com o of pega o item especifico 41 | for(const item of minhaListaDeTarefas) { 42 | console.log('Nome', item.nome) 43 | } 44 | -------------------------------------------------------------------------------- /07-ciclo-de-vida-javascript/demo-18-callbacks.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | // // verifica no sistema operacional se o arquivo existe, se nao retorna o erro 3 | // fs.readFile('./arq1.txt', (error, resposta) => { 4 | // if (error) { 5 | // console.error('Deu ruim', error.stack) 6 | // return; 7 | // } 8 | 9 | // //deve retornar um buffer 10 | // console.log('resposta', resposta.toString()) 11 | // }) 12 | 13 | fs.readFile('./arq1.txt', (errorArq1, respostaArq1) => { 14 | if(errorArq1) { 15 | console.error('Deu ruim no arq1', errorArq1) 16 | return; 17 | } 18 | fs.readFile('./arq2.txt', (errorArq2, respostaArq2) => { 19 | if(errorArq2) { 20 | console.error('Deu ruim no arq2', errorArq2) 21 | } 22 | fs.readFile('./arq3.txt', (errorArq3, respostaArq3) => { 23 | if(errorArq3) { 24 | console.error('Deu ruim no arq3', errorArq3) 25 | } 26 | 27 | const conteudo = `${respostaArq1}\n${respostaArq2}\n${respostaArq3}` 28 | fs.writeFile('./final.txt', conteudo, (errorWrite, respostaWrite) => { 29 | if(errorWrite) { 30 | console.error('Deu ruim na gravação', errorWrite) 31 | return; 32 | } 33 | console.log('Arquivo salvo com sucesso!!') 34 | }) 35 | }) 36 | }) 37 | }) 38 | -------------------------------------------------------------------------------- /07-ciclo-de-vida-javascript/demo-19-promises.js: -------------------------------------------------------------------------------- 1 | const readline = require('readline') 2 | const terminal = readline.createInterface({ 3 | input: process.stdin, 4 | output: process.stdout 5 | }) 6 | 7 | // terminal.question('Qual é seu nome?\n', nome => { 8 | // terminal.question('Qual é seu telefone?\n', telefone => { 9 | // console.log( 10 | // ` 11 | // Nome: ${nome}, 12 | // Telefone: ${telefone} 13 | // ` 14 | // ) 15 | // terminal.close() 16 | // }) 17 | // }) 18 | 19 | // encapsulando a função questão, e trabalhando com promises 20 | function questionAsync(texto) { 21 | return new Promise((resolve, reject) => { 22 | terminal.question(`${texto}\n`, resolve) 23 | }) 24 | } 25 | 26 | let nome = "" 27 | let telefone = "" 28 | Promise.resolve() 29 | .then(() => questionAsync('Qual é seu nome?')) 30 | .then(respostaNome => { 31 | if(!respostaNome) throw new Error('campo vazio!') 32 | nome = respostaNome 33 | }) 34 | .then(() => questionAsync('Qual é o seu telefone?')) 35 | .then(respostaTelefone => { 36 | if(!respostaTelefone) throw new Error('campo vazio!') 37 | telefone = respostaTelefone 38 | }) 39 | .then(() => { 40 | console.log(`Nome: ${nome}, Telefone: ${telefone}`) 41 | }) 42 | .catch(error => { 43 | console.error(error) 44 | }) 45 | .finally(() => terminal.close()) 46 | 47 | 48 | -------------------------------------------------------------------------------- /memory-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Memory Game 7 | 8 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 | 19 | 20 |
21 |
22 | 28 |
29 |
30 | 31 |
32 |
33 | 36 |
37 | 38 | -------------------------------------------------------------------------------- /04-tipos-de-dados-pt-03/demo-14-classes.js: -------------------------------------------------------------------------------- 1 | class Heroi { 2 | atacar() { 3 | console.log(`atacou!!`) 4 | } 5 | defender() { 6 | console.log(`defendeu`) 7 | } 8 | } 9 | 10 | const heroi = new Heroi() 11 | heroi.atacar() 12 | heroi.defender() 13 | 14 | // ---------------------------------------------------- 15 | 16 | // usando constructor 17 | // this é no contexto do escopo da classe 18 | 19 | class Heroi2 { 20 | constructor(nome, idade) { 21 | this.nome = nome 22 | this.idade = idade 23 | } 24 | 25 | atacar() { 26 | console.log(` 27 | O ${this.nome} atacou !!`) 28 | } 29 | } 30 | 31 | const heroi2 = new Heroi2( 32 | `Flash`, 80 33 | ) 34 | heroi2.atacar() 35 | 36 | // ---------------------------------------------------- 37 | 38 | // Podemos usar a função na classe sem a palavra function que vai sempre olhar para o this 39 | // Para usar o this, é necessário ter ela vazia la 40 | // Mas se não precisar usar o this, pode usar o static 41 | // Dessa forma ele não faz parte das propriedades da minha classe 42 | // essas funções na programação são chamadas de helpers ou funcoes utils que não envolva nada 43 | // do meu contexto atual 44 | // executando essa funcao eu nao preciso usar o new 45 | // lembrete: o static são para valores que não se alteram, é criado dentro da função e morre logo após a criação 46 | 47 | class Heroi3 { 48 | static obterAnoNascimento(idade) { 49 | return 2020 - idade 50 | } 51 | } 52 | 53 | const anoNascimento = Heroi3.obterAnoNascimento(26) 54 | console.log( 55 | `O ano de nascimento do Heroi é ${anoNascimento}` 56 | ) 57 | -------------------------------------------------------------------------------- /06-modulos-em-javascript/modulo-browser/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Módulo em Navegadores 4 | 6 | 7 | 8 |
9 |
10 |
11 |

12 | 13 | 17 |

18 |
19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 31 |
32 |
33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /01-iniciando-com-javascript/README.md: -------------------------------------------------------------------------------- 1 | # 🤯 Iniciando com Javascript 2 | O objetivo dessa aula é instalar o Node.js, aprender sobre variáveis e tipos de dados. 3 | ---- 4 | 5 | ## 🎓 Aprendizados 6 | 7 | - [x] Introdução ao capítulo 8 | - [x] Instalação e configuração 9 | - [x] Instalando o VSCode e Node.js no Ubuntu 10 | - [x] Instalando o VSCode e Node.js no Windows 11 | - [x] Guardando informações em variáveis 12 | - [x] Demostração: Guardando informações em variáveis 13 | - [x] [Diferença entre var, let e const](#var-let-const) 14 | - [x] Variáveis 15 | 16 | --- 17 | 18 | ### Palavras reservadas que não podem ser usadas como nome de variáveis 19 | 20 | - `class` 21 | - `function` 22 | 23 | ### Como saber o que pode usar e o que não pode? 24 | 25 | Através da lista disponibilizada no [W3Schools](https://www.w3schools.com/js/js_reserved.asp), que você consegue conferir aqui também: 26 | 27 | | abstract | arguments | await* | boolean | 28 | |-----------|:-------------:|--------------:|----------:| 29 | | break | byte | case | catch | 30 | | char | class* | const | continue | 31 | | debugger | default | delete | do | 32 | | double | else | enum* | eval | 33 | | export* | extends* | false | final | 34 | | finally | float | for | function | 35 | | goto | if | implements | import* | 36 | | in | instanceof | int | interface | 37 | | let* | long | native | new | 38 | | null | package | private | protected | 39 | | public | return | short | static | 40 | | super* | switch | synchronized | this | 41 | | throw | throws | transient | true | 42 | | try | typeof | var | void | 43 | | volatile | while | with | yield | 44 | 45 | --- 46 |
47 | 48 | ## Diferença entre var, let e const 49 | 50 | - `var` não se deve usar mais, pelo fato de você não saber o comportamento dele, acabar declarando novamente e etc 51 | - `let` usa para valores que podem ser alterados por exemplo: `let contador = 0; contador = contador + 1` 52 | - `const` são valores que nunca se altera 53 | 54 | -------------------------------------------------------------------------------- /05-controlando-o-fluxo-de-dados/demo-16-switch-case.js: -------------------------------------------------------------------------------- 1 | // criando menu de seleção de forma menos verbosa 2 | // usamos o require para pegar uma classe que já existe no Node.js é para capturar eventos no caso o que o usuario esta digitando 3 | 4 | const readLine = require('readline') 5 | const terminal = readLine.createInterface({ 6 | // definir o modo de entrada via terminal 7 | input: process.stdin, 8 | // todo texto de saída sairá no terminal 9 | output: process.stdout 10 | }) 11 | 12 | // texto do menu 13 | const textoMenu = ` 14 | Olá, seja bem vindo ao sistema de média 15 | Digite 1 para acessar o menu inicial 16 | Digite 2 para acessar o menu de Herois 17 | Digite 3 para acessar o menu de Guerreiras 18 | Digite 0 para sair 19 | ` 20 | console.log('textoMenu', textoMenu) 21 | 22 | // terminal.question('Qual é seu nome?', (msg) => { 23 | // console.log('você escreveu', msg) 24 | // terminal.close() 25 | // }) 26 | 27 | const questoes = { 28 | menuInicial: { 29 | texto: textoMenu, 30 | fn: menuInicial 31 | }, 32 | opcao1: { 33 | texto: 'submenu! Pressione enter para selecionar mais opções...', 34 | fn: opcao1 35 | } 36 | } 37 | function opcao1(msg) { 38 | console.log('Não há mais opções!') 39 | terminal.close() 40 | } 41 | function menuInicial(msg) { 42 | const opcao = Number(msg) 43 | if(isNaN(opcao)) { 44 | throw new Error('Não é um número', msg) 45 | } 46 | switch(opcao) { 47 | case 0: 48 | console.log('Saindo...') 49 | terminal.close() 50 | break; 51 | case 1: 52 | console.log('menu inicial') 53 | terminal.question( 54 | questoes.opcao1.texto, 55 | questoes.opcao1.fn 56 | ) 57 | break; 58 | default: 59 | console.log('opcao invalida') 60 | terminal.close() 61 | break; 62 | } 63 | } 64 | 65 | terminal.question( 66 | questoes.menuInicial.texto, 67 | questoes.menuInicial.fn 68 | ) 69 | 70 | -------------------------------------------------------------------------------- /03-tipos-de-dados-pt-02/demo-07-listas.js: -------------------------------------------------------------------------------- 1 | const pokemon = [ 2 | 'Bulbassaur', 3 | 'Pikachu', 4 | 'Squirtle', 5 | 'Charmander' 6 | ] 7 | 8 | [0] === 'Bulbassaur' 9 | [1] === 'Pikachu' 10 | [2] === 'Squirtle' 11 | [5] === undefined 12 | 13 | // ----------------- 14 | 15 | const minhaLista = [] 16 | const minhaListaDeTarefas = [ 17 | 'mandar email', 18 | 'colocar comida para o dog', 19 | 'limpar o quarto' 20 | ] 21 | 22 | // console.log(minhaListaDeTarefas[0]) 23 | // console.log(minhaListaDeTarefas[1]) 24 | // console.log(minhaListaDeTarefas[4]) 25 | 26 | //quantidade de itens no array 27 | // console.log(minhaListaDeTarefas.length) 28 | 29 | // adicionar item no final da lista 30 | minhaListaDeTarefas.push('formatar computador') 31 | // console.log(minhaListaDeTarefas); 32 | 33 | // remover ultimo da lista 34 | // const ultimo = minhaListaDeTarefas.pop() //pego o valor removido na variavel ultimo 35 | // console.log(ultimo, minhaListaDeTarefas) 36 | 37 | // remover o primeiro da lista 38 | // const primeiro = minhaListaDeTarefas.shift() //pego o primeiro valor removido da lista 39 | // console.log(primeiro, minhaListaDeTarefas) 40 | 41 | // remover um item especifico a partir de um indice 42 | // console.log(minhaListaDeTarefas[2]) 43 | // qual item de inicio 44 | // quantos remover 45 | // minhaListaDeTarefas.splice(2, 1) 46 | // console.log(minhaListaDeTarefas) 47 | 48 | const itens = [ 49 | 1, 'computador', 0.22 50 | ] 51 | 52 | // verificar o array 53 | // console.log(typeof(itens)) 54 | 55 | console.log(Array.isArray(itens)) // essa é a forma corretar de verificar se o retorno é um array 56 | 57 | // ordernar 58 | // const numeros = [ 3, 2, 1, 0] 59 | // console.log(numeros.sort()) 60 | 61 | // juntar dois arrays 62 | // const novoArray = itens.concat([4, 5, 6]) 63 | // console.log(novoArray) 64 | 65 | // console.log(itens.join('---')) // 1---computador---0.22 66 | 67 | // verificar indice/posicao do item no meu array 68 | // const index = itens.indexOf('computador') 69 | // console.log(index) 70 | 71 | // const index = itens.indexOf('chaves') 72 | // console.log(index) // -1 73 | 74 | const index = itens.indexOf('computador') 75 | console.log(itens[index]) 76 | -------------------------------------------------------------------------------- /04-tipos-de-dados-pt-03/demo-12-functions.js: -------------------------------------------------------------------------------- 1 | function nomeDaFuncao(parametro1) { 2 | //bloco de codigo 3 | } 4 | 5 | function queDiaEhoje() { 6 | const data = new Date() 7 | console.log(`Hoje é dia: ${data.getDate()}`) 8 | } 9 | queDiaEhoje() 10 | 11 | function soma(valor1, valor2) { 12 | console.log(`A soma de ${valor1} + ${valor2} é`, valor1 + valor2) 13 | } 14 | soma(10, 20) 15 | soma(2, 4) 16 | 17 | // Funções que podem retornar valores 18 | function soma (valor1, valor2) { 19 | return valor1 + valor2 20 | } 21 | const idade = 20 22 | const tamanho = 10 23 | const resultado = soma(idade, tamanho) 24 | console.log('resultado', resultado) 25 | 26 | // não é boa prática passar os valores direto para a função, e sim através de variaveis como no ex: resultado 27 | 28 | function multiplicar(valor1, valor2) { 29 | const resultado = valor1 * valor2 30 | return resultado 31 | } 32 | console.log(`O resultado da multiplicao é:`, multiplicar(10,30)) 33 | 34 | //// 35 | 36 | const funcionario1 = { 37 | nome: 'Zezinho', 38 | desconto: 0.2, 39 | salarioBruto: 2000, 40 | salarioLiquido: 0 41 | } 42 | 43 | const funcionario2 = { 44 | nome: 'Mariazinha', 45 | desconto: 0.1, 46 | salarioBruto: 2000, 47 | salarioLiquido: 0 48 | } 49 | 50 | // const descontoFuncionario1 = 51 | // funcionario1.salarioBruto - (funcionario1.desconto * funcionario1.salarioBruto) 52 | 53 | 54 | // const descontoFuncionario2 = 55 | // funcionario2.salarioBruto - (funcionario2.desconto * funcionario2.salarioBruto) 56 | 57 | // console.log(descontoFuncionario1) 58 | // console.log(descontoFuncionario2) 59 | 60 | function calcularDesconto(salarioBruto, desconto) { 61 | return salarioBruto - (salarioBruto * desconto) 62 | } 63 | 64 | funcionario1.salarioLiquido = calcularDesconto( 65 | funcionario1.salarioBruto, 66 | funcionario1.desconto 67 | ) 68 | 69 | funcionario2.salarioLiquido = calcularDesconto( 70 | funcionario2.salarioBruto, 71 | funcionario2.desconto 72 | ) 73 | 74 | console.log(` 75 | Salário ${funcionario1.nome}: ${funcionario1.salarioLiquido} 76 | Salário ${funcionario2.nome}: ${funcionario2.salarioLiquido} 77 | `) 78 | 79 | 80 | -------------------------------------------------------------------------------- /memory-game/arquivos/padrao.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /memory-game/arquivos/batman.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /04-tipos-de-dados-pt-03/README.md: -------------------------------------------------------------------------------- 1 | # 🤯 Tipo de dados em Javascript - parte 3 2 | Como interceptar quando alguém acessar o meu objeto? Ou tenta inserir um novo valor para esse objeto? 3 | Nesse caso se pode utilizar modificadores de acesso ou métodos acessores de objetos get/set 4 | 5 | ---- 6 | 7 | ```` 8 | const pessoa = { 9 | _nome: "", 10 | get nome() { 11 | return this._nome 12 | }, 13 | set nome(n) { 14 | this._nome = n.toUpperCase() 15 | }, 16 | } 17 | 18 | pessoa.nome = 'joselita do céu' 19 | ```` 20 | 21 | ---- 22 | 23 | ## 🎓 Aprendizagem 24 | 25 | - [x] Conhecendo os métodos assessores get/set de objetos 26 | - [x] Demonstração: conhecendo objetos globais pré-definidos 27 | - [x] Demonstração: Trabalhando com datas 28 | - [x] Funções em javascript 29 | - [x] Formas de declarar uma função: expressão, declarativa e arrow function 30 | - [x] Trabalhando com classes 31 | - [x] Demonstração: Trabalhando com classes 32 | 33 | --- 34 | 35 | ## Convenção dos desenvolvedores javascript 36 | 37 | - Sempre que declarar uma variavel private deixá-la com um underline (_) na frente do seu nome, exemplo: `_nome` 38 | 39 | --- 40 | 41 | ## Entendendo classes 42 | 43 | Representação de Piloto: 44 | 45 | ```` 46 | 47 | Dados: 48 | 49 | Nome = José da Silva 50 | Data de nascimento = 01/05/1972 51 | Tempo de voo = 10 anos 52 | Tem permissão para voar = Não 53 | 54 | ```` 55 | 56 | ```` 57 | Objeto: 58 | 59 | const piloto = { 60 | nome: 'José da silva', 61 | nascimento: 01/05/1972, 62 | tempoVoo: '10 years', 63 | permissaoVoo: false 64 | } 65 | 66 | ```` 67 | 68 | Acessos: 69 | 70 | pilotar() 71 | 72 | dormir () 73 | 74 | acordar() 75 | 76 | tomarUnsDrinks() 77 | 78 | ```` 79 | 80 | class Piloto { 81 | constructor( 82 | nome, 83 | dataNascimento, 84 | tempoDeVoo, 85 | temPermissaoParaVoar 86 | ) { 87 | this.nome = nome; 88 | this.dataNascimento = dataNascimento; 89 | this.tempoDeVoo = tempoDeVoo; 90 | this.temPermissaoParaVoar = temPermissaoParaVoar; 91 | } 92 | } 93 | 94 | ```` 95 | 96 | ```` 97 | 98 | class Piloto { 99 | constructor( 100 | nome, 101 | dataNascimento, 102 | tempoDeVoo, 103 | temPermissaoParaVoar 104 | ) 105 | 106 | const piloto = new Piloto( 107 | 'geraldino', 108 | new Date(1990, 2, 3), 109 | '10 anos', 110 | true 111 | ) 112 | } 113 | 114 | piloto.nome // geraldino 115 | piloto.dataNascimento // 03 1990 00:00:00 GMT-0300 116 | 117 | ```` 118 | 119 | ```` 120 | 121 | class Piloto { 122 | constructor( ... 123 | } 124 | 125 | pilotar() { 126 | console.log(`${this.nome} vai pilotar!`); 127 | } 128 | 129 | dormir() { 130 | console.log(`${this.nome` vai dormir!); 131 | } 132 | 133 | ```` 134 | 135 | ```` 136 | 137 | piloto.pilotar() 138 | 139 | piloto.dormir() 140 | 141 | ```` 142 | 143 | Obs: No conceito de classes não se utiliza a palavra function ao criar um função como o pilotar e dormir. -------------------------------------------------------------------------------- /07-ciclo-de-vida-javascript/README.md: -------------------------------------------------------------------------------- 1 | # 🤯 Ciclo de vida do Javascript 2 | Abordagem de funções assíncronas, cenários da vida real e porque tudo isso embola tanto a vida dos desenvolvedores. 3 | 4 | ---- 5 | 6 | ## 🎓 Aprendizagem 7 | 8 | - [x] Introdução ao capítulo 9 | - [x] Funções assíncronas? 10 | - [x] O que são Callbacks? 11 | - [x] Demonstração: Trabalhando com Callbacks 12 | - [x] O que são Promises? 13 | - [x] Trabalhando com Promises? 14 | - [x] Como usar async/await para resolver Promises? 15 | 16 | --- 17 | 18 | ## Entendendo sincronismo 19 | 20 | - Imagina que você está em na fila do banco e precisa aguardar cada pessoa ser atendida para conseguir resolver as suas coisas e durante esse tempo não pode fazer nada. Ou seja, tem que aguardar um a um ser atendido até chegar a sua vez, isso na programação é chamado de sincronia, sempre um atrás do outro. 21 | 22 | ![bank](https://media.giphy.com/media/3o6Ztm0VpFKWc5YSUE/source.gif) 23 | 24 | - E assincronia o que seria? É parecido com o fastfood, por exemplo você faz o pedido e recebe uma senha, enquanto aguarda pelo lanche você pode fazer várias outras coisas ao mesmo tempo, como fazer uma ligação, jogar um jogo, sair e dar uma volta, e ai o seu pedido fica pronto e a sua senha é chamada. Isso é chamado de Callback (chamada de volta), você vai entrega a senha e recebe o lanche. 25 | 26 | ![fastfood](https://media.giphy.com/media/26uflHoMuKMUInB5K/source.gif) 27 | 28 | - assincronia = termina as coisas sobre demanda e aos poucos 29 | 30 | --- 31 | 32 | ## Event Loop 33 | 34 | - Dentro do event loop o javascript executa uma função por vez e 1. recebe essa função assincrona, como uma leitura de um arquivo ou processamento de um dado e em seguida ele 2. delega para o sistema operacional fazendo o pedido "windows, quando você conseguir ler e obter os dados, faz um callback e me chama de volta", feito isso o 3. javascript continua executando outras coisas, quando o sistema operacional termina ele 4. devolve a resposta pro event loop que 5. retorna para quem chamou. 35 | 36 | - Desta forma o Javascript sempre executa as operações sobre demanda e por isso é mais rápido, pois não precisa parar toda a sua execução para fazer alguma coisa. 37 | 38 | ```` 39 | 40 | const callback = function(msg) { 41 | console.log(msg) 42 | } 43 | 44 | terminal.question("Nome", callback) 45 | 46 | ```` 47 | 48 | Neste exemplo usando o terminal.question o que passamos como segundo argumento vai ser sempre o callback, que é a função que vai ser executada quando o terminal acabar. 49 | 50 | Por convenção usamos o callback sempre com 2 parâmetros, sendo o primeiro de erro e o segundo o sucesso. 51 | 52 | ```` 53 | 54 | const callback = function(error, result) { 55 | if (error) return console.log(error) 56 | return console.log(result) 57 | } 58 | 59 | fs.readFile('arquivo.txt', callback) 60 | 61 | ```` 62 | 63 | 64 | ## Promise 65 | 66 | Recurso nativo do javascript 67 | 68 | ```` 69 | 70 | new Promise((resolve, reject) => { 71 | return resolve(sucesso) 72 | return reject(erro) 73 | }) 74 | .then(sucesso => ({})) 75 | .catch(erro => ({})) 76 | .then(sucesso => ({})) 77 | .then(sucesso => ({})) 78 | .catch(erro => ({})) 79 | .finally(resultado => ({})) 80 | 81 | ```` 82 | 83 | ```` 84 | 85 | const readFile = caminho => 86 | new Promise((resolve, reject) => { 87 | fs.readFile(caminho, (error, res) => { 88 | error ? reject(error) : resolve(res) 89 | }) 90 | }) 91 | 92 | ```` 93 | 94 | ```` 95 | 96 | readFile(arquivo.txt) 97 | .then(conteudo, fn) 98 | .catch(erro, fn) 99 | 100 | ```` 101 | 102 | Outro exemplo: 103 | 104 | ```` 105 | 106 | procurarUsuario() 107 | .then(usuario 108 | 109 | procurarEndereco(idUsuario) 110 | .then(endereco 111 | 112 | procurarTelefone(idUsuario) 113 | .then(telefone 114 | 115 | imprimirUsuario( 116 | nome, rua, telefone 117 | ) 118 | .catch(error 119 | 120 | ```` 121 | 122 | Importante lembrar que cada .then herda o resultado do anterior 123 | -------------------------------------------------------------------------------- /memory-game/src/tela.js: -------------------------------------------------------------------------------- 1 | // metodos estáticos nao podem acessar o `this` 2 | // por isso, nao vamos colocar o util no construtor 3 | const util = Util 4 | 5 | const ID_CONTEUDO = "conteudo" 6 | const ID_BTN_JOGAR = "jogar" 7 | const ID_MENSAGEM = "mensagem" 8 | const ID_CARREGANDO = "carregando" 9 | const ID_CONTADOR = "contador" 10 | const ID_BTN_MOSTRAR_TUDO = "mostrarTudo" 11 | 12 | const CLASSE_INVISIVEL = "invisible" 13 | 14 | const MENSAGENS = { 15 | sucesso: { 16 | texto: 'Combinação correta!', 17 | classe: 'alert-sucess' 18 | }, 19 | erro: { 20 | texto: 'Combinação incorreta!', 21 | classe: 'alert-danger' 22 | } 23 | } 24 | 25 | class Tela { 26 | static obterCodigoHtml(item) { 27 | return ` 28 |
29 |
30 | ... 31 |
32 |
33 |
34 | ` 35 | } 36 | static configurarBotaoVerificarSelecao(funcaoOnClick) { 37 | window.verificarSelecao = funcaoOnClick 38 | } 39 | static alterarConteudoHtml(codigoHtml) { 40 | const conteudo = document.getElementById(ID_CONTEUDO) 41 | conteudo.innerHTML = codigoHtml 42 | } 43 | static gerarStringHTMLPelaImagem(itens) { 44 | // para cada item da lista, vai executar a função obterCodigoHtml 45 | // ao final, vai concatenar tudo em uma unica string 46 | // muda de Array para String 47 | return itens.map(Tela.obterCodigoHtml).join('') 48 | } 49 | static atualizarImagens(itens) { 50 | const codigoHtml = Tela.gerarStringHTMLPelaImagem(itens) 51 | Tela.alterarConteudoHtml(codigoHtml) 52 | } 53 | 54 | static configurarBotaoJogar(funcaoOnClick) { 55 | const btnJogar = document.getElementById(ID_BTN_JOGAR) 56 | btnJogar.onclick = funcaoOnClick 57 | } 58 | static async exibirHerois(nomeDoHeroi, img) { 59 | const elementosHtml = document.getElementsByName(nomeDoHeroi) 60 | // para cada elemento encontrado na tela, vamos alterar a imagem 61 | // para a imagem inicial dele 62 | // com o forEach, para cada item, dentro dos () setamos o valor 63 | // de imagem 64 | elementosHtml.forEach(item => (item.src = img)) 65 | } 66 | static async exibirMensagem(sucesso = true) { 67 | const elemento = document.getElementById(ID_MENSAGEM) 68 | if(sucesso) { 69 | elemento.classList.remove(MENSAGENS.erro.classe) 70 | elemento.classList.add(MENSAGENS.sucesso.classe) 71 | elemento.innerText = MENSAGENS.sucesso.texto 72 | } 73 | else { 74 | elemento.classList.remove(MENSAGENS.sucesso.classe) 75 | elemento.classList.add(MENSAGENS.erro.classe) 76 | elemento.innerText = MENSAGENS.erro.texto 77 | } 78 | elemento.classList.remove(CLASSE_INVISIVEL) 79 | await util.timeout(1000) 80 | elemento.classList.add(CLASSE_INVISIVEL) 81 | } 82 | 83 | static exibirCarregando(mostrar = true) { 84 | const carregando = document.getElementById(ID_CARREGANDO) 85 | if(mostrar) { 86 | carregando.classList.remove(CLASSE_INVISIVEL) 87 | return; 88 | } 89 | carregando.classList.add(CLASSE_INVISIVEL) 90 | } 91 | static iniciarContador() { 92 | let contarAte = 3 93 | const elementoContador = document.getElementById(ID_CONTADOR) 94 | // vamor substituir o texto Começando $$contador segundos 95 | // onde está o $$contador adicionaremos o valor 96 | const identificadorNoTexto = "$$contador" 97 | const textoPadrao = `Começando em ${identificadorNoTexto} segundos...` 98 | // vamos criar uma funcao em linha para atualizar o texto 99 | // a cada segundo 100 | const atualizarTexto = () => 101 | (elementoContador.innerHTML = textoPadrao.replace(identificadorNoTexto, contarAte--)) 102 | 103 | atualizarTexto() 104 | // a cada segundo, vai chamar a funcao atualizar texto 105 | // essa função vai substituir o $$contador pelo `contarAte` diminuindo o contador 106 | // retornando o idDoIntervalo para parar ele mais tarde 107 | const idDoIntervalo = setInterval(atualizarTexto, 1000) 108 | return idDoIntervalo 109 | } 110 | 111 | static limparContador(idDoIntervalo) { 112 | clearInterval(idDoIntervalo) 113 | // deixamos sem texto 114 | document.getElementById(ID_CONTADOR).innerHTML = "" 115 | } 116 | static configurarBotaoMostrarTudo(funcaoOnClick) { 117 | const btnMostrarTudo = document.getElementById(ID_BTN_MOSTRAR_TUDO) 118 | btnMostrarTudo.onclick = funcaoOnClick 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /memory-game/src/jogoDaMemoria.js: -------------------------------------------------------------------------------- 1 | // logica do jogo 2 | // no construtor eu informo as dependencias que eu preciso para a classe 3 | 4 | class JogoDaMemoria { 5 | // se mandar um obj = { tela: 1, idade: 2, etc: 3} 6 | // vai ignorar o resto das propriedades e pegar somente as propriedade 7 | // tela 8 | constructor({ tela, util }) { 9 | this.tela = tela 10 | this.util = util 11 | 12 | this.heroisIniciais = [ 13 | { img: './arquivos/batman.svg', nome: 'batman'}, 14 | { img: './arquivos/frank.svg', nome: 'frank' }, 15 | { img: './arquivos/groot.svg', nome: 'groot' }, 16 | { img: './arquivos/mulhermaravilha.svg', nome: 'mulhermaravilha' } 17 | ] 18 | 19 | this.iconePadrao = './arquivos/padrao.svg' 20 | this.heroisEscondidos = [] 21 | this.heroisSelecionados = [] 22 | } 23 | // para usar o this, não podemos usar static! 24 | inicializar() { 25 | // vai pegar todas as funcoes da classe tela! 26 | // coloca todos os herois na tela 27 | this.tela.atualizarImagens(this.heroisIniciais) 28 | // força a tela a usar o THIS de jogo da memoria 29 | // com o .bind o this vai olhar para dentro do this do jogoDaMemoria 30 | this.tela.configurarBotaoJogar(this.jogar.bind(this)) 31 | this.tela.configurarBotaoVerificarSelecao(this.verificarSelecao.bind(this)) 32 | this.tela.configurarBotaoMostrarTudo(this.mostrarHeroisEscondidos.bind(this)) 33 | } 34 | async embaralhar() { 35 | const copias = this.heroisIniciais 36 | // duplicar os itens 37 | .concat(this.heroisIniciais) 38 | // entrar em cada item e criar um id aleatorio 39 | .map(item => { 40 | return Object.assign({}, item, { id: Math.random() / 0.5}) 41 | }) 42 | // ordernar 43 | .sort(() => Math.random() - 0.5) 44 | 45 | this.tela.atualizarImagens(copias) 46 | this.tela.exibirCarregando() 47 | 48 | const idDoIntervalo = this.tela.iniciarContador() 49 | 50 | // vamos esperar 3 segundo para atualizar a tela 51 | await this.util.timeout(3000) 52 | this.tela.limparContador(idDoIntervalo) 53 | this.esconderHerois(copias) 54 | this.tela.exibirCarregando(false) 55 | } 56 | esconderHerois(herois) { 57 | // vamos trocar a imagem de todos os herois existentes 58 | // pelo icone padrão 59 | // como fizemos no construtor, vamor extrair somente o necessario 60 | // usando a sintaze ({ chave: 1 }) estamos falando que vamos retornar 61 | // o que tiver dentro dos parenteses 62 | // quando nao usamos : (exemplo do id), o JS entende que o nome 63 | // é o mesmo do valor. Ex. id: id, vira id, 64 | const heroisOcultos = herois.map(( {nome, id}) => ({ 65 | id, 66 | nome, 67 | img: this.iconePadrao 68 | })) 69 | // atualizamos a tela com os herois ocultos 70 | this.tela.atualizarImagens(heroisOcultos) 71 | // guardamos os herois para trabalhar com 72 | this.heroisEscondidos = heroisOcultos 73 | } 74 | exibirHerois(nomeDoHeroi) { 75 | // vamos procurar essse heroi pelo nome em nossos heroisIniciais 76 | // vamos obter somente a imagem dele 77 | const { img } = this.heroisIniciais.find(({ nome }) => nomeDoHeroi === nome) 78 | // vamos criar a funcao na tela, para exibir somente o heroi selecionado 79 | this.tela.exibirHerois(nomeDoHeroi, img) 80 | } 81 | verificarSelecao(id, nome) { 82 | const item = { id, nome } 83 | // vamos verificar a quantidade de herois selecionados 84 | // e tomar ação se escolheu certo ou errado 85 | const heroisSelecionados = this.heroisSelecionados.length 86 | switch(heroisSelecionados) { 87 | case 0: 88 | // adiciona a escolha na lista, esperando pela próxima 89 | // clicada 90 | this.heroisSelecionados.push(item) 91 | break; 92 | case 1: 93 | // se a quantidade de escolhidos for 1, significa 94 | // que o usuario só podde escolher mais um 95 | // vamos obter o primeiro item da lista 96 | const [ opcao1 ] = this.heroisSelecionados 97 | // zerar itens para nao selecionar mais de dois 98 | this.heroisSelecionados = [] 99 | // conferimos se os nomes e ids batem conforme 100 | // o esperado 101 | if(opcao1.nome === item.nome && 102 | // aqui verificamos se são ids diferentes para 103 | // o usuario nao clicar duas vezes no mesmo 104 | opcao1.id !== item.id 105 | ) { 106 | this.exibirHerois(item.nome) 107 | // como o padrao é true, nao precisa passar nada 108 | this.tela.exibirMensagem() 109 | // para a execucao 110 | return; 111 | } 112 | 113 | this.tela.exibirMensagem(false) 114 | // fim do case!! 115 | break; 116 | } 117 | } 118 | mostrarHeroisEscondidos() { 119 | // vamos pegar todos os herois da tela e colocar seu 120 | // respectivo valor correto 121 | const heroisEscondidos = this.heroisEscondidos 122 | for(const heroi of heroisEscondidos) { 123 | const { img } = this.heroisIniciais.find(item => item.nome === heroi.nome) 124 | heroi.img = img 125 | } 126 | this.tela.atualizarImagens(heroisEscondidos) 127 | } 128 | jogar() { 129 | this.embaralhar() 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /memory-game/arquivos/mulhermaravilha.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /memory-game/arquivos/frank.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /memory-game/arquivos/groot.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------