Où placer les instructions JavaScript ?

Les instructions JavaScript, avec ou sans jQuery, peuvent être écrites directement dans la page Web. Elles peuvent également être placées dans un fichier .js..

Quelle approche est préférable ? Il y a différentes écoles de pensées à ce sujet. Une chose est certaine : si le code JavaScript doit être utilisé sur plus d'une page Web, l'utilisation d'un fichier .js permettra de ne l'écrire qu'une seule fois.

Dans tous les cas, ce sont les balises <script> et </script> qui indiqueront au navigateur que le code qu'elles contiennent est un script. 

Mais où doit-on placer ces balises ? C'est ce que nous allons voir.

▼Publicité

Emplacement des balises <script> contenant le code JavaScript

Techniquement, les balises <script> et </script> peuvent être placées n'importe où dans la page Web. En pratique, cependant, on les retrouvera généralement :

  • dans la zone <head> d'une page Web

    Ex :

    HTML

    <head>

        ...

        <script>

            ...

        </script>

        ...

    </head>

    ou

  • juste avant la fermeture de la balise <body>

    Ex :

    HTML

    <body>

        ...

        <script>

            ...

        </script>

    </body>

Code JavaScript écrit dans un fichier .js

Dans le cas où le code JavaScript est placé dans un fichier dont l'extension est .js, il faudra faire référence à ce fichier à l'aide de l'attribut src de la balise <script>. Ici encore, la balise <script> pourra être placée dans le <head> ou à la fin du <body>.

Ex :

HTML

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

Notez que la balise <script> ne peut pas être auto-fermante. Ainsi, la balise <script ... /> ne sera pas acceptée. Vous devez donc écrire <script ... ></script> même s'il a rien entre les deux balises.

Moment où les instructions JavaScript seront exécutées

Si les instructions JavaScript sont associées à un événement, par exemple un clic sur un bouton, il est possible de placer ces instructions dans les balises <script> ou dans le fichier .js sans aucune précaution. Les instruction seront simplement exécutées lorsque l'événement surviendra.

Ex :

HTML

<script>

   function recalculer() {

      ...

   }

</script>

...

<input type="button" value="Recalculer" onclick="recalculer();" />

Dans d'autres cas, il faut prévoir un mécanisme qui se chargera d'exécuter ces instructions. Puisque la majorité des instructions JavaScript travaillent avec le DOM, on placera les instructions dans $(document).ready(function () { ... }); ou dans sa version raccourcie, $(function () { ... });. En effet, les instructions placées à cet endroit seront automatiquement exécutées dès que le DOM sera chargé.

Ceci fonctionnera à condition d'avoir correctement intégré jQuery dans la page Web.

Ex :

HTML

<script>

    $(function () {

        ...   // les instructions placées ici seront exécutées dès que le DOM est chargé

    });

</script>

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories