Démarrer avec JavaScript

Inclure un script JavaScript dans un document HTML

Il existe deux méthodes d'inclusion d'un script dans un document HTML : elles utilisent toutes deux l'élément script.

Cet élément doit être placé soit dans l'élément head du document soit dans l'élément body du document et peut y être employé autant de fois que nécessaire.

Script interne

La première consiste à placer le code du script, directement au sein du document HTML, à l'intérieur des balises <script> et </script> :

<script type="text/javascript"> ... code du script ... </script>

Script externe

La deuxième consiste à appeler le code du script depuis un fichier portant l'extension .js :

<script type="text/javascript" src="monfichier.js"></script>

Un code écrit dans l'élément script en présence de l'attribut src n'est pas exécuté. De plus, le fichier .js ne doit contenir que le code du script (aucun code HTML ne doit y figurer (pas de balises <script> et </script> donc)).

Cette deuxième méthode doit être préférée à la première pour les raisons suivantes :

elle favorise la séparation entre la présentation, le contenu et les interactions ;
elle permet d'utiliser un script sur plusieurs documents ;
elle permet la mise en cache du script par le navigateur ;
elle facilite la maintenance et les évolutions.

Elle sera toujours utilisée dans le cadre de ce tutoriel.

Indiquer aux visiteurs que JavaScript n'est pas supporté ou est désactivé

Il existe, dans la spécification HTML, un élément noscript destiné à être restitué aux visiteurs lorsque le navigateur utilisé n'est pas en mesure d'exécuter les scripts :

<noscript>Les scripts de cette page n'ont pas été exécutés.</noscript>

Nous verrons par la suite que l'existence de mécanismes de remplacement de contenus rendent, de fait, l'utilisation de cet élément impertinent. Il est donc à oublier.

Clarté et lisibilité d'un script

Écrire un script

Un script étant un ensemble d'instructions interprétées par le moteur JavaScript du navigateur, il est nécessaire de suivre plusieurs règles pour chaque instruction :

elle doit toujours se terminer par le signe ; ;
elle doit toujours se retrouver seule sur sa ligne.

Ces deux règles, bien que facultatives, vous assurent une certaine rigueur et vous évitent que le navigateur échoue à exécuter correctement votre script.

Pour illustrer ces propos, nous allons prendre un script composé d'instructions fictives ("instruction1" à "instructionN") :

instruction1 instruction2

L'exemple de code ci-dessus ne peut être interprété par le moteur JavaScript du navigateur. En effet, le moteur est dans l'incapacité de dissocier l'"instruction1" de l'"instruction2".

Il est alors nécessaire de séparer ces instructions par le signe ; pour indiquer le passage à une nouvelle instruction, d'où :

instruction1; instruction2;

A noter que le signe ; après l'"instruction2" est facultatif du fait qu'aucune instruction ne suit. Mais rien n'indique que dans le futur de nouvelles instructions soient ajoutées.

De ce fait, le code sera alors plus complexe et donc plus compliquer à relire. Un saut de ligne entre chaque instruction permettra alors de faciliter la lecture du script écrit :

instruction1; instruction2; instruction3; instruction4;

Commenter un script

Comme les autres langages, JavaScript offre la possibilité de laisser des commentaires au sein d'un script permettant ainsi d'expliciter son utilité et son fonctionnement. Ainsi, vos collaborateurs ou vous-même êtes en mesure de comprendre le script et donc d'intervenir dessus.

Il existe deux méthodes pour commenter certains passages d'un script.

Commentaire sur une ligne

// Je commente le code qui suit sur une ligne. instruction1;

Commentaire sur plusieurs lignes

/* Je commente le code qui suit sur plusieurs lignes. */ instruction1; instruction2; instruction3;