Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Javascript avançado
Search
Alessandra Nastassja
March 27, 2020
Technology
0
210
Javascript avançado
Apresentado conceitos de variáveis a funções filter.
Alessandra Nastassja
March 27, 2020
Tweet
Share
More Decks by Alessandra Nastassja
See All by Alessandra Nastassja
JavaScipt - Um caminho para o futuro
alessandranastassja
0
200
SERVIDOR DE APLICAÇÃO - NGINX
alessandranastassja
0
150
Other Decks in Technology
See All in Technology
本当のAWS基礎
toru_kubota
1
620
コードや知識を組み込む / Incorporate Code and knowledge
ks91
PRO
0
150
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
4
37k
Microsoft for Startups Founders Hub_20240429 update
daikikanemitsu
1
2.4k
Além do else! Categorizando Pokemóns com Pattern Matching no JavaScript
wmsbill
0
700
実例で紹介するRAG導入時の知見と精度向上の勘所
yamahiro
5
1.6k
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
330
BPStudyの200回を中心にIT業界を振り返る。そしてこれから
haru860
3
400
いいたいことちゃんという
tkengo
0
230
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
4
610
Building a RAG-poweredAI chat appwith Python and VS Code
pamelafox
0
150
Babylon.js JAPAN活動紹介 (2024/4)
limes2018
1
110
Featured
See All Featured
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Ruby is Unlike a Banana
tanoku
96
10k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
65
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
KATA
mclloyd
16
12k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
The Invisible Customer
myddelton
114
12k
Debugging Ruby Performance
tmm1
70
11k
Happy Clients
brianwarren
92
6.4k
Transcript
JAVASCRIPT AVANÇADO Sejam bem vindos 1
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
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
DICA VOVÓ DA JUJU! Abrir um NAVEGADOR de sua preferência
OU Clicar neste link * 4
5
6
Javascript 7 Linguagem de programação de tipagem fraca.
8 { Assíncrono } { Síncrono } Não para até
que tenha um retorno. Para até que tenha um retorno.
{ Variáveis } 9
Variáveis 10 Estrutura de dados para armazenar valores.
Exemplo const nome = 'Alessandra' ; let sexoFeminino = true;
let idade = 23; var peso = 67.5; 11
Exemplo String const nome = 'Alessandra' ; const nome =
“Alessandra”; 12
Exemplo Number let idade = 23; var peso = 67.5;
13
Exemplo Boolean let sexoFeminino = true; let sexoFeminino = false;
14
Comentários 15 // Linha única /* * Bloco de comentário
*/
16 Vamos ver se está tudo ok?
{ Template String } 17
Exemplo const nome = 'Alessandra' ; console.log(`Nome: ${nome}`); 18
Console.log ??? 19
Exemplo console.log(`Nome: ${nome}`); console.warn(`Nome: ${nome}`); console.error(`Nome: ${nome}`); console.info(`Nome: ${nome}`); 20
{ Operadores } 21
Operadores aritméticos 22 Operadores utilizados para cálculos simples.
let num1 = 20; let num2 = 10; Exemplo 23
Soma console.log(`Total: ${num1 + num2}`); Exemplo 24
Subtração console.log(`Total: ${num1 - num2}`); Exemplo 25
Multiplicação console.log(`Total: ${num1 * num2}`); Exemplo 26
Divisão console.log(`Total: ${num1 / num2}`); Exemplo 27
28 Hooora de parar!
Operadores comparação e condição 29 Operadores utilizados comparar variáveis.
Igual == Diferente != Maior > Menor < Operadores comparação
30 Maior igual >= Menor igual >= Estritamente === Estritamente !===
let nota1 = 6; let nota2 = 7; Exemplo 31
Igual console.log(nota1 == nota2); Exemplo 32
Diferente console.log(nota1 != nota2); Exemplo 33
Maior console.log(nota1 > nota2); Exemplo 34
Menor console.log(nota1 < nota2); Exemplo 35
Estritamente igual console.log(nota1 === nota2); Exemplo 36
Estritamente diferente console.log(nota1 !== nota2); Exemplo 37
let nota = 6; if (nota == 7){ console.log(“Aprovado” )}
else{ console.log(“Reprovado”) } Operadores condição 38
switch ( ){ case: ... break; default: ... break; }
39
Operadores lógicos 40 Operadores utilizados na lógica.
e && Operadores lógicos 41 ou | |
{ Operador ternário } 42
Operador ternário 43 Operador condicional semelhante ao if / else.
Exemplo let nota = 6; nota == 7 ? ‘Aprovado’:
‘Reprovado’; 44
45 Vamos ver se está tudo ok?
46
Crie um operador ternário que compare notas usando os operadores
maior igual ou menor igual. 47 Exercício 1
{ Método de array } 48
Método de array 49 Disponibilizado para tratarmos arrays (listas), que
são demarcadas com colchetes [ ].
Exemplo const listaFrutas = ['Uva', 'Morango', 'Banana']; const listaVerduras =
new Array('Alface'); 50
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
Como percorrer uma lista... const listaFrutas = ['Uva', 'Morango', 'Banana'];
let compra = listaFrutas.forEach(item => console.log(item)); 52
Como vejo o tamanho do Array? listaFrutas.length; 53
{ Método de objetos } 54
Método de objetos 55 Disponibiliza para tratarmos de propriedades (chaves)
e valores, que são demarcadas com chaves { }.
Exemplo const aluno = { nome: 'Alessandra', CPF: '000.000.000.00', endereco:
'rua sabia', matriculado: true }; 56
Queremos adicionar o e-mail. E agora ? 1 - aluno.email
= '
[email protected]
'; 2 - aluno['email'] = '
[email protected]
'; 57
58 Ufá! O que falamos mesmo ?
59
Crie um array com dois objetos dentro. Cada objeto contendo:
nome, idade e tipo (cat e mouse). 60 Exercício 2
{ DESTRUCTURING } 61
Destructuring 62 Desestrutura os dados.
Exemplo const aluno = { nome: 'Alessandra', idade: 23, };
63
Exemplo const { nome, idade } = aluno; console.log(nome, idade);
64
Exemplo const [ n1, n2 ] = [6, 7] console.log(n1,
n2); 65
{ JSON } 66
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 Dê que falamos mesmo ?
{ Função arrow } 69
Função arrow 70 Função com a expressão mais curta.
Exemplo 71 Função anônima const hello = function() { return
"Hello World!"; } Função arrow const hello = () => { return "Hello World!"; }
{ Função map } 72
Função map 73 Transformar um array em outro.
Exemplo 74 const numeros = [1, 2, 3, 4, 5];
let lista = numeros.map(item => item * 2); console.log(lista);
{ Função filter } 75
Função filter 76 Filtra um array.
Exemplo 77 const compras = ["Banana", "Leite", "Alface", "Limão", "Suco"];
compras.filter(item => item == "Leite");
78 Essa fase foi difícil!
79
Usando o array do exercício 2, faça um filter no
array e retorne apenas o cat. 80 Exercício 3
{ DOM } 81
DOM 82 Modelo de objeto de documento que representa os
componentes de marcação do HTML.
Como ele aparece no navegador. 83
Árvore do documento 84
85 Hooora de parar!
{ Mundo dos Fronts } 86
87 Só precisa deles!
Layout prontos! 88 Adobe XD
89 Nosso Elemento X!
90 Frameworks e Libs Angular React
{ Desafio } 91
Crie um laço while que conte de 0 á 10.
92 Desafio 1
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
Cursos on-line UDEMY ✦ React: React do zero ao avançado
✦ Angular: Curso de desenvolvimento com ES6 ✦ Javascript: Curso Web Moderno com JS 94
HORA DE DAR TCHAU! Obrigada 95