WebDev
JavaScript
Aula 5
Listas, objetos, métodos, laços.
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
Revisão
funções + QuerySelector
Mostrar manipulação do DOM
Arrow functions
Listas (Arrays)
É que nem python!
Notícia boa:
const lista1 = [1, 2, 3, 4];
const lista2 = ["uma string", 2, 3, 4];
let lista3 = ["string1", "string2"];Listas (Arrays)
Para criar, é simples:
let lista_vazia = [];
const lista1 = [1, 2, 3, 4];
const lista2 = ["uma string", 2, 3, 4];
let lista3 = ["string1", "string2"];Declarando com alguns elementos dentro:
Declarando com um tamanho definido e inicializada com undefined:
const list = Array(4);Acessar elementos
Para acessar um elemento, é que nem python (de novo)
let lista = [10, 20, 30 , 1, 3123, 100];
console.log(lista[0]); // 10
console.log(lista[1]); // 20
console.log(lista[2]); // 30
console.log(lista[3]); // 1
console.log(lista[4]); // 3123
console.log(lista[5]); // 100Acessar elementos
Acessar elementos não existentes não dá erro que nem no python
let lista = [10, 20, 30 , 1, 3123, 100];
console.log(lista[100]); // undefined
console.log(lista[1000]); // undefined
console.log(lista[3123213412]); // undefinedUndefined!
Atribuição
Simples:
const lista = [10, 20, 30 , 1, 3123, 100];
lista[0] = 4872378423;
console.log(lista[0]); // 4872378423
lista[5] = 42;
console.log(lista[5]); // 42Laços (loops)
E se quisermos acessar todos os elementos da lista?
for
const list = [3232, 432423, 3121, 31231231];
for(let i = 0; i < 4; i++){
console.log(list[i]);
}Laços (loops)
const list = [1, 2, 3];
for(let i = 0; i < 3; i++){
console.log(list[i]);
}list = [1, 2, 3]
for i in range(3):
print(list[i])
JavaScript
Python
(1)
(2)
(3)
- Declaramos a lista.
- Especificamos um loop que começa com i = 0 e roda enquanto i é menor que 3 (todo final de loop incrementa i em 1).
- Imprimimos.
(1)
(2)
(3)
Laços (loops)
const list = [1, 2, 3];
for(let i of list){
console.log(i);
}
// 1, 2, 3Um jeito um pouco pythonico:
Objetos
Pacotes?
Dicionários de Python?
const HondaFiat = {
cor: "vermelho",
velocidade: "muito rápido!!!",
aceleração: Infinity,
placa: Math.floor(Math.random() * 1000)
// inteiro entre 0 e 999
};Atributos
Acessando atributos
const HondaFiat = {
cor: "vermelho",
velocidade: "muito rápido!!!",
aceleração: Infinity,
placa: Math.floor(Math.random() * 1000)
// inteiro entre 0 e 999
};
console.log(HondaFiat.cor); // "vermelho"
console.log(HondaFiat.velocidade); // "muito rápido!!!"
console.log(HondaFiat.aceleração); // "Infinity"
console.log(HondaFiat.placa); // ???Ok, mas isso é tudo?
Não!!
E se quisermos colocar funções?
Podemos colocar qualquer coisa dentro de objetos
Métodos
Métodos
Funções dentro de objetos
Funções dentro de objetos
function aumenta_velocidade() {
this.velocidade = this.velocidade + 10;
}
const HondaFiat = {
velocidade: 10,
aumenta_velocidade: aumenta_velocidade
};Métodos
Como chamar as funções?
Funções dentro de objetos
function aumenta_velocidade() {
this.velocidade = this.velocidade + 10;
}
const HondaFiat = {
velocidade: 10,
aumenta_velocidade: aumenta_velocidade
};
HondaFiat.aumenta_velocidade();
console.log(HondaFiat.velocidade); // 20Objetos em JS
console.log("alguma coisa");
document.querySelector("div");
document.querySelectorAll("span");Na verdade, a gente já viu um ou outro
Objetos em JS
let numero = 1;
numero.toString() // "1"
let texto = "algum texto";
texto.slice(0, 2); // "al"
// não modifica a variável dentro de texto!!
// strings não são modificáveis em js
texto.split(" "); // ["algum", "texto"]Tarefa
Disponibilizamos um codigo com algumas coisas para alterar
É simples (consegue em algumas linhas), mas tem que ler os codigos com objetos
WebDev