Dúvida no Ex. 5 da Aula 5 - Funções e os cidadãos de primeira classe

Pq o código não está funcionando?

function montaPaciente(trDoPaciente) {
    var nome = trDoPaciente.getElementsByClassName("info-nome")[0].textContent;
    var altura = trDoPaciente.getElementsByClassName("info-altura")[0].textContent;
    var peso = trDoPaciente.getElementsByClassName("info-peso")[0].textContent;
    var paciente = {
        nome: nome,
        altura: altura,
        peso: peso,
        pegaImc: function() {
            return peso / (altura * altura);
        }
    }
    return paciente;
}

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

percorreArray(pacientes, function(trAtual) {
    //monta paciente
    var imc = paciente.pegaImc(); // pega o imc do paciente atual
    imcTd.textContent = imc; // atualiza imc
    console.log(imc); // imprime o imc do paciente atual    
});

function percorreArray(nossosTrs, comportamento){
    for(var posicaoDoTrAtual = 0; posicaoDoTrAtual <= nossosTrs.length - 1; posicaoDoTrAtual++){
        var trDoPacienteAtual = nossosTrs[posicaoDoTrAtual];
        comportamento(trDoPacienteAtual); 
    }
}

Está dizendo que na linha 22, paciente não é definido. Em nenhum lugar do código ele está montando paciente na função montaPaciente. Estou confuso, com isso de colocar função dentro de função sem retornar função. Pode não repetir código, mas está pouco legivel e muito complexo...

function montaPaciente(trDoPaciente) {
    var nome = trDoPaciente.getElementsByClassName("info-nome")[0].textContent;
    var altura = trDoPaciente.getElementsByClassName("info-altura")[0].textContent;
    var peso = trDoPaciente.getElementsByClassName("info-peso")[0].textContent;
    var paciente = {
        nome: nome,
        altura: altura,
        peso: peso,
        pegaImc: function() {
            return peso / (altura * altura);
        }
    }
    return paciente;
}

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

percorreArray(pacientes, function(trAtual) {    
    var imc = paciente.pegaImc(); 
    imcTd.textContent = imc; 
    console.log(imc); 
});

function percorreArray(nossosTrs, comportamento) {
    for (var posicaoDoTrAtual = 0; posicaoDoTrAtual <= nossosTrs.length - 1; posicaoDoTrAtual++) {
        var trDoPacienteAtual = nossosTrs[posicaoDoTrAtual];
        comportamento(trDoPacienteAtual);
    }
}

Antonio,

eu editei o seu código para melhorar a legibilidade ok?

1 - Sobre o seu erro na linha 22

Você vê no código que você mandou da segunda vez onde tem o comentário

//monta paciente

Em baixo dele você vai ter colocar o código que monta o paciente, o método ficara assim:

percorreArray(pacientes, function(trAtual) {
    //monta paciente
    var paciente = montaPaciente(pacientes[0]),
        imcTd = trAtual.getElementsByClassName("info-imc")[0];

    var imc = paciente.pegaImc(); // pega o imc do paciente atual
    imcTd.textContent = imc; // atualiza imc
    console.log(imc); // imprime o imc do paciente atual    
});

Isso deve resolver esse problema.

Agora sobre sua primeira dúvida:

2 - Sobre os arquivos javascript

Os arquivos são colocados em sequência no html pois é ele quem vai puxar o javascript e interpretar o seu conteúdo para deixa-lo disponível para uso, a cada arquivo importado ele já vai processando ele antes de chamar o próximo.

A ordem dos arquivos importa pois se o script B depende de algo que está no script A, o script A deve ser interpretado pelo browser como eu descrevi acima e quando o B for carregado ele vai conhecer o que tinha em A, (ok?).

A divisão de arquivos e funções é para melhorar a legibilidade e o reaproveitamento do código na maioria dos casos, porém nada impede de você fazer toda a regra em uma função só dentro do html mesmo (porém isso não é muito legal).

Na maioria das vezes veremos páginas que tem todos os seus scripts "especificos" em um único arquivo Javascript e quando há algo que você quer utilizar em todas as outras páginas você vai colocando isso em outros Javascripts que serão importados nas outras páginas (mas não se preocupe isso você vai pegando a manhã com o tempo, em outros cursos da trilha html você vai ver o que eu acabei de falar).

No caso da divisão do curso ela foi somente para dividir melhor quais as regras que estão sendo aplicadas, normalmente você não vai ter arquivos tão específicos é mais por organização mesmo (no caso do curso!).

3 - Sobre o comportamento

De uma olhada na declaração da função "percorreArray":

function percorreArray(nossosTrs, comportamento){

Viu que você recebe dois parâmetros nela (nossosTrs e comportamento)?

Então, dentro da função quando você trabalhar com esses parâmetros você estará apelidando eles com esse nomes que você colocou na declaração do método.

Logo quando você faz isso:

percorreArray(pacientes, function(trAtual) {  
//fiquei com preguiça de copiar o resto do código :D
}

você na verdade está chamando a "function percorreArray" e passando para ela a variável "pacientes" e criando uma nova função "function(trAtual)" que está sendo apelidada dentro da percorreArray de "comportamento" assim como pacientes vai ser apelidado de nossosTrs (porém somente dentro da função percorreArray).

Espero ter ajudado. Att.

Não funcionou ... está sempre calculando o imc 20.43816558499767 para todos os pacientes.

Agora dentro da função percorreArray, comportamento(trDoPacienteAtual); essa função comportamento recebe o parametro trDoPacienteAtual, Onde está definido essa função ou parâmetro? E onde está retornando um valor para a função, percorreArray(pacientes, function(trAtual) {, e assim o loop trazer cada paciente por vez?

Está difícil entender essa lógica ... rs

Olá Antonio,

me desculpa, foi erro meu o fato de sempre pegar 20.43. Como eu fiz um exemplo rápido para testar na minha maquina eu passei fixo qual o trAtual, então segue o conteúdo correto do código que te passei anteriormente:

percorreArray(pacientes, function(trAtual) {
    //monta paciente
    var paciente = montaPaciente(trAtual),
        imcTd = trAtual.getElementsByClassName("info-imc")[0];

    var imc = paciente.pegaImc(); // pega o imc do paciente atual
    imcTd.textContent = imc; // atualiza imc
    console.log(imc); // imprime o imc do paciente atual    
});

Repare que mudei onde tinha:

var paciente = montraPaciente(pacientes[0]),

por

var paciente = montaPaciente(trAtual),

onde agora ele usa para montar o paciente o trAtual que entra como parâmetro na chamada da função.

Agora sobre a chamada do comportamento

1. var pacientes = document.getElementsByClassName("paciente");
2.
3. percorreArray(pacientes, function(trAtual) {    
4. var paciente = montaPaciente(trAtual),
5.         imcTd = trAtual.getElementsByClassName("info-imc")[0];
6.    var imc = paciente.pegaImc(); 
7.    imcTd.textContent = imc; 
8.    console.log(imc); 
9. });
10.
11. function percorreArray(nossosTrs, comportamento) {
12.   for (var posicaoDoTrAtual = 0; posicaoDoTrAtual <= nossosTrs.length - 1; posicaoDoTrAtual++) {
13.        var trDoPacienteAtual = nossosTrs[posicaoDoTrAtual];
14.        comportamento(trDoPacienteAtual);
15.    }
16. }

Enumerei o código acima para podermos analisar melhor o que ocorre em cada linha, ok?

1 - Cria a variável pacientes e atribui a ela todos os trs.

3 - Aqui você está chamando a função percorreArray que está declarada na linha 11, passando como parâmetro os trs dos pacientes e criando uma nova função que vai ser chamada na linha 14 com o "apelido comportamento" (entendeu agora onde você declarou a função? Foi na linha 3 ela é um parâmetro de percorreArray, não é legal? :D);

Agora vou avançar um pouquinho

14 - Nessa linha você está chamando a função que criou na linha 3 e passando como parâmetro para ela o trDoPacienteAtual que você declara na linha 13 a cada vez que você passa por um dos nossosTrs.

Agora ele vai voltar para a linha 3

3 - Quanto você chamou o "comportamento(trDoPacienteAtual" na verdade estava chamando a "function(trAtual)" criada nessa linha. Repare que o trDoPacienteAtual lá de baixo também ganha um apelido aqui "trAtual" e é usado nas linhas 4 e 5.

Portanto quando você for ler o seu código ele estará sendo executado nessa ordem.

1 -> 3 ->11 -> 12 -> 13 -> 14->3 -> 4 -> 5-> 6-> 7-> 8

O que coloquei em negrito aqui em cima na verdade é chamado uma vez para cada iteração do for da linha 12, ou seja uma vez para cada tr.

Att.

Entendi, estava utilizando uma variável não definida na linha 4, ao trocar pela do parâmetro funcionou de primeira.

Acho que finalmente entendi o que está acontecendo no código, com ordem de execução, e também fiz um console.log para saber que está retornando o conteudo html de cada tr paciente por vez na linha 4.

Achei curioso, a função ser executada várias vezes no loop, pelo que entendi, isso deve acontecer por que toda a função é um parâmetro, especificado na linha 3.

Agora sobre parâmetro comportamento da linha 14, como que retorna algo de trDoPacienteAtual para trAtual da linha 3, se a função não tem return ?