JavaScript - colocação em arquivo HTML

É fornecida uma flexibilidade para incluir o código JavaScript em qualquer lugar em um documento HTML. No entanto, as maneiras mais preferidas de incluir JavaScript em um arquivo HTML são as seguintes -

Script na seção <head> ... </head>.
Script na seção <body> ... </body>.
Script nas seções <body> ... </body> e <head> ... </head>.
Script em um arquivo externo e, em seguida, inclua na seção <head> ... </head>.

Na seção a seguir, veremos como podemos colocar JavaScript em um arquivo HTML de maneiras diferentes.

JavaScript na seção <head> ... </head>

Se você quiser que um script seja executado em algum evento, como quando um usuário clica em algum lugar, você colocará esse script na cabeça da seguinte maneira -

<html>
   <head>      
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>     
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello()" value = "Say Hello" />
   </body>  
</html>

Este código produzirá os seguintes resultados -

JavaScript na seção <body> ... </body>

Se você precisar que um script seja executado conforme a página carrega, para que o script gere conteúdo na página, o script vai para a parte <body> do documento. Nesse caso, você não teria nenhuma função definida usando JavaScript. Dê uma olhada no código a seguir.

<html>
   <head>
   </head>
   
   <body>
      <script type = "text/javascript">
         <!--
            document.write("Hello World")
         //-->
      </script>
      
      <p>This is web page body </p>
   </body>
</html>

Este código produzirá os seguintes resultados -

JavaScript nas seções <body> e <head>

Você pode colocar seu código JavaScript na seção <head> e <body> da seguinte maneira -

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>
   </head>
   
   <body>
      <script type = "text/javascript">
         <!--
            document.write("Hello World")
         //-->
      </script>
      
      <input type = "button" onclick = "sayHello()" value = "Say Hello" />
   </body>
</html>

Este código produzirá o seguinte resultado -

JavaScript em arquivo externo

À medida que você começar a trabalhar mais extensivamente com JavaScript, provavelmente descobrirá que há casos em que está reutilizando código JavaScript idêntico em várias páginas de um site.

Você não está restrito a manter um código idêntico em vários arquivos HTML. oscript tag fornece um mecanismo para permitir que você armazene JavaScript em um arquivo externo e, em seguida, inclua-o em seus arquivos HTML.

Aqui está um exemplo para mostrar como você pode incluir um arquivo JavaScript externo em seu código HTML usando script tag e seu src atributo.

<html>
   <head>
      <script type = "text/javascript" src = "filename.js" ></script>
   </head>
   
   <body>
      .......
   </body>
</html>

Para usar o JavaScript de uma fonte de arquivo externa, você precisa escrever todo o seu código-fonte JavaScript em um arquivo de texto simples com a extensão ".js" e, em seguida, incluir esse arquivo conforme mostrado acima.

Por exemplo, você pode manter o seguinte conteúdo em filename.js arquivo e então você pode usar sayHello função em seu arquivo HTML após incluir o arquivo filename.js.

function sayHello() {
   alert("Hello World")
}