├── js-avancado ├── projeto │ ├── .gitignore │ ├── package.json │ ├── package-lock.json │ ├── app.js │ ├── projeto.md │ └── database.js └── exemplos │ ├── template-string.js │ ├── arrow-functions.js │ ├── operador-ternario.js │ ├── objetos.js │ ├── objetos2.js │ └── arrays.js ├── js-basico ├── repostas │ ├── exemplo14.js │ └── exemplo34.js ├── exercicios.md └── conteudo.md └── README.md /js-avancado/projeto/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /js-avancado/exemplos/template-string.js: -------------------------------------------------------------------------------- 1 | "Simara é" 2 | let role = "transformadora" 3 | 4 | console.log(`Simara é ${role}`) 5 | 6 | console.log("Simara é" + " " + role) -------------------------------------------------------------------------------- /js-basico/repostas/exemplo14.js: -------------------------------------------------------------------------------- 1 | //Imprima na tela os números pares existentes entre 0 e 100. 2 | 3 | for (let i = 0; i <= 100; i++){ 4 | if (i % 2 === 0) { 5 | console.log(i) 6 | } 7 | } -------------------------------------------------------------------------------- /js-avancado/exemplos/arrow-functions.js: -------------------------------------------------------------------------------- 1 | // function 2 | 3 | function soma(a,b) { 4 | return a + b 5 | } 6 | 7 | console.log(soma(3,5)) //8 8 | 9 | //arrow function 10 | 11 | const soma = (num1, num2) => num1 + num2 12 | 13 | const sayHello = name => `Hello ${name}` 14 | 15 | console.log(sayHello('Mari')) -------------------------------------------------------------------------------- /js-avancado/projeto/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "projeto", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "node app.js" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "readline-sync": "^1.4.10" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /js-avancado/exemplos/operador-ternario.js: -------------------------------------------------------------------------------- 1 | // if...else 2 | 3 | // if (idade >= 18) { 4 | // return 'Maior de idade' 5 | // } else { 6 | // return 'Menor de idade' 7 | // } 8 | 9 | // idade >= 18 ? 'Maior de idade': 'Menor de idade' 10 | 11 | function calculaIdade(idade) { 12 | return idade >= 18 ? 'Maior de idade': 'Menor de idade' 13 | } 14 | console.log(calculaIdade(15)) -------------------------------------------------------------------------------- /js-avancado/exemplos/objetos.js: -------------------------------------------------------------------------------- 1 | const pessoa = { 2 | nome: "Simara", 3 | idade: 32, 4 | cidade: "São Paulo" 5 | } 6 | 7 | //Notação de ponto 8 | console.log(pessoa.nome) //"Simara" 9 | 10 | //Notação de colchetes 11 | console.log(pessa['idade']) //32 12 | 13 | //Como desestruturar Objetos 14 | 15 | const { nome, idade, cidade } = pessoa 16 | 17 | console.log(nome) //"Simara" 18 | console.log(idade) //32 19 | console.log(cidade) //São Paulo -------------------------------------------------------------------------------- /js-avancado/projeto/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "projeto", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "readline-sync": { 8 | "version": "1.4.10", 9 | "resolved": "https://registry.npmjs.org/readline-sync/-/readline-sync-1.4.10.tgz", 10 | "integrity": "sha512-gNva8/6UAe8QYepIQH/jQ2qn91Qj0B9sYjMBBs3QOB8F2CXcKgLxQaJRP76sWVRQt+QU+8fAkCbCvjjMFu7Ycw==" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /js-avancado/exemplos/objetos2.js: -------------------------------------------------------------------------------- 1 | const filmes = [ 2 | { 3 | id: 1, 4 | titulo: "Dilema das Redes", 5 | descricao: "Um documentario sobre tecnologia.", 6 | duracao: 120 7 | }, 8 | { 9 | id: 2, 10 | titulo: "Us", 11 | descricao: "Um filme de terror legal demais.", 12 | duracao: 120 13 | }, 14 | { 15 | id: 3, 16 | titulo: "Corra", 17 | descricao: "Um filme de suspense bem legal.", 18 | duracao: 120 19 | }, 20 | ] 21 | 22 | const [{id, titulo, descricao, duracao}] = filmes 23 | 24 | filmes.map(filme => console.log(filme.descricao)) -------------------------------------------------------------------------------- /js-basico/repostas/exemplo34.js: -------------------------------------------------------------------------------- 1 | //Crie um algoritmo que receba três notas de um aluno, calcule sua média e mostre as seguintes mensagens de acordo com cada situação: 2 | // - Se a media for igual ou maior que 7 - Aprovado 3 | // - Se a media for maior e igual a cinco e menor que 7 - Recuperação 4 | // - Se a media for menor que 5 - Reprovado| 5 | 6 | function calculaMedia(nota1,nota2,nota3) { 7 | let media = (nota1 + nota2 + nota3)/3 8 | 9 | if (media >= 7) { 10 | return 'Aprovado' 11 | } 12 | 13 | if (media >=5 && media<7) { 14 | return 'Recuperação' 15 | } 16 | 17 | if (media < 5) { 18 | return 'Reprovado' 19 | } 20 | } 21 | 22 | console.log(calculaMedia(8,5,8)) -------------------------------------------------------------------------------- /js-avancado/projeto/app.js: -------------------------------------------------------------------------------- 1 | //pegar o input 2 | //Se for Sim, mostra as categorias disponiveis, pergunta qual categoria ela escolhe 3 | //Se não, mostra todos os livros em ordem crescente pela quantidade de páginas 4 | 5 | const livros = require('./database') 6 | const readline = require('readline-sync') 7 | 8 | const entradaInicial = readline.question('Deseja buscar um livro?S/N') 9 | 10 | if (entradaInicial.toLocaleUpperCase() === 'S') { 11 | console.log('Essas são as categorias disponiveis:') 12 | console.log('Produtividade', '/História brasileira','/Américas','/Estilo de vida','/Tecnologia') 13 | 14 | const entradaCategoria = readline.question('Qual categoria você escolhe:') 15 | 16 | const retorno = livros.filter(livro => livro.categoria === entradaCategoria) 17 | 18 | console.table(retorno) 19 | } else { 20 | const livrosOrdenados = livros.sort((a,b)=> a.paginas - b.paginas) 21 | console.log('Essas são todos os livros disponiveis:') 22 | console.table(livrosOrdenados) 23 | } -------------------------------------------------------------------------------- /js-avancado/projeto/projeto.md: -------------------------------------------------------------------------------- 1 | ## Nosso projetinho do módulo js avançado 2 | 3 | Vamos criar um sistema que armazena informações de livros . 4 | 5 | 6 | > Passo a passo: 7 | 1) Vamos criar uma pasta e seguir os passos abaixo: 8 | Passo 1: npm init -y 9 | 10 | Passo 2: npm i --save readline-sync 11 | 12 | Passo 3: crie o script de start 13 | 14 | Passo 4: criar .gitignore 15 | 16 | Passo 5: criar um arquivo que simula uma database, com um array de objetos, não esquecer de exportar 17 | 18 | Passo 6: criar o arquivo app.js 19 | 20 | Passo 9: Rodar projeto npm start 21 | **`E partiu codar!`** 22 | 23 | 24 | 2) No arquivo database crie e exporte a sua base no formato array de objetos contendo alguns dos livros que você já leu ou gostaria de ler com os seguintes campos: 25 | 26 | ``` 27 | nome: string 28 | categoria: string 29 | autor: string 30 | paginas: number 31 | recomenda: boolean 32 | leu: boolean 33 | ``` 34 | 35 | 3) No arquivo app.js desenvolva sua lógica para o comportamento abaixo: 36 | - deverá ser possível buscar livros pela categoria 37 | - caso a pessoa usuária não escolha buscar, deverá mostrar todos os livros cadastrados, ordenados de forma crescente por quantidade de páginas. 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /js-avancado/exemplos/arrays.js: -------------------------------------------------------------------------------- 1 | const alunasGama = ["Paula", "Maria", "Estela", "Clara"] 2 | 3 | //Acessar informações num array 4 | console.log(alunasGama[3]) //"Clara" 5 | 6 | // Operador spread (...) 7 | const alunasXp = [...alunasGama, "Simara"] 8 | 9 | console.log(alunasXp) 10 | 11 | //Metodos de iteração 12 | //Map 13 | alunasXp.map(aluna => console.log(aluna)) 14 | 15 | 16 | // 17 | 18 | //Filter 19 | const numeros = [34, 45, 67, 90, 55, 76] 20 | 21 | const numerosImpares = numeros.filter(numero => numero%2 !=0) 22 | console.log(numerosImpares) 23 | 24 | const numerosPares = numeros.filter(numero => numero%2 ==0) 25 | console.log(numerosPares) 26 | 27 | 28 | const produtos = ["geladeira", "fogao", "cama", "mesa"] 29 | 30 | //find 31 | 32 | const encontraCama = produtos.find(produto => produto === "cama") 33 | console.log(encontraCama) 34 | 35 | const encontraMesa = produtos.find(produto => produto === "mesa") 36 | console.log(encontraMesa) 37 | 38 | //sort - ordenação 39 | 40 | const numerosOrdenadosCrescente = numeros.sort() 41 | console.log(numerosOrdenadosCrescente) 42 | 43 | const numerosOrdenadosDecrescente = numeros.sort((a,b)=> b-a) 44 | console.log(numerosOrdenadosDecrescente) 45 | 46 | 47 | //reduce - reduz nosso array a um resultado de uma operação matemática 48 | 49 | const numbers = [1,34,35] 50 | 51 | const soma = numbers.reduce((valorAnterior, valorAtual)=> { 52 | return valorAnterior + valorAtual 53 | }) 54 | 55 | console.log(soma) //75 -------------------------------------------------------------------------------- /js-avancado/projeto/database.js: -------------------------------------------------------------------------------- 1 | const livros = [ 2 | { 3 | id: 1, 4 | nome: "Digital Minimalism", 5 | autor:"Cal Newport", 6 | categoria: "Produtividade e estilo de vida", 7 | paginas: 254, 8 | recomenda: false, 9 | leu: false 10 | }, 11 | { 12 | id: 2, 13 | nome: "O Genocídio do negro brasileiro", 14 | autor:"Abdias do Nascimento", 15 | categoria: "História brasileira", 16 | paginas: 254, 17 | recomenda: false, 18 | leu: false 19 | }, 20 | { 21 | id: 3, 22 | nome: "As veias abertas da américa latina", 23 | autor:"Eduardo galeano", 24 | categoria: "Américas", 25 | paginas: 400, 26 | recomenda: false, 27 | leu: false 28 | }, 29 | { 30 | id: 4, 31 | nome: "Algoritmos para viver", 32 | autor:"Brian Christian", 33 | categoria: "Tecnologia", 34 | paginas: 412, 35 | recomenda: true, 36 | leu: true 37 | }, 38 | { 39 | id: 5, 40 | nome: "Thinking, fast and slow", 41 | autor:"Daniel Kahneman", 42 | categoria: "Estilo de vida", 43 | paginas: 418, 44 | recomenda: true, 45 | leu: true 46 | }, 47 | { 48 | id: 6, 49 | nome: "Padrões Javascript", 50 | autor:"Stoyan Stefanov", 51 | categoria: "Tecnologia", 52 | paginas: 231, 53 | recomenda: true, 54 | leu: true 55 | } 56 | ] 57 | 58 | module.exports = livros -------------------------------------------------------------------------------- /js-basico/exercicios.md: -------------------------------------------------------------------------------- 1 | **Exercícios de revisão:** 2 | 3 | | Exemplo 01 | Descrição | 4 | | --- | --- | 5 | | `Variaveis` | Vamos criar variaveis usando let, const e var, atribuir valores, identificar comportamentos e saídas quando tentarmos recuperar. | 6 | 7 | | Exemplo 02 | Descrição | 8 | | --- | --- | 9 | | `Concatenar x interpolar` | Vamos criar variaveis usando let, const e var, atribuir strings e vamos concatenar e interpolar. | 10 | 11 | | Exemplo 03 | Descrição | 12 | | --- | --- | 13 | | `Média entre números` | Crie uma variavel e atribua como valor uma operacao de média entre 5 números inteiros e positivos. | 14 | 15 | | Exemplo 04 | Descrição | 16 | | --- | --- | 17 | | `Quero lucrar` | Crie um programa que me diga como lucrar nesta situação: quero vender uma bicicleta que 60% do seu valor é R$300, por quanto devo vendê-la para lucrar 25%? | 18 | 19 | | Exemplo 05 | Descrição | 20 | | --- | --- | 21 | | `Quero somar` | Faça um programa que peça dois números e imprima no console a soma desses dois números.| 22 | 23 | | Exemplo 06 | Descrição | 24 | | --- | --- | 25 | | `Desapegada` | Crie um programa que me diga quanto cobrar para vender um notebook usado: o seu custo foi R$3000, por quanto devo vendê-lo descontando 25%? | 26 | 27 | | Exemplo 07 | Descrição | 28 | | --- | --- | 29 | | `conversor de medidas` | Escreva um programa que receba um valor em metros e o exiba no console convertido em milímetros. | 30 | 31 | | Exemplo 08 | Descrição | 32 | | --- | --- | 33 | | `Semaforo, sinal ou sinaleira?` | Utilizando os conceitos que estudamos, vamos criar um programa que funcionará como um sinal de transito. | 34 | 35 | | Exemplo 09 | Descrição | 36 | | --- | --- | 37 | | `FizzBuzz` | Utilizando os conceitos que estudamos, vamos criar um programa que irá imprimir 'FizzBuzz'para números divisiveis por 3 e 5, para números divisíveis por 3 irá impirmir 'Fizz' e para números divisíveis por 5 irá imprimir 'Buzz' e por fim, se não cumprir nenhum dos casos acima imprime o próprio número. | 38 | 39 | | Exemplo 10 | Descrição | 40 | | --- | --- | 41 | | `É dia de aula?` | Utilizando os conceitos que estudamos, vamos criar um programa que irá nos informar os dias de aula para a nossa turma. | 42 | 43 | 44 | | Exemplo 11 | Descrição | 45 | | --- | --- | 46 | | `IMC` | Vamos criar uma função que calcula o IMC de uma pessoa, dado a altura em m e a massa em kg. | 47 | 48 | | Exemplo 12 | Descrição | 49 | | --- | --- | 50 | | `Par ou Impar` | Crie uma função que determina se um número é par ou impar. | 51 | 52 | | Exemplo 13 | Descrição | 53 | | --- | --- | 54 | | `Tabuada` | Faça um programa que dado um número, imprime no (console.log) a tabuada do mesmo de 1 a 10. | 55 | 56 | | Exemplo 14 | Descrição | 57 | | --- | --- | 58 | | `Pares` |Imprima na tela os números pares existentes entre 0 e 100..| 59 | 60 | | Exemplo 15 | Descrição | 61 | | --- | --- | 62 | | `Conversor de temperatura` | Crie uma função que recebe uma temperatura em graus celsius retorna o valor convertido em Fahrenheit. | 63 | 64 | | Exemplo 16 | Descrição | 65 | | --- | --- | 66 | | `Fatorial` | Crie uma função que irá receber um número e retornar o fatorial dele. por exemplo: 3! = 3 * 2 * 1 // 6 | 67 | 68 | | Exemplo 17 | Descrição | 69 | | --- | --- | 70 | | `Multiplica` | Crie uma função que recebe 2 parâmetros e retorna a multiplicação entre else. | 71 | 72 | | Exemplo 18 | Descrição | 73 | | --- | --- | 74 | | `Porcentagem` | Crie uma função que calcula 5% de desconto retornando o valor do desconto.| 75 | 76 | | Exemplo 19 | Descrição | 77 | | --- | --- | 78 | | `Conversor de moeda` | Crie uma função que irá converter uma quantia de real para dolar utilizando a cotação do dia. | 79 | 80 | | Exemplo 20 | Descrição | 81 | | --- | --- | 82 | | `For/Break/Continue` | Utilize a estrutura de repetição for para imprimir no console conforme instruções: 83 | a) números de 1 a 50 84 | b) quando chegar no número 25 interrompa a instrução e pare o loop 85 | c) quando chegar no número 10 pule a instrução| 86 | 87 | | Exemplo 21 | Descrição | 88 | | --- | --- | 89 | | `10 em 10` | Imprima na tela a partir de 20 e depois de 10 em 10 até o 100, mas em vez dos numeros 60 e 90 imprima a palavra "CONTINUE".| 90 | 91 | | Exemplo 22 | Descrição | 92 | | --- | --- | 93 | | `conta bancária` | Vamos criar uma conta bancária com as 3 operações básicas? rs 94 | a) A conta deverá iniciar com o saldo de 100 95 | b) Deverá ser possível escolher uma operação em forma de string: 'depositar', 'sacar', 'consultar saldo' 96 | c) Deverá ser possível passar 1 valor para a operação escolhida 97 | d) Deverá retornar o resultado e imprimir no console o saldo atual| 98 | 99 | 100 | | Exemplo 23 | Descrição | 101 | | --- | --- | 102 | | `5 em 5` | Crie um algoritmo que imprime no console de 10 a 60, iterando a cada 5, exceto para os numeros 35 e 45 que irão ser substituidos pela palavra "PULOU".| 103 | 104 | | Exemplo 24 | Descrição | 105 | | --- | --- | 106 | | `Dias em horas` | Crie um algoritmo que converte dias em horas, quando recebe um número de dias.| 107 | 108 | | Exemplo 25 | Descrição | 109 | | --- | --- | 110 | | `É par` | Crie uma função que recebe 2 parâmetros e retorna o resultado da divisão entre eles. Além disso, se o resto dessa divisão for zero deverá imprimir no console o valor e dizer que ele é par.| 111 | 112 | 113 | | Exemplo 26 | Descrição | 114 | | --- | --- | 115 | | `Repetição` | Utilize a estrutura de repetição for para imprimir no console conforme instruções abaixo: 116 | a) números de 1 a 100 117 | b) quando chegar no número 50 interrompa a instrução e pare o loop 118 | c) quando chegar no número 50 pule a instrução | 119 | 120 | | Exemplo 27 | Descrição | 121 | | --- | --- | 122 | | `Calculadora` | Vamos criar uma calculadora com as 4 operações matemáticas básicas? rs 123 | 124 | a) Deverá ser possível escolher uma operação aritimética em forma de string: 'soma', 'multiplicacao', 'divisao' e 'subtracao' 125 | b) Deverá ser possível passar 2 números para a operação escolhida 126 | c) Deverá retornar o resultado e imprimir no console| 127 | 128 | | Exemplo 28 | Descrição | 129 | | --- | --- | 130 | | `Desconto` | Solicite o preço de uma mercadoria e o percentual de desconto. Exiba no console o valor do desconto e o preço a pagar.| 131 | 132 | | Exemplo 29 | Descrição | 133 | | --- | --- | 134 | | `Viagem` | Calcule o tempo de uma viagem de carro. Pergunte a distância a percorrer e a velocidade média esperada para a viagem..| 135 | 136 | | Exemplo 30 | Descrição | 137 | | --- | --- | 138 | | `Jantar` | Crie um algoritmo que leia o valor de um jantar, calcule e informe o valor da taxa do garçom (10%) e o valor total a ser pago.| 139 | 140 | | Exemplo 31 | Descrição | 141 | | --- | --- | 142 | | `Dia da semana` | Elabore um algoritmo que receba um número (1-7) e devolva o dia da semana correspondente.| 143 | 144 | | Exemplo 32 | Descrição | 145 | | --- | --- | 146 | | `Números` | Elabore um algoritmo que receba dois números e determine qual é o maior entre eles, se os números forem iguais, mostre uma mensagem no console "Os números são iguais".| 147 | 148 | | Exemplo 33 | Descrição | 149 | | --- | --- | 150 | | `Impar/par` | Crie uma função que retorna a palavra (impar/par) de acordo com seu parâmetro.| 151 | 152 | | Exemplo 34 | Descrição | 153 | | --- | --- | 154 | | `Boletim escolar` | Crie um algoritmo que receba três notas de um aluno, calcule sua média e mostre as seguintes mensagens de acordo com cada situação: 155 | 156 | - Se a media for igual ou maior que 7 - Aprovado 157 | - Se a media for maior e igual a cinco e menor que 7 - Recuperação 158 | - Se a media for menor que 5 - Reprovado| 159 | 160 | | Exemplo 35 | Descrição | 161 | | --- | --- | 162 | | `Maior de idade` | Crie uma função que recebe o ano de nascimento da pessoa informando se ela é maior de idade ou menor.| 163 | 164 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Lógica aplicada com Javascript - Gama Experience 🚀 2 | 3 |
4 | 5 | ## Javascript avançado 6 | - Template string 7 | - Operador ternário 8 | - Arrow functions 9 | - Arrays, Operador spread e métodos de iteração 10 | - Objetos e Destructuring 11 | - SPA, PWA e WebComponents 12 | - Projetinho 13 | 14 | --- 15 | ## Como rodar javascript fora do navegador 16 | * Hello World no terminal do vs code 17 | * 3 formas de rodar um arquivo .js com node (direto no terminal, run em um arquivo e extensão code runner.) 18 | 19 | --- 20 | ## Ferramenta extra: Readline-sync 21 | - Readline-sync é um pacote maravilhoso para pegar inputs no terminal, ou seja pegar entradas de dados no sistema. Se você veio de programação front-end isso equivale a pegar o value do input de um usuário num formulário. 22 | 23 | - Dentro da pasta de seu projetinho instale digitando o comando no terminal: npm install readline-sync 24 | 25 | --- 26 | 27 | # 1. Template String 28 | ### Conceito 29 | O ES6 trouxe uma nova forma de unir strings com expressões javascript, o Template String ou Template Literals. 30 | 31 | Com ele podemos criar cadeias de caracteres, utilizando outra forma de interpolação que não seja o sinal de +. Em vez de aspas utilizamos crases e em vez do operador de soma interpolamos a expressão javascript utilizando ${}. 32 | 33 | ``` 34 | "Simara"; 35 | "Gama Academy"; 36 | let role = "transformadora" 37 | 38 | console.log(`Simara é ${role} na Gama Academy`) // Simara é transformadora na Gama Academy. 39 | ``` 40 | 41 | # 2. Operador ternário 42 | ### Conceito 43 | Você pode usar o operador ternário do JavaScript para tornar o seu código mais resumido. 44 | Ele é uma alternativa ao if...else, entenda: 45 | 46 | ``` 47 | let x = 8 48 | 49 | em vez de: 50 | 51 | if(x % 2 === 0) { 52 | return 'Par' 53 | } else { 54 | retunr 'Impar' 55 | } 56 | 57 | use: 58 | x % 2 === 0 ? 'Par' : 'Impar' 59 | 60 | ``` 61 | Resumindo: 62 | teste ? verdadeiro : falso 63 | 64 | O operando teste é uma expressão que é avaliada como um valor booleano true ou false. Se a condição for verdadeira, o operador ternário retornará o operando verdadeiro, caso contrário, retornará o falso. 65 | 66 | Os operandos verdadeiro e falso são expressões de qualquer tipo. 67 | 68 | # 3. Arrow functions 69 | ### Conceito 70 | O ES6 também trouxe uma forma menos verbosa de escrever funções. São as famosas Arrow Functions, por causa da sintaxe que lembra uma flecha: () =>. 71 | 72 | Entenda: 73 | ``` 74 | em vez de: 75 | function soma(a,b) { 76 | return a + b 77 | } 78 | 79 | use: 80 | const soma = (a,b) => a + b 81 | ``` 82 | 83 | Arrow functions são excelentes para trabalharmos com funções anônimas e callbacks (são funções passadas como argumentos dentro de outras funções a fim de serem utilizadas em um momento posterior). 84 | 85 | # 4. Arrays, Operador spread e métodos de iteração 86 | ### Conceito 87 | 88 | Um array (ou lista) permite armazenar um conjunto de dados e atribuí-los a uma variável, sendo esta a estrutura de dados mais simples possível. 89 | 90 | ### Inicializando Arrays 91 | 92 | Para criar um novo Array, podemos atribuir a uma variável uma lista de elementos entre colchetes e separados por vírgula. Também é possível utilizando a palavra reservada `new` e instanciando os valores que queremos atribuir ou apenas especificando o seu tamanho. 93 | 94 | ```javascript 95 | const alunasGama = ['Paula', 'Estela', 'Mariana']; 96 | ``` 97 | 98 | ### Acessando valores 99 | 100 | Para acessar o valor de um Array, use a notação de colchetes e informe a posição que deseja acessar, lembrando que a contagem começa em zero. 101 | 102 | ```javascript 103 | const alunasGama = ['Paula', 'Estela', 'Mariana']; 104 | 105 | console.log(alunasGama[0]) // Paula 106 | console.log(alunasGama[1]) // Estela 107 | console.log(alunasGama[2]) // Mariana 108 | ``` 109 | 110 | ### Spread Operator 111 | 112 | ### Conceito 113 | Ele é representado por três pontos. Spread significa espalhar, ou seja, este operador é usado para ‘espalhar’ os elementos de um array quando interpretado em tempo de execução. 114 | 115 | Ou seja, esses 3 pontinhos serve para copiarmos arrays. 116 | ``` 117 | let numeros = [0, 1, 2]; 118 | let novoNumero = 12; 119 | numberStore = [...numeros, novoNumero]; 120 | ``` 121 | 122 | Você pode também transformar uma string em array utilizando o spread: 123 | ``` 124 | var string = "hello"; 125 | var array = [...string]; 126 | console.log(array); // ['h', 'e',' l',' l', 'o'] 127 | ``` 128 | 129 | ### Métodos de iteração 130 | 131 | - `filter` retorna um novo array com os elementos filtrados. 132 | - `find` retorna o primeiro elemento que achar igual ao elemento passado por parâmetro. 133 | - `map` retorna um novo array sem alterar o array original, criando uma cópia com as alterações que desejamos. 134 | - `sort` ordena o array. 135 | - `reduce` reduz o array para um único valor mediante a uma operação matemática. 136 | 137 | Existem muitos outros métodos, continue seu aprendizado! 138 | 139 | # 5. Objetos e Destructuring 140 | 141 | ### Conceito 142 | 143 | Objeto é um tipo de dado que contém uma coleção de propriedades organizadas em pares de chave (ou nome) e valor, sendo o valor qualquer tipo de dado (número, texto, função ou até mesmo outro objeto). 144 | 145 | ### Inicializando objetos 146 | 147 | Para criar um novo Objeto, podemos atribuir a uma variável uma lista de elementos entre chaves, separados por vírgula e com a notação de `chave : valor`. Também é possível utilizando a palavra reservada `new` ou a partir de uma função. 148 | 149 | ```javascript 150 | const pessoa = { 151 | nome: 'Ariel', 152 | idade: 25, 153 | profissao: 'desenvolvedora', 154 | }; 155 | ``` 156 | 157 | ### Acessando valores 158 | 159 | Notação de ponto 160 | ``` 161 | console.log(pessoa.nome); // Ariel 162 | console.log(pessoa.idade); // 25 163 | console.log(pessoa.profissao); // desenvolvedora 164 | ``` 165 | 166 | Notação de colchetes (ou índice) 167 | ``` 168 | console.log(pessoa['nome']); // Ariel 169 | console.log(pessoa['idade']); // 25 170 | console.log(pessoa['profissao']); // desenvolvedora 171 | ``` 172 | 173 | 174 | ### Atribuição via desestruturação 175 | 176 | ```js 177 | const pokemon = { 178 | nome: 'Pikachu', 179 | tipo: 'elétrico', 180 | altura: 40.6 181 | } 182 | 183 | const { nome, tipo, altura } = pokemon 184 | 185 | console.log(nome) // Pikachu 186 | console.log(tipo) // elétrico 187 | console.log(altura) // 40.6 188 | ``` 189 | 190 | MDN: [destructuring assignment](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Atribuicao_via_desestruturacao) 191 | 192 | 193 | # 6. SPA, PWA e WebComponents 194 | Agora, vamos falar de SPA, PWA e Webcomponents que são alguns conceitos da programação web atual. Dessa vez não colocaremos a mão no código, nessa aula diferente apenas com conceitos, vamos falar muito sobre mudar a nossa forma de pensar aplicações web. 195 | 196 | 6.1 SPA 197 | 198 | Single page applications são aplicações que concentram seu conteúdo em apenas uma página. O que isso quer dizer? Ela possui o super poder de atualizar apenas uma parte da página para renderizar novos dados, em vez de atualizar a página inteira. 199 | 200 | O que usar para construir Single Page Applications? 201 | No mercado diversas ferramentas como frameworks e bibliotecas facilitam a criação de SPA. Alguns dos mais conhecidos são: Angular, React e Vue. Eles são baseados em JavaScript e trabalham com o conceito de componentes. 202 | 203 | 204 | 6.2 PWA 205 | 206 | Progressive Web Apps são aplicações híbridas entre web e mobile. Ou seja, permite que ao acessar um site, a pessoa usuária possa ter uma versão instalada em seu celular com a mesma experiência da web, porém com as informações do browser removidas. 207 | 208 | PWA são diferentes de aplicativos nativos, pois eles não podem ser encontrados nas lojas de aplicativos. E geralmente, são construídos com poucas alterações no código original: html, css e javascript. 209 | 210 | Mas por outro lado, dá pr acessar de offline e ainda usar algumas caracteristicas como por exemplo o push notification. 211 | 212 | Dá pra construir PWA com Angular, React, Vue, Ionic entre outros. 213 | 214 | 6.3 WebComponents 215 | 216 | Os Web Components são uma forma de criar componentes reutilizáveis para a Web nativamente, utilizando apenas HTML, CSS e JavaScript. E carregam os benefícios de códigos menores, modulares e reutilizáveis. 217 | 218 | Os Web Components possuem quatro fundamentos: 219 | - Custom Elements: Permite a criação de novas tags HTML. 220 | - Shadow DOM: Permite esconder elementos do DOM. Eles são renderizados pelo navegador e não são acessíveis pelas formas convencionais (document.querySelector). 221 | - HTML Templates: Permite declarar fragmentos de HTML para serem utilizados como modelo. Eles não são renderizados pelo navegador. 222 | - HTML Imports: Permite importar páginas HTML completas, incluindo o JavaScript e CSS embutidos nelas. 223 | 224 | Você pode usar o stencilJS que faz parte do Ionic Framework. 225 | --- 226 | ## Simara Conceição 227 | - [instagram](https://www.instagram.com/simara_conceicao) 228 | - [linkedin](https://www.linkedin.com/in/simaraconceicao/) 229 | - [github](https://github.com/simaraconceicao) 230 | - [spotify](https://open.spotify.com/show/59vCz4TY6tPHXW26qJknh3) 231 | - [quero ser dev](https://queroserdev.com) -------------------------------------------------------------------------------- /js-basico/conteudo.md: -------------------------------------------------------------------------------- 1 | # Revisão Javascript básico 2 | - Tipos de dados 3 | - Variáveis 4 | - Operadores 5 | - Estruturas condicionais 6 | - Estruturas de repetição 7 | - Funções e classes 8 | 9 | ### O que é JavaScript? 10 | 11 | Segundo o livro "Estrutura de dados e algoritmos com javascript", de Loiane Groner: "Javascript é uma das linguagens de programação mais populares atualmente, é conhecida como a linguagem da internet porque os navegadores a entendem de modo nativo, sem a instalação de qualquer plugin." 12 | 13 | Praticamente todos os sites e aplicações web usam javascript, até outras ferramentas que são usadas para web, no fim das contas vão precisar transformar o código em javascript para que o navegador entenda. 14 | 15 | Além disso, a linguagem javascript evoluiu muito e aparecem até em aplicativos mobile(com React Native), Softwares de interface gráfica para Desktop(electron) e até games, robótica e inteligência artificial. Além disso, tem o backend também utilizando o nodejs. 16 | 17 | E tem uma lista imensa de empresas que usam Javascript ou alguma ferramenta que derivou dela, então o próprio netflix, uber, instagram, facebook, twitter entre outras. Usam o react que é uma outra ferramenta baseada em javascript. 18 | 19 | Antes da gente encerrar essa parte eu quero fazer um combinado com você. Se você, é uma pessoa que já teve algum contato com o Javascript, preste bastante atenção a essas aulas, pois toda vez que você for criar soluções mais complexas, você vai precisar ter essa base de fundamentos bem sólida. 20 | 21 | | Pontos positivos | Pontos negativos | 22 | | --- | --- | 23 | | `uma ótima linguagem para um primeiro contato com a programação e, por consequência, para se estudar lógica de programação` | Pode conter brechas para a execução de ações maliciosas | 24 | | `Sintaxe acessível` | Pode ser renderizada de maneiras diferentes pelos dispositivos compatíveis, causando problemas de desempenho. | 25 | | `Grande comunidade ao redor do mundo fazendo a ferramenta evoluir` | Atualizações nem sempre compatíveis com todos os navegadores e sistemas existentes. | 26 | 27 | ### O que é NodeJS? 28 | 29 | É um interpretador Javascript que não depende do navegador. Ele é formado pelo V8, motor interpretador de Javascript criado pelo Google, e pela libuv, uma biblioteca que deu características de linguagem back-end para o node. 30 | 31 | Node.js revolucionou a forma de programar em Javascript, pois a linguagem evoluiu de uma forma de dar vida aos elementos no navegador para uma linguagem capaz de criar software para tratamento de dados no backend. 32 | 33 | ### Primeiros passos com Javascript 34 | 35 | * Javascript no navegador, interação: console, alert e prompt 36 | **Console:** 37 | Esta função permite que você faça log no console do navegador moderno. Isso ajuda você a depurar seu código facilmente. 38 | 39 | **Alert:** 40 | Usar o alerta exibe uma caixa de diálogo com a mensagem fornecida. A próxima linha de código não será executada até que a caixa de diálogo seja fechada (clicando no botão OK) 41 | 42 | **Prompt:** 43 | O uso do prompt permitirá que você recupere as entradas do usuário. 44 | O primeiro parâmetro é o título da caixa de diálogo e o segundo (parâmetro opcional) é o valor padrão da caixa de texto. 45 | 46 | 47 | 48 | ### Lógica aplicada 49 | 50 | #### 1. Tipos de dados: 51 | 52 | JavaScript é uma linguagem dinamicamente tipada. 53 | 54 | Isso significa dizer que não é preciso especificar o tipo do dado quando formos declarar uma variavél. Além disso os tipos de dados são convertidos automaticamente conforme a necessidade de execução do nosso script. Mais pra frente você vai perceber isso melhor. 55 | 56 | Aprender tipos de dados é um super poder para resolver problemas com estrutura de dados e algoritmos lá no futuro. 57 | 58 | Vamos aprender os tipos de dados primitivos em javascript: 59 | 60 | ##### String 61 | 62 | É uma cadeia de caracteres. A gente identifica o dado do tipo string quando caracteres formam palavras ou frases entre aspas simples ou duplas. 63 | 64 | Quando queremos escrever textos em javascript é preciso usar uma das três formas abaixo. Elas não possuem diferenças, só ter atenção pois você não pode em uma única string começar com uma e terminar com a outra. 65 | ``` 66 | Aspas simples ' ' 67 | Aspas duplas " " 68 | Template literals `` 69 | ``` 70 | Podemos também unir strings concatenando ou interpolando. 71 | 72 | Os templates literals podemos usar quando queremos interpolar uma string com uma expressão de javascript. 73 | 74 | 75 | Qual aspas usar? 76 | Até onde eu aprendi é uma preferência da pessoa desenvolvedora ou acordo do time. Agora, o JSON só aceita aspas duplas. 77 | 78 | ```` 79 | 'Hello' 80 | "World" 81 | 82 | //concatenando 83 | console.log('Hello' + ' ' + "World") 84 | // Vai imprimir Hello World 85 | 86 | console.log('Hello' + "World") 87 | //Vai imprimir sem espaço HelloWorld 88 | 89 | myName = "Simara"; 90 | console.log('Hello' + " " + myName) 91 | //Vai imprimir Hello Simara 92 | 93 | //interpolando 94 | myName = "Simara"; 95 | console.log(`Hello ${myName}`) 96 | //Vai imprimir Hello Simara 97 | ```` 98 | 99 | # 100 | 101 | 102 | ##### Number 103 | 104 | É o tipo de dado númerico no Javascript e podemos identificar, geralmente como números inteiros ou decimais, também conhecido como float. 105 | ``` 106 | 1 107 | 108 | 1.5 109 | ``` 110 | 111 | # 112 | 113 | 114 | ##### Boolean 115 | 116 | É o tipo de dado lógico e tem apenas dois valores. 117 | ``` 118 | true 119 | false 120 | ``` 121 | 122 | # 123 | 124 | ##### Null x undefined 125 | 126 | Null é um objeto vazio e undefined é o valor pra uma variável não definida, por exemplo. 127 | 128 | # 129 | 130 | 131 | ##### Objeto, array e function 132 | Um objeto do JavaScript é um mapeamento entre chaves e valores. Chaves são Strings e valores podem ser de qualquer tipo. 133 | 134 | ``` 135 | { 136 | name: "simara", 137 | age: 32, 138 | role: "dev", 139 | isTeacher: true 140 | } 141 | ``` 142 | Arrays são objetos perfeitos para representação de listas e conjuntos. 143 | ``` 144 | ["aila", "maria", "paula"] 145 | ``` 146 | Funções são objetos comuns com a capacidade adicional de serem chamados. 147 | ``` 148 | function soma (a,b) { 149 | return a + b 150 | } 151 | 152 | soma(2,5) // 7 153 | ``` 154 | 155 | #### Determimando tipos usando o operador typeof 156 | O operador typeof pode te ajudar a encontrar o tipo de sua variavel. 157 | ``` 158 | typeof 32 //Number 159 | var age = 32 160 | console.log(age) //Number 161 | 162 | typeof "Simara" //string 163 | var myName = "Simara" 164 | console.log(myName) //String 165 | 166 | let lastName 167 | console.log(typeof lastName) //undefined 168 | 169 | let myObject = { 170 | "name" : "Simara", 171 | "age": 32 172 | } 173 | 174 | console.log(typeof myObject) //object 175 | 176 | let object = null 177 | console.log(typeof object) //object 178 | 179 | function subtrair(){} 180 | console.log(typeof subtrair) //function 181 | 182 | let alunas = [] 183 | console.log(typeof alunas) //object 184 | ``` 185 | 186 | #### 2. Variáveis: 187 | 188 | "Variaveis armazemam dados que podem ser denfinidos, atualizados e recuperados sempre que necessário". 189 | 190 | Mas como declarar variaveis no JavaScript? 191 | 192 | A gente precisa usar uma palavra reservada do Javascript e um identificador. Além disso, a gente pode atribuir valores para essas variaveis. 193 | 194 | É mais ou menos assim: 195 | 196 | A palavra reservada: var 197 | Identificador: myName 198 | Atribuindo valor: "Simara" 199 | 200 | Declarando uma variavel: var myName 201 | Atribuindo valor: myName = Simara 202 | Recuperando o dado que está guardado na variavel: myName 203 | 204 | 205 | Aqui vão algumas dicas pra você ficar muito expert em declarar variaveis com Javascript 206 | 207 | - **O que pode?** 208 | Podem começar com letra, $ ou _ 209 | É possível usar acento, símbolos e números 210 | 211 | 212 | - **O que não pode?** 213 | Não pode começar com número 214 | Não pode conter espaço 215 | Não podem ser palavras reservadas 216 | 217 | - **Qual o ideal?** 218 | Ter atenção, pois é case sensitive 219 | Use nomes coerentes 220 | 221 | Além disso, é também importante saber que a linguagem Javascript evolui a cada ano. E desde 2015, tem havido uma nova versão lançada a cada ano que chamamos de ECMAScript. Então não se assuste se você esbarrar com frenquencia nesse conceito por aí. ECMA é uma organização que padroniza informações, e o JavaScript foi submetido à ECMA para que fosse padronizado daí nasceu o ECMAScript, o novo padrão da linguagem. 222 | 223 | A mudança mais significativa na linguagem ocorreu em 2015 e é conhecida com ECMAScript 6 ou ES6, ela surgiu pra linguagem ficar mais flexivel no uso com o paradigma orientado a objeto. E aqui nas variáveis surgiram as palavras reservadas let e const. 224 | 225 | Então agora você pode declarar variaveis das seguintes formas: 226 | ``` 227 | let language = "Javascript" 228 | const padrão = "ECMAcript" 229 | ``` 230 | Vem entender melhor quando usar cada uma. 231 | 232 | - **Diferenças entre let, const e var:** 233 | 234 | 1- var são declarações de escopo global ou de escopo de funções, enquanto let e const são de escopo bloqueado. 235 | 236 | 2- var podem ser atualizadas ou reatribuídas nestes escopos 237 | 238 | 3- let podem ser atualizadas, mas const não podem ser atualizadas ou reatribuídas 239 | 240 | 4- Enquanto var e let podem ser declaradas sem inicializar, const precisa ser inicializada durante a declaração 241 | 242 | 5- var sofrem hoisting de escopo 243 | 244 | 245 | Ficou por fora quando eu falei de escopo e de hoisting? Esses conceitos são mais faceis de entender com a mão no código. 246 | 247 | Escopo se refere ao local em que podemos acessar a variavel no algoritmo ou em uma função. E as variaveis podem ser locais ou globais. 248 | 249 | Para entender local e global: 250 | 251 | ``` 252 | { 253 | var age = 32; 254 | } 255 | 256 | console.log(age) 257 | 258 | //Depois trocar para let 259 | 260 | { 261 | let age = 32; 262 | } 263 | 264 | console.log(age) 265 | ``` 266 | Para entender hoisting: 267 | ``` 268 | console.log(name) 269 | let name = "Simara"; //vai dar erro 270 | 271 | console.log(myLastName) 272 | var myLastName = "Conceição"; 273 | 274 | var name // por debaixo dos panos é isso que acontece, a declaração sofre hoisting, esse fenomeno de elevação que 275 | leva a declaração da variavel lá pra cima do escopo. 276 | name = "Simara"; 277 | ``` 278 | A boa prática é: sempre que possível, evite usar variaveis globais em javaScript, pois elas são prejudiciais para a qualidade do seu cógigo. 279 | 280 | 281 | #### 3. Operadores: 282 | 283 | Precisamos de operadores para realizar qualquer operação em uma linguagem de programação. O javascript também tem seus operadores aritméticos, de atribuição, lógicos entre outros. 284 | 285 | **Aritméticos:** 286 | 287 | | Operador | Descrição | 288 | | --- | --- | 289 | | `+` | Adição | 290 | | `-` | Subtração | 291 | | `*` | Multiplicação | 292 | | `/` | Divisão | 293 | | `%` | Módulo ou resto da divisão | 294 | | `++` | Incremento| 295 | | `--` | Decremento| 296 | 297 |
298 | 299 | **Atribuição:** 300 | 301 | | Operador | Descrição | 302 | | --- | --- | 303 | | `=` | Atribuição | 304 | | `+=` | Atribuição de soma | 305 | | `-=` | Atribuição de subtração | 306 | | `*=` | Atribuição de multiplicação | 307 | | `/=` | Atribuição de divisão | 308 | | `%=` | Atribuição de resto | 309 |
310 | 311 | **Comparação:** 312 | 313 | | Operador | Descrição | 314 | | --- | --- | 315 | | `==` | Igual a | 316 | | `===` | Igual a (tanto o valor quanto o tipo) | 317 | | `!=` | Diferente de | 318 | | `>` | Maior que | 319 | | `>=` | Maior ou igual a | 320 | | `<` | Menor que | 321 | | `<=` | Menor ou igual a | 322 |
323 | 324 | **Lógicos:** 325 | 326 | | Operador | Descrição | 327 | | --- | --- | 328 | | `&&` | E | 329 | | `||` | Ou | 330 | | `!` | Negação | 331 | 332 | 333 | 334 |
335 | 336 | #### 4. Condicionais: 337 | São instruções de controle que podemos usar ao construir nossos códigos. Vamos estudar estudar 2 estruturas condicionais: if...else e switch. 338 | 339 | - Podemos usar **if** se quisermos executar um bloco de código somente se a condição ou verificação lógica for verdadeira. 340 | 341 | ``` 342 | let num = 1 343 | if (num ===1) { 344 | console.log('num é igual a 1') 345 | } 346 | ``` 347 | 348 | - Podemos usar **if...else** se quisermos executar um bloco de código somente se a condição ou verificação lógica for verdadeira. Ou outro bloco de código, somente caso a condição seja falsa. 349 | 350 | ``` 351 | let number = 0 352 | if (number ===1) { 353 | console.log('number é igual a 1') 354 | } else { 355 | console.log(`number não é igual a 1, o valor de number é ${number}`) 356 | } 357 | ``` 358 | 359 | - Além disso para diferentes condições podemos usar vários **if...else** se quisermos executar vários blocos de códigos diferentes. 360 | 361 | ``` 362 | let mes = 'setembro' 363 | if (mes === 'fevereiro) { 364 | console.log('tem carnaval') 365 | } else if (mes === 'junho'){ 366 | console.log('tem são joão') 367 | } else if (mes === 'dezembro'){ 368 | console.log('tem natal') 369 | } else { 370 | console.log(`${mes} não é um mês festivo.`) 371 | } 372 | ``` 373 | 374 | - Agora, se a condição que estivermos avaliando for a mesma que a anterior, porém com valores diferentes, podemos usar a instrução **switch**: 375 | 376 | ``` 377 | let diaDaSemana = 'segunda' 378 | switch (diaDaSemana) { 379 | case 'domingo': 380 | console.log('Domingou') 381 | break 382 | case 'sábado': 383 | console.log('Sabadou') 384 | break 385 | case 'sexta': 386 | console.log('Sextou') 387 | break 388 | default: 389 | `${diaDaSemana} não é um dia festivo.` 390 | } 391 | ``` 392 | 393 | Atenção para as palavras reservadas case, break e default. 394 | 395 | #### 5. Funções 396 | 397 | 5.1. O que são funções? 398 | 399 | "São ações executadas assim que são chamadas ou em decorrência de algum evento." 400 | "Uma função pode receber parâmetros e retornar um resultado." 401 | 402 | Na oficina, a gente colocou no html uma chamada pra ação que ocorria quando o botão de calcular era clicado. No arquivo js criamos a função abaixo: 403 | 404 | ``` 405 | function clicar() { 406 | resposta.innerHTML = input.value 407 | } 408 | ``` 409 | - chamada -> no evento de clique 410 | - parâmetros -> nao recebiamos 411 | - ação -> Pegar o valor digitadi do input e fazer aparecer na tela no elemento resposta 412 | - retorno -> texto na tela com sucesso 413 | 414 | A verdade é que na vida real, todas nós temos também tarefas e rotinas que seguem alguns critérios. 415 | 416 | Exemplo jogar o lixo. Todas as segundas, quartas e sextas, eu posso jogar lixo organico. 417 | Todas as tercas e quintas, eu posso jogar o lixo reciclável. 418 | 419 | - chamada -> nos dias referentes 420 | - parâmetros -> dia 421 | - ação -> separar o lixo, amarrar o saco, levar até ao local destinado 422 | - retorno -> dia informando qual lixo jogar 423 | 424 | E trazendo isso para o mundo do javascript, podemos criar um programa que me lembra de jogar o lixo corretamente. Vamos lá? 425 | 426 | ``` 427 | function jogarLixo(dia) { 428 | if(dia === 'segunda'|| dia === 'quarta' || dia ==='sexta'){ 429 | console.log('lixo organico') 430 | } else if (dia === 'terca'|| dia === 'quinta') { 431 | console.log('lixo reciclavel') 432 | } else { 433 | console.log('nao pode jogar lixo') 434 | } 435 | return dia 436 | } 437 | 438 | let qualTipoJogarHoje = jogarLixo('sabado') 439 | console.log(qualTipoJogarHoje) 440 | ``` 441 | 442 | 5.2. Por que e como utilizar? 443 | Quando precisamos de uma instrução, uma ação que pode ser executada em diferentes momentos no nosso código. 444 | 445 | Declaração 446 | - Usamos a palavra reservada function 447 | - Podemos dar um nome ou deixá-la anônima 448 | - não esequecer de usar os parenteses, nele podemos passar parametros ou nao 449 | - e dentro das chaves colocamos as instruções que podem ter um retorno ou não 450 | 451 | Parâmetros 452 | São informacões que se comportam como variaveis dentro daquela função e que podem ser usadas nas instruções 453 | 454 | Retorno 455 | Usando a palavra reservada return podemos, instruir nosso código a retornar algo. 456 | 457 | Nomeando funções 458 | - Sempre prefira usar verbos que descrevem exatamente o que a sua função irá fazer. 459 | - Não se preocupe se os nomes ficarem grandes, desde que sejam descritivos o suficiente. 460 | - Use também o camelcase, quando usamos a segunda palavra com a primeira letra maiuscula. 461 | 462 | 463 | 5.3. Escopo 464 | 465 | 1. Conceito 466 | Refere-se ao lugar em seu algoritmo ou função. 467 | 468 | 2. Escopo Global 469 | Refere-se ao arquivo atual do js. 470 | 471 | 3. Escopo Local ou de Bloco 472 | Refere-se à função ou aquele bloco de código. 473 | 474 | Lembrete: Var não respeita escopo de bloco 475 | 476 | 4. Escopo Léxico 477 | 478 | Um variavel recebe um indetificador único (nome) e o trecho de código que retorna quando ela é recuperada é o escopo léxico. 479 | 480 | #### 6. Estrutura de repetição 481 | Loop, laço, iteração ou estrutura de repetição. 482 | 483 | A gente faz diariamente atividades com repetição, por exemplo num exercicío físico. Digamos que nosso personal nos mandou fazer uma série de 10 pulos de corda. 484 | 485 | A gente pode criar uma função pulaCorda() e quando ela for chamada, dentro dela irá executar 10 vezes o console.log com a string pulei a corda e o valor da repetição digitado manualmente. 486 | 487 | Agora se o professor mudar a série para 100 vezes, vai ficar chato digitar 100 consoles, certo? É aí que as estruturas de repetição podem nos ajudar, temos um ponto de partida e um ponto de chegada para nosso sistema, vamos começar do pulo 1 e vamos até o pulo 100 e queremos mostrar isso no console. 488 | 489 | Podemos fazer isso com for, while e também com o do...while. 490 | 491 | ``` 492 | function pulaCorda() { 493 | console.log('Pulei a corda com function 1') 494 | console.log('Pulei a corda com function 2') 495 | console.log('Pulei a corda com function 3') 496 | console.log('Pulei a corda com function 4') 497 | console.log('Pulei a corda com function 5') 498 | console.log('Pulei a corda com function 6') 499 | console.log('Pulei a corda com function 7') 500 | console.log('Pulei a corda com function 8') 501 | console.log('Pulei a corda com function 9') 502 | console.log('Pulei a corda com function 10') 503 | } 504 | 505 | pulaCorda(); 506 | ``` 507 | ``` 508 | console.log('inicio') 509 | for(let i = 1; i <=3; i++) { 510 | console.log(`Pulei a corda com for ${i}`) 511 | } 512 | console.log('fim') 513 | ``` 514 | ``` 515 | console.log('inicio') 516 | let i = 1; 517 | while(i <=3) { 518 | console.log(`Pulei a corda com while ${i}`) 519 | i++ 520 | } 521 | console.log('fim') 522 | ``` 523 | ``` 524 | console.log('inicio') 525 | let index = 1; 526 | do{ 527 | console.log(`Pulei a corda com do...while ${index}`) 528 | index++ 529 | }while(index<=3) 530 | console.log('fim') 531 | ``` 532 | 6.1. Conceito 533 | for é a estrutura de repetição com variavél de controle, a gente usa quando sabe exatamente qual são os nossos pontos de partida e de chegada. 534 | 535 | while faz o teste lógico no início e sendo verdadeiro ele executa o bloco de código 536 | 537 | do...while primeiro executa o bloco e depois faz o teste lógico, garantindo que a instrução será executada pelo menos 1 vez. 538 | 539 | 540 | 6.2. Comandos especiais 541 | 1. break: podemos encerrar uma instrução 542 | 543 | 2. continue: podemos pular uma instrução 544 | 545 | ``` 546 | for(let i = 10; i > 0; i--) { 547 | 548 | console.log(i); 549 | 550 | if(i === 5) { 551 | break; 552 | } 553 | } 554 | 555 | console.log("Deu o break"); 556 | ``` 557 | 558 | ``` 559 | let x = 10; 560 | 561 | while(x < 100) { 562 | 563 | x += 10; 564 | 565 | if(x === 60 || x === 90) { 566 | console.log("CONTINUE"); 567 | continue; 568 | } 569 | 570 | console.log("Testando continue " + x); 571 | 572 | } 573 | ``` 574 | Vamos debugar para perceber como funciona? 575 | 576 | **Extra: ferramenta debug do VSCode** 577 | - clica no besouro 578 | - criar launch do debug 579 | - define a variavel no watch 580 | - marca o breakpoint 581 | - dá o play e vai apertando f10 582 | 583 | 584 | #### 7. POO com Javascript Introdução 585 | 586 | ### class x function 587 | 588 | *O que é a programação orientada a objetos? 589 | 590 | *É um paradigma de desenvolvimento, uma forma de construir e analisar a nossa lógica,além disso é utilizado muito na maioria dos sistemas atuais* 591 | 592 | *Tudo o que fazemos na POO é trabalhar com objetos.Ela foi criada para tentarmos representar objetos do mundo real nos códigos, com estados e comportamentos.* 593 | 594 | *Os 4 pilares da programação orientada a objeto:* 595 | 596 | *herança: podemos extender propriedades e metodos de uma classe mae para uma classe filha.Isso serve para replicar as caracteristicas de um objeto para outro. Isso nos ajuda a escrever códigos sem repetir tanto as mesmas linhas de código.* 597 | 598 | *encapsulamento: conceito simples e poderoso, pois guarda a lógica da nossa classe, deixando nossos atributos de forma privada e só podemos acessar utilizando os metodos de get e set.* 599 | 600 | *polimorfismo: a capacidade de objetos compativeis, se passar por outro em certas ocaciões. Podemos dessa forma herdar metodos, e reescrever todos os comportamentos. "Podemos brincar a vontade com o DNA do nosso sistema".* 601 | 602 | *abstração: não é um conceito concreto, chega ser redundante. O super poder é criarmos a classe mãe o mais abstrata possível, ela recebe o nome de template, identidade ou superclasse. Não pode ser criado um onjeto diretamente dessa classe, mas sim das classes filhas que herdam as caracteristicas e comportamentos da classe mae.* 603 | 604 | *Se você começou agora, vai perceber com o tempo a importancia desses 4 pilares, pois eles são as bases de técnicas e ferramentas que nos ajudam desde a concepção do projeto até codificação dele. Uma dessas técnicas é o design patterns que nos ajudar a manter um padrão de qualidade em nossos códigos. Além disso, muitas linguagens utilizam esse paradigma: java, python, .Net, Javascript e muitas outras.* 605 | 606 | * Como entender classes no JS. 607 | 608 | *Classes são como formas/moldes que definem os métodos e as propriedades para instanciarmos um objeto. Dentro dela não definimos nenhum dado ou informação é apenas a forma de como nosso objeto irá se parecer. Já objetos são as versões instanciadas dessas classes, essencialmente uma versão especifica dessa classe com os valores para as propriedades. Por exemplo se criarmos uma class Parede que recebe a propriedade cor, ela não diz qual cor será pintada essa parede, apenas diz que quando for criado um objeto nova parede ela irá receber um valor para cor.* 609 | 610 | * E a palavra reservada this? 611 | 612 | *Antes de 2015 as classes eram escritas como funções, após o es6 usamos a sintaxe class e a palavra reservada this é usada para internamente da classe associarmos um valor.* 613 | 614 | 615 | * Qual a função do constructor nas classes? 616 | 617 | *As classes em JavaScript têm um método constructor que permite definir campos quando o objeto é instanciado com uma class, ou seja, é esse método que faz a contrução do objeto quando a gente cria uma intância dessa classe usando a palavra reservada new. Cada classe pode ter apenas um constructor. Se houver mais de um, SyntaxError será lançado. O constructor também pode chamar o método super para chamar o constructor de outra classe se a classe estender uma classe mãe. Configurando assim a herança na POO.* 618 | 619 | * Quais seriam as situações que seria mais lógico usar classe ao invés de uma função? 620 | 621 | *O mais importante a lembrar: as classes são apenas funções JavaScript normais e antes eram declaradas sem o uso da class sintaxe. Que somente foi adicionado ao ES6(2015) para tornar mais fácil declarar e herdar objetos complexos.* 622 | 623 | *A principal diferença entre a sintaxe class e function é que function sofre hoisting, enquanto class não. Isso significa que um objeto nunca pode ser instanciado executando uma classe que foi declarada posteriormente. Enquanto é possível executar uma funçao antes e declarar depois. Pois o interpretador do javascript eleva a função para o topo da página.* 624 | 625 | *Agora para decidir quando usar class ou function, é muito importante lembrar dos conceitos da programação orientada a objeto. Por exemplo quando nós encapsulamos a lógica em uma class, o código fica muito mais limpo e de fácil entendimento em vez de criarmos várias funções.* 626 | 627 | *Geralmente usamos classes para construir diferentes objetos com as mesmas propriedades. Exemplo conta bancária. Usamos também em algumas bibliotecas e supersets (class components no React e typescript nos types e interfaces)* 628 | ``` 629 | function Person(name) { this._name = name; } 630 | 631 | var person = new Person('Simara'); 632 | 633 | console.log(person) 634 | 635 | 636 | class House { constructor(color) { this.color = color; } 637 | 638 | getFurniture() { 639 | return 'sofa'; 640 | } 641 | } 642 | 643 | const houseObject = new House('red'); const houseObject2 = new House('pink'); 644 | 645 | console.log(houseObject); console.log(houseObject.getFurniture()); 646 | 647 | console.log(houseObject2); console.log(houseObject2.getFurniture()); 648 | 649 | class Calculator { constructor(num1, num2) { this.num1 = num1; this.num2 = num2; } 650 | 651 | sum() { 652 | return this.num1 + this.num2; 653 | } 654 | 655 | sub() { 656 | return this.num1 - this.num2; 657 | } 658 | 659 | mult() { 660 | return this.num1 * this.num2; 661 | } 662 | 663 | div() { 664 | return this.num1 / this.num2; 665 | } 666 | } 667 | 668 | 669 | const calculator = new Calculator(5, 6); 670 | 671 | console.log(calculator.sum()); 672 | console.log(calculator.sub()); 673 | console.log(calculator.mult()); 674 | console.log(calculator.div()); 675 | 676 | function calculadora(num1, num2) { 677 | return num1 + num2 678 | } 679 | 680 | console.log(calculadora(1,2)) 681 | ``` --------------------------------------------------------------------------------