JavaScript - Placement dans un fichier HTML

Il est possible d'inclure du code JavaScript n'importe où dans un document HTML. Cependant, les moyens les plus préférés pour inclure JavaScript dans un fichier HTML sont les suivants:

  • Script dans la section <head> ... </head>.

  • Script dans la section <body> ... </body>.

  • Script dans les sections <body> ... </body> et <head> ... </head>.

  • Script dans un fichier externe, puis inclure dans la section <head> ... </head>.

Dans la section suivante, nous verrons comment nous pouvons placer du JavaScript dans un fichier HTML de différentes manières.

JavaScript dans la section <head> ... </head>

Si vous souhaitez exécuter un script sur un événement, par exemple lorsqu'un utilisateur clique quelque part, vous placerez ce script dans la tête comme suit -

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

Ce code produira les résultats suivants -

JavaScript dans la section <body> ... </body>

Si vous avez besoin d'un script à exécuter pendant le chargement de la page afin que le script génère du contenu dans la page, alors le script va dans la partie <body> du document. Dans ce cas, aucune fonction n'est définie à l'aide de JavaScript. Jetez un œil au code suivant.

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

Ce code produira les résultats suivants -

JavaScript dans les sections <body> et <head>

Vous pouvez mettre votre code JavaScript dans les sections <head> et <body> comme suit -

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

Ce code produira le résultat suivant -

JavaScript dans un fichier externe

Au fur et à mesure que vous commencez à travailler plus intensivement avec JavaScript, vous constaterez probablement qu'il existe des cas où vous réutilisez un code JavaScript identique sur plusieurs pages d'un site.

Vous n'êtes pas limité à conserver un code identique dans plusieurs fichiers HTML. lescript La balise fournit un mécanisme pour vous permettre de stocker JavaScript dans un fichier externe, puis de l'inclure dans vos fichiers HTML.

Voici un exemple pour montrer comment vous pouvez inclure un fichier JavaScript externe dans votre code HTML en utilisant script tag et ses src attribut.

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

Pour utiliser JavaScript à partir d'une source de fichier externe, vous devez écrire tout votre code source JavaScript dans un simple fichier texte avec l'extension ".js", puis inclure ce fichier comme indiqué ci-dessus.

Par exemple, vous pouvez conserver le contenu suivant dans filename.js fichier et ensuite vous pouvez utiliser sayHello fonction dans votre fichier HTML après avoir inclus le fichier filename.js.

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