Turma 8 | Front-end | 2019 | Semana 13 | Javascript IV
Nessa semana revisaremos o conteúdo de javascript pré react.
Nessa aula vimos:
Nessa aula vimos:
Nessa aula vimos:
É um dos modelos existentes para organizar branches. Tendo como principio:
- Branch master -> Onde temos o código de produção, com a versão mais estável
- Branch develop -> Código em teste, sendo a etapa pré produção, só mandando para a master quando estiver estável.
- Branch feature/funcionalidade -> Criadas a partir da develop, são branches criadas com o objetivo de entregar 'tarefas', como por exemplo uma branch em que você mexe só no menu.
- Branch hotfix -> Branches para correção de bugs críticos
- Branch release -> branch para lançamento de código na master, essas duas costumam gerar tags.
O primeiro número da esquerda para a direita são mudanças grandes que podem pedir que sistemas dependentes se atualizem, sendo a major version, o segundo é a minor, que são modificações que ainda suportam o código antigo e o terceiro é a minor que são correção de bugs
Em aula executamos a criação da develop e fizemos a branch da aula como se fosse uma feature branch, além de solicitar um Pull Request(PR)
git clone {repo-novo}
Vocês criaram um repositorio no github com a opção de README.md e clonaram. Depois adicionaram um remote desse reposito da reprograma para pegar os arquivos de exercícios:
git remote add upstream https://github.com/reprograma/T8-javascript-IV.git
git fetch --all
Para vermos se o remote está correto fazemos:
git remote -v
Caso queira mudar o repositorio de algum dos remotes é só fazer
git remote set-url ${nome dado ao remote} ${url de clone}
No nosso caso os valores aceitos para ${nome dado ao remote} são origin e upstream
Para criar a develop local e depois mandar para o repositorio online fazemos:
git checkout -b develop origin/master
git push origin develop
git branch -a //para listar
Para criar a feature branch local e depois mandar para o repositorio online fazemos:
git checkout -b aula1 origin/develop
git commit -m "[Aula1] Revisão Array e Object" --allow-empty
git push origin aula1
Para pegar arquivos que estão no repositorio da reprograma:
git merge upstream/aula1 --allow-unrelated-histories
E resolver os conflitos. Durante as aulas fomos atualizando nosso remoto com
git add .
git commit -m "${informação sobre o andamento da aula}"
git push origin aula1
E ao final fizemos o processo de Pull Request pelo github
- Utilizamos como base dois repositorios da Reprograma para essa revisão:
- Reprograma T7 - Javascript III por Bruna Vieira
- Reprograma T7 - Javascript IV por Laís Lima
Principais Métodos
- concat faz cópia simples do Array e adiciona os argumentos
- join cria um string do Array. Adiciona o argumento como cola entre cada membro do Array.
- shift remove e retorna o primeiro elemento
- pop remove e retorna o ultimo elemento
- unshift anexa os argumentos na frente do Array
- push anexa os argumentos no final do Array
- reverse inverte o Array sem copiá-lo
- slice faz cópia simples da porção do Array delimitada por argumentos do índice
- splice remove elementos especificados do Array, e os substitui com argumentos adicionais opcionais
- sort classifica o Array sem copiá-lo, opcionalmente usando um argumento comparador
- toString chama join sem passar um argumento
- indexOf retorna o primeiro elemento igual ao valor especificado, ou -1 *se nenhum for encontrado
- lastIndexOf retorna o último elemento igual ao valor especificado, ou -1 se nenhum for encontrado
- forEach aplica a função fornecida para todos elementos do Array
- map cria um novo Array contendo os resultados da aplicação da função a todos elementos do Array
- filter cria um novo Array contendo todos os elementos para os quais a função fornecida retorna verdadeiro
- reduce aplica uma função simultaneamente para dois valores do Array (da esquerda para a direita) de forma a reduzi-los a um valor único
- some Checa se pelo menos um dos elementos do array obedece a condição passada pela função
- every Checa se todos os elementos do array obedecem a condição passada pela função
try{
//Aqui vai a tentativa
}catch(e){
//Aqui vai o tratamento de quando dá erro.
}
Podemos estilizar o erro e lançar exceções utilizando throw
try{
if(deuCerto){
console.log("EBA")
}else{
throw "Deu ruim :( a requisição falhou"
}
}catch(e){
console.log(`Tivemos um erro: ${e}`)
}
Veja um exemplo de como aplicar no Exercicio2
Nessa aula tivemos:
Podemos obter objetos das seguintes formas:
const object = new Object()
Podendo declarar também como
object.property = "algum valor"
Ou também por notação literal:
const object2 = {
property: 1,
property2: 'valor'
}
Principais Métodos Object.
- keys retorna um array de propriedades enumeraveis de um determinado objeto.
- values retorna um array com os valores das propriedades de um dado objeto
- entries retorna uma array dos próprios pares [key, value] enumeráveis de um dado objeto
- defineProperty define uma nova propriedade diretamente em um objeto, ou modifica uma propriedade já existente em um objeto, e retorna o objeto
- preventExtensions impede que novas propriedades sejam adicionadas a um objeto (isto é, impede futuras extensões ao objeto).
- seal sela um Objeto, evitando que novas propriedades sejam adicionadas à ele e marcando todas as propriedades existentes como não configuráveis. Valores das propriedades atuais ainda podem ser alterados desde que essas propriedades sejam graváveis (writable).
- freeze congela um objeto: isto é, impede que novas propriedades sejam adicionadas a ele; impede que as propriedades existentes sejam removidas; e impede que propriedades existentes, ou sua inumerabilidade, configurabilidade, ou capacidade de escrita sejam alteradas. Em essência o objeto é efetivamente imutável. O método retorna o objeto congelado.
- Utilizamos como base dois repositorios da Reprograma para essa revisão:
- Reprograma T7 - Javascript III por Bruna Vieira
- Reprograma T7 - Javascript IV por Laís Lima
- Também utilizamos documentação mozilla
Javascript é uma linguagem multiparadigma, podendo ser orientada a objeto. Nessa semana passamos pelos principais conceitos:
- Abstração: Formar com que um objeto reflita um modelo da realidade
- Encapsulamento: Uma maneira de agrupar os dados e os métodos que usam os dados.
- Herança Uma classe pode herdar características de outra classe.
- Polimorfismo Diferentes classes podem definir o mesmo método ou propriedade.
- Classe Define as características do objeto. Uma classe é uma definição modelo das propriedades e métodos de um objeto.
- Objeto Um exemplar de uma classe.
- Atributo Uma característica do objeto, como cor, modelo, fabricante se estivemos representando um veículo, por exemplo.
- Método Uma ação do objeto, como ligar, desligar, frear se estivemos representando um veículo, por exemplo. É uma subrotina ou função associada a uma classe.
function Crianca(nome, idade, altura){
this.nome = nome
this.idade = idade
this.altura = altura
this.podeBrincar = () => {
return (altura > 1)
}
}
class Crianca{
constructor(nome, idade, altura){
this.nome = nome
this.idade = idade
this.altura = altura
}
podeBrincar() {
return (this.altura > 1)
}
}
- Exercicio1
- Exercicio2
- Exercicio3
- Exercicio3-componente-geral
Nesse último exercício vimos como utilizar o componente de forma geral e apenas renderizá-lo chamando pela main, porque aí conseguimos decidir em qual div/tag queremos colocar.
slides adicionais da T7-Javascript-IV
Materiais utilizados nesse README.md:
As frases em notação assim são retiradas dos materiais acima, recomendo muito que leiam os materiais indicados.
- Para entendermos o conceito precisamos saber sobre Assíncrono e Síncrono:
- Síncrono) Eu vou a uma pizzaria, peço uma pizza para viagem no balcão e fico plantado lá, só esperando me entregarem o pedido para que eu possa ir embora. -> parou completamente até que o pizzaiolo completasse seu trabalho
- Assíncrono) Eu vou a uma pizzaria, peço uma pizza para viagem no balcão e, enquanto ela não fica pronta, dou uma passada na livraria ao lado para folhear alguns livros -> aproveitou o tempo com outras coisas
- Documentação Mozilla Quando queremos fazer alguma ação após o que solicitamos foi terminado podemos utilizar callbacks, um exemplo de utilização comum que vimos em callback é:
button.addEventListener("load", function(){
console.log("Eu sou uma função de callback, prazer!");
});
Chamamos a função que mostrará Eu sou uma função callback
Callbacks são uteis em vários cenários, porém quando trabalhamos com fluxos muito encadeados, ela acaba ficando muito verbosa e confusa.
Por exemplo:
Eu vou a uma pizzaria, peço uma pizza para viagem no balcão e, enquanto ela é preparada, dou uma passada na livraria ao lado. Assim que meu pedido estiver pronto, quero que a balconista me ligue para eu poder retirá-la. Vou levar a pizza para a casa de um amigo, onde o restante da nossa “tchurma” já está esperando para comer. Depois de lá, iremos correndo para um show, pois não queremos ficar muito longe do palco. Na casa do meu amigo, resolvo não comer da pizza, pois já jantei. Fico mexendo no Youtube enquanto eles lancham. Espero eles terminarem, para finalmente irmos para o show. Chegando lá, preciso ligar para outro amigo que também irá, para combinarmos o local onde nos encontraremos.
O fluxo disso em código ficaria assim:
orderPizza(() => {
console.log(`Minha pizza está pronta.`);
waitUntilTheyFinishEating(() => {
console.log('Acabaram de comer. Vamos para o show.');
goToTheShow(() => {
console.log('Chegamos');
makeCallToMyFriend(() => {
console.log('Finalmente acabou. Que comece o show!');
});
});
});
});
Para que a gente não tivesse um código tão aninhado podemos utilizar promises
- Documentação Mozilla As "promessas" representam fluxos assíncronos de forma sequencial além de favorecer o tratamento de excessões
O exemplo de cima ficaria mais ou menos assim:
orderPizza()
.then((pizza) => {
console.log(`Minha pizza de ${pizza.flavor} está pronta.`);
return waitUntilTheyFinishEating();
})
.then(() => {
console.log('Acabaram de comer. Vamos para o show.');
return goToTheShow();
})
.then(() => {
console.log('Chegamos');
return makeCallToMyFriend();
})
.then(() => {
console.log('Finalmente acabou. Que comece o show!');
}).catch(e => console.log('Algo deu ruim :('));
Ao final de cada .then()
Um valor qualquer, como um objeto, array, string, etc: nesse caso, o próximo then da sequência é executado imediatamente, recebendo o valor passado como parâmetro.Uma outra promessa: foi isso que fizemos no nosso exemplo. Apesar de ainda não termos mostrado como as funções acima criam uma promessa, é óbvio presumirmos que todas essas operações são assíncronas ( orderPizza, waitUntilTheyFinishEating, goToTheShow e makeCallToMyFriend). Para que o próximo then na sequência espere até que uma dessas operações seja concluída, precisamos retornar uma promessa. Uma vez que a promessa for satisfeita, o fluxo segue.
Utilizamos o .catch() para tratar exceções
Como criar promises:
const myFirstPromise = new Promise((resolve, reject) => {
// do something asynchronous which eventually calls either:
resolve(someValue); // fulfilled
// or
reject("failure reason"); // rejected
});
OU
pizzaFlow()
.then(() => console.log('O show acabou!'));
.catch(erro => console.log('Ops!' + erro));
Sobre o resolve: A função resolve deve ser chamada para sinalizar que a promessa foi cumprida, ou “resolvida”. Caso a operação assíncrona que estava sendo executada possua algum retorno (por exemplo: uma lista de usuários), você o passa como argumento para a função resolve. Quando a promessa é resolvida, o primeiro then da cadeia é chamado.
Sobre reject: Em caso de alguma falha, como por exemplo a indisponibilidade de um endpoint, a função reject deve ser chamada. Ao executá-la, você estará sinalizando que a promessa falhou e você vai dar aquele “calote gostoso” em quem dependia do seu retorno.
- Documentação Mozilla
As async functions fazem código assíncrono parecer síncrono.O exemplo que utilizamos antes ficaria assim:
async function pizzaFlow() {
let pizza = await orderPizza();
console.log(`Minha pizza de ${pizza.flavor} está pronta.`);
await waitUntilTheyFinishEating();
console.log('Acabaram de comer. Vamos para o show.');
await goToTheShow();
console.log('Chegamos');
await makeCallToMyFriend();
console.log('Finalmente acabou. Que comece o show!');
}
O que a função orderPizza e as outras três invocadas com await retornam? Promises, baby. Async functions são altamente integráveis com promessas. Tanto, que até retornam promessas:
pizzaFlow().then(() => console.log('O show acabou!'));
//=> Minha pizza de bacon está pronta.
//=> Acabaram de comer. Vamos para o show.
//=> Chegamos
//=> Finalmente acabou. Que comece o show!
//=> O show acabou!
A estrutura de uma função async é
async function nomedaFunc(){
await algumaFuncDeclaradaAntes()
// ou também em atribuição
let resultadoEsperando = await retornaResultadoFunc()
}
Ou em arrow:
let nomeDaFunc = async() => {
await algumaFuncDeclaradaAntes()
// ou também em atribuição
let resultadoEsperando = await retornaResultadoFunc()
}
Ao encontrar uma declaração await, a instrução seguinte não será executada até que a promessa em andamento seja resolvida. Isso é possível graças à magia dos generators, outro importante recurso do ES2015.
Materiais utilizados nesse README.md:
-
Beginners Guide To Fetching Data With (AJAX, Fetch API & Async/Await)
-
Métodos de API e HTTP Status Code:
| Método | O que faz | Status de retorno |
|---|---|---|
| GET | Traz informações | 200 |
| POST | Cria um novo item | 201 |
| PUT | Atualiza um item | 200 |
| DELETE | Remove um item | 200 |
Podemos encontrar mais sobre http status code aqui
Materiais utilizados nesse README.md:
É uma performance declarativa de requisição HTTP que cria uma promise que resolve a resposta da request para mostrar o que ocorreu com sucesso ou não. Assim como fazemos com as promises, acessamos esse valor a partir do .then()
fetch('https://example.com/todos')
.then(response => response.json())
.then(data => console.log(JSON.stringify(data)))
Utilizando POST
fetch('https://example.com/users', {
headers: { "Content-Type": "application/json; charset=utf-8" },
method: 'POST',
body: JSON.stringify({
username: 'Elon Musk',
email: 'elonmusk@gmail.com',
})
})
Utilizando DELETE
fetch('https://example.com/users/1', {
method: 'DELETE'
})
- exPromiseJS3
- ArcoIro
- Tarot
- ViaCep
- Post =======