Front end 2 Flashcards
CSS
Grid no bootstrap: há a divisão da tela em _______ colunas
12
HTML
Emmet: div3>div3
Qual será o output?
3 divs com 3 divs cada
Javascript
Declarar uma variável no JavaScript sem const ou let tornará ela ____ no escopo
Global
Entre const e let qual delas pode ser sobrescrita?
Let
Javascript
Javascript
let idade (aqui eu ????)
idade = 2 (aqui eu ????)
declarei
atribui
Javascript
Array
const fruits = [“Banana”, “Orange”, “Apple”, “Mango”, “Kiwi”];
fruits.splice(2, 2);
Qual será o output?
Banana, Orange, Kiwi
Javascript
Para que serve o package.json?
Arquivo que contém a descrição e metadados funcionais sobre o projeto (nome, versão etc)
Javascript
O que é NPM? Para que serve?
Node Package Manager, o NPM é um poderoso gerenciador de pacotes utilizado para administrar as bibliotecas e frameworks utilizados em uma aplicação
Javascript
Quando criamos um object no Javascript, o mesmo reserva uma memória (____) e não reserva os dados do objeto mas sim o ________ da memória referente ao objeto.
Diferente quando criamos uma variável que comporta um tipo primitivo. Neste caso o JavaScript cria uma _____
heap
endereço
cópia
Javascript
Qual a diferença de null e undefined
null = ausência intencional
undefined = não declarado/não existe
Javascript
Assessores javascript
O ___ permite buscar informação de um objeto, mas não possibilita editar/atribuir valores
get
Javascript
No seguinte código, quais membros do objeto pessoa são propriedades e quais são métodos?
~~~
var pessoa = {
nome: [‘Bob’, ‘Smith’],
idade: 32,
sexo: ‘masculino’,
interesses: [‘música’, ‘esquiar’],
bio: function() {
(…)
}
nome, idade, sexo e interesses são propriedades (dados)
bio e saudacao são métodos (funções)
Javascript
Temos os dois objetos a seguir:
var produto1 = {
nome: "Blusa",
preco: 120, calculaDesconto: function(){
//10% de desconto
return this.preco * 0.1;
}
};
var produto2 = {
nome: "Calça",
preco: 300,
calculaDesconto: function(){
//10% de desconto
return this.preco * 0.1;
}
};
produto1.calculaDesconto(); Qual será o output?
produto2.calculaDesconto(); Qual será o output?
12 e 30
1) Como poderíamos resumir o código dos objetos a seguir usando construtores?
2) Como criaríamos efetivamente estes produtos?
3) Como seria a chamada do método calculaDesconto()?
Temos os dois objetos a seguir:
var produto1 = {
nome: "Blusa";
preco: 120;
};
var produto2 = {
nome: "Calça";
preco: 300;
Nova maneira (utilizando class):
1)
class Produto {
constructor(nomeEscolhido, precoEscolhido) {
this.nome = nomeEscolhido;
this.preco = precoEscolhido;
}
2)
var produto1 = new Produto(‘Blusa’, 120);
var produto2 = new Produto(‘Calça’, 300);
Qual a função do super no código abaixo?
class class Pessoa {
constructor(nome, idade, sexo) {
this.nome = nome;
this.idade = idade;
this.sexo = sexo;
}
}
class Matheus extends Pessoa {
constructor(nomeDiferente, algumaIdade, meuSobrenome) {
super(nomeDiferente, algumaIdade);
this.sobrenome = meuSobrenome;
}
}
Ele serve para a classe Matheus (filha) aproveitar propriedades da classe mãe (Pessoa) e evitar repetição de código.
Para que serve a palavra extends no código abaixo?
class Square extends Polygon {
constructor(length) {
}
}
Ela possibilita extender as propriedades da classe mãe (Square) em um objeto filho.
Qual o problema com o código a seguir?
class Cliente {
nome;
cpf;
}
new Cliente("Ricardo", 11122233309);
Sem declarar uma variável para a nova classe “Cliente” eu não consigo acessar posteriormente
O correto seria (const ou let):
const cliente1 = new Cliente("Ricardo", 11122233309);
Quando criamos um objeto estamos (?)ando uma classe.
A classe funciona como um (?), no qual o objeto é criado (bolo criado a partir de uma forma).
instanciando
molde
Qual será o output da expressão a seguir?
{let a = 2;
console.log(a -= 3);
}
{let a = 2;
console.log(a += 3);
}
Console 1: -1
Console 2: 5
-= é sinal de atribuição, serve para diminuir e += soma
Atenção: sem as chaves o VS Code dá erro, pois precisamos encapular a variável em bloco
Atributo privado:
class ContaCorrente {
agencia;
saldo;
}
contaCorrenteRicardo.#saldo = 0;
Qual o output?
SyntaxError: Private field ‘#saldo’ must be declared in an enclosing class
Quando colocamos cerquilha, o JS entende que é privado
Atributos privados (usando cerquilha)
Qual será o output do console.log?
class ContaCorrente {
agencia;
#saldo = 0;
}
const contaCorrenteRicardo = new ContaCorrente();
contaCorrenteRicardo.agencia = 1001;
console.log(contaCorrenteRicardo);
Output:
ContaCorrente { agencia: 1001 }
O atributo saldo fica privado quando colocamos cerquilha, somente aparece agencia. Essa síntaxe não é adotada ainda na linguagem, então é bom evitar.
Atributos privados usando underline _
class ContaCorrente {
agencia;
_saldo = 0; // Precisamos estipular um valor
sacar (valor) {
if (this._saldo >= valor) {
this._saldo -= valor;
}
}
depositar(valor) {
if (valor > 0) {
this._saldo += valor;
}
}
}
A convenção é que atributos com underline não devem ser acessados fora da (?), apesar de conseguirmos modificá-los (nesse caso só modificamos usando os métodos sacar e depositar, que estão presentes na (?)
Classe (2)
Qual o problema com o undefined do output?
Há uma maneira de corrigir?
class Cliente{
nome;
cpf;
}
class ContaCorrente {
agencia;
_saldo = 0;
sacar (valor) {
if (this._saldo >= valor) {
this._saldo -= valor;
}
}
depositar(valor) {
if (valor > 0) {
this._saldo += valor;
}
} }
const contaCorrenteRicardo = new ContaCorrente;
const valorSacado = contaCorrenteRicardo.sacar(50);
console.log(valorSacado);
Output: undefined
O problema é que ao usarmos o símbolo de atribuição = no “const valorSacado = contaCorrenteRicardo.sacar(50);”
Estamos informando que o valorSacado será igual ao valor do método/função “sacar” que, no presente caso, não “devolve” qualquer valor ao ser chamado.
Utilizamos o return:
sacar (valor) {
if (this._saldo >= valor) {
this._saldo -= valor;
return valor;
}
}
Técnica de (?): o “this._saldo += valor” será executado?
class Cliente{
nome;
cpf;
}
class ContaCorrente {
agencia;
_saldo = 0;
sacar (valor) {
if (this._saldo >= valor) {
this._saldo -= valor;
return valor;
}
}
depositar(valor) {
if (valor <= 0) {
return;
}
this._saldo += valor;
}
}
const contaCorrenteRicardo = new ContaCorrente;
const deposito = contaCorrenteRicardo.depositar(-50);
console.log(contaCorrenteRicardo._saldo);
Early return
Facilita a legibilidade do código, já trazendo o que eu não quero (depósito zero ou negativo)
E não, o return interrompe a execução do this._saldo += saldo
Técnica de (?): você separa as classes do projeto em arquivos separados, para facilitar manutenção e leitura.
Modularização
Erro com módulo, qual a solução?
Arquivo index.js:
import {Cliente} from “./Cliente.js”;
(…)
Arquivo Cliente.js:
export class Cliente{
nome;
cpf;
}
(…)
Output:
Warning: To load an ES module, set “type”: “module” in the package.json or use the .mjs extension.
import {Cliente} from “./Cliente.js”;
^^^^^^
SyntaxError: Cannot use import statement outside a module
Criar um arquivo json para que faça o interpretador entender que o arquivo index.js também é um módulo
Como criamos um arquivo json pelo VSCode para o nosso projeto bytebank?
Após criarmos, como resolvemos o problema a seguir?
Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
import {Cliente} from "./Cliente.js";
^^^^^^
Abra o terminal (ctrl+j), digite “npm init”, basta responder as perguntas que o terminal indica.
Assim poderemos criar um “pacote”:
Exemplo do bytebank:
package name: (projeto-bytebank) bytebank
version: (1.0.0)
description: Projeto do bitebank
entry point: (index.js)
test command:
git repository: (https://github.com/AdrianoGomesFilho/projeto-bytebank.git)
keywords:
author: Adriano Gomes
license: (ISC)
Após, acessamos o arquivo package.json e alteramos no final:
(...) "author": "Adriano Gomes", "license": "ISC", "type": "module" <<<<<<< }
Como desenvolvedores é normal queremos reaproveitar código de outras pessoas e bibliotecas que estão disponíveis para nosso time.
Dessa forma, agilizamos o desenvolvimento de nossas aplicações. Mas onde podemos encontrar essas bibliotecas e código feitos pela comunidade?
Achamos essas bibliotecas dentro de (?) – pense neles como um lugar centralizado onde toda a comunidade pode subir e compartilhar códigos para que outros desenvolvedores usem.
E é justamente para organizar essa série de pacotes e bibliotecas que o package.json foi criado. Com ele é fácil de saber qual a versão do pacote, o nome dele, quem fez aquele código etc.
No caso do Javascript o (?) mais utilizado é o NPM – Node package manager.
Gerenciador de pacotes (2)
Atribuição dinâmica de atributos:
export class ContaCorrente {
agencia;
cliente;
_saldo = 0; // Precisamos estipular um valor
(...)
transferir(valor, conta){
conta.cidade = "São Paulo"
const valorSacado = this.sacar(valor);
conta.depositar(valorSacado);
}
}
Identifique o que deveremos evitar!
O problema está em adicionar atributos em objetos dinamicamente no trecho a seguir:
transferir(valor, conta){
conta.cidade = "São Paulo"
const valorSacado = this.sacar(valor);
conta.depositar(valorSacado);
}
O que eu estou dizendo é que, lá no arquivo index, ao chamar o método transferir:
contaCorrenteRicardo.transferir (200, conta2);
Eu estarei atribuindo a “conta” que no caso é a conta2 um atributo de nome “cidade” com string “São Paulo”
Se eu rodar um console.log(conta2) vou ter o output:
ContaCorrente {
agencia: 102,
cliente: Cliente { nome: 'Alice', cpf: 88822233309 },
_saldo: 200,
cidade: 'São Paulo'
}
Proteção de atributos:
Para proteger o atributo “cliente” eu posso usar o underline. Todavia, teremos que criar vários métodos para poder manipular o atributo (em algumas ocasiões permitidas). Veja o saldo, ele só permite ser alterado pelos métodos (sacar, depositar e transferir). Mas perceba que o código fica bem grande.
Qual síntaxe posso permitir a alteração (controlada) do atributo cliente igual ao saldo sem criar vários métodos no código? (de forma genérica, quais as ferramentas que usamos?)
export class ContaCorrente {
agencia;
_cliente;
_saldo = 0;
sacar(valor) {
if (this._saldo >= valor) {
this._saldo -= valor;
return valor;
}
}
depositar(valor) {
if (valor <= 0) {
return; //para a execução do resto do método
}
this._saldo += valor;
}
transferir(valor, conta){
const valorSacado = this.sacar(valor);
conta.depositar(valorSacado);
}
}
Usando assessores: permitem o acesso ao atributo de forma controlada
Assessores
1 - Identifique os erros
2 - Explique como foi configurado o assessor “set”, o que ele permite atribuir (camada de proteção) e como?
3 - No arquivo index, qual será o output?
Arquivo ContaCorrente.js
import { Cliente } from "./Cliente";
export class ContaCorrente {
agencia;
_cliente;
set cliente(novoValor) {
if (novoValor instanceof Cliente)
this._cliente = novoValor;
}
_saldo = 0;
Arquivo index.js
conta2.cliente = 0; conta2.agencia = 102; console.log(conta2);
1 - O erro no “./Cliente.js” faltando .js (a extensão não puxa automaticamente
2 - O set com o if permite que: se o novoValor fornecido for alguma instância do objeto Cliente, ou seja, está presente no objeto, permite alterar o _cliente, atributo que está sendo protegido na classe
3 - ContaCorrente { agencia: 102, _cliente: undefined, _saldo: 0 }
Será undefined pois o set não permitiu atribuir
Assessores:
Arquivo ContaCorrente.js
import { Cliente } from "./Cliente.js";
export class ContaCorrente {
agencia;
_cliente;
set cliente(novoValor) {
if (novoValor instanceof Cliente)
this._cliente = novoValor;
}
_saldo = 0;
Arquivo index.js
conta2.cliente = 0; conta2.agencia = 102; console.log(conta2.cliente);
Qual será o output? E por quê?
undefined
Porque ao tentarmos acessar o atributo privado _cliente o JS não permite
Precisamos adicionar o assessor get:
import { Cliente } from "./Cliente.js";
export class ContaCorrente {
agencia;
_cliente;
set cliente(novoValor) {
if (novoValor instanceof Cliente) {
this._cliente = novoValor;
}
}
get cliente() {
return this._cliente;
}
Reiniciando a execução com o get, terá o output mostrando só o atributo _cliente:
Cliente { nome: 'Ricardo', cpf: 11122233309 }
Eu posso atribuir o valor de R$30.000,00 no atributo saldo a seguir?
E qual seria o output no caso?
export class ContaCorrente {
agencia;
_cliente;
set cliente(novoValor) {
if (novoValor instanceof Cliente) {
this._cliente = novoValor;
}
}
get cliente() {
return this._cliente;
}
_saldo = 0;
get saldo() {
return this._saldo;
}
INDEX.JS:conta2.saldo = 30000;
Não consegue
TypeError: Cannot set property saldo of #<ContaCorrente> which has only a getter</ContaCorrente>
Como será o código da classe Conta utilizando construtores?
export class Conta {
_saldo;
_cliente;
_agencia;
}
export class Conta {
constructor(saldoInicial, cliente, agencia) {
this._saldo = saldoInicial;
this._cliente = cliente;
this._agencia = agencia;
}Qual será o output? (1) e (2)
Posso usar a 2ª opção para alterar o atributo CPF?
const cliente2 = new Cliente("Alice", 88822233309);
class Cliente{
nome;
_cpf;
get cpf() {
this._cpf;
}
constructor(nome, cpf) {
this.nome = nome;
this._cpf = cpf;
}
}
(1)cliente2.cpf = 132123131233;
(2)cliente2._cpf = 132123131233;
1 - TypeError: Cannot set property cpf of #<Cliente> which has only a getter
2 - Sim, poder pode, mas não deve, isso porque deve respeitar a determinação do programador que ao colocar underline decidiu que aquele atributo (_cpf) não deverá ser acessado</Cliente>
Descubra o problema do undefined do console.log:
class Cliente{
constructor(nome, cpf) {
this.nome = nome;
this._cpf = cpf;
}
get cpf() {
this._cpf;
}
}
const cliente2 = new Cliente("Alice", 88822233309);
console.log(cliente2.cpf);
output: undefined
O problema existe pois não há retorno algum no getter do cpf:
get cpf() {
this._cpf;
return this._cpf;
}
Como faço para que o atributo “numeroDeContas” some +1 a cada conta criada?
Quando gero console.log sempre dá numeroDeContas = 1, por que?
class ContaCorrente {
numeroDeContas = 0;
constructor(agencia, cliente) {
this.agencia = agencia;
this.cliente = cliente;
this.numeroDeContas += 1;
}
const cliente1 = new Cliente("Ricardo", 11122233309);
const cliente2 = new Cliente("Alice", 88822233309);
const contaCorrenteRicardo = new ContaCorrente(1001, cliente1);
const conta2 = new ContaCorrente(102, cliente2);
console.log(conta2.numeroDeContas);
Output: 1
Usando o static no numeroDeContas:
class ContaCorrente {
static numeroDeContas = 0;
constructor(agencia, cliente) {
this.agencia = agencia;
this.cliente = cliente;
ContaCorrente.numeroDeContas += 1;
}
Se atente que não usamos o “this”, isso porque o this se refere a conta criada (que no caso seria a conta do Ricardo ou da Alice). Para usarmos o static corretamente devemos fazer referência a própria classe ContaCorrente (de todas as contas criadas, como um todo).
E para chamar usamos:
console.log(ContaCorrente.numeroDeContas);
1 - Para que serve o “extends” no início do código do arquivo CONTACORRENTE.JS?
2 - Para que serve o “super” dentro do constructor?
3 - E os parâmetros dentro do construtor, se referem ao que?
Arquivo CONTACORRENTE.JS:
~~~
import { Conta } from “./Conta.js”;
export class ContaCorrente extends Conta{
static numeroDeContas = 0;
constructor(agencia, cliente) {
super(0, cliente, agencia);
ContaCorrente.numeroDeContas += 1;
}
}
~~~
Arquivo CONTA.JS:
export class Conta {
constructor(saldoInicial, cliente, agencia) {
this._saldo = saldoInicial;
this._cliente = cliente;
this._agencia = agencia;
}
set cliente(novoValor) {
if (novoValor instanceof Cliente) {
this._cliente = novoValor;
}
}
get cliente() {
return this._cliente;
}
get saldo() {
return this._saldo;
}
sacar(valor) {
let taxa = 1;
const valorSacado = taxa * valor;
if (this._saldo >= valorSacado) {
this._saldo -= valorSacado;
return valorSacado;
}
}
depositar(valor) {
this._saldo += valor;
}
transferir(valor, conta){
if (this._tipo = "salario") {
return;
}
const valorSacado = this.sacar(valor);
conta.depositar(valorSacado);
}
}
Para aproveitar as disposições do arquivo CONTA.JS já criado.
Detalhe: o constructor do contacorrente aproveita o constructor da conta.js, que já possui cliente, agencia e saldo.
O super serve para poder aproveitar o construtor da classe pai (Conta.js)
Se referem aos atributos da Conta.js
Para que serve o “throw new Error” no nosso constructor da Conta.js?
export class Conta {
constructor(saldoInicial, cliente, agencia) {
if (this.constructor == Conta) {
throw new Error("Você não poderia instanciar um objeto do tipo Conta diretamente");
}
this._saldo = saldoInicial;
this._cliente = cliente;
this._agencia = agencia;
}
Ele serve para evitar que alguem instancie um objeto do tipo conta (gênero) pois eu quero que o usuário escolha uma espécie de conta (poupança, corrente, salário etc).
O Error é uma classe JavaScript e serve para parar a execução do código (igual a um erro comum)
Qual o nome da classe que não pode ser instanciada (exemplo, a Conta.js)?
Classe abstrata
Método (?): é quando o método está em branco e deve ser sobrescrito por uma classe (exemplo: ContaCorrente) que definirá a taxa específica.
Exemplo: “sacar(valor)”
export class Conta {
(....)
sacar(valor) {
//deixamos em branco
}
_sacar(valor, taxa) {
const valorSacado = taxa * valor;
if (this._saldo >= valorSacado) {
this._saldo -= valorSacado;
return valorSacado;
}
return 0;
}
}
Abstrato
O javascript não possui (?) tal como o Java ou C#. O (?) “trava” a confecção do código se encontrar erros. Já no JavaScript só haverá erro quando for executado.
Compilador
Compilador
Segue código:
export class SistemaAutenticacao {
static login(funcionario, senha) {
return funcionario.senha == senha;
}
}
export class Funcionario {
constructor(nome, salario, cpf){
this._nome = nome;
this._salario = salario;
this._cpf = cpf;
this._bonificacao = 1;
this._senha;
}
get senha() {
return this._senha;
}
cadastrarSenha(senha) {
this._senha = senha;
}
}
const diretor = new Diretor("Rodrigo", 10000, 12345678900);
diretor.cadastrarSenha("123456")
const gerente = new Gerente("Ricardo", 5000, 1237896013);
gerente.cadastrarSenha("123");
const diretorEstaLogado = SistemaAutenticacao.login(diretor, "123456");
const gerenteEstaLogado = SistemaAutenticacao.login(gerente, "123");
console.log(gerenteEstaLogado, diretorEstaLogado);
Output dos consoles?
true e true
Sistema de (?) e valor: as (?) guardam um endereço de uma informação.
export class Funcionario {
constructor(nome, salario, cpf){
this._nome = nome;
this._salario = salario;
this._cpf = cpf;
this._bonificacao = 1;
this._senha;
}
Os atributos _nome, _salario etc são (?) e seus respectivos valores são os dados “Ricardo”, “5000” etc
Chave
Poderemos tratar de forma igual objetos diferentes (cliente x funcionario). Isso porque não há método autenticar(senha) no cliente, só nos funcionários (diretor/gerente).
O código abaixo serve como camada de proteção para que não haja erros, explique:
export class SistemaAutenticacao {
static login(autenticavel, senha) {
if (SistemaAutenticacao.ehAutenticavel(autenticavel)){
return autenticavel.autenticar(senha);
}
return false;
}
static ehAutenticavel(autenticavel) {
return "autenticar" in autenticavel && autenticavel.autenticar instanceof Function;
}
}
const diretor = new Diretor("Rodrigo", 10000, 12345678900);
diretor.cadastrarSenha("123456")
const gerente = new Gerente("Ricardo", 5000, 1237896013);
gerente.cadastrarSenha("123");
const cliente = new Cliente("Lais", 78989799889, "456");
//cliente não possui método cadastrarSenha nem autenticar(senha)
const gerenteEstaLogado = SistemaAutenticacao.login(gerente, "123");
const diretorEstaLogado = SistemaAutenticacao.login(diretor, "123456");
const clienteEstaLogado = SistemaAutenticacao.login(cliente, "456");
console.log(gerenteEstaLogado, diretorEstaLogado, clienteEstaLogado);
Usamos essa fórmula para que não hava erro quando passemos o cliente no SistemaAutenticacao (isso porque não queremos que o cliente autentique, deixando ele sem esse método desde o início).
Ao darmos os valores, o sistema vai pro if do login, com autenticável e senha. Lá ele dispara o método ehAutenticavel(autenticavel). Esse método vai retornar (true ou false) se existir a chave “autenticar” dentro do cliente/funcionario. Perceba que não demos tal chave ao cliente de propósito, pois ele não deve ter.
Ambos funcionários possuem tal chave. Outra camada de proteção é o “&& autenticavel.autenticar instanceof Function” ela verifica se “autenticar” será função (o que queremos) e não um mero atributo atribuído dinamicamente.
Retornando true (por exemplo) vai cair no if, retornando true também. Se der false, vai para fora do if.
O output do console será, portanto:
true true false
(?) Typing is a term commonly related to dynamically typed programming languages and polymorphism (such as JavaScript). The idea behind this principle is that the code itself does not care about whether an object is a duck, but instead it does only care about whether it quacks.
Duck
Manipulando site pelo DOM
Usando o document.(?) você pode chegar em qualquer elemento. Diferente de “document.getElementsByClassName” ou por ID, ou por TAG, que só buscam termos específicos. O “document” significa que vai buscar no nosso (?)
document.querySelector
HTML
