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
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
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.