codelab@ime.usp.br
Grupo de extensão universitária que como objetivo estimular a inovação tecnológica na USP
WebDev
JavaScript
Aula 6
Laços, listas e funções. Eventos.
USPCodeLab
Facebook:
Este trabalho do USPCodeLab está licenciado com uma Licença Creative Commons - Atribuição 4.0 Internacional
O USPCodeLab é um grupo de extensão que tem como objetivo estimular a inovação tecnológica na USP
Funções
São "subprogramas" que podem ser executados por código externo
Cidadãs de 1ª classe
Podem receber parâmetros de entrada e produzir uma saída
Funções
function jogaDado() {
const r = Math.random();
const dado = 1 + Math.floor(r*6);
return dado;
}
const meuDado = jogaDado();
let resultado;
if (meuDado >= 5)
resultado = "Ganhou!";
else
resultado = "Perdeu!";
console.log(resultado);Funções
function jogaDado() {
const r = Math.random();
const dado = 1 + Math.floor(r*6);
return dado;
}
function resultado(umDado) {
let resultado;
if (umDado >= 5) resultado = "Ganhou!";
else resultado = "Perdeu!";
return resultado;
}
const meuDado = jogaDado();
const resposta = resultado(meuDado);
console.log(resposta);function jogaDado() {
const r = Math.random();
const dado = 1 + Math.floor(r*6);
return dado;
}
function obtemResultado(umDado) {
let resultado;
if (umDado >= 5) resultado = "Ganhou!";
else resultado = "Perdeu!";
return resultado;
}
const resposta = obtemResultado(jogaDado());
console.log(resposta);function jogaDado() {
const r = Math.random();
const dado = 1 + Math.floor(r*6);
return dado;
}
function obtemResultado(umDado) {
let resultado;
if (umDado >= 5) resultado = "Ganhou!";
else resultado = "Perdeu!";
return resultado;
}
console.log(obtemResultado(jogaDado()));Funções têm seu valor
function sucessorDoPisoDoSextuploDeAleatorio() {
const r = Math.random();
const dado = 1 + Math.floor(r*6);
return dado;
}
function resultado(umDado) {
const resultado;
if (umDado >= 5) resultado = "Ganhou!";
else resultado = "Perdeu!";
return resultado;
}
const jogaDado = sucessorDoPisoDoSextuploDeAleatorio;
console.log(resultado(jogaDado()));... mas nem sempre têm nome
function soma(a, b) {
return a + b;
}
// versão alternativa
const soma = function (a, b) {
return a + b;
}
const soma = (a, b) => {
return a + b;
}// versão simplificada
const soma = (a, b) => a + b;clássico
arrow functions
console.log(soma(1, 2)); // 3
Um caso de uso: callbacks
Já que podemos armazenar funções em variáveis...
Funções "genéricas"...
... pedem callbacks "com conteúdo"
... por que não passar como argumento?
Um caso de uso: callbacks
const disciplina = (p1, p2, p3, ep1, ep2, ep3, criterio) => {
const mp = ( p1 + p2 + p3) / 3,
mep = (ep1 + ep2 + ep3) / 3;
return criteiro(mp, mep);
}
const mediaSimples5 = (prova, ep) => {
return (prova + ep) / 2 >= 5.0;
}
const mediaSimples7 = (prova, ep) => {
return (prova + ep) / 2 >= 7.0;
}
const mediaPonderada5 = (prova, ep) => {
return (3 * prova + ep) / 4 >= 5.0;
}
Um caso de uso: callbacks
let aprovado = disciplina(5.0, 6.5, 5.5, // true
9.0, 5.5, 7.0,
mediaSimples5);
aprovado = disciplina(5.0, 6.5, 5.5, // false
9.0, 5.5, 7.0,
mediaSimples7);
aprovado = disciplina(5.0, 6.5, 5.5, // true
9.0, 5.5, 7.0,
mediaPonderada5);Um caso de uso: métodos
Cada objeto armazena algumas funções para manipular seu conteúdo
Objeto?
Na teoria da Programação Orientada a Objetos, um objeto é um elemento computacional que representa, no domínio da solução, alguma entidade (abstrata ou concreta) do domínio de interesse... 😴😴😴
Dados
Aquilo que pode ser armazenado e manipulado
Um caso de uso: métodos
const num = 15;
// Método que retorna um número em formato de string
const string = num.toString() const string = "ola, tudo bem?";
// Método que retorna a string com todos
// os caractéres em maiúsculo
const gritando = string.toUpperCase()
console.log(gritando) // OLA, TUDO BEM?
Array
Um sistema que lida com compras
let compra1 = "manga",
compra2 = "leite",
compra3 = "paracetamol";Mas e se eu quiser guardar todas em um mesmo lugar?
let compras = ["manga", "leite", "paracetamol"];
console.log(compras[0]); // manga
console.log(compras[1]); // leite
console.log(compras[2]); // paracetamolE se eu quiser aumentar a lista?
Array
manga
leite
paracetamol
açaí
push
manga
leite
paracetamol
açaí
compras =
let compras = ["manga", "leite","paracetamol"];
compras.push("açaí");Array
manga
leite
paracetamol
açaí
pop
manga
leite
paracetamol
compras =
let jogadoFora = compras.pop()
console.log(jogadoFora) // 'açai'
console.log(compras) //['manga', 'leite', 'paracetamol']Array
2
0
1
0
1
2
sort
compras.sort()
console.log(compras) //['leite', 'manga', 'paracetamol']leite
paracetamol
compras =
manga
Array
let meiaCompra = compras.slice(0, 2)
console.log(compras) //['leite', 'manga']
console.log(compras) //['leite', 'manga', 'paracetamol']leite
paracetamol
manga
0
1
2
leite
manga
compras =
meiaCompra =
leite
paracetamol
compras =
manga
slice(0,2)
fechado
aberto
Array
Como percorrer os dados?
Abordagem primária : laço "for"
Será a melhor solução?
Alternativas nativas da linguagem
ForEach
- Função embutida de lista
- Use se quiser realizar uma operação para cada item da lista
- Recebe como argumento uma função callback
- Como funciona?
ForEach
"Mota"
"Rodrigo"
"Guerreiro"
"Luiz"
- Mota
- Rodrigo
- Guerreiro
- Luiz
function itemiza (membro) {
console.log(`- ${membro}`);
}
const produção = ["Mota", "Rodrigo", "Guerreiro", "Luiz"];
produção.forEach(itemiza);
// "- Mota"
// "- Rodrigo"
// "- Guerreiro"
// "- Luiz"forEach(itemiza)
Laço for
- Útil quando você não tem uma lista
- Quando precisa acessar ou modificar outros itens, além do item atual da iteração
- Como funciona?
Laço for
const produção = ["Mota", "Rodrigo", "Guerreiro", "Luiz"];
for (const membro of produção) {
console.log(`- ${membro}`)
}
// "- Mota"
// "- Rodrigo"
// "- Guerreiro"
// "- Luiz"const produção = ["Mota", "Rodrigo", "Guerreiro", "Luiz"];
for (let i = 0; i < produção.length; i++) {
console.log(`- ${membro[i]}`)
}
// "- Mota"
// "- Rodrigo"
// "- Guerreiro"
// "- Luiz"Seria melhor usar produção.forEach aqui
Laço for
const aula = 'https://www.ime.usp.br/~jef/bd';
function downloadPDF(url) {
// função que baixa um pdf e salva no seu pc
}
for (let i; i < 11; i++) {
const url = `${aula}${i.padStart('2', '0')}.pdf`
downloadPDF(i)
}Listas
- ForEach apenas itera
- E se eu quiser modificar o valor de uma lista?
Map
- Retorna uma nova lista
- Modifica o valor de uma lista passando uma callback pra cada item
Map
dobro = numeros.map(multiplicador)
numeros =
2
1
3
7
numeros =
2
1
3
7
dobro =
4
2
6
14
let numeros = [2,1,3,7]
const multiplicador = (n) => {
return n * 2;
}
let dobro = numeros.map(multiplicador)
console.log(numeros) //[2,1,3,7]
console.log(dobro) //[4,2,6,14]Filter
- Usado pra filtrar apenas valores desejados na lista
- O critério para filtrar é especificado pela callback
Filter
membros =
presentes = membros.filter(PresentesHoje)
"Mota"
"Rodrigo"
"Guerreiro"
"Luiz"
presentes =
"Mota"
"Rodrigo"
membros =
"Mota"
"Rodrigo"
"Guerreiro"
"Luiz"
Filter
let numeros = [0,4,2,7];
const selecionaPequenos = (n) => {
return n < 3;
}
let pequenos = numeros.filter(selecionaPequenos);
console.log(numeros) // [0,4,2,7]
console.log(pequenos) // [0,2]IMPORTANTE: a função de callback de filter deve retornar um booleano
true para o item passar no filtro
false para ele ser filtrado
Reduce
- Reduz a lista inteira a um único valor (não necessariamente um número)
- O reduce recebe uma função callback e o valor inicial do acumulador
- A callback recebe como parâmetro um acumulador e o elemento atual
Reduce
1
2
3
4
x = 10
x = numeros.reduce(soma, 0)
const soma = (acc, atual) => acc + atual;
let numeros = [1, 2, 3];
sum1 = numeros.reduce(soma, 0); // soma(0, 1) = 1
// soma(1, 2) = 3
// soma(3, 3) = 6
// sum1 vale 6
sum2 = numeros.reduce(soma, 10); // soma(10, 1) = 11
// soma(11, 2) = 13
// soma(13, 3) = 16
// sum2 vale 161
2
3
4
numeros =
Outros métodos
- some()
- find()
- includes()
- join()
- sort()
Listas
- Podemos encadear métodos de lista?
Sim!
Listas
1
2
3
4
5
6
x = numeros.filter(menoresQueCinco)
.map(dobre)
.reduce(soma, 0)
x = 21
Vamos por partes
Passo a passo
1
2
3
4
5
6
x = numeros.filter(menoresQueCinco)
1
2
3
4
Passo a passo
1
2
3
4
.map(dobre)
2
4
6
8
x = numeros.filter(menoresQueCinco)
Passo a passo
2
4
6
8
x = 21
.reduce(soma, 0)
.map(dobre)
x = numeros.filter(menoresQueCinco)
Tarefa
Copie os arquivos disponibilizados no discord/descrição para o seu repositório e resolva os exercícios do arquivo javascript
Para verificar o resultado basta abrir o arquivo html e olhar o console no inspetor (F12)
Tarefa
// 1. Gere uma lista contendo apenas os números pares (filter)
const numeros = [1, 4, 10, 23, 26, 27, 29, 30, 311, 320, 4490]
// 2. Faça uma lista que possua apenas frutas com quatro letras (filter)
// Dica: você pode usar 'string'.length para verificar a quantidade de
// caracteres de uma string.
const frutas = [
'maçã', 'banana', 'pera', 'uva', 'coco', 'caqui', 'kiwi', 'acerola'
]
// 3. Maiusculize os nomes dados (map)
// Dica: Maiusculizar é escrever cada palavra com a inicial em
// maiúsculo. Você pode conferir todos os métodos de String em:
// https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String#m%C3%A9todos
const nomes = ['cecília', 'roberto', 'bruna', 'Osvaldo', 'Carlos']
// 4. Concatene os nomes e sobrenomes da lista (map)
const nomesESobrenomes = [
['Fernanda', 'Montenegro'],
['Lázaro', 'Ramos'],
['Heloísa', 'Périssé'],
['Daniel', 'Furlan'],
['Adriana', 'Esteves'],
]
// 5. Calcule a média das notas (reduce)
const notas = [7, 5, 4, 3, 8.5]
// 6. Calcule a média ponderada das notas (reduce)
// Cada item da lista é composto por uma sublista com a nota (na
// primeira posição) e o peso (na segunda posição).
const notasComPeso = [[7, 2], [5, 1], [4, 2], [3, 1], [8.5, 2]]
// 7. (Extra) Refaça o exercício 6 tirando as duas menores notas. Dica:
// Lembre dos métodos sort e slice.WebDev
Obrigado pela presença! :)
WebDev 2022 - Aula 6 - JS: laços, arrays e funções
By codelab@ime.usp.br
