Desafio: Organizando melhor a montagem de pacientes | JavaScript : Programando na linguagem da web

2
respostas

Referente ao curso JavaScript : Programando na linguagem da web, no capítulo Funções e os cidadãos de primeira classe e atividade Desafio: Organizando melhor a montagem de pacientes

por William Santos Gigliozzi

| 499.5k xp | 16 posts

Analista de TI

Olá a todos,

Já que este é um curso básico, está faltando um importante detalhe que é a finalização do desafio, isto é, explicar em detalhes num vídeo 5.4 (assim como vinha fazendo até então) como o instrutor implementaria a solução e não simplesmente "jogar" a solução e esperar que os alunos consigam compreender.

Por exemplo: na solução do instrutor abaixo, não sei como implententá-la de forma a concatenar todos scripts criados e formar uma solução única (isoladamente esta solução resolve). Daí surgem diversas dúvidas.

// MONTA PACIENTE - SOLUÇÃO DO INSTRUTOR

function montaPaciente(pacienteTr){
    var tdNome = pacienteTr.getElementsByClassName("info-nome")[0]; 
    var tdPeso = pacienteTr.getElementsByClassName("info-peso")[0]; 
    var tdAltura = pacienteTr.getElementsByClassName("info-altura")[0];

    var paciente = {
        nome : tdNome.textContent, 
        peso : tdPeso.textContent, 
        altura : tdAltura.textContent,
        pegaImc: function() {
            if(this.altura != 0){
                var imc = this.peso / (this.altura * this.altura);
                return imc;
            } else{

                console("Não posso dividir por zero!");
            }
        }
    }
    return paciente;
}

var trsPacientes = document.getElementsByClassName("paciente");

for(var posicaoAtual = 0; posicaoAtual <= trsPacientes.length - 1; posicaoAtual++){

    var pacienteTr = trsPacientes[posicaoAtual];

    var tdImc = pacienteTr.getElementsByClassName("info-imc")[0];
    var pacienteAtual = montaPaciente(pacienteTr); //aqui chamamos a nova função

    var imc = pacienteAtual.pegaImc();
    tdImc.textContent = imc;

    console.log(imc); 
}

Dúvidas:

i. Foi dito no final do vídeo 5.3 que se deveria isolar a função montaPaciente num arquivo à parte e importar no html. Mas o que estou vendo é a função sendo chamada de dentro do arquivo atual, que eu não sei qual é.

ii. Já que a ideia é não repetir código, por que está sendo usado o FOR() nesta solução ao invés do percorreArray() que havia sido criado para justamente evitar tal repetição?

Entendi que neste módulo deveria ser aplicado todos os conceitos concatenados num único arquivo, numa ordem do tipo:

var trsPacientes = document.getElementsByClassName("paciente");

percorreArray(argumento, comportamento);   // <script src="percorre-array.js"></script>
montaPaciente(argumento);   // sendo importado no html <script src="monta-paciente.js"></script>

// Daí então manipular os dados recebidos

Enfim, ficou deveras confuso!

2 respostas

por Daniel Omnion

| 1014.4k xp | 1150 posts

14/11/2016

Pelo que eu entendi, a solução para simplificar esse processo do IMC seria a seguinte:

Colocar cada função num arquivo em separado, e depois fazer os includes na página index. Exemplo:

<script src="percorre.js"></script>    
<script src="imprime-nome-imc.js"></script>

No arquivo percorre.js vai a função de percorreArray, no arquivo imprime-nome-imc vai a função de imprimeEModificaTdDeImc

Depois, você pode inserir um terceiro script abaixo destes dois. Exemplo:

<script src="exercicio-calcula-imc.js"></script>

E dentro deste exercicio-calcula-imc.js, você poderia fazer da seguinte forma:

var trsPacientes = document.getElementsByClassName("paciente");
percorreArray(trsPacientes, imprimeEModificaTdDeImc);

Desta forma, você teria o seguinte:

Na primeira linha, ele puxa todas as linhas de tabela com a classe paciente, e guarda num array

Na segunda linha, você percorre cada linha deste array de TRs usando a função de percorre, passanbdo como primeiro parâmetro essa variavel criada na primeira linha. Para cada linha deste array ele vai executar o comportamento (segundo parâmetro), que neste exemplo seria o imprimeEModificaTdDeImc.

Esta função recebe uma linha (TR) pega o conteúdo de cada célula desta linha (TD), faz o cálculo do IMC e imprime na coluna correspondente.

por Pedro Ávila

| 330.4k xp | 175 posts

12/12/2016

William, concordo com você, o instrutor vai de contra o que ensinou quando na resposta do exercício repetiu o for, deveria ter explicado como utilizar a função montaPaciente através dos arquivos calcula-imc.js e imprime-nome.js.

Resolvi da seguinte maneira:

Arquivo monta-paciente.js:

function montaPaciente(pacienteTr) {

    var tdNome        = pacienteTr.getElementsByClassName("info-nome")[0];
    var tdPeso        = pacienteTr.getElementsByClassName("info-peso")[0];
    var tdAltura    = pacienteTr.getElementsByClassName("info-altura")[0];

    var paciente = {
        nome    : tdNome.textContent,
        peso    : parseFloat(tdPeso.textContent),
        altura    : parseFloat(tdAltura.textContent),
        pegaImc    : function(){
            if ( (this.altura != 0) && (this.peso != 0) ) {
                var imc = this.peso / (this.altura * this.altura);
                return imc;
            } else {
                console.log('IMC de ' + this.nome + ' não calculado pois altura ou peso não podem ser 0');
            }
        }
    };
    return paciente;
}

Arquivo imprime-nome.js:

var trsPacientes = document.getElementsByClassName("paciente");

percorreArray(trsPacientes, function(pacienteTr){
    var paciente = montaPaciente(pacienteTr); // Utiliza a variável para abrigar o objeto paciente retornado pela função.
    console.log(paciente.nome); // Utiliza o objeto paciente referenciado pela variável.
});

Arquivo calcula-imc.js:

var trsPacientes = document.getElementsByClassName("paciente");

percorreArray(trsPacientes, function(pacienteTr){
    var paciente = montaPaciente(pacienteTr); // Mais uma vez recebe o objeto paciente retornado pela função.
    var imc = paciente.pegaImc(); // Executa um método do objeto.

    var tdImc = pacienteTr.getElementsByClassName("info-imc")[0];
    tdImc.textContent = imc;

    console.log('O IMC de ' + paciente.nome + " é " + imc);
});