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
270
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
270
SERVIDOR DE APLICAÇÃO - NGINX
alessandranastassja
0
210
Other Decks in Technology
See All in Technology
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
21k
LINEギフトのLINEミニアプリアクセシビリティ改善事例
lycorptech_jp
PRO
0
350
「ラベルにとらわれない」エンジニアでいること/Be an engineer beyond labels
kaonavi
0
240
Amebaにおける Platform Engineeringの実践
kumorn5s
6
880
NLP2025 参加報告会 / NLP2025
sansan_randd
4
470
はじめてのSDET / My first challenge as a SDET
bun913
0
130
Webアプリを Lambdaで動かすまでに考えること / How to implement monolithic Lambda Web Application
_kensh
7
1k
All You Need Is Kusa 〜Slackデータで始めるデータドリブン〜
jonnojun
0
130
こんなデータマートは嫌だ。どんな? / waiwai-data-meetup-202504
shuntak
4
1.6k
YOLOv10~v12
tenten0727
1
230
AIエージェントキャッチアップと論文リサーチ
os1ma
6
1.4k
AIエージェント開発における「攻めの品質改善」と「守りの品質保証」 / 2024.04.09 GPU UNITE 新年会 2025
smiyawaki0820
0
360
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Testing 201, or: Great Expectations
jmmastey
42
7.4k
How to Ace a Technical Interview
jacobian
276
23k
Rails Girls Zürich Keynote
gr2m
94
13k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Optimizing for Happiness
mojombo
377
70k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
380
Docker and Python
trallard
44
3.3k
Unsuck your backbone
ammeep
670
57k
GraphQLとの向き合い方2022年版
quramy
45
14k
A better future with KSS
kneath
239
17k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
28
1.6k
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
= 'alessandra@email.com'; 2 - aluno['email'] = 'alessandra@email.com'; 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