1
resposta

Alguem pode me explica o passo a passo do codigo?

function tocaSom(idElementoAudio) {
    document.querySelector(idElementoAudio).play();
}

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

// para

for (let contador =0; contador < listaDeTeclas.length; contador++) {
    const tecla = listaDeTeclas[contador];
    const instrumento = tecla.classList[1];
    const idAudio = `#som_${instrumento}` ;  //template string

    tecla.onclick = function () {
        tocaSom(idAudio);
    }

}
1 resposta

Olá Deivid, fiz meu código com os seguintes comentários:

//idElementoAudio = Nome significativo para a referência,no caso parâmetro
function tocaSom (idElementoAudio) { //Nesse caso, precisamos de um parâmetro para rodar a função de forma genérica 
    document.querySelector(idElementoAudio).play(); 
}

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

//let é usado para definir algo (aqui no caso, uma variável)
//let contador = 0; - usado na declaração while


//condição enquanto - espera receber o retorno como Verdadeiro ou falso - dpende de algo externo
//no caso o contador
//while (contador < listaDeTeclas.length) {

//é a condição para e o contador é declarado dentro dos ()
for (let contador = 0; contador < listaDeTeclas.length; contador++) { //contador++, incrementa o contador de 1 em 1

    const tecla = listaDeTeclas[contador];
    const instrumento = tecla.classList[1];

    //Template string
    const idAudio = `#som_${instrumento}`; //string dinâmica por isso entre {} e ``
    //Usaremos a função anônima - function(), pq ela é o valor de algum atributo ou 
    //está sendo armazenada dentro de alguma referência constante ou variável. 
    tecla.onclick = function () {
        tocaSom(idAudio);
    }
   // contador = contador + 1; Usado no while

}

Espero que possa ajudá-lo a entender um pouco mais.

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