Solucionado
E aeee pessoal, blz? Eu fiz de um jeito bem diferente da professora sendo que deu certo.
const teclasDoApp = document.querySelectorAll(".tecla");
const audiosMidiBateria = document.querySelectorAll("audio");
function tocarSom(som) {
som.play();
}
teclasDoApp.forEach((tecla, index) => {
const audio = audiosMidiBateria[index];
tecla.onclick = () => tocarSom(audio);
});
A dúvida que fica no ar é a seguinte....tem jeito certo ou melhor de fazer algo? rsrs
Obrigado \0/
hoje, com a Alura e o Google Gemini
Cara, depende muito do contexto, projeto e time que voce esta. Geralmente evitar: redundancia de codigo -> Copiar e colar o mesmo codigo em diversos lugares. Opte sempre em centralizar (Conceito de orientacao a Objeto)
codigo legivel -> Evitar utilizar variaveis ou metodos por exemplo sem significado. Exemplo: const X.
codigo objetivo -> Ai vai muito da logica, mas evitar dar muitas voltas para solucionar um problema.
Dicas essas, para qualquer linguagem.
Entao sempre aplique as boas praticas e em um projeto de verdade, chame o coleguinha para avaliar seu codigo. Ajuda muito na evolucao.
http://www.devwilliam.com.br/extra/profissional/10-boas-praticas-de-programacao
https://www.sydle.com/br/blog/clean-code-602bef23da4d09680935509b/
Bom dia, irmão. Blz? Obrigado pela explicação.
Então no seu ponto de vista fazendo um código limpo e com objetivo alcançado a lógica n importa muito? Pq é justamente esse meu problema, eu nunca sei se é melhor fazer do jeito A ou B...já que nos 2 casos funcionou rsrs.
Obrigado.
Codigo Limpo e Logica, estao automaticamente ligado.
Mas a ideia, seria a mesma que voce se locomover do ponto A para o B.
Voce pode ir pelo caminho mais rapido ou pode dar uma volta, e chegar da mesma forma. Entao, o mais importante eh validar a performance e construir algo legivel. O que eh algo legivel? Como praticar? Escreve um codigo e volta nele daqui 1 mes. Se entender, o codigo esta OK. Caso contrario, temos um problema.
Caso queira mandar exemplos de Codigo A e Codigo B. Acho que fica mais facil de explicar.
Opa, irmão. Obrigado novamente pela resposta \0/.
Então, eu tenho o costume de ver o desafio do curso e ir fazendo antes da aula ensinar (do meu jeito). Então quando a professora mostrou ideia do app, eu comecei tentar resolver.
E final tive o código que mostrei no post... mas a professora resolveu dessa forma aqui. É nesse ponto que me deixa sem saber quando é a melhor solução de resolver algo e o pq disso?
function tocaSom(idElementoAudio) {
document.querySelector(idElementoAudio).play();
}
const listaDeTeclas = document.querySelectorAll(".tecla");
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);
};
}
O que temos aqui para Analisar.
Entao, aparentemente o codigo da professora eh um pouco mais antigo de desevolvimento. Ela nao utiliziou o forEach, o que nao eh um problema. O que nao entendi o motivo, foi declarar variaveis dentro do For. Isso pode ser problema em alguns momentos.
Outro detalhe, seria declaracao de Funcao, antes de variavel. Dependendo do projeto o pessoal prefere Variavel antes das funcoes. A nao ser que a Variavel vai receber o valor da funcao.
Mas a grosso modo, ambos estao bem escrito. Entao ficaria apenas o teste de performance que ao meu ver, nao deveria dar muita diferenca. E sendo aula, nao vem ao caso.
Ainda assim, seu codigo tem menos linha, entao se esta funcionando corretamente, "esta melhor".
Agora deu pra entender. Eu sempre fico nessa dúvida pq eu vou tentando resolver do meu jeito pra aprender e relembrar as coisas. E como no final sempre fica BEM diferente rsrs, ai cria esses tipos de dúvida.
Valeu mesmo pelo tempo dedicado a ensinar e explicar.