Javascript - Comentários

Comentários

Manipuladores de JavaScript inline

Note que às vezes você vai encontrar código JavaScript escrito dentro do HTML. Isso deve ser algo como:

function criarParagrafo() {
  let para = document.createElement('p');
  para.textContent = 'Você clicou o botao!';
  document.body.appendChild(para);
}

<button onclick="criarParagrafo()">Me clique!</button>

Você pode tentar essa versão na nossa demonstração abaixo.

Essa demonstração tem exatamente a mesma funcionalidade que vimos nas primeiras duas seções, exceto que o elemento <button> inclui um manipulador inline onclick para fazer a função ser executada quando o botão é clicado.

Contudo, por favor, não faça isso. É uma má prática poluir seu HTML com JavaScript, e isso é ineficiente — você teria que incluir o atributo onclick="criarParagrafo()" em todo botão que você quisesse aplicar JavaScript.

Usando uma estrutura feita de puro JavaScript permite a você selecionar todos os botões usando uma instrução. O código que nós usamos acima para servir a esse propósito se parece com isso:

const botoes = document.querySelectorAll('button');

for(var i = 0; i < botoes.length ; i++) {
  botoes[i].addEventListener('click', criarParagrafo);
}

Isso talvez parece ser mais do que o atributo onclick, mas isso vai funcionar para todos os botões, não importa quantos tem na página, e quantos forem adicionados ou removidos. O JavaScript não precisará ser mudado.