3
respostas

Relação entre o while e os botões html

Olá, pessoal!

Queria entender melhor o que acontece no while quando se clica em um dos botões que representam os sons.

Até agora entendi que a constante listaDeTeclas recebeu todos os botões que contém a classe '.tecla' e que a condição do while é que o contador seja menor que a quantidade de itens da lista (listaDeTeclas.length). Mas como exatamente o while "sabe" que foi apertado determinado botão? Não sei se a pergunta ficou confusa, mas se refere a esse trecho do código:

const listaDeTeclas = document.querySelectorAll('.tecla');

let contador = 0;

while (contador < listaDeTeclas.length) {
    listaDeTeclas[contador].onclick = tocaSomPom;

    contador = contador + 1;

    console.log(contador);
}

Agradeço desde já!

3 respostas

Oii Alonso, tudo bem?

O while, por si só, não "sabe". O while é uma estrutura que repete uma rotina (o código dentro das chaves {}) até que a condição seja falsa.

Então aqui, você quer entender como que cada botão conseguiu reproduzir uma dada funcionalidade, correto?

Vamos observar este trecho da rotina do while:

listaDeTeclas[contador].onclick = tocaSomPom;

listaDeTeclas é uma lista com botões, a cada posição dessa lista, temos 1 botão do teclado (1 elemento HTML). Portanto se usarmos o colchetes com o número do índice de um elemento da lista, podemos acessar um elemento, por exemplo: listaDeTeclas[1]

Voltando ao código: listaDeTeclas[contador].onclick = tocaSomPom; é possível perceber que no local de um número no colchetes temos a variável contador. É essa variável que é o "x da questão". Pois a cada repetição do while, ela tem um valor diferente, acessando cada elemento/botão da listaDeTeclas, até que a condição do while seja falsa.

Naquela linha que fizemos a programação para adicionar uma função para o clique de cada um dos botões do teclado do MIDI. Então, não é que o while "sabe qual botão", mas sim todos os botões receberam uma funcionalidade para seu evento click.

Será que agora consegui explicar melhor? Um abraço!

Oi, Vanessa!

Acho que não me expressei direito.

Perguntei sobre o while "saber" qual botão foi apertado porque não consegui acompanhar o raciocínio: quando clico na botão "clap", por exemplo, que corresponde ao item de índice [2] na lista, porque a rotina é executada até esse índice [2], se na condição foi estabelecido o limite da quantidade de itens da lista (no caso, 9)?

Obrigado pelo retorno!

Oii Alonso,

Humm, peraí, estou tentando entender sua dúvida. Você está dizendo que no seu projeto só está funcionando o click até o botão clap (índice 2)? Pois era para estar para todas as teclas sim (no caso as 9 teclas).

Se preferir podemos nos conectar num canal de voz no Discord a Alura.

abraços

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software