JS pra onde?

A tag <script>

Em HTML, o código JavaScript é inserido entre as tags <script> e </script>

Exemplo:


  <script>

  document.getElementById("demo").innerHTML = "Meu primeiro JavaScript";

  </script>

Funções e eventos JavaScript

Um JavaScript function é um bloco de código JavaScript, que pode ser executado quando "chamado".

Por exemplo, uma função pode ser chamada quando ocorre um evento , como quando o usuário clica em um botão.

JavaScript em <head> ou <body>

Você pode colocar qualquer número de scripts em um documento HTML.

Os scripts podem ser colocados na <body>, ou na <head> seção de uma página HTML, ou em ambas.

JavaScript em <head>

Neste exemplo, um JavaScript functioné colocado na <head> seção de uma página HTML.

A função é invocada (chamada) quando um botão é clicado:

Exemplo:


  <!DOCTYPE html>
  <html>
  <head>

  <script>
  function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
  }
  </script>

  </head>
  <body>
  <h2>Demo JavaScript in Head</h2>

  <p id="demo">A Paragraph</p>

  <button type="button" onclick="myFunction()">Tente</button>

  </body>
  </html>

JavaScript em <body>

Neste exemplo, um JavaScript functioné colocado na <body> seção de uma página HTML.

A função é invocada (chamada) quando um botão é clicado:

Exemplo:


  <!DOCTYPE html>
  <html>
  <head>
  </head>
  <body>
  <h2>Demo JavaScript in Head</h2>

  <p id="demo">A Paragraph</p>

  <button type="button" onclick="myFunction()">Tente</button>

  <script>
  function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
  }
  </script>

  </body>
  </html>

JavaScript externo

Os scripts também podem ser colocados em arquivos externos:

Arquivo externo: meuScript.js


  function myFunction() {
    document.getElementById("demo").innerHTML = "Paragrafo alterado.";
  }

Os scripts externos são práticos quando o mesmo código é usado em muitas páginas da web diferentes.

Os arquivos JavaScript têm a extensão de arquivo .js .

Para usar um script externo, coloque o nome do arquivo de script no src atributo (fonte) de uma <script> tag:

Exemplo:


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

Você pode colocar uma referência de script externa em <head>ou <body>como desejar.

O script se comportará como se estivesse localizado exatamente onde a <script>tag está localizada.

Os scripts externos não podem conter <script> tags.

Vantagens do JavaScript externo

Colocar scripts em arquivos externos tem algumas vantagens:

Ele separa HTML e código
Isso torna o HTML e o JavaScript mais fáceis de ler e manter
Arquivos JavaScript em cache podem acelerar o carregamento da página

Para adicionar vários arquivos de script a uma página - use várias tags de script:

Exemplo:


  <script src="myScript1.js"></script>
  <script src="myScript2.js"></script>

Referências Externas

Um script externo pode ser referenciado de 3 maneiras diferentes:

Com um URL completo (um endereço da web completo)
Com um caminho de arquivo (como / js /)
Sem nenhum caminho

Este exemplo usa um URL completo para vincular a myScript.js:

Exemplo:


  <script src="https://www.w3schools.com/js/myScript.js"></script>

Este exemplo usa um caminho de arquivo para vincular a myScript.js:

Exemplo:


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

Este exemplo não usa nenhum caminho para vincular a myScript.js:

Exemplo:


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

Fonte: w3schools