[Apresentação] Javascript avançado

Slide 1

Slide 1 text

JAVASCRIPT AVANÇADO Sejam bem vindos 1

Slide 2

Slide 2 text

Alessandra Nastassja Graduanda em Sistemas para Internet na Fatec Carapicuíba. Voluntária na comunidade Codamos. Apaixonada por Front! alessandranastassja.com.br Alessandra-Nastassja 2

Slide 3

Slide 3 text

Aula #1 - Javascript Avançado ✦ Javascript e o mundo dos fronts! ✦ Métodos de array ✦ Métodos de objetos ✦ Operadores ✦ Funções (Arrow, Map, Filter) 3

Slide 4

Slide 4 text

DICA VOVÓ DA JUJU! Abrir um NAVEGADOR de sua preferência OU Clicar neste link * 4

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Javascript 7 Linguagem de programação de tipagem fraca.

Slide 8

Slide 8 text

8 { Assíncrono } { Síncrono } Não para até que tenha um retorno. Para até que tenha um retorno.

Slide 9

Slide 9 text

{ Variáveis } 9

Slide 10

Slide 10 text

Variáveis 10 Estrutura de dados para armazenar valores.

Slide 11

Slide 11 text

Exemplo const nome = 'Alessandra' ; let sexoFeminino = true; let idade = 23; var peso = 67.5; 11

Slide 12

Slide 12 text

Exemplo String const nome = 'Alessandra' ; const nome = “Alessandra”; 12

Slide 13

Slide 13 text

Exemplo Number let idade = 23; var peso = 67.5; 13

Slide 14

Slide 14 text

Exemplo Boolean let sexoFeminino = true; let sexoFeminino = false; 14

Slide 15

Slide 15 text

Comentários 15 // Linha única /* * Bloco de comentário */

Slide 16

Slide 16 text

16 Vamos ver se está tudo ok?

Slide 17

Slide 17 text

{ Template String } 17

Slide 18

Slide 18 text

Exemplo const nome = 'Alessandra' ; console.log(`Nome: ${nome}`); 18

Slide 19

Slide 19 text

Console.log ??? 19

Slide 20

Slide 20 text

Exemplo console.log(`Nome: ${nome}`); console.warn(`Nome: ${nome}`); console.error(`Nome: ${nome}`); console.info(`Nome: ${nome}`); 20

Slide 21

Slide 21 text

{ Operadores } 21

Slide 22

Slide 22 text

Operadores aritméticos 22 Operadores utilizados para cálculos simples.

Slide 23

Slide 23 text

let num1 = 20; let num2 = 10; Exemplo 23

Slide 24

Slide 24 text

Soma console.log(`Total: ${num1 + num2}`); Exemplo 24

Slide 25

Slide 25 text

Subtração console.log(`Total: ${num1 - num2}`); Exemplo 25

Slide 26

Slide 26 text

Multiplicação console.log(`Total: ${num1 * num2}`); Exemplo 26

Slide 27

Slide 27 text

Divisão console.log(`Total: ${num1 / num2}`); Exemplo 27

Slide 28

Slide 28 text

28 Hooora de parar!

Slide 29

Slide 29 text

Operadores comparação e condição 29 Operadores utilizados comparar variáveis.

Slide 30

Slide 30 text

Igual == Diferente != Maior > Menor < Operadores comparação 30 Maior igual >= Menor igual >= Estritamente === Estritamente !===

Slide 31

Slide 31 text

let nota1 = 6; let nota2 = 7; Exemplo 31

Slide 32

Slide 32 text

Igual console.log(nota1 == nota2); Exemplo 32

Slide 33

Slide 33 text

Diferente console.log(nota1 != nota2); Exemplo 33

Slide 34

Slide 34 text

Maior console.log(nota1 > nota2); Exemplo 34

Slide 35

Slide 35 text

Menor console.log(nota1 < nota2); Exemplo 35

Slide 36

Slide 36 text

Estritamente igual console.log(nota1 === nota2); Exemplo 36

Slide 37

Slide 37 text

Estritamente diferente console.log(nota1 !== nota2); Exemplo 37

Slide 38

Slide 38 text

let nota = 6; if (nota == 7){ console.log(“Aprovado” )} else{ console.log(“Reprovado”) } Operadores condição 38

Slide 39

Slide 39 text

switch ( ){ case: ... break; default: ... break; } 39

Slide 40

Slide 40 text

Operadores lógicos 40 Operadores utilizados na lógica.

Slide 41

Slide 41 text

e && Operadores lógicos 41 ou | |

Slide 42

Slide 42 text

{ Operador ternário } 42

Slide 43

Slide 43 text

Operador ternário 43 Operador condicional semelhante ao if / else.

Slide 44

Slide 44 text

Exemplo let nota = 6; nota == 7 ? ‘Aprovado’: ‘Reprovado’; 44

Slide 45

Slide 45 text

45 Vamos ver se está tudo ok?

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Crie um operador ternário que compare notas usando os operadores maior igual ou menor igual. 47 Exercício 1

Slide 48

Slide 48 text

{ Método de array } 48

Slide 49

Slide 49 text

Método de array 49 Disponibilizado para tratarmos arrays (listas), que são demarcadas com colchetes [ ].

Slide 50

Slide 50 text

Exemplo const listaFrutas = ['Uva', 'Morango', 'Banana']; const listaVerduras = new Array('Alface'); 50

Slide 51

Slide 51 text

Queremos adicionar mais itens. Como fazer ? const listaVerduras = new Array( ); 1 - [...listaVerduras, 'alface', 'brócolis']; 2 - listaVerduras.concat('alface', 'brócolis'); 3 - listaVerduras.push('alface', 'brócolis'); 51

Slide 52

Slide 52 text

Como percorrer uma lista... const listaFrutas = ['Uva', 'Morango', 'Banana']; let compra = listaFrutas.forEach(item => console.log(item)); 52

Slide 53

Slide 53 text

Como vejo o tamanho do Array? listaFrutas.length; 53

Slide 54

Slide 54 text

{ Método de objetos } 54

Slide 55

Slide 55 text

Método de objetos 55 Disponibiliza para tratarmos de propriedades (chaves) e valores, que são demarcadas com chaves { }.

Slide 56

Slide 56 text

Exemplo const aluno = { nome: 'Alessandra', CPF: '000.000.000.00', endereco: 'rua sabia', matriculado: true }; 56

Slide 57

Slide 57 text

Queremos adicionar o e-mail. E agora ? 1 - aluno.email = '[email protected]'; 2 - aluno['email'] = '[email protected]'; 57

Slide 58

Slide 58 text

58 Ufá! O que falamos mesmo ?

Slide 59

Slide 59 text

Slide 60

Slide 60 text

Crie um array com dois objetos dentro. Cada objeto contendo: nome, idade e tipo (cat e mouse). 60 Exercício 2

Slide 61

Slide 61 text

{ DESTRUCTURING } 61

Slide 62

Slide 62 text

Destructuring 62 Desestrutura os dados.

Slide 63

Slide 63 text

Exemplo const aluno = { nome: 'Alessandra', idade: 23, }; 63

Slide 64

Slide 64 text

Exemplo const { nome, idade } = aluno; console.log(nome, idade); 64

Slide 65

Slide 65 text

Exemplo const [ n1, n2 ] = [6, 7] console.log(n1, n2); 65

Slide 66

Slide 66 text

{ JSON } 66

Slide 67

Slide 67 text

JSON 67 Anotação do objeto javascript, é um formato de texto de intercâmbio de dados. { 'cep': '01001-000', 'logradouro': 'Praça da Sé', 'complemento': 'lado ímpar', 'bairro': 'Sé', 'localidade': 'São Paulo', 'uf': 'SP', } Json CEP

Slide 68

Slide 68 text

68 Dê que falamos mesmo ?

Slide 69

Slide 69 text

{ Função arrow } 69

Slide 70

Slide 70 text

Função arrow 70 Função com a expressão mais curta.

Slide 71

Slide 71 text

Exemplo 71 Função anônima const hello = function() { return "Hello World!"; } Função arrow const hello = () => { return "Hello World!"; }

Slide 72

Slide 72 text

{ Função map } 72

Slide 73

Slide 73 text

Função map 73 Transformar um array em outro.

Slide 74

Slide 74 text

Exemplo 74 const numeros = [1, 2, 3, 4, 5]; let lista = numeros.map(item => item * 2); console.log(lista);

Slide 75

Slide 75 text

{ Função ﬁlter } 75

Slide 76

Slide 76 text

Função ﬁlter 76 Filtra um array.

Slide 77

Slide 77 text

Exemplo 77 const compras = ["Banana", "Leite", "Alface", "Limão", "Suco"]; compras.ﬁlter(item => item == "Leite");

Slide 78

Slide 78 text

78 Essa fase foi difícil!

Slide 79

Slide 79 text

Slide 80

Slide 80 text

Usando o array do exercício 2, faça um ﬁlter no array e retorne apenas o cat. 80 Exercício 3

Slide 81

Slide 81 text

{ DOM } 81

Slide 82

Slide 82 text

DOM 82 Modelo de objeto de documento que representa os componentes de marcação do HTML.

Slide 83

Slide 83 text

Como ele aparece no navegador. 83

Slide 84

Slide 84 text

Árvore do documento 84

Slide 85

Slide 85 text

85 Hooora de parar!

Slide 86

Slide 86 text

{ Mundo dos Fronts } 86

Slide 87

Slide 87 text

87 Só precisa deles!

Slide 88

Slide 88 text

Layout prontos! 88 Adobe XD

Slide 89

Slide 89 text

89 Nosso Elemento X!

Slide 90

Slide 90 text

90 Frameworks e Libs Angular React

Slide 91

Slide 91 text

{ Desaﬁo } 91

Slide 92

Slide 92 text

Crie um laço while que conte de 0 á 10. 92 Desaﬁo 1

Slide 93

Slide 93 text

Crie uma lista de frutas e usando o laço for imprima na tela. 93 Desaﬁo 2 Dica: Use document.write para imprimir na tela

Slide 94

Slide 94 text

Cursos on-line UDEMY ✦ React: React do zero ao avançado ✦ Angular: Curso de desenvolvimento com ES6 ✦ Javascript: Curso Web Moderno com JS 94

Slide 95

Slide 95 text

HORA DE DAR TCHAU! Obrigada 95