Javascript - Pour rendre vos pages interactives

Auteur: Mohamed CHINY Durée necessaire pour le cours de Javascript - Pour rendre vos pages interactives Niveau recommandé pour le cours de Javascript - Pour rendre vos pages interactives Supports vidéo non disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 2: Comment intégrer du code Javascript?

Toutes les pages

En plus de HTML et CSS, faites place à Javascript

Nous avons vu qu'une page Web est constituée principalement du code HTML, donc de balises. Mais nous avons aussi pu y placer du code CSS, soit directement ou à travers une feuille de style créée à part. Mais il est temps d'accueillir le nouveau venu.

Javascript s'intègre aussi dans le code HTML (tout comme CSS). Donc, notre page Web peut contenir trois syntaxes différentes: HTML, CSS et Javascript. Mais pour que le navigateur sache où commence notre script et où finit il, il faut le mettre à l'intérieur des délimiteurs du script, la balise <script>.

Balise <script>

On dirait qu'on n'a toujours pas fini avec les balises! En fait, pour écrire du code Javascript il faut le séparer des codes HTML et CSS en le plaçant entre les balises <script> et </script>. Pour faire simple, imaginons que je veux afficher le message "Bonjour" dans une boite de dialogue à l'aide de Javascript. Le code de notre page ressemblerait à ceci:
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
   </head>
   <body>
      <script>
         alert("Bonjour");
      </script>
   </body>
</html>
La fonction (ou plutôt, la méthode) alert() permet d'afficher le message souhaité dans une petite boite de dialogue. Ne vous inquiétez pas, on va voir tout ça en détail. Intéressons nous plutôt à l'intégration du script.

La balise <script> permet d'intégrer du Javascript au sein d'un document HTML. Cependant, il n'y a pas que Javascript en tant que langage de script coté client. Il serait donc plus approprié de spécifier le type du langage utilisé. Voici deux méthodes qui permettent de préciser qu'il s'agit du Javascript et non pas d'un autre langage:
<script language="javascript"></script>
<script type="text/javascript"></script>
Les deux déclarations sont explicites: "Le langage utilisé dans les délimiteurs est Javascript". La deuxième déclaration est par contre plus appréciée vu qu'elle fournie deux informations, à savoir le type et le MIME. Le type est text car Javascript c'est du texte, et le MIME précise qu'il ne s'agit pas de n'importe quel texte mais du Javascript.

Cependant, comme vous allez le découvrir dans ce cours, les codes Javascript ont tendance à être plus ou moins longs (en fonction du traitement souhaité). Notre document HTML sera donc plus ou moins volumineux si on y met directement nos scripts. La solution consiste alors à déclarer le Javascript dans un fichier à part (comme on l'a fait pour le CSS).

Imaginons que nous voulons déclarer nos scripts dans un fichier nommé script.js (vous avez remarqué l'extension? js signifie Javascript). Pour simplifier, on va supposer qu le fichier script.js est placé dans le même dossier que notre fichier HTML. Pour appeler les scripts dans notre page HTML le code ressemblerait à ceci:
<script type="text/javascript" src="script.js"></script>
Nous avons donc ajouté l'attribut src qui spécifie le chemin (absolu ou relatif) de notre fichier qui contient le code Javascript.

Reprenons maintenant le code qui affiche le message "bonjour" en séparant HTML du Javascript:

Code HTML:
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
   </head>
   <body>
      <script type="text/javascript" src="script.js"></script>
   </body>
</html>
Code Javascript (contenu du fichier script.js):
alert("Bonjour");

Où placer nos scripts?

Dans l'exemple du paragraphe précédent, vous avez constaté que nous avons déclaré le code Javascript dans la balise <body>. En fait, il n'y a pas de restriction sur l'endroit où on peut placer nos scripts. Nous pouvons les placer n’importe où (avant <html>, dans <head>, dans <body> ou après </html>). Cependant, les développeurs ont pour coutume de placer les scripts Javascript dans la balise <head> (Nous parlerons de la raison de ce choix quand ça sera temps).

Le code HTML précédent devrait donc ressembler à cela:
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <script type="text/javascript" src="script.js"></script>
   </head>
   <body>
      
   </body>
</html>

Et si Javascript a été désactivé par l'utilisateur?

Javascript est un langage coté client, donc il dépend entièrement du navigateur sur lequel il sera utilisé. Si sa syntaxe est reconnue par tous les navigateurs, on peut quand même désactiver ou activer le module Javascript. Si le client désactive ce dernier alors il ne sera pas exécuté. Pire encore, tout le code Javascript sera affiché sur la page Web comme étant du texte normale.

Bien entendu, aucun internaute n'a intérêt à désactiver le module Javascript, car tous les sites existants sur le Web (ou presque) utilisent ce langage, mais si pour une raison quelconque Javascript ne s’exécute pas correctement, tout le contenu qui est délimité par les tags de scripts <script> et </script> sera pris pour du HTML. Il suffira donc de le commenter en HTML.

Le code devrait ressembler à ceci:
<script language="javascript">
   <!--
      Code Javascript
   // -->
</script>
Pour comprendre ce qui se passe, il existe deux scénarios:
  • Si le module Javascript est désactivé (c'est le cas le moins probable voir très rare), dans ce cas, tout ce qui est entre les tags de script sera considéré comme du contenu HTML, et comme il est commenté (<!-- -->) alors il sera ignoré par le navigateur. Notre Javascript ne s’exécute toujours pas, mais au moins le code ne s'affiche pas sur la page comme étant du texte.
  • Si le module Javascript est activé (ce qui est normale), dans ce cas le contenu qui est entre les tags de script sera exécuté comme étant du code Javascript. Mais il y a des intrus, je parles des symboles <!-- et -->. Comme les tags de script ne peuvent contenir que de la syntaxe Javascript, la présence du commentaire HTML peut nuire à son exécution et peut carrément arrêter celle-ci. Heureusement, le symbole de début de commentaire HTML <!-- est ignoré, par contre le symbole de fin de commentaire --> est considéré, c'est pourquoi on a mis le double slash (//) juste avant. Le double slash crée un commentaire Javascript. Astucieux non?


Maintenant récapitulons. Nous avons vu que pour intégrer du Javascript dans une page HTML on peut recourir à deux méthodes différentes:
  • Intégrer le code Javascript directement dans les tags de script <script> et </script>.
  • Déclarer le code Javascript dans un fichier JS et appeler celui ci dans la balise <script> à l'aide de l'attribut src.

Cependant, il existe une troisième méthode pour exécuter Javascript à la volée, c'est grâce aux événements. Mais je préfère m'abstenir d'expliquer cette partie pour le moment, car il y a une page entière dédiée aux événements Javascript.
Notez que Javascript est un langage de programmation. Donc, si on commet des erreurs dans la syntaxe le code ne s’exécute pas. Ce n'est pas comme du HTML ou CSS qui sont permissifs et peuvent tolérer certaines erreurs.
Quiz (Pour tester vos connaissances)
  1. Si le code Javascript a été écrit de cette manière:
    <script>
       <!--
       alert("Bonjour");
       //-->
    </script>
Il sera masqué au navigateur s'il contient une erreur.
Il sera masqué au navigateur si celui-ci ne reconnait pas Javascript.
Il sera masqué au navigateur dans tous les cas.
  1. Si on écrit le code suivant:
    <head>
       <script>
          alert("Bonjour");
    </head>
Le script prend fin implicitement avec la fermeture de la balise HEAD.
Le code Javascript édité sera affiché sur le navigateur comme étant un texte HTML.
Une erreur sera soulevée car la balise </script> n'a pas été déclarée.
  1. Parmi les tags suivants, lequel n'est pas valide?
<script></script>
<script name="javascript"></script>
<script type="javascript"></script>
<script language="javascript"></script>
  1. Dans un document suffixé par l'extension .js, on peut intégrer les codes HTML et CSS.
Oui
Non
  1. Si vous avez la possibilité de désactiver Javascript sur votre navigateur préféré que vous utilisez pour vous rendre sur le Web, pensez vous que ça serait une bonne idée de le faire?
Oui
Non