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
280
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
280
SERVIDOR DE APLICAÇÃO - NGINX
alessandranastassja
0
210
Other Decks in Technology
See All in Technology
Infrastructure as Prompt実装記 〜Bedrock AgentCoreで作る自然言語インフラエージェント〜
yusukeshimizu
1
160
ユーザー課題を愛し抜く――AI時代のPdM価値
kakehashi
PRO
1
130
JAWS-UG のイベントで使うハンズオンシナリオを Amazon Q Developer for CLI で作ってみた話
kazzpapa3
0
120
Amazon S3 Vectorsは大規模ベクトル検索を低コスト化するサーバーレスなベクトルデータベースだ #jawsugsaga / S3 Vectors As A Serverless Vector Database
quiver
2
960
リモートワークで心掛けていること 〜AI活用編〜
naoki85
0
190
メルカリIBIS:AIが拓く次世代インシデント対応
0gm
2
430
[OCI Technical Deep Dive] OracleのAI戦略(2025年8月5日開催)
oracle4engineer
PRO
1
230
MySQL HeatWave:サービス概要のご紹介
oracle4engineer
PRO
3
1.6k
「AIと一緒にやる」が当たり前になるまでの奮闘記
kakehashi
PRO
3
180
Intro to Software Startups: Spring 2025
arnabdotorg
0
270
形式手法特論:位相空間としての並行プログラミング #kernelvm / Kernel VM Study Tokyo 18th
ytaka23
3
1.5k
事業特性から逆算したインフラ設計
upsider_tech
0
210
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Side Projects
sachag
455
43k
Making Projects Easy
brettharned
117
6.3k
Visualization
eitanlees
146
16k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Designing for humans not robots
tammielis
253
25k
KATA
mclloyd
32
14k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
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