Javascript - Implantation du code

Juin 2017

A quel emplacement insérer le Javascript dans votre page HTML

Il existe plusieurs façons d'inclure du JavaScript dans une page HTML :

  • Grâce à la balise <script>
  • En mettant le code dans un fichier
  • Grâce aux événements

Dans la balise script

Le code Javascript peut être inséré où vous le désirez dans votre page Web entre les balises script (<script></script>) et il peut y avoir plusieurs balises script contenant du javascript dans une page, vous devez toutefois veiller à ce que le navigateur ait entièrement chargé votre script avant d'exécuter une instruction. En effet, lorsque le navigateur charge votre page Web, il la traite de haut en bas, de plus vos visiteurs (souvent impatients) peuvent très bien interrompre le chargement d'une page, auquel cas si l'appel d'une fonction se situe avant la fonction dans votre page il est probable que cela génèrera une erreur si cette fonction n'a pas été chargée.

Ainsi, on place généralement tous les script dans la balise d'en-tête (ce sont les éléments située entre les balises <head> et </head>) de plus la visibilité d'une page sera accrue.

Par soucis d'optimisation du chargement d'une page il peut etre envisagé de placer les scripts en fin de page de cette manière tous les éléments d'une page seront chargé en premier (texte,images...etc) les script se trouvant en fin de page seront chargé en dernier.

Les événements qui servent a déclenché les script seront quant à eux soit placés dans le corps de la page entre les balises (<body> et </body>) comme attribut d'une commande HTML... soit créé dynamiquement au chargement de la page en passant par une fonction d'initialisation

   <html>
   <head>
   <script type="text/javascript">

   function bonjour(){

   alert('bonjour a tous');

   }

   </script>
   </head>
   <body>
   <button onclick='bonjour()'>click</button>
    </body>
    </html>


On peut ainsi (en passant un argument différent de "JavaScript") utiliser d'autres langages de programmation que celui-ci (par exemple le VbScript).

en html 5 il n'y a pas obligation de préciser le type de langage la balise script suffit a elle seule.

Pour utiliser différentes versions de JavaScript tout en conservant une certaine compatibilité, il suffit de déclarer plusieurs balises script ayant chacune comme paramètre la version du JavaScript correspondante.

Dans un fichier externe

Il est possible et même conseillé de mettre les codes de JavaScript en annexe dans un fichier externe.


le fichier en lui même comportera uniquement du code sans les balises script

function bonjour(){

alert('bonjour a tous');

}


il sera enregistré avec l'extension que l'on veut mais par convention on utilisera .js pour du code et .json pour des donné formaté avec la notation javascript objet

Le code à insérer utilise l'attribut src de la balise script qui permet de définir le chemin d’accès au ficher.

<script src="chemin/fichier.js"> </script>
<script src="chemin/autre_fichier.js"> </script>

Grâce aux événements

On appelle événement une action de l'utilisateur, comme le clic d'un des boutons de la souris. Le code dans le cas du résultat d'un événement s'écrit :

<div onclick='alert('bonjour') '>cliquez ici</div>


Pour une question de lisibilité cette méthode est à proscrire.

Ajouter des commentaires dans votre code

Comme dans tout langage de programmation, il est bon d'ajouter des commentaires dans un de ses scripts

  • d'une part pour s'y retrouver lorsque, plusieurs mois après, l'on voudra revoir son script
  • d'autre part par esprit d'échange pour permettre à vos visiteurs curieux de comprendre votre script (cela n'est pas toujours désiré...)

Il ne faut pas confondre les balises de commentaires du langage HTML (destinées à masquer le script pour certains browsers) et les caractères de commentaires Javascript (permettant de documenter son script)!

Pour écrire des commentaires, Javascript utilise les conventions utilisées en langage C/C++

  • Pour mettre en commentaires toute une ligne on utilise le double slash :

// Tous les caractères derrière le // sont ignorés
  • Pour mettre en commentaire une partie du texte (éventuellement sur plusieurs lignes) on utilise le /* et le */ :

/* Toutes les lignes comprises entre ces repères 
sont ignorées par l'interpréteur
de code */

Il faut veiller à ne pas imbriquer des commentaires, au risque de provoquer une erreur lors de l'exécution du code!

A voir également


Ce document intitulé «  Javascript - Implantation du code  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.