BACKUP

Question 1

Para transformar string em number utilizados 3 expressões. Para inteiros usamos o _______ e para decimais usamos o _______. Se usarmos o ______, o JavaScript decide

Answer 1

parseint, parsefloat e number

Question 2

Para transformar number em string utilizados 2 expressões. O ______(number) e o number._____( )

Answer 2

String(123) e o 123.toString( )

Question 3

Usamos para indicar quantas letras tem o string:

Answer 3

string.length

Question 4

Usamos para transformar para caixa alta e para caixa baixa

Answer 4

string.toUpperCase() e string.toLowerCase()

Question 5

var n1
n1.toLocaleString(‘pt-BR’, {style: ‘currency’, currency: ‘BRL’}) usamos para transformar o número em…

Answer 5

Reais

Question 6

Operadores aritméticos: 5/2 (divisão real) resulta em

Answer 6

2,5

Question 7

Operadores aritméticos: 5%2 (resto da divisão inteira) resulta em

Answer 7

1

Question 8

Operadores aritméticos: 5**2 resulta em

Answer 8

25

Question 9

Operadores aritméticos: 5*2 resulta em

Answer 9

10

Question 10

Precedência de operadores: resultado de 5 + 3/2

Answer 10

6.5

Question 11

Ordene a precedência dos seguintes operadores:
* / %
+ -
**
( )

Answer 11

( )
* *
* / %
+ -

Question 12

Auto atribuição:
var n = 3
n = n + 4
n = (?)

Forma 2:

var n = 3
n += 3
n = (?)

Answer 12

n = 7
n = 6

Question 13

Operadores relacionais:
5 > 2 = (?)
7 < 4 = (?)

Answer 13

True
False

Question 14

Operadores relacionais:
8 >= 8 (?)
4 !=4 (?)

Answer 14

true
false

Question 15

Operadores de identidade:
5 = = 5 (?)
5 = = ‘5’ (?)
5 = = = 5 (?)
5 = = = ‘5’ (?)

Answer 15

true
true
true
false

Question 16

Operadores lógicos:
! = ________
&& = ________
|| = ________

Answer 16

negação (não)
conjunçao (e)
disjunção (qualquer um)

Question 17

Resolva:
A = 5
B = 8

A > B && B % 2 = = 0
5 > 8 && 8 % 2 = = 0
(true or false?)

Answer 17

true

Question 18

Qual ordem dos operadores? Ordene
Relacionais
Lógicos
Aritméticos

Answer 18

Aritméticos > lógicos > relacionais

Question 19

Nomeie a função:
____________ (expressão) {
case valor1:
[break;]
case valor2:
[break;]
case value3:
[break;]
default:
[break;]
}

Answer 19

Função switch

Question 20

Qual o output da função a seguir?
for (var i = 0; i < 9; i++) {
console.log(i);
}

Answer 20

O for possui a variável i no valor de 0, que é menor que 9, e vai incrementando com + 1 até chegar a 8, no máximo

Question 21

Array é uma espécie de variável, mas que é _______.

Answer 21

Composta

Question 22

Array:
let num = [5 ,8 ,4]
num [3] = 6
let num = [ ???? ]

Answer 22

let num = [5, 8, 4, 6]

Question 23

Array:
let num = [5 ,8 ,4]
num.push = [7]
let num = [???]

Answer 23

let num = [5 ,8 ,4, 7]

Question 24

Array:
let num = [5 ,8 ,4]
console.log(num.length)

output: ??

Answer 24

3

Question 25

Array:
let num = [5 ,8 ,4]
num.sort

output ??

Answer 25

let num = [4, 5, 8]

Question 26

Array:
let num = [5 ,8 ,4]

num.indexOf(1) qual será o output?
num.indexOf(7) qual será o output?

Answer 26

8 e -1 (quando não existe a chave no array)

Question 27

var meuCarro = new Carro();
meuCarro.fabricacao = “Ford”;
meuCarro.modelo = “Mustang”;
meuCarro.ano = 1969;

O “Carro” é um _______ e a “fabricacao”, “modelo” e “ano” são ________

Answer 27

Objeto
Propriedades

Question 28

Essa função a seguir permite identificar se é impar ou par (resultado igual a 0):

var num = 10;

if (num % 2 === 0) {
console.log(‘Par’);
} else {
console.log(‘Ímpar’);
}

num = (?) é impar ou par?

Answer 28

num = 0, par

Question 29

www.github.com/gustavoguanabara

Identifique o subdomínio, domínio, TLD (Top Level Domain) e caminho

Answer 29

www = subdomain
github = domain
com = TLD
gustavoguanabara = path

Question 30

h1 {
font-family: Arial;
}

a expressão “font-family” podemos entender como uma _____

Answer 30

declaração

Question 31

Entre JPG e PNG, qual seria mais compacta? E a com mais qualidade?

Answer 31

JPG = compacta
PNG = qualidade

Question 32

O que significa o SEO?

Answer 32

Search Engine Optmization

Question 33

Fontes externas de fontes, temos duas opções: otf e ttf, o que significam?

Answer 33

opentype e truetype

Question 34

Pseudoclasses:

h1:hover {
color: red;
}

As pseudoclasses servem para indicar um objeto pelo seu _____ (ativo, checado etc)

Answer 34

estado

Question 35

Com o seletor :: podemos selecionar _________:

p::first-line {
color: blue;
text-transform: uppercase;
}

Neste caso, a primeira linha do “p” será azul e terá fontes maiúsculas

Answer 35

pseudoelementos

Question 36

Lorem ipsun dolor <??>
Lorem ipsun dolor <??>

Qual tag usamos para quebrar linha?

Answer 36

<br></br>

Question 37

Imagens dinâmicas utilizamos o seguinte código:

<??????>

<source></source>

<source></source>

<img></img>
</??????>

Answer 37

picture e picture

Question 38

Para colocar espaço antes do emoji:
‘????? 1F517 ‘;

Answer 38

\00A0\

Question 39

Formulários (métodos de envio):
GET e POST
Qual deles os dados aparecem na URL?
Qual deles possui limite de dados?

Answer 39

GET: aparece na URL
GET: possui limite de dados

Question 40

Box-Sizing do CSS, qual o melhor método?
Content-box
Border-box

Answer 40

Border-box

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Question 41

Seletores

header + div {
Permite selecionar o que?
}

header ~ div {
Permite selecionar o que?
}

Answer 41

A div subsequente
Todas as divs do header

Question 42

Diferença de img para background?

Answer 42

Img tem texto alternativo e é conteúdo. Background não.

Question 43

O que a expressão a seguir permite?

white-space: nowrap

Answer 43

Evita o texto quebrado. Vai forçar o texto a ficar corrido, igual a link no Word

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Question 44

O flex-flow permite utilizar 2 propriedades, quais são?

Answer 44

flex-direction e flex-wrap

Question 45

O flex wrap permite realizar o quê no flex?

Answer 45

Os items ficam estendidos (nowrap) ou “amassados” (wrap)

https://developer.mozilla.org/pt-BR/docs/Web/CSS/flex-wrap

Question 46

Overflow: scroll permite usar a ___________

Answer 46

Barra de rolagem

Question 47

div:nth-child(2) {
Permite selecionar qual objeto?
}

Answer 47

O segundo filho da div

Question 48

A grid área se refere a qual item da imagem do link?
~~~
{
grid-area: 1 / 2 / 4 / 3;
grid-row-start: 1;
grid-column-start: 2;
grid-row-end: 4;
grid-column-end: 3;
}
~~~

https://pasteboard.co/WU6nxleGf0a4.png

Answer 48

A área 1

Question 49

CSS

grid {
gap: 16px 24px
}

Quais gaps se referem a column e row?

Answer 49

16px row
24px column

Question 50

CSS

Consegue identificar qual é o autofill e qual é o autofit?

https://pasteboard.co/KphQy1GYh4HV.jpg

Answer 50

A primeira é autofill e a segunda autofit, a autofit é melhor

Question 51

CSS

Grid no bootstrap: há a divisão da tela em _______ colunas

Answer 51

12

Question 52

HTML

Emmet: div3>div3

Qual será o output?

Answer 52

3 divs com 3 divs cada

Question 53

Javascript

Declarar uma variável no JavaScript sem const ou let tornará ela ____ no escopo

Answer 53

Global

Question 54

Entre const e let qual delas pode ser sobrescrita?

Answer 54

Let

Question 55

Javascript

Javascript

let idade (aqui eu ????)
idade = 2 (aqui eu ????)

Answer 55

declarei
atribui

Question 56

Javascript

Array

const fruits = [“Banana”, “Orange”, “Apple”, “Mango”, “Kiwi”];

fruits.splice(2, 2);

Qual será o output?

Answer 56

Banana, Orange, Kiwi

Question 57

Javascript

Para que serve o package.json?

Answer 57

Arquivo que contém a descrição e metadados funcionais sobre o projeto (nome, versão etc)

Question 58

Javascript

O que é NPM? Para que serve?

Answer 58

Node Package Manager, o NPM é um poderoso gerenciador de pacotes utilizado para administrar as bibliotecas e frameworks utilizados em uma aplicação

Question 59

Javascript

Qual a diferença de null e undefined

Answer 59

null = ausência intencional
undefined = não declarado/não existe

Question 60

Javascript

Assessores javascript

O ___ permite buscar informação de um objeto, mas não possibilita editar/atribuir valores

Answer 60

get

Question 61

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() {
    alert(this.nome[0] + ' ' + this.nome[1] + ' tem ' + this.idade + ' anos de idade. Ele gosta de ' + this.interesses[0] + ' e ' + this.interesses[1] + '.');
  },
  saudacao: function() {
    alert('Oi! Eu sou ' + this.nome[0] + '.');
  }
};

Answer 61

nome, idade, sexo e interesses são propriedades (dados)
bio e saudacao são métodos (funções)

Question 62

Javascript

No código a seguir, quem seria o namespace?

var pessoa = {
  nome: ['Bob', 'Smith'],
  idade: 32,
  sexo: 'masculino',
  interesses: ['música', 'esquiar'],
  bio: function() {
    alert(this.nome[0] + ' ' + this.nome[1] + ' tem ' + this.idade + ' anos de idade. Ele gosta de ' + this.interesses[0] + ' e ' + this.interesses[1] + '.');
  },
  saudacao: function() {
    alert('Oi! Eu sou ' + this.nome[0] + '.');
  }
};

Answer 62

pessoa

Question 63

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?**

Answer 63

12 e 30

Question 64

Javascript

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;
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;
}
~~~

Answer 64

Nova maneira (utilizando class):

1)
class Produto {
constructor(nomeEscolhido, precoEscolhido){
this.nome = nomeEscolhido;
this.preco = precoEscolhido;
}
calculaDesconto() {
return this.preco * 0.1;
}
}

2)
var produto1 = new Produto(‘Blusa’, 120);
var produto2 = new Produto(‘Calça’, 300);

3)
produto1.calculaDesconto(); output esperado é 12
produto2.calculaDesconto(); output esperado é 30

Question 65

Javascript: heranças

Para que serve a palavra extends no código abaixo?

class Square extends Polygon {
  constructor(length) {
    // Here, it calls the parent class' constructor with lengths
    // provided for the Polygon's width and height
    super(length, length);
    // Nota: In derived classes, super() must be called before you
    // can use 'this'. Leaving this out will cause a reference error.
    this.name = 'Square';
  }

  get area() {
    return this.height * this.width;
  }

  set area(value) {
    this.area = value;
  }
}

Answer 65

Ela serve para criar uma classe filha (square) da classe pai (polygon)

Para permitir isso o VSCODE cria o import no início do código “import polygon”

Question 66

Qual o erro do código abaixo?

class Rectangle {
constructor(height, width) {
this.name = ‘Rectangle’;
this.height = height;
this.width = width;
}
}

class Square extends Rectangle {
constructor(length) {
this.height;
this.name = ‘Square’;
}
}

Answer 66

Correção: faltou o método especial super()

class Square extends Rectangle {
    constructor(length) {

        **super(length, length);** 

        this.height;
        this.name = 'Square';
    }
}

O super() é um método especial que chama o construtor do método de onde você herdou a classe. Ou seja, é uma forma de aproveitar o que já foi estabelecido como um padrão para instanciar um objeto novo.

Question 67

Qual o problema com o código a seguir?

class Cliente {
nome;
cpf;
}

new Cliente("Ricardo", 11122233309);

Answer 67

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);

Question 68

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).

Answer 68

instanciando
molde

Question 69

Qual será o output da expressão a seguir?

{let a = 2;

console.log(a -= 3);
}

{let a = 2; 
console.log(a += 3);
}

Answer 69

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

Question 70

Atributo privado:

class ContaCorrente {
    agencia;
    saldo;
}

contaCorrenteRicardo.#saldo = 0;

Qual o output?

Answer 70

SyntaxError: Private field ‘#saldo’ must be declared in an enclosing class

Quando colocamos cerquilha, o JS entende que é privado

Question 71

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);

Answer 71

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.

Question 72

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 (?)

Answer 72

Classe (2)

Question 73

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

Answer 73

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;
        }
    }

Question 74

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);

Answer 74

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

Question 75

Técnica de (?): você separa as classes do projeto em arquivos separados, para facilitar manutenção e leitura.

Answer 75

Modularização

Question 76

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

Answer 76

Criar um arquivo json para que faça o interpretador entender que o arquivo index.js também é um módulo

Question 77

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";
^^^^^^

Answer 77

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" <<<<<<<
}

Question 78

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.

Answer 78

Gerenciador de pacotes (2)

Question 79

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!

Answer 79

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'
}

Question 80

Atribuição dinâmica de atributos: curiosidade!

Arquivo ContaCorrente.js:
~~~
export class ContaCorrente {
agencia;
cliente;
_saldo = 0;

(…)

transferir(valor, conta){
    conta.cidade = "São Paulo"
    const valorSacado = this.sacar(valor);
    conta.depositar(valorSacado);
} } ~~~

Arquivo index.js:

let valor = 200;
contaCorrenteRicardo.transferir (valor, conta2);

console.log(valor);

//output: valor: 200

console.log(conta2); 

//output ContaCorrente {
  agencia: 102,
  cliente: Cliente { nome: 'Alice', cpf: 88822233309 },
  _saldo: 200,
  cidade: 'São Paulo'

Quando criamos a let “valor” estamos usando um tipo primitivo (number) e ao chamar o parâmetro “valor” no método “transferir” estamos inserindo uma (?) (no valor de 200), mas isso não acontece quando se trata de objeto, ali realmente se altera, pois ao passar o objeto estamos passando uma (?) ao endereço de memória.

Tem a ver com o gerenciamento de memória do JavaScript.

Answer 80

Cópia
Referência

Question 81

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 _____

Answer 81

heap
endereço
cópia

Question 82

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?

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);
    }
}

Answer 82

Usando assessores: permitem o acesso ao atributo de forma controlada

Question 83

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);

Answer 83

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

Question 84

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ê?

Answer 84

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 }

Question 85

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;

Answer 85

Não consegue

TypeError: Cannot set property saldo of #<ContaCorrente> which has only a getter</ContaCorrente>

Question 86

Como será o código da classe Conta utilizando construtores?

export class Conta {
        _saldo;
        _cliente;
        _agencia;
    }

Answer 86

export class Conta {
    constructor(saldoInicial, cliente, agencia) {
        this._saldo = saldoInicial;
        this._cliente = cliente;
        this._agencia = agencia;
    }

Question 87

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;

Answer 87

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>

Question 88

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

Answer 88

O problema existe pois não há retorno algum no getter do cpf:
~~~
get cpf() {
this._cpf;
return this._cpf;
}
~~~

Question 89

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

Answer 89

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);

Question 90

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);
    }
}

Answer 90

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

Question 91

1 - Pode usar o “this” aqui?
2 - Pode chamar o método privado “_sacar” no código da ContaCorrente?
3 - O método “sacar” do ContaCorrente.js, ao declarar taxa = 1.1, está (?) o método “sacar” do Conta.js

export class Conta {
(...)   
     sacar(valor) {
        let taxa = 1;
        return this._sacar(valor, taxa);
    }

    _sacar(valor, taxa) {
        const valorSacado = taxa * valor;
        if (this._saldo >= valorSacado) {
            this._saldo -= valorSacado;
            return valorSacado;
        }

        return 0;
    }

export class ContaCorrente extends Conta{
    (...)
sacar(valor) {
        let taxa = 1.1;
        return this._sacar(valor, taxa); <<<<<< NÃO SERIA O SUPER?
    }
}

Answer 91

1 - O “super” do método sacar no arquivo ContaCorrente pode ser substituído pelo “this” isso porque o método sacar já é da Conta.js, não estou sobreescrevendo
2 - Sim, o “_sacar”, método privado, está sendo chamado pela classe

Question 92

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;
    }

Answer 92

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)

Question 93

Qual o nome da classe que não pode ser instanciada (exemplo, a Conta.js)?

Answer 93

Classe abstrata

Question 94

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;
    }
}

Answer 94

Abstrato

Question 95

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.

Answer 95

Compilador
Compilador

Question 96

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?

Answer 96

true e true

Question 97

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

Answer 97

Chave

Question 98

Exemplo de (?): 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);

Answer 98

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

Question 99

(?) 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.

Answer 99

Duck

Question 100

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 (?)

Answer 100

document.querySelector
HTML

Question 101

O (?) é uma interface de linguagem neutra que permite que o documento HTML seja atualizado dinamicamente.

Answer 101

DOM

Question 102

DOM significa (?). Isso porque nosso HTML é um documento o navegador para ler ele transforma em objeto, manipulável na estrutura do JavaScript.

Answer 102

Document Object Model

Question 103

Porque podemos digitar:
document.title > ‘Robotron 2000’
E não:
document.producao?

Answer 103

O title é padrão (tal como o body, head) e producao não, pois nós criamos tal método. Devemos usar document.getElementById ou class, ou queryselector!

Question 104

Métodos para (?) elementos no HTML

document.getElementByID(id) - Recupera um elemento pelo ID.
document.getElementsByTagName(name) - Recupera um elemento pelo nome.
document.getElementsByClassName(name) - Recupera um elemento pelo nome da classe.

Answer 104

Selecionar

Question 105

Propriedades e métodos para (?) elementos no HTML

element.innerHTML - Esta propriedade obtém ou altera qualquer elemento no HTML, inclusive tags.
element.innerText - Esta propriedade permite inserir textos no HTML.
element.value - Esta propriedade altera o valor de um elemento HTML
element.setAttribute(atributo, valor) - Este método altera o valor de um atributo de um elemento HTML.

Answer 105

Alterar/modificar

Question 106

(?) e (?) elementos

document.write() - Escreve no fluxo de saída do HTML.
document.appendChild() - Adiciona um elemento HTML.
document.removeChild() - Remove um elemento HTML.
document.replaceChild() - Substitui um elemento HTML.
document.createElement() - Cria um elemento HTML.

Answer 106

Adicionando e excluindo

Question 107

Como modifico o texto dentro da tag “p” usando o DOM?
Atenção: quero alterar texto, e não o conteúdo!

<section class="container">
<div class="trono"></div>
<p id="texto">O inverno está chegando</p>
</section>

Answer 107

document.getElementById(“texto”).innerTEXT = “O inverno passou”

Question 108

Qual a forma correta de importar o arquivo JS no meu index.html?

<script src="js/main.js"></script>
ou
<link src="js/main.js"></link>

E em qual parte da página importamos? E por que?

Answer 108

Colocamos na última linha possível, para evitar que impeça o carregamento da página (após o main)

Question 109

Como selecionamos o ID robotron utilizando o querySelector (selecionando pelo ID)?

<section>
<img></img>
<figcaption>ROBOTRON <br></br>2000</figcaption>
</section>

Answer 109

document.querySelector("#robotron")

Question 110

Explique o código abaixo ponto a ponto:

const robotron = document.querySelector(“#robotron”)

robotron.addEventListener(“click”, dizOi)

function dizOi() {
console.log(“oi”);
}

Answer 110

Foi criada a constante robotron, que corresponde ao id #robotron

O robotron recebeu um addEventListener (escutador de eventos) com função click (ou seja, clicou, disparou) que dispara a função “dizOi”

A função “dizOi” dispara um console.log no nosso DOM cada vez que é clicado

Question 111

O código a seguir funcionaria?

A técnica presente aqui é o (?): é um comportamento presente no JavaScript que faz com que declarações de variáveis e funções sejam “elevadas” para o topo do escopo em que são definidas.

function myFunction() {
document.querySelector(“#retorna”).innerHTML = “Confirma”;
}

const elemento = document.querySelector(“#botao”);
elemento.addEventListener(“click”, myFunction);

Answer 111

Sim
Hoisting (içamento)

Question 112

As (?) são basicamente armazenadoras de códigos. Elas permitem que os códigos sejam “chamados” mais de uma vez.

Answer 112

Funções

Question 113

Exemplo de função (?): ela só será disparada aqui nesse caso
robotron.addEventListener(“click”, function() {
console.log(“Cliquei no robô”)
})

Exemplo de função de (?): nova forma, funciona do mesmo da anterior
robotron.addEventListener(“click”, () => {
console.log(“Cliquei no robô”)
})

Exemplo de função (?): ela pode ser disparada em outros casos (basta chamar):
function dizOi() {
console.log(“oi”);
console.log(“Welcome to Robotron 2000 (two thousand)”);
}

Answer 113

Anônima
Arrow
Nominada(denominada)

Question 114

What’s the difference between:

1 - const controle = document.querySelectorAll(".controle-ajuste");
2 - const controle = document.querySelector(".controle-ajuste");

Answer 114

The querySelectorAll will choose all of the “.controle-ajuste” classes. The another one just catch the first element (with that class).

Question 115

Explain this code:
~~~
const controle = document.querySelectorAll(“.controle-ajuste”);

controle.forEach((elemento) => {
elemento.addEventListener(“click”, () => {
console.log(“funcionou”);
})
})
~~~

Answer 115

The “forEach” works in the array context. When we select all of the elements with “.controle-ajuste” class we create a array for each!

When we click (“addEventListener(“click”…) we start the arrow function with console.log(“funcionou”). That happens everytime we click an element with that class “.controle-ajuste”

Question 116

Quando colocamos o parâmetro “evento” e pedimos que o console.log apresente ele, o que queremos saber?

controle.forEach((elemento) => {
    elemento.addEventListener("click", (evento) => {
        console.log(evento);
    })
})

Answer 116

Buscamos saber o que aconteceu com o clique. O evento vai trazer no console (F12) diversas informações.

Question 117

Qual o nosso objetivo com o código abaixo, considerando o HTML em seguida?

const controle = document.querySelectorAll(".controle-ajuste");

controle.forEach((elemento) => {
    elemento.addEventListener("click", (evento) => {
        console.log(evento.target.textContent);
    })
})

<section class="equipamentos">
            <form action="" class="montador">
                <div class="box montador-conteudo">
                    <div class="peca">
                        <label for="" class="peca-titulo">Braços</label>
                        <div class="controle">
                            <buttom class="controle-ajuste" id="subtrair">-</buttom>
                            <input type="text" class="controle-contador" value="00" id="braco">
                            <buttom class="controle-ajuste" id="somar">+</buttom>
                        </div>
                    </div> (...)

Answer 117

Ao clicar, quero que exiba o conteúdo textual (que é “+” ou “-“) do target (buttom). Ao clicarmos o console (F12) vai disparar o output + ou -

Question 118

Como o código a seguir funciona?
Para que serve o data attributes?

<div class="peca">
                        <label for="" class="peca-titulo">Braços</label>
                        <div class="controle">
                            <buttom class="controle-ajuste" data-controle="-">-</buttom>
                            <input type="text" class="controle-contador" value="00" data-contador id="braco">
                            <buttom class="controle-ajuste" data-controle="+">+</buttom>
                        </div>
                    </div>

const controle = document.querySelectorAll("[data-controle]");

controle.forEach((elemento) => {
    elemento.addEventListener("click", (evento) => {
        manipulaDados(evento.target.dataset.controle, evento.target.parentNode);
    })
})

function manipulaDados(operacao, controle) {
    const peca = controle.querySelector("[data-contador]")
    console.log(peca)
    if(operacao === "+") {
        peca.value = parseInt(peca.value) + 1;
    } else if (peca.value > 0){
        peca.value = parseInt(peca.value) - 1;
    }
}

Answer 118

O data attributes serve para desvincular o código JS do HTML, são utilizados para guardar valores em elementos HTML.

Nos braços, eu coloco “data-“ que armazenará + ou -.

No JS eu crio a constante com querySelecttorAll selecionando todos os data-controle.

Para cada data-controle tenho o gatilho eventListener de clique, que vai buscar (target) o “dataset” do meu controle e o nódulo pai e assim em diante.

Data-attributes não devem ser utilizados para dados visíveis, pois tecnologias de acessibilidade podem não identificar seus valores.

Question 119

Como faço para pegar (no JS) o atributo data do HTML abaixo?

  <h1>Lista de tintas:</h1>
  <ul id="lista">
    <li data-cor="laranja" data-tipo="tinta-exterior" onclick="mudaCores(this)" class="item">Tinta laranja</li>
    <li data-cor="vermelho" data-tipo="tinta-interior"  onclick="mudaCores(this)" class="item">Tinta vermelha</li>
  </ul>

Código JS

function mudaCores(elementos){
    var cores = elementos.xxxxxxxx("[data-cor]");
    var tipoElemento = elementos.xxxxxxxx("[data-tipo]");
  }

Answer 119

function mudaCores(elementos){
    var cores = elementos.getAttribute("[data-cor]");
    var tipoElemento = elementos.getAttribute("[data-tipo]");
  }

Question 120

Observe o código.
Como se classificam “cor” e tipo?
O código JS funcionaria?

<h1>Lista de tintas:</h1>
  <ul id="lista">
    <li cor="laranja" tipo="tinta" onclick="mudaCores(this)" class="item">Tinta laranja</li>
    <li cor="vermelho" tipo="tinta"  onclick="mudaCores(this)" class="item">Tinta vermelha</li>
  </ul>

JS

function mudaCores(elementos){
    var cores = elementos.getAttribute("[cor]");
    var tipoElemento = elementos.getAttribute("[tipo]");
  }

Answer 120

Sim, está usando data attribute personalizado. O prefixo data- não é obrigatório.

Question 121

1 - Como acesso o atributo “autor” do segundo objeto da lista “livros” (console.log)?
2 - Como altero o atributo “genero” do segundo objeto da lista para “Ficção”?
3 - Como acrescento o atributo “estoque” do segundo objeto da lista para “10”?
4 - Como eu deleto o atributo “editora” do segundo objeto da lista?

var livros = [
    {titulo: "Cangaceiro JavaScript",  
    autor: "Flávio Almeida", 
    genero: "Front-end", 
    editora: "Casa do código", 
    preco: 31.92},
		
    {titulo: "Introdução e boas práticas em UX Design",  
    autor: "Fabricio Teixeira", 
    genero: "UX & UI", 
    editora: "Casa do código", 
    preco: 31.92},
		
    {titulo: "Scrum",  
    autor: "Rafael Sabbagh", 
    genero: "Métodos Ágeis", 
    editora: "Casa do código", 
    preco: 31.92},
]

Answer 121

1 - console.log(livros[1].autor)
2 - livros[1].genero = “Ficção”
3 - livros[1].estoque = 10
4 - delete livros[1].editora

Question 122

Qual será o retorno do código?

var livros = {
titulo: “Cangaceiro JavaScript”,
autor: “Flávio Almeida”,
genero: “Front-end”,
editora: “Casa do código”,
preco: 31.92,
chamaLivro: function() {
return this.autor;
}
}
console.log(‘O autor do livro se chama ‘ + livros.chamaLivro())

Answer 122

O autor do livro se chama Flávio Almeida

Question 123

O que a tag “controls” permite?
<audio></audio>

Answer 123

Permite tocar, alterar volume, avançar e recuar áudio (player de áudio)