Loops - vídeo 4.2

Vou melhorar minha questão:

Por que em

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

o [0]

é incrementado dinamicamente?

José esta sendo informado o [0] dentro do for porque sempre que utilizamos:

document.getElementsByClassName(class);

Ele nos devolve um array(lista) de objetos encontrados, como no caso do for queremos pegar apenas o primeiro de cada paciente então informamos o [0] no final.

No seu código deu erro ao informar [pacienteAtual] porque cada paciente possui apenas uma coluna para nome, peso e altura, por tanto vai chegar uma hora no seu for que será o numero 1 onde ocorrerá o erro pois seu paciente não vai ter duas coluna com a classe peso.

Espero ter ajudado.

Eis abaixo o código completo.

Quando faço: var trsPacientes = document.getElementsByClassName("paciente");

tenho um array de quatro elementos, cada um contendo:

    tr class="paciente"     
        td class="info-nome"
        td class="info-peso"
        td class="info-altura
        td class="info-imc"
    /tr

Quando entra no for, na primeira linha é criado um novo array:

var pacienteTr = trsPacientes[posicaoAtual];

Só que esse novo array vai percorrer o array anterior e nele haverá os elementos:

td class="info-nome"
td class="info-peso""
td class="info-altura
td class="info-imc"

A partir dali já é possível isolar cada célula da tabela e criar o objeto paciente.

Mas ainda não entendo o [0] nessas linhas:

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

e nessa:

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




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

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

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

    console.log(tdNome);
    console.log(tdPeso);
    console.log(tdAltura);

    var paciente = {
        nome : tdNome.textContent,  
        peso : tdPeso.textContent,  
        altura : tdAltura.textContent,
    };
    console.log(paciente);
    if (paciente.altura != 0) {
        var imc = paciente.peso / (paciente.altura * paciente.altura);
        var tdImc = pacienteTr.getElementsByClassName("info-imc")[0];
        tdImc.textContent = imc;
       } else {
        console.log("Não posso executar uma divisão por 0!");
       }
}

Oi José Angelo, tudo bem? Cara, muito legal sua dúvida, pode ser realmente um pouco confuso esse código mesmo! Vou tentar te explicar!

Quando vc faz:

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

Vc tá pegando um array com vários elementos, ou seja, no seu HTML tem várias TAGS com a classe 'paciente'.

Dai vc pega todos esses elementos no Javascript com o código acima e executa o FOR nesse array.

A sua questão pelo que eu entendi é dentro do for, nessa parte do código:

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

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

Afinal de contas, o FOR tá iterando no array

trsPacientes

mas logo em seguida ele tá criando outros arrays! Esses arrays que ele criou dentro do for vão ser iterados também?

A resposta é : Não!

O motivo que esses arrays foram criados é por causa de limitações do Javascript, ou seja, a função "getElementsByClassName" SEMPRE retorna um array, mesmo que vc esteja buscando apenas UM elemento!

Como a gente sabe que só existe um elemento, a gente sabe que esse array só vai ter 1 posição, ou seja, a posição [0].

Pois é... por isso foi escrito dessa maneira.

Bom, isso acontece porque diferentemente de ID, o CLASS no html pode se repetir em várias TAGS. (:

Quando vc tentou fazer o seguinte código:

var tdNome     = pacienteTr.getElementsByClassName("info-nome")[posicaoAtual]; //array de classe nome
    var tdPeso     = pacienteTr.getElementsByClassName("info-peso")[posicaoAtual];
    var tdAltura   = pacienteTr.getElementsByClassName("info-altura")[posicaoAtual];

ele deu pau, isso porque apesar da gente estar chamando um array, agente sabe que só tem uma posição, a posição [0]. Se a gente tentar iterar esses arrays tbm, vai dar erro, isso porque ele tentaria acessar a posição [1] que não existe.

Bom, acho que foi isso sua dúvida, não? Qualquer coisa pode falar aqui que eu te respondo (:

Abração!