JavaScript - Posizionamento nel file HTML

C'è una flessibilità data per includere codice JavaScript ovunque in un documento HTML. Tuttavia, i modi più preferiti per includere JavaScript in un file HTML sono i seguenti:

  • Script nella sezione <head> ... </head>.

  • Script nella sezione <body> ... </body>.

  • Script nelle sezioni <body> ... </body> e <head> ... </head>.

  • Script in un file esterno e quindi includilo nella sezione <head> ... </head>.

Nella sezione seguente vedremo come inserire JavaScript in un file HTML in modi diversi.

JavaScript nella sezione <head> ... </head>

Se desideri che uno script venga eseguito su un evento, ad esempio quando un utente fa clic da qualche parte, posizionerai quello script nella testa come segue:

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

Questo codice produrrà i seguenti risultati:

JavaScript nella sezione <body> ... </body>

Se è necessario eseguire uno script durante il caricamento della pagina in modo che lo script generi il contenuto nella pagina, lo script va nella parte <body> del documento. In questo caso, non avresti alcuna funzione definita utilizzando JavaScript. Dai un'occhiata al seguente codice.

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

Questo codice produrrà i seguenti risultati:

JavaScript nelle sezioni <body> e <head>

Puoi inserire il tuo codice JavaScript nella sezione <head> e <body> come segue:

<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>

Questo codice produrrà il seguente risultato:

JavaScript nel file esterno

Quando inizi a lavorare in modo più esteso con JavaScript, probabilmente scoprirai che ci sono casi in cui stai riutilizzando codice JavaScript identico su più pagine di un sito.

Non sei limitato a mantenere un codice identico in più file HTML. Ilscript tag fornisce un meccanismo per consentire di memorizzare JavaScript in un file esterno e quindi includerlo nei file HTML.

Di seguito è riportato un esempio per mostrare come includere un file JavaScript esterno nel codice HTML utilizzando script tag e relativo src attributo.

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

Per utilizzare JavaScript da un file sorgente esterno, è necessario scrivere tutto il codice sorgente JavaScript in un semplice file di testo con estensione ".js" e quindi includere quel file come mostrato sopra.

Ad esempio, puoi mantenere il seguente contenuto in formato filename.js file e quindi puoi usare sayHello funzione nel file HTML dopo aver incluso il file filename.js.

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