Javascript - JavaScript externo

JavaScript externo

Isso funciona muito bem, mas e se nós quiséssemos colocar nosso JavaScript em um arquivo externo? Vamos explorar isso agora.

1. Primeiro, crie um novo arquivo na mesma pasta que está o arquivo HTML de exemplo. Chame-o de script.js — tenha certeza de que o nome do arquivo tem a extensão .js, pois é assim que ele será reconhecido como JavaScript.
2. Agora substitua o elemento atual <script> pelo seguinte código:

   <script src="script.js" defer></script>

3. Em script.js, adidione o seguinte script:

   function createParagraph() {
     let para = document.createElement('p');
     para.textContent = 'Você clicou no botão!';
     document.body.appendChild(para);
   }
   
   const buttons = document.querySelectorAll('button');
   
   for(let i = 0; i < buttons.length ; i++) {
     buttons[i].addEventListener('click', createParagraph);
   }

4. Salve e atualize seu navegador, e você deverá ver a mesma coisa! Funciona igualmente, mas agora nós temos o JavaScript em um arquivo externo. Isso é geralmente uma coisa boa em termos de organização de código, e faz com que seja possível reutilizar o código em múltiplos arquivos HTML. Além disso, o HTML fica mais legível sem grandes pedaços de script no meio dele.