2
respostas

Alguém pode me explicar melhor?

Olá, estou apenas com dúvida nesse const idAudio = #som_${instrumento};, afinal, o que esse $ e o instrumento entre chaves indica? Apenas quero entender a lógica por trás, se alguém puder me explicar melhor, agradeceria

2 respostas

Olá Ana, tudo bem?

Respondendo à sua pergunta, o $ é um caractere especial em JavaScript que indica que o que vem a seguir é uma variável. No caso do seu código, instrumento é uma variável que contém o nome do instrumento que você está usando.

Ao utilizar o $ junto com as chaves {}, você está criando uma template string, que permite que você insira variáveis dentro de uma string de forma mais fácil e legível. Dessa forma, o valor da variável instrumento é inserido na string, formando o valor final de idAudio.

Espero ter ajudado a esclarecer sua dúvida. Se ainda tiver alguma pergunta, é só falar! Bons estudos!

Nessa parte do código foi utilizado uma Template String, que é uma das formas de criar Strings (Strings são utilizadas para representarem textos) no JS.

Antes de explicar essa parte mais profundamente, é necessário voltar algumas linhas no código para entender de onde surgiu o "{instrumento}".

while (contador < listaDeTeclas.length){
    const tecla = listaDeTeclas[contador];
    const instrumento = tecla.classList[1];

Acima, é visto que "instrumento" é uma constante que está recebendo os valores de tecla.classList[1] através do laço de repetição. classList é uma propriedade do JS utilizada para acessar as listas de classe atreladas a um atributo, neste caso, ao atributo "teclas". O índice 1 indica que está sendo acessada a segunda classe dos atributos teclas, que neste caso são: tecla_pom, tecla_clap, tecla_tim, tecla_puff, tecla_splash, tecla_toim, tecla_psh, tecla_tic, tecla_tom. Ou seja, conforme a estrutura de repetição é sendo executada, é atribuído a constante "instrumento" o nome das teclas do piano.

Agora, observe no código index.html que os sons de cada tecla possui um id único, mas todos compartilham entre si a característica de começarem por "#som_"

    <audio src="sounds/keyq.wav" id="**som_**tecla_pom"></audio>
    <audio src="sounds/keyw.wav" id="**som_**tecla_clap"></audio>
    <audio src="sounds/keye.wav" id="**som_**tecla_tim"></audio>
    <audio src="sounds/keya.wav" id="**som_**tecla_puff"></audio>
    <audio src="sounds/keys.wav" id="**som_**tecla_splash"></audio>
    <audio src="sounds/keyd.wav" id="**som_**tecla_toim"></audio>
    <audio src="sounds/keyz.wav" id="**som_**tecla_psh"></audio>
    <audio src="sounds/keyx.wav" id="**som_**tecla_tic"></audio>
    <audio src="sounds/keyc.wav" id="**som_**tecla_tom"></audio>

Como já dito anteriormente, a constante "instrumento" está recebendo o nome das teclas do piano, sendo elas: tecla_pom, tecla_clap, tecla_tim, tecla_puff, tecla_splash, tecla_toim, tecla_psh, tecla_tic, tecla_tom.

Se você observar, verá que o id é formado por #som_+o nome da tecla. Ou seja: #som_instrumento = id correto de uma tecla, e assim poderá atribuí-la a constante idAudio:

const idAudio = `#som_${instrumento}`;

O cifrão é utilizado para interpolar a constante "instrumento" dentro da template String, ou seja: para permitir que o valor da constante seja inserido diretamente na String e os colchetes representam o "valor" da constante "instrumento".

Ou seja, na primeira repetição, a const idAudio terá o valor de: #som_tecla_pom e, consequentemente, terá, de fato, o áudio da tecla como valor.

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