[Apresentação] Javascript avançado

Apresentado conceitos de variáveis a funções filter.

Transcript

1. JAVASCRIPT AVANÇADO Sejam bem vindos 1
2. 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
3. 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
4. DICA VOVÓ DA JUJU! Abrir um NAVEGADOR de sua preferência OU Clicar neste link * 4
7. Javascript 7 Linguagem de programação de tipagem fraca.
8. 8 { Assíncrono } { Síncrono } Não para até que tenha um retorno. Para até que tenha um retorno.
9. { Variáveis } 9
10. Variáveis 10 Estrutura de dados para armazenar valores.
11. Exemplo const nome = 'Alessandra' ; let sexoFeminino = true; let idade = 23; var peso = 67.5; 11
12. Exemplo String const nome = 'Alessandra' ; const nome = “Alessandra”; 12
13. Exemplo Number let idade = 23; var peso = 67.5; 13
14. Exemplo Boolean let sexoFeminino = true; let sexoFeminino = false; 14
15. Comentários 15 // Linha única /* * Bloco de comentário */
16. 16 Vamos ver se está tudo ok?
17. { Template String } 17
18. Exemplo const nome = 'Alessandra' ; console.log(`Nome: ${nome}`); 18
19. Console.log ??? 19
20. Exemplo console.log(`Nome: ${nome}`); console.warn(`Nome: ${nome}`); console.error(`Nome: ${nome}`); console.info(`Nome: ${nome}`); 20
21. { Operadores } 21
22. Operadores aritméticos 22 Operadores utilizados para cálculos simples.
23. let num1 = 20; let num2 = 10; Exemplo 23
24. Soma console.log(`Total: ${num1 + num2}`); Exemplo 24
25. Subtração console.log(`Total: ${num1 - num2}`); Exemplo 25
26. Multiplicação console.log(`Total: ${num1 * num2}`); Exemplo 26
27. Divisão console.log(`Total: ${num1 / num2}`); Exemplo 27
28. 28 Hooora de parar!
29. Operadores comparação e condição 29 Operadores utilizados comparar variáveis.
30. Igual == Diferente != Maior > Menor < Operadores comparação 30 Maior igual >= Menor igual >= Estritamente === Estritamente !===
31. let nota1 = 6; let nota2 = 7; Exemplo 31
32. Igual console.log(nota1 == nota2); Exemplo 32
33. Diferente console.log(nota1 != nota2); Exemplo 33
34. Maior console.log(nota1 > nota2); Exemplo 34
35. Menor console.log(nota1 < nota2); Exemplo 35
36. Estritamente igual console.log(nota1 === nota2); Exemplo 36
37. Estritamente diferente console.log(nota1 !== nota2); Exemplo 37
38. let nota = 6; if (nota == 7){ console.log(“Aprovado” )} else{ console.log(“Reprovado”) } Operadores condição 38
39. switch ( ){ case: ... break; default: ... break; } 39
40. Operadores lógicos 40 Operadores utilizados na lógica.
41. e && Operadores lógicos 41 ou | |
42. { Operador ternário } 42
43. Operador ternário 43 Operador condicional semelhante ao if / else.
44. Exemplo let nota = 6; nota == 7 ? ‘Aprovado’: ‘Reprovado’; 44
45. 45 Vamos ver se está tudo ok?
47. Crie um operador ternário que compare notas usando os operadores maior igual ou menor igual. 47 Exercício 1
48. { Método de array } 48
49. Método de array 49 Disponibilizado para tratarmos arrays (listas), que são demarcadas com colchetes [ ].
50. Exemplo const listaFrutas = ['Uva', 'Morango', 'Banana']; const listaVerduras = new Array('Alface'); 50
51. 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
52. Como percorrer uma lista... const listaFrutas = ['Uva', 'Morango', 'Banana']; let compra = listaFrutas.forEach(item => console.log(item)); 52
53. Como vejo o tamanho do Array? listaFrutas.length; 53
54. { Método de objetos } 54
55. Método de objetos 55 Disponibiliza para tratarmos de propriedades (chaves) e valores, que são demarcadas com chaves { }.
56. Exemplo const aluno = { nome: 'Alessandra', CPF: '000.000.000.00', endereco: 'rua sabia', matriculado: true }; 56
57. Queremos adicionar o e-mail. E agora ? 1 - aluno.email = 'alessandra@email.com'; 2 - aluno['email'] = 'alessandra@email.com'; 57
58. 58 Ufá! O que falamos mesmo ?
60. Crie um array com dois objetos dentro. Cada objeto contendo: nome, idade e tipo (cat e mouse). 60 Exercício 2
61. { DESTRUCTURING } 61
62. Destructuring 62 Desestrutura os dados.
63. Exemplo const aluno = { nome: 'Alessandra', idade: 23, }; 63
64. Exemplo const { nome, idade } = aluno; console.log(nome, idade); 64
65. Exemplo const [ n1, n2 ] = [6, 7] console.log(n1, n2); 65
66. { JSON } 66
67. 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
68. 68 Dê que falamos mesmo ?
69. { Função arrow } 69
70. Função arrow 70 Função com a expressão mais curta.
71. Exemplo 71 Função anônima const hello = function() { return "Hello World!"; } Função arrow const hello = () => { return "Hello World!"; }
72. { Função map } 72
73. Função map 73 Transformar um array em outro.
74. Exemplo 74 const numeros = [1, 2, 3, 4, 5]; let lista = numeros.map(item => item * 2); console.log(lista);
75. { Função filter } 75
76. Função filter 76 Filtra um array.
77. Exemplo 77 const compras = ["Banana", "Leite", "Alface", "Limão", "Suco"]; compras.filter(item => item == "Leite");
78. 78 Essa fase foi difícil!
80. Usando o array do exercício 2, faça um filter no array e retorne apenas o cat. 80 Exercício 3
81. { DOM } 81
82. DOM 82 Modelo de objeto de documento que representa os componentes de marcação do HTML.
83. Como ele aparece no navegador. 83
84. Árvore do documento 84
85. 85 Hooora de parar!
86. { Mundo dos Fronts } 86
87. 87 Só precisa deles!
88. Layout prontos! 88 Adobe XD
89. 89 Nosso Elemento X!
90. 90 Frameworks e Libs Angular React
91. { Desafio } 91
92. Crie um laço while que conte de 0 á 10. 92 Desafio 1
93. Crie uma lista de frutas e usando o laço for imprima na tela. 93 Desafio 2 Dica: Use document.write para imprimir na tela
94. Cursos on-line UDEMY ✦ React: React do zero ao avançado ✦ Angular: Curso de desenvolvimento com ES6 ✦ Javascript: Curso Web Moderno com JS 94
95. HORA DE DAR TCHAU! Obrigada 95