Fala, Henrique! Tudo bom contigo?

A princípio eu achei isso um bocado confuso também, mas pelo que eu entendi e fez sentido pra mim é que, dessa forma, é como se você estivesse aplicando a propriedade '.onclick = tocasom' em cada elemento individualmente, só que faz isso de forma mais breve utilizando dessa forma. O que vai importar realmente é o elemento que está sendo clicado.

Você poderia ter da mesma forma, por exemplo, esse código:

listadeteclas[1].onclick = tocasom;
listadeteclas[2].onclick = tocasom;
listadeteclas[3].onclick = tocasom;

E assim sucessivamente até o fim da lista, só que você teria retrabalho caso quisesse adicionar uma nova tecla, além de que teria que escrever bem mais, certo.

Espero ter te ajudado, bons estudos e abraços, meu amigo!

Boa noite, ainda não ficou claro para mim como é realizada esta utilização do While..

Boa noite, Henrique! Tudo certo?

Certo, vou tentar explicar novamente de uma forma que você consiga entender. O uso do while nesse código está puramente pra deixar o código mais compacto e eficiente, sem que seja realmente necessário fazer um looping, nesse caso. Nesse projeto do Alura Midi, nós temos ao todo umas 9 teclas, se não me engano, então, ao invés do while, você poderia fazer dessa forma aqui:

function tocasom () {
    document.querySelector('#som_tecla_pom').play();
}

const listadeteclas = document.querySelectorAll('.tecla')
    
listadeteclas[0].onclick= tocasom;
listadeteclas[1].onclick= tocasom;
listadeteclas[2].onclick= tocasom;
listadeteclas[3].onclick= tocasom;
listadeteclas[4].onclick= tocasom;
listadeteclas[5].onclick= tocasom;
listadeteclas[6].onclick= tocasom;
listadeteclas[7].onclick= tocasom;
listadeteclas[8].onclick= tocasom;

Dessa forma aqui, você definiu que cada elemento da 'listadeteclas', ou seja, cada tecla, vai chamar a função 'tocasom' ao ser clicada, certo. Só que aqui você teve que escrever tecla por tecla e, se quiser adicionar mais, vai ter todo o trabalho de vir no arquivo JS e adicionar depois uma por uma também. Se você quisesse fazer a emulação de piano, por exemplo, que tem sei lá quantas teclas, se tornaria algo bem inviável escrever o código desse jeito, né. É aí que entra o while, ou for, ou até o forEach, mas a ideia é que você use um laço de repetição pra fazer esse trabalho de adicionar em cada elemento a função de chamar 'tocasom' quando for clicada, além de que você pode adiocionar quantos elementos você quiser depois sem ter que se preocupar com o modificar o código desse seu arquivo JS, porque, quando acionar uma tecla nova, ela automaticamente já vai estar inclusa na lista de teclas.

Pra ficar mais fácil de entender, você poderia substituir o termo 'contador' por 'posicaoTecla', se isso não for atrapalhar o restante do seu código entrando em conflito com algum outro nome de variável, né. E ficaria assim:

let posicaoTecla = 0

//enquanto

while (posicaoTecla < listadeteclas.length) {
    
    listadeteclas[posicaoTecla].onclick= tocasom

    posicaoTecla= posicaoTecla +1
}

Aí você conseguiria ler esse código como: Enquanto a posição da tecla for menor que o número total de teclas, adicione na tecla daquela determinada posição a capacidade de chamar a função 'tocasom' quando for clicada.

Acredito que agora tenha ficado mais claro, meu amigo, mas se ainda estiver com alguma dúvida, pode me chamar aqui que tento te ajudar novamente. Abraços e bons estudos!

Agora eu entendi, o posicaoTecla só serve para atribuir a quantidade de valores que minha a variável listadeteclas tem, no caso o posiçãoTecla pode assumir todos os valores que forem menores que o **** listadeteclas.length**** vez que a lista se inícia na posição 0, e eu não preciso alterar o código caso eu queia adicionar mais valores a variável listadeteclas. Muito obrigado, agora entrou na minha cabeça.

Eu também fiquei com essa dúvida e fiz essa pesquisa também. Entendi que o loop é executado para que cada tecla receba como atributo a função que lhe é fornecida. Como o contador irá incrementar até a nossa quantidade total de teclas (length) ele irá atribuir à cada uma por vez, pois incrementa de 1 em 1e ele mesmo seleciona o índice da lista []. Mas o evento só será disparado quando houver o click, sendo assim, o que fizemos foi apenas atribuir a função à cada tecla de forma automática e isso é incrível. Segue a fonte da resposta completa: https://g.co/bard/share/fce23fe36812