Finalement, le fichier
bonjour.html utilisant JavaScript aura le contenu suivant :Traditionnellement on commence à étudier un langage de programmation en lui faisant afficher le message "Bonjour !". C'est ce que nous allons faire ici, pour découvrir les liens entre les langages JavaScript et HTML.
Le langage HTML est un langage de description de pages Web. Il permet de mettre des textes en forme, d'insérer des images, de créer des liens hypertextes, etc... Cependant, lorsqu'un document HTML est écrit, il affiche toujours les mêmes choses de la même façon. Le langage JavaScript est une extension du langage HTML qui permet de calculer ce qui doit être affiché en fonction des circonstances. Par exemple, si nous désirons créer un document HTML qui affiche la date, nous devons modifier le fichier HTML utilisé chaque jour. Grâce à JavaScript nous pourrons au contraire indiquer une seule fois comment calculer la date et donc l'afficher correctement. En ce sens, JavaScript permet de générer dynamiquement du code HTML.
Commençons par écrire le fichier bonjour.html qui affiche le texte "Bonjour tout le monde !" en gras. Il prendra la forme suivante :
Pour obtenir la même chose avec JavaScript, nous gardons la même structure de fichier, il nous suffit de demander à JavaScript d'afficher le code HTML de la ligne contenant "Bonjour tout le monde !". Cela se fait à l'aide de l'instruction document.write suivie de parenthèses contenant le code HTML entre guillemets. Cependant nous devons commencer par indiquer au navigateur que nous allons utiliser une instruction JavaScript. Cela se fait en utilisant la balise HTML <SCRIPT LANGUAGE="JavaScript"></SCRIPT>.
Finalement, le fichier
bonjour.html utilisant JavaScript aura le contenu suivant :
Nous pouvons faire une première constatation : programmer en JavaScript suppose que l'on ait au moins des connaissances élémentaires sur le codage HTML. D'abord pour insérer les instructions JavaScript, ensuite et surtout parce que les opérations d'affichage se font en générant du code HTML.
Il est possible d'écrire le code JavaScript dans un fichier externe d'extension .js.
Pour l'exemple précédent, il suffit de créer un fichier nommé bonjour.js contenant la ligne :
document.write("<B>Bonjour tout le monde !</B>");
Dans le fichier html, l'appel à JavaScript se fera simplement avec la ligne :
<SCRIPT LANGUAGE="JavaScript" SRC="bonjour.js"></SCRIPT>
Cette possibilité se révèle utile lorsqu'on a des portions de code qui se répètent souvent.
Nous avons utilisé l'instruction document.write pour afficher une expression écrite entre guillemets. Celles-ci indiquent que ce qu'elles entourent est du code HTML que le navigateur va interpréter. Il est aussi possible d'utiliser des expressions sans guillemets. Dans ce cas JavaScript va essayer de les interpréter directement avant de les transmettre au navigateur. Les expressions mathématiques permettent de comprendre ce processus.
L'instruction document.write("12+5*3"); provoque l'affichage du texte 12+5*3. Par contre, l'instruction document.write(12+5*3); provoque l'affichage du texte 27. Dans le 1er cas JavaScript a interprété "12+5*3" comme un texte quelconque envoyé sans changement au navigateur. Dans le 2ème cas JavaScript a interptété 12+5*3 comme un calcul à effectuer, c'est le résultat de ce calcul qui a été envoyé au navigateur.
Pour programmer on est souvent amené à utiliser un autre type d'expression appelé expression booléenne. Celle-ci ne peut prendre que deux valeurs, true (vrai) ou false (faux). On obtient simplement des expressions booléennes en comparant des expressions mathématiques. Par exemple, l'expression 5*7==35 (il y a bien 2 signes =) est une expression booléenne qui a la valeur true car 5*7 est bien égal à 35. L'instruction document.write(5*7==35); va donc provoquer l'affichage de true.
Observons le script suivant.
On obtient l'affichage suivant :
Bonjour tout le monde !
Un petit calcul : 12+5*3 = 27
Un peu de logique : 5*4=19 ?? false
Retenons que l'instruction document.write permet d'afficher différents types d'expressions :
L'instruction document.write() peut contenir plusieurs arguments qui seront affichés les uns derrière les autres.
Il existe aussi une instruction document.writeln() qui ajoute un retour chariot au code html généré.