AULA 02--[JavaScript]

Temos o seguinte fragmento HTML:

Em seguida, temos o código que busca a tr que guarda os dados de um paciente. Usaremos um seletor de ID para a função document.querySelector:

var trPaciente = document.querySelector('#primeiro-paciente');

No entanto, queremos extrair o peso e a altura que representamos pelos elementos do tipo td dentro da tr que acessamos no mundo JavaScript através da variável trPaciente.

Qual das opções abaixo acessa corretamente a partir de trPaciente o peso e a altura?

• 
• 
• 

Mariana é dona de um restaurante que troca os pratos semanalmente. Os pratos são exibidos para seus clientes em seu site como uma tabela, como a abaixo:

Se Mariana deseja exibir o prato de cada dia em uma outra área de sua página, da forma abaixo:

Prato do dia!

Alface e Tomate

Frango Grelhado

Arroz e Feijão Preto

Qual código abaixo extrai as informações de um dia da tabela, por exemplo a sexta-feira, e imprime no console no formato que Mariana deseja?

• var salada = document.querySelector(".salada").textContent; var principal = document.querySelector(".principal").textContent; var acompanhamento = document.querySelector(".acompanhamento").textContent; console.log("Prato do dia!"); console.log(salada); console.log(principal); console.log(acompanhamento);

• var pratoDoDia = document.querySelector(".prato-do-dia"); var salada = pratoDoDia.querySelector(".salada").textContent; var principal = pratoDoDia.querySelector(".principal").textContent; var acompanhamento = pratoDoDia.querySelector(".acompanhamento").textContent; console.log("Prato do dia!"); console.log(salada); console.log(principal); console.log(acompanhamento);

• var pratoDoDia = document.querySelector("#sexta"); var salada = pratoDoDia.querySelector(".salada").textContent; var principal = pratoDoDia.querySelector(".principal").textContent; var acompanhamento = pratoDoDia.querySelector(".acompanhamento").textContent; console.log("Prato do dia!"); console.log(salada); console.log(principal); console.log(acompanhamento);

Aprendemos que o cálculo do índice de massa corporal (IMC) é feito dividindo o nosso peso pela altura vezes a altura, o que pode ser representado pela seguinte fórmula na linguagem JavaScript:

alert(78 / (1.71 * 1.71));

No entanto, para melhorarmos a legibilidade e manutenção deste código, podemos utilizar variáveis.

Quais opções abaixo possuem o mesmo resultado da instrução anterior com o auxílio de variáveis?

• var peso = 78; var altura = 1.71; var imc = peso / (altura * altura); alert(imc);

• var peso = 1.71; var altura = 78; var imc = peso / (altura * altura); alert(imc);

• var peso = 78; var altura = 1.71; var imc = peso / altura * altura; alert(imc);

Rogério era um programador da empresa Sentec Enterprises, e ele ficou responsável de fazer o site que exibe os indicadores de sua empresa, para mostrar para os clientes e possíveis investidores como a empresa havia se desempenhado nos últimos anos.

O indicador é calculado como a imagem abaixo:

Rogério conseguiu obter os valores de vendas, clientes abordados e média de tentativas por cliente corretamente, porém quando ele realiza o cálculo ele não obtêm o valor esperado. Veja o exemplo que ele está trabalhando:

var vendas = 10; var clientesAbordados = 25; var mediaTentativasPorCliente = 4; var taxa = 0; taxa = vendas / clientesAbordados * mediaTentativasPorCliente; console.log(taxa);

O valor que ele esperava obter era 0.1, afinal a conta é simples, basta dividir 10 (vendas) , por 100 ( clientesAbordados x mediaTentativasPorCliente). Porém sempre que ele imprime o resultado no console, aparece o valor de 1.6, mostrando um indicador muito mais alto do que ele deveria ser!

Qual das afirmativas abaixo explica o resultado estranho que Rogério está obtendo ?

• Para o Javascript trabalhar com números decimais, deve ser informado previamente que aquela variável vai receber um número decimal, colocando a palavra float após ela:

  var float taxa = 0;

  Como Rogério não fez isto o Javascript está se comportando de modo inesperado.

• O Rogério não está levando em conta a ordem dos operadores em Javascript. Se ele não disser que a multiplicação deve ser feita primeiro, envolvendo-a com parênteses, ele sempre vai obter o resultado errado, pois o Javascript vai ler sua conta da esquerda para a direita, e vai resolver primeiro o bloco vendas / clientesAbordados e depois multiplicar por mediaTentativasPorCliente.

• Este tipo de cálculo é impossível de ser feito em uma linha só, ele devia ter quebrado em linhas diferentes pois assim o cálculo se tornaria correto, deste modo:

  var vendas = 10; var clientesAbordados = 25; var mediaTentativasPorCliente = 4; var taxa = 0; var denominador = clientesAbordados * mediaTentativasPorCliente; var taxa = vendas / denominador; console.log(taxa);

Aprendemos a obter um elemento do Mundo HTML e trazê-lo para o mundo JavaScript para podermos acessá-lo aplicando as mais diversas lógicas de programação.

Por exemplo, vamos revisar o código que extrai de uma página o peso e a altura para calcular o IMC. Primeiro, temos um fragmento do HTML:

<table> <thead> <tr> <th>Nome</th> <th>Peso(kg)</th> <th>Altura(m)</th> <th>Gordura Corporal(%)</th> <th>IMC</th> </tr> </thead> <tbody id="tabela-pacientes"> <tr class="paciente" id="primeiro-paciente"> <td class="info-nome">Paulo</td> <td class="info-peso">100</td> <td class="info-altura">2.00</td> <td class="info-gordura">10</td> <td class="info-imc">0</td> </tr> </tbody> </table>COPIAR CÓDIGO

Segundo, o código JavaScript que manipula esse HTML:

var trPaciente = document.querySelector('#primeiro-paciente'); var tdPeso = trPaciente.querySelector('.info-peso'); var tdAltura = trPaciente.querySelector('.info-altura'); var peso = tdPeso.textContent; var altura = tdAltura.textContent; var imc = peso / ( altura * altura);COPIAR CÓDIGO

No entanto, não podemos simplesmente realizar o cálculo às cegas. Precisamos primeiro verificar se o peso e altura trazidos do mundo HTML são válidos. Não queremos magoar ninguém calculando um IMC indevido, certo? Aprendemos em lógica de programação a trabalharmos com a instrução if que espera receber true ou false. Sendo assim, podemos realizar críticas em nosso código da seguinte forma:

var trPaciente = document.querySelector('#primeiro-paciente'); var tdPeso = trPaciente.querySelector('.info-peso'); var tdAltura = trPaciente.querySelector('.info-altura'); var tdImc = trPaciente.querySelector('.info-imc'); var peso = tdPeso.textContent; var altura = tdAltura.textContent; var pesoEhValido = true; // assumindo de boa fé que o peso é válido var alturaEhValida = true; // assumindo de boa fé que a altura é válida if(peso <=0 || peso >= 1000) { pesoEhValido = false; } if(altura <= 0 || altura >= 3.00) { alturaEhValida = false; } if(pesoEhValido && alturaEhValida) { var imc = peso / ( altura * altura); }COPIAR CÓDIGO

Apesar do código acima ser funcional, em nenhum momento ele está exibindo o IMC calculado na página, muito menos as mensagens de erro caso peso ou altura sejam inválidos. Qual das opções abaixo exibe o IMC , inclusive as mensagens de erro?

• 
• 
• 

No sistema de RH do banco Finanção, as informações dos funcionários de uma determinada área são acessíveis somente aos gerentes daquela área. Um código Javascript que verifica se um funcionário do setor de TI poderia ou não ter acesso aos dados funciona como consta abaixo:

Com o tempo, os funcionários observaram que a validação continha falhas, pois pessoas que não deveriam ter acesso aos dados do setor TI estavam conseguindo mesmo assim.

Com base em seus conhecimentos de Javascript e Lógica de programação, marque todas as opções abaixo que indicam quais funcionários têm acesso às informações do setor de TI.

• Todos os funcionários do setor de TI.

• Todos os funcionários do banco.

• Qualquer funcionário que fosse gerente no banco.

• Apenas os gerentes que não sejam do setor de TI.

Vimos que o banco Finanção está com uma falha na hora de verificar quem tem acesso a quais informações.

Qual alteração você faria no código abaixo para que apenas gerentes que são do departamento de TI tenham acesso aos dados de seus funcionários ?

• 
• 
• 

Jéssica criou um aplicativo de finanças para ter um melhor controle de seus gastos, visto que ela estava gastando muito com eletrônicos.

Ela queria ver qual a porcentagem de sua renda era destinada a cada categoria de gastos e para isto ela usava um simples cálculo:

var despesaCategoria = 1532;

var rendaTotal = 6255;

var porcentagemCategoria = (despesaCategoria/rendaTotal) * 100;

console.log(porcentagemCategoria);

Jéssica viu que ela não tinha interesse em saber a porcentagem com tantas casa decimais , como neste exemplo que iria ficar um número muito feio (24.49240607513989). Para o caso dela, uma casa decimal seria o suficiente.

Qual alteração no código dela faria com que o número de casas decimais ficasse limitado a uma casa decimal ?

• var despesaCategoria = 1532.0; var rendaTotal = 6255.0; var porcentagemCategoria = despesaCategoria/rendaTotal * 100.0; console.log(porcentagemCategoria);

• var despesaCategoria = 1532; var rendaTotal = 6255; var porcentagemCategoria = despesaCategoria/rendaTotal * 100; var porcentagemDecimal = porcentagemCategoria.toDecimal(1); console.log(porcentagemDecimal);

• var despesaCategoria = 1532; var rendaTotal = 6255; var porcentagemCategoria = despesaCategoria/rendaTotal * 100; console.log(porcentagemCategoria.toFixed(1));

Qual dos códigos abaixo altera a cor da letra do parágrafo abaixo para a cor azul ?

<p id="latim"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <script> var paragrafo = document.querySelector("#latim"); // Código aqui! </script>

• paragrafo.style.color = "blue";

• paragrafo.color = "blue";

• paragrafo.css.color = "blue";

• paragrafo.styles.color = "blue";

E se mudarmos de ideia e, em vez da cor do parágrafo, quisermos que o fundo do último exercício seja azul?

<p id="latim"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <script> var paragrafo = document.querySelector("#latim"); // Código aqui! </script>

Qual código abaixo deixa o fundo do parágrafo azul?

• paragrafo.style.background_color = "blue";

• paragrafo.style.background-color = "blue";

• paragrafo.style.backgroundColor = "blue";