Kit de Sobrevivência da

AV1 de Prog 2
Passo 1: Como usar
o p5.js no VSCode
Tenha o VSCode instalado na sua máquina!!!
Vá na aba de
extensões
Instale essas
extensões
Aperte Ctrl + Shift + P, pesquise por p5.js e crie o projeto

Logo depois escolha a uma pasta para ficar seus arquivos

Nós mexemos nesse

Para visualizar as alterações, clique com o botão direito no index.html e
clique nessa opção

Depois disso, uma página será aberta

no seu navegador, que será o canvas,
ele atualiza automaticamente toda
vez que um código é salvo
Agora é só botar no ladinho e ser feliz
Caso você queira ver o console, clique com o botão direito na página
do navegador e inspecione elementos, então vá para aba console
Olha ele aí
Passo 2: Saber usar
métodos de array
Mas que diabo é array??????

Array é uma lista de dados, que contém

algumas funções (métodos) que podem ser
usados pra modificar ele. Vale lembrar que o
array identifica os seus elementos por índices
(index) começando do 0

Então vai aí o top 9 métodos de array pra se

usar na prova (só os melhor)
Métodos de adição de elementos
no array (push e unshift)

O push() adiciona o elemento que for passado

entre os () no final de um array
Métodos de adição de elementos
no array (push e unshift)

Já o unshift() adiciona no começo do array, só

lembrar do “un” de unshift
Métodos de remoção de elementos
no array (pop e shift)

O pop() remove o último elemento do array,

logo ele não precisa de parâmetro
Métodos de remoção de elementos
no array (pop e shift)

Já o shift() segue a mesma lógica, removendo

o primeiro item do array
Método de localização de index
(indexOf)
O indexOf() serve para acharmos o index do
elemento que for passado como parâmetro,
caso ele não ache, ele retorna -1
Método de ordenação de itens
(sort)
O sort() por si só é bem complexo, mas ao ser
utilizado sem passar nenhum parâmetro, ele vai
ordenar os elementos em ordem crescente (números)
e alfabética (strings).
Método de transformação de itens
(map)
O map() necessita que uma função seja passada como
parâmetro para ele, e ele vai transformar o item com base valor que vem do array
na função e ao final das operações, retornar um novo
array transformado. CALMA QUE EU EXPLICO
O primeiro passo é criar uma função que
transforme o valor que vai ser passado, por
exemplo: eu quero que os elementos de um
array sejam multiplicados por 2, logo, vou
criar uma função que retorne o valor que eu
passar multiplicado por 2
Método de transformação de itens
(map)
Na prática, temos:

O map usado no array numbers retornou um array com os números

dobrados, mas continuou o mesmo no final
Método de transformação de itens
(map)
Ou seja, o map funciona com base na função que passamos, alguns
outros exemplos:
Método de transformação de itens
(map)
Outro exemplo:
Método de complexos de remoção
e adição (slice, splice)
O método slice(), pode receber 1 ou 2 parâmetros, ele serve para
criarmos outro array a partir de uma fatia de um array, ou seja,
definimos um index inicial e um final para o nosso recorte, caso eu
passe somente 1 parâmetro, ele vai ser usado como o index inicial e ir
até o fim do array. Exemplificando:
Método de complexos de remoção
e adição (slice, splice)
Usando dois parâmetros:

Aqui ele parte do index do 1, onde está o 2, vai até o index 2, porque
ele não inclui o último index passado no segundo parâmetro, ou seja:
em um slice(1, 5), ele vai de 1 a 4, no slice(2, 7), ele vai de 2 a 6 e etc.
Método de complexos de remoção
e adição (slice, splice)
O método splice() serve para removermos e adicionarmos itens em um
determinado ponto do array, podendo receber infinitos parâmetros, ou
seja: como 1º parâmetro passamos o índice onde queremos iniciar a
modificação, como 2º passamos quantos elementos queremos tirar a
partir dali e do 3º em diante passamos os elementos que queremos
adicionar.
Método de complexos de remoção
e adição (slice, splice)
Usando splice para deleção:

Veja que 4 elementos foram removidos a partir do index 1.

Método de complexos de remoção
e adição (slice, splice)
Usando splice para adição:

Veja que a cidade foi adicionado na posição 1, passada no primeiro

parâmetro
Método de complexos de remoção
e adição (slice, splice)
Usando splice para ambos:

Veja que a cidade da posição 0 foi pro beleleu, e uma outra cidade foi
passada em seu lugar
Atributo de tamanho do array
(length)
Os arrays tem uma propriedade chamada length, que mostra o
tamanho do array.
Outras informações sobre arrays
Você pode acessar itens específicos dentro do array assim:

Você também pode ter arrays dentro de um array:

 Passo 3: Saber
termos de nerdola
Nosso querido professor tem um linguajar rebuscado, então vai aí um
dicionário para fluentes em português

● Dot Notation: aquele ponto que você usa pra acessar as

propriedades e métodos (array.map(), array.length)
● Hoisting: hoisting ou içamento é a forma que o javascript usa pra
organizar o código de uma forma que variáveis do tipo var podem
ser declaradas depois de serem atribuídas a um valor:

O javascript reordena o código pra funcionar

direitinho, mas só funciona em var
Passo 4: Saber um
pouco sobre POO
A essa altura do campeonato só resta chorar

Mas em todo caso, sejam apresentados aos

objetos:

Os objetos são representados pelas chaves {}, e dentro deles podem

haver propriedades (que são equivalentes as variáveis) e os métodos
(funções).
Vocês já aprenderam sobre a Dot Notation, ela serve para acessarmos
essas informações que estão dentro do objetos, vejamos:

Ao escrevermos o dog.name,
conseguimos obter o valor que está na
propriedade name, dentro do objeto dog,
o mesmo vale para as outras
propriedades.
Vocês já aprenderam sobre a Dot Notation, ela serve para acessarmos
essas informações que estão dentro do objetos, vejamos:

Também podemos acessar o método

dentro do objeto dog, como se fosse uma
função normal. Também é possível notar
que dentro dela vemos a palavra “this”,
ela serve pra dizer para o javascript que a
variável que está sendo chamada está
dentro do objeto, evitando de pegarmos
um outro name perdido por aí.
Algumas peculiaridades é importante notar, como o jeito de
atribuirmos valores as propriedades e métodos, que é usando os dois
pontos (:) e não o (=) como as variáveis comuns:

Também há um jeitinho de atribuir

uma função ao objeto, que é:
Para substituirmos o valor de alguma propriedade, podemos fazer o
seguinte:

Nesse caso, imprimos o nome padrão

com o método sayName e depois
alteramos o nome e chamamos o
método novamente, obtendo uma nova
resposta. Essa tática serve para todas as
outras propriedades.
Como visto, é muito fácil criarmos objetos na mão, com as chaves,
mas também podemos criá-los através de classes, que são como
receitas:

Aqui eu criei uma classe chamada Product, como vemos, ela não tem
nem nome, nem preço, pois funciona como um molde. Então eu vou, a
partir de uma variável, instanciá-la, ou seja, vou fazer uma cópia desse
molde pra minha variável, mudar seus valores e ter meu novo produto.
Isso é vantajoso porque posso criar vários produtos a partir deste
mesmo molde:

Na prática, é como se
estivéssemos fazendo isso:
Bom, mas é muito chato a gente ter que ficar passando os valores que
queremos adicionar um de cada vez. Por isso, usamos o método
constructor() da classe. CALMA!!!!

Esse método serve para que

possamos passar valores entre
os () na hora de instanciar a
classe, e com esse valores,
podemos alterar as
propriedades da classe lá
dentro. Como vemos, o this
reaparece pelo mesmo motivo já
explicado.
Ou seja, ele funciona como um capturador dos valores que queremos
dar aos nossos objetos. É como um caldeirão que jogamos
ingredientes e ele nos trás uma coisa pronta com o que jogamos.

Note a redução da escrita do código, vale lembrar que você que tem
que definir o que será recebido no constructor, assim como o que ele
irá fazer com esses valores
No geral, é isso, é uma base bacana
pra fazer a dificílima prova de
amanhã, caso estejam inseguros,
estudem sobre os pilares da POO:
Abstração, Polimorfismo,
Encapsulamento e Herança.