Javascript em 2018: tudo o que você precisa saber | Javascript in 2018: all that you must know

- IV Semana de Atualização Tecnológica na FATEC Sorocaba (02/07/2018): workshop de 3 dias

Transcript

1. Javascript em 2018: o que você realmente precisa saber Juliana Negreiros Lauren Ferreira
2. Objetivo do minicurso
3. O que vamos ver nesse minicurso?
4. 1º dia ➔ O que é Javascript? ➔ O que é ES6 (ou EcmaScript6 ou ES2015)? ➔ Valores, seus tipos e operações ➔ Estrutura básica ➔ Funções ➔ Adquirir chave para usar api da Marvel <3 ➔ Conhecendo o codesandbox <3
5. 2º dia ➔ Estrutura de dados: Objetos e Arrays ➔ Manipulando o DOM ➔ Módulos ➔ Criando o formulário do nosso app ➔ Requisições HTTP ➔ Programação Assíncrona (WTF?)
6. 3º dia ➔ Rest API ➔ Muito mais que só console! ➔ Orientação a objetos ➔ Finalizando o app ➔ Um pouco sobre frameworks e o mundo fora do sandbox ➔ Onde estudar?
7. o que é javascript?
8. Juliana Negreiros @juunegreiros lauren ferreira @larienmf
10. Por que aprender javascript? Client Side e Server Side
11. Por que aprender javascript? Está evoluindo muito
12. Por que aprender javascript? Inúmeros frameworks
13. Por que aprender javascript? Tem a maior comunidade do mundo <3
14. Por que aprender javascript? Carência de bons profissionais no mercado
15. o que é ecmascript 6?
16. Nova versão do Javascript :)
17. o que é ecmascript? Ecmascript é a especificação de script que o Javascript implementa
18. o que é ecmascript? E o que eu tenho a ver com isso?
19. Antes de começar
20. Antes de começar http://bit.ly/workshop-dia-1
21. Valores e seus mistérios
22. valores Não é uma linguagem tipada
23. valores ➔ Números 13 13.99 13.998e8 ➔ Números Especiais Infinity -Infinity
24. valores ➔ Strings `Javascript 10/10` "Javascript 10/10" 'Javascript 10/10' ➔ Vazio null undefined
25. valores ➔ Booleanos true false ➔ Operadores Unários (Unary Operators) typeof 'x' !true
26. ➔ Comparação 3 > 5 true == 1 true === 1 NaN == NaN ➔ Lógicos true && true false || true Operadores Binários valores
27. ➔ Concatenação de valores 'algo' + (1+2) `algo${1+2}` ➔ Escapar caractere 'Linha aqui /n Linha aqui' `Quebra de linha: /n` 'Quebra de linha: \\n\.' ➔ Operador Trinário ou Condicional true ? 1 : 2 valores
28. 8 * null "5" - 1 "5" + 1 "five" * 2 false == 0 null == undefined null == 0 Conversão automática do tipo valores
29. null || 'nome' 'Ju' || 'nome' null && 'nome' 'Ju' && 'nome' ➔ Contam como false: 0, NaN, string vazia e null ➔ Só farão as operações necessárias Sobre operações lógicas valores
30. estrutura básica
31. estrutura básica Atribuição de valores
32. let nome = 'Juliana'; const atividade = 'comer'; var numero = 5; ➔ Quais as principais diferenças? ➔ Como nomear uma variável? Atribuindo valor estrutura básica
33. estrutura básica Controle de Fluxo
34. let numero = Number(prompt("Escolha um número")); if (!Number.isNaN(numero)) { console.log(`Seu numero e ${numero}`); } else { console.log(‘Você não digitou um numero :(’); } Fluxo condicional estrutura básica
35. let result = 1; let counter = 0; while (counter < 10) { result = result * 2; counter = counter + 1; } console.log(result); While Loop estrutura básica
36. let yourName; do { yourName = prompt("Who are you?"); } while (!yourName); console.log(yourName); Do… While Loop estrutura básica
37. let result = 1; for (let counter = 0; counter < 10; counter = counter + 1) { result = result * 2; } console.log(result); For Loop estrutura básica
38. estrutura básica ➔ Podemos sair do loop antes do seu término for (let current = 20; ; current = current + 1) { if (current % 7 == 0) { console.log(current); break; } } ➔ Shortcuts para soma da mesma variável counter += 1; counter ++;
39. switch (prompt('Qual o clima da noite hoje?')) { case 'ensolarado': console.log('Vista algo leve'); break; case 'nublado': console.log('Que tal um filme?'); break; default: console.log('Não sou senhor do tempo, mas eu sei que vai chover.'); break; } Switch estrutura básica
40. Funções
41. Funções Código parecido muitas vezes
42. Funções Responsabilidade <3
43. ➔ Side Effects ➔ Return Funções
44. ➔ function soma(x){ return x + x; } ➔ const soma = function(x) { return x + x; }; ➔ const soma = x => x + x; Definindo uma função Funções
45. const salarios = function(dias) { const salario = (salarioHora, horas, name) => { let total = salarioHora * horas * dias; console.log(`Pagar ${total} para ${name}`); }; console.log(total); salario(15, 8, ‘ju’); salario(500, 2, ‘wolverine’); salario(18, 6, ‘lauren’); }; Escopo Funções
46. const galinha = () => ovo(); const ovo = () => galinha(); console.log(`${galinha()} veio primeiro`); Como as funções são chamadas? Funções
47. const power = (base, exponent = 2) => { let result = 1; for (let count = 0; count < exponent; count++) { result *= base; } return result; } Argumentos Funções
48. const multiplier = (factor) => number => number * factor; let twice = multiplier(2); twice(5); Closure Funções
49. nos tornando marvel developers <3
50. https://developer.marvel.com/
52. Guarde sua key com carinho <3
53. https://codesandbox.io/
54. https://github.com/training-c enter/mentoria/blob/master/me ntors-list.md
56. Até amanhã, galera o/
57. http://bit.ly/workshop-dia-2
58. estrutura de um projeto
59. estrutura do projeto
60. html:5 + tab
61. estrutura do projeto
62. estrutura do projeto
63. Estrutura do Projeto HTML - Hiper Text Markup Language
64. Estrutura do Projeto <tag> conteúdo </tag>
65. Estrutura do Projeto <h1>Bem vindo ao app da Marvel o/</h1>
66. Estrutura do Projeto CSS - Cascade Style Sheet
67. Estrutura do Projeto h1 { color: red; } seletor regra atributo valor
68. Estrutura do Projeto h1 { color: blueviolet; }
69. Estrutura do Projeto <link rel="stylesheet" href="./assets/css/main.css">
70. Estrutura do Projeto console.log('Bem vindo aqui também!');
71. Estrutura do Projeto <script src="./assets/javascript/main.js"></script>
72. Estrutura do Projeto Tenho que decorar tudo isso?
73. html5 cheatsheet css3 cheatsheet js cheatsheet
74. Estrutura de dados: arrays e objetos
75. Na vida real, precisamos de dados agrupados estrutura de dados
76. let lista = [2, 3, 5, 7, 11]; console.log(lista); console.log(lista[0]); console.log(lista[2-1]); Arrays estrutura de dados
77. console.log(lista.length); let nome = 'ju'; console.log(nome.toUpperCase); console.log(nome.toUpperCase()); console.log(nome.length); console.log(null.length); Propriedades estrutura de dados
78. ➔ console.log(nome.length); ➔ console.log(nome["length"]) Chamando um atributo estrutura de dados
79. console.log(nome.toUpperCase); console.log(typeof nome.toUpperCase); console.log(nome.toUpperCase()); console.log(typeof nome.toUpperCase()); Métodos estrutura de dados
80. let pilha = []; pilha.push('ju'); console.log(pilha); Manipulando Arrays - pilha estrutura de dados
81. let pilha = []; pilha.push('ju'); pilha.push(20); console.log(pilha); Manipulando Arrays - pilha estrutura de dados
82. let pilha = []; pilha.push('ju'); pilha.push(20); pilha.pop(); console.log(pilha); Manipulando Arrays - pilha estrutura de dados
83. estrutura de dados
84. let cadastro = { nome: 'Hulk', cor: 'verde', tamanho: 'grande', 'gosto muito': false, }; console.log(cadastro); console.log(cadastro.ativo); Objetos estrutura de dados
85. cadastro['gosto muito'] = true; cadastro.tamanho = 10; console.log(cadastro); Objetos estrutura de dados
86. cadastro.algo = 'algo'; console.log(cadastro); console.log(cadastro.algo); Objetos estrutura de dados
87. console.log('tamanho' in cadastro); console.log(Object.keys('cadastro')); console.log(Object.keys(cadastro)); Objetos estrutura de dados
88. let shield = { ativo: true, }; Object.assign(shield, cadastro); console.log(shield); Objetos estrutura de dados
89. estrutura de dados
90. let cadastro = [ { nome: 'Hulk', cor: 'verde', tamanho: 'grande', 'gosto muito': true, }, { nome: 'Homem de ferro', cor: 'vermelho', tamanho: 'médio', 'gosto muito': false, }, ]; Array de Objetos - agora sim! estrutura de dados
91. console.log(cadastro); console.log(typeof []); Array de Objetos - agora sim! estrutura de dados
92. let obj1 = { value: 10 }; let obj2 = obj1; let obj3 = { value: 10 }; Mutabilidade estrutura de dados
93. console.log(obj1 == obj2); console.log(obj2 == obj3); Mutabilidade estrutura de dados
94. obj1.value = 15; console.log(obj1.value); console.log(obj2.value); console.log(obj3.value); Mutabilidade estrutura de dados
95. Atenção!! const score = {visitors: 0, home: 0}; score.visitors = 1; score = {visitors: 1, home: 1};
96. estrutura de dados
97. const teste = [4, 5, 6, 7]; for (let i = 0; i < teste.length; i++) { console.log(teste[i]); } Array Loops estrutura de dados
98. for (let entry of teste) { console.log(`Número ${entry}.`); } Array Loops estrutura de dados
99. high-order functions
100. let total = 0, count = 1; while (count <= 10) { total += count; count += 1; } console.log(total); Abstração console.log(sum(range(1, 10))); HIGH-ORDER FUNCTIONS
101. for (let i = 0; i < 10; i++) { console.log(i); } Abstração HIGH-ORDER FUNCTIONS
102. function repeatLog(n) { for (let i = 0; i < n; i++) { console.log(i); } } repeatLog(3); Abstração HIGH-ORDER FUNCTIONS
103. function repeat(n, action) { for (let i = 0; i < n; i++) { action(i); } } repeat(3, console.log); Abstração HIGH-ORDER FUNCTIONS
104. Funções que aceitam outras funções como argumento HIGH-ORDER FUNCTIONS
105. Manipulando o DOM
106. Módulos
107. Mão na massa o/
108. http://bit.ly/workshop-dia-2- projeto
109. Até amanhã, galera o/
110. http://bit.ly/workshop-dia-3
111. requisições http
112. Hyper Text Transfer Protocol
113. PROTOCOLO DE TRANSFERÊNCIA DE HIPERTEXTO
114. requisições http
115. a mágica das dev tools <3
116. Dev Tools
117. desafios
118. http://bit.ly/workshop-dia-3-css
119. mãos na massa
120. O mundo lá fora
121. Até a próxima, galera o/