Insérer du code Javascript

Pour ceux qui souhaitent se lancer dans l'aventure du web, le Javascript est un langage incontournable. C'est un langage dont les possibilités sont impressionnantes. Mais comment insérer du code Javascript dans une page écrite en Html ? Et puis surtout, comment faire pour que cette insertion soit conforme aux normes Xhtml ?

En gros, nous pouvons dire qu'il existe deux méthodes : soit le code Javascript se trouve dans une fichier externe, soit il est insérer dans la page Html elle-même.

L'utilisation d'un fichier externe

Si vous décidez d'écrire votre code Javascript dans un fichier externe, vous devrez insérer une balise spécifique dans votre page Html. Cette balise a pour fonction d'indiquer au navigateur client qu'il doit charger votre fichier Javascript avant d'afficher votre page Html. C'est un peu la même chose lorsque vous insérer un fichier externe de type CSS, lorsque vous ajoutez des images, des animations flash, etc.

N'oublions pas que le Javascript est un langage de programmation qui sera exécuté par le navigateur client. C'est un des aspects qui le distingue radicalement du PHP. Celui-ci s'exécutant côté serveur.

Voici comment s'écrit la balise Html qui transmet au navigateur client les informations nécessaires pour que celui-ci charge votre fichier externe contenant votre code Javascript :

<script type="text/javascript" src="http://domain.com/scripts/monfichier.js"></script>

Dans cet exemple, nous supposons que le fichier externe s'appelle monfichier.js et qu'il se trouve dans le répertoire scripts.

Vous remarquerez que nous n'utilisons pas la balise orpheline <link> (celle-ci sera davantage réservée pour insérer, par exemple, un fichier de type CSS ou une icône favicon).

Insérer le code dans la page Html

Pour insérer du code Javascript directement dans une page écrite en Html, nous allons utiliser les mêmes balises <script> et </script>.

En effet, le code et la syntaxe du Javascript est tout à fait différent du langage Html. Il est donc nécessaire d'indiquer au navigateur client que la partie Javascript doit être interprétée et exécutée différemment du Html. Pour cela, nous devons entourer la partie Javascript entre les balises <script> et </script>.

Voici un petit exemple :

<script type="text/javascript">
  alert("Bonjour le monde !");
</script>

Maintenant, si vous utilisiez un DOCTYPE Xhtml 1.0 Strict, ce code pourrait engendrer des erreurs lors de la validation W3C.

Ceci tout simplement parce que la validation W3C contrôle le code compris entre les balises <script> et </script>, comme si elles étaient écrites en Html. De ce fait, le validateur vérifie si ce code est conforme aux recommandations du Xhtml.

Or, imaginons que pour une raison quelconque, nous écrivions le code suivant :

<script type="text/javascript">
  var nimporte = FALSE;
  if (nimporte === FALSE) {
    document.write("<p>Ce n'est pas n'importe quoi !</p>");
  }
  else {
    document.write("<p>C'est n'importe quoi !</p>");
  }
</script>

Dans ce cas, la validation W3C vous signalera qu'une balise <p> ne peut pas être fermée par deux balises </p>. Donc, erreur !!!

Pour s'en sortir, nous pourrions toujours corriger notre code Javascript et essayer de le rendre conforme aux recommandations du Xhtml. Mais, à la longue, l'opération deviendra fastidieuse.

Heureusement, il existe une solution très simple. Il suffit d'indiquer à la validation W3C de ne pas tenir compte du code compris entre les balises <script> et </script>.

Voici comment faire :

<script type="text/javascript">
  // <![CDATA[
  var nimporte = FALSE;
  if (nimporte === FALSE) {
    document.write("<p>Ce n'est pas n'importe quoi !</p>");
  }
  else {
    document.write("<p>C'est n'importe quoi !</p>");
  }
  // ]]>
</script>

Ainsi donc, pour rendre Javascript invisible aux yeux de la validation W3C, il suffit de faire suivre la balise <script> par le code "// <![CDATA[". De même, le code "// ]]>" précèdera la balise </script>.

Voilà et bon amusement !