HTML et JavaScript

s1 ----------

Dans cette partie, nous allons introduire le langage JavaScript qui permet de manipuler le document
HTML : création ou repositionnement d'éléments de structure, modification du contenu et du style
d'un élément, etc. Dans une première partie, nous verrons comment mettre en oeuvre ce langage ;
vous ferez plusieurs exercices autour des notions centrales que sont les variables, les tableaux, les
fonctions et les structures conditionnelles. Enfin, vous réaliserez un petit jeu. JavaScript est vaste et
je rappelle que ce module n'a pour objectif qu'une initiation à JavaScript. Je suppose cependant que
vous avez déjà une petite expérience en matière de programmation et que la notion d'algorithme ne
vous est pas inconnue.

s2 ----------

JavaScript est un langage de programmation à l'origine développé chez Netscape Communications

1995 et standardisé par l'organisme ECMA en 1996 et 1997.

JavaScript est interprété par le navigateur. Qu'est-ce que ça veut dire ?

Nous avons vu que le fichier HTML transmis par le serveur contient à la fois des balises HTML
définissant à la fois sa structure, son contenu et éventuellement son aspect et des informations de
type CSS, contenues soit dans des balises script, soit dans des fichiers supplémentaires.
On va voir que ce fichier HTML va pouvoir contenir également des instructions JavaScript.
Le navigateur va traiter toutes ces informations dans un certain ordre et exécuter les instructions
JavaScript qui on va le voir sont de nature à compléter et modifier la structure, le contenu et l'aspect
de la page affichée.

s3 ----------

JavaScript est extrêmement facile à apprendre si on se cantonne à de la programmation basique.

Pour les développeurs avancés, il fonctionne également comme un langage orienté objet. Mais cet
aspect ne sera pas abordé ici.

Comment fonctionne JavaScript ? À l'intérieur du langage HTML, il existe des mécanismes (on
parle de méthodes et de propriétés) qui permettent de lire, modifier, mettre à jour et supprimer des
éléments du document examiné. Cet ensemble de mécanismes est appelé DOM (pour Document
Object Model).

JavaScript s'appuie sur cet ensemble de méthodes pour transformer le document HTML :
repositionnement des éléments, création de nouveaux éléments, modification du contenu et du style
d'un élément, suppression d'un élément, etc. On parle de manipulation statique quand toutes ces
opérations sont effectuées par le client (c'est-à-dire par le navigateur) sans échange avec le serveur.

JavaScript peut également être un des éléments d'une architecture permettant un affichage
dynamique de tout ou partie du contenu HTML, c'est-à-dire une architecture qui permet l'échange
de données avec le serveur. AJAX (qui associe JavaScript, les CSS et le DOM) et PHP (langage qui
s'exécute sur le serveur) sont les autres éléments de cette architecture. Cet aspect ne sera pas étudié
ici.

Introduction à HTML5 – Animations et Jeux 1/9

s4 ----------

Comment met-on en oeuvre JavaScript ?

Très simplement, de la même façon que pour CSS : soit au sein même de la page HTML à l'aide
d'une balise <script> contenant le code à exécuter, soit en définissant un fichier extérieur contenant
ce code à exécuter.

s5 ----------

Le premier exemple ci-dessous que je vous demande de reproduire permet de changer le titre dans
le conteneur identifié par la chaîne titre. Le code contenu entre les balises script effectue à peu près
ceci : au niveau du document, va chercher l'élément dont l'identifiant a pour valeur titre et donne à
sa propriété innerHTML (qui représente le contenu de cet élément) la valeur 'nouveau titre'.
Remarque : on devine que le navigateur ne peut exécuter ce code qu'après que le conteneur div ait
été créé. Pour vous en convaincre, faites un essai en mettant l'élément div après le code. Nous
verrons plus tard comment nous affranchir de cette contrainte.

s6 ----------

Le deuxième exemple ci-dessous que je vous demande de reproduire permet de changer le titre dans
le conteneur identifié par la chaîne titre, mais le code à exécuter se trouve dans un fichier extérieur
code_exercice2.js

s7 ----------

Vous trouverez sur le web énormément de tutoriaux sur JavaScript. Plutôt que de reproduire ces
tutoriaux et se lancer dans une leçon exhaustive sur la syntaxe et les instructions JavaScript, je vous
propose de découvrir un peu mieux JavaScript à travers la création d'un petit jeu : un quiz autour
d'une liste de pays. Cependant, avant d'attaquer le développement de ce jeu, je vous propose
quelques exercices préparatoires autour des notions centrales que sont les Variables, les Tableaux,
les Fonctions et les Structures conditionnelles (de type if else). Nous verrons comment gérer les
événements tels que les clics souris ou les événements clavier un peu plus tard.

s8 ----------

Les variables
Dans cet exercice que je vous demande de reproduire et de tester ligne après ligne, le code HTML
est réduit à un conteneur vide portant l'identifiant "element".
Le code JavaScript effectue les opérations suivantes
• première ligne : on définit une variable appelée variable1 ; cette variable est une chaîne de
caractères reconnaissable aux guillemets : remarque 1 on pourrait se passer des trois petites
lettres var. Nous verrons plus loin, quand nous étudierons les fonctions, les implications de
ces trois lettres var ; remarque 2, cette variable n'est pas typée c'est-à-dire qu'on laisse
JavaScript deviner que c'est une chaîne de caractères, ce qui peut parfois conduire à des
erreurs ; remarque 3, on peut utiliser de simples quotes pour définir une chaîne de
caractères ; remarque 4 : un nom de variable doit commencer par une lettre ou un "_" ; il
peut comporter des lettres, des chiffres et les caractères _ et & ; en revanche, les espaces ne
sont pas autorisés ; de plus, il y a des noms interdits dont vous trouverez la liste sur la page

Introduction à HTML5 – Animations et Jeux 2/9

 ci-dessous.
• deuxième ligne dont la signification est : dans le document, écrit (à la position de l'appel du
script dans le document, c'est à dire ici à la suite de l'existant) la chaîne constituée de
variable1 et une chaîne contenant la balise HTML <br> qui signifie saut de ligne
• troisième ligne : on redéfinit la valeur de variable1 : à nouveau, on remarque que cette
variable n'est pas typée : on laisse JavaScript deviner que c'est un nombre
• quatrième ligne dont la signification est déjà connue : au niveau du document, va chercher
l'élément qui s'appelle "element" et donne à sa propriété innerHTML (qui représente le
contenu de cet élément) le résultat du calcul variable1+6. Comme JavaScript a identifié
variable1 comme un nombre, ce résultat est 10.

s9 ----------

Les tableaux
Les tableaux sont une structure de données permettant de stocker des données en général de même
nature, exemple, une liste d'auteurs, de marques, de villes ou, comme dans le projet qui clôt cette
partie, une liste de pays.

Dans cet exercice que je vous demande de reproduire et de tester ligne après ligne, le code HTML
est réduit à un conteneur vide portant l'identifiant "element".
Le code JavaScript effectue les opérations suivantes
• création de trois tableaux appelés tab1, tab2 et tab3 de trois façons différentes
• redéfinition du premier élément de tab3 tab3[0] prend la valeur "Amsterdam"
• définition d'un quatrième enregistrement pour tab3
• présentation de deux méthodes utiles : affichage du nombre d'enregistrements d'un tableau
et affichage d'une chaîne de caractères concaténant l'ensemble des valeurs d'un tableau

s10 ----------

Les fonctions
À quoi servent les fonctions. Généralement, une fonction rassemble une liste d'instructions que l'on
souhaite réutiliser plusieurs fois dans un même développement.

Par exemple dans la première partie de l'exercice proposé, la fonction majA multiplie la valeur
courante de la variable A par 3, lui ajoute 4 et met à jour le conteneur "element" avec cette nouvelle
valeur de A. Remarque 1 : il est essentiel que la fonction soit déclarée avant d'être utilisée ;
Remarque 2 : la fonction ne s'exécute que si elle est appelée ; Remarque 3 : on peut évidemment
l'appeler plusieurs fois ; Remarque 4 : bien faire attention à la syntaxe : parenthèses, accolades,
point virgule

Dans la deuxième partie de l'exercice proposé, on déclare une fonction possédant deux paramètres a
et b. Que fait la fonction sommeAB ?
Elle effectue le calcul a + b et affiche le résultat dans la page. Remarque : si vous transmettez à la
fonction sommeAB un paramètre a qui est un tableau, JavaScript ne saura pas le faire, à vous de
bien faire attention ! Je vous conseille d'afficher la console des erreurs du navigateur pour qu'il
affiche les éventuelles erreurs JavaScript

Autre exemple avec la fonction creeNouveauDiv

Cette fonction crée dans la page web un nouveau conteneur de type div et lui donne comme
identifiant la chaîne de caractère passée en paramètres ;

Introduction à HTML5 – Animations et Jeux 3/9

Remarque 1 : le paramètre passé à la fonction document.write est une chaîne ; cette chaîne
commence par la balise ouvrante div puis id =, puis des guillemets ; vient ensuite entre guillemets le
nom donné à l'identifiant, ce nom qui vient justement d'être passé en paramètre ; remarquez donc
bien la façon dont il faut échapper par des backslashes les caractères guillemets pour que JavaScript
comprenne que ce guillemet fait partie de la chaîne à afficher et qu'il n'est pas le guillemet fermant
la chaîne à afficher.

Dernier exemple avec une fonction qui calcule la somme des entiers jusqu'à n.
Le mot clé "return" permet de renvoyer le résultat du traitement ; dans le code JavaScript, l'appel à
la fonction sommeDesN est en quelque sorte remplacé par la valeur calculée
Une remarque : cet exemple nous permet d'illustrer la notion de portée d'une variable : dans la
fonction sommeDesN la variable N est définie par le mot-clé var ceci à pour conséquence qu'elle
sera connue seulement à l'intérieur de la fonction ; ainsi la dernière ligne qui demande l'affichage de
N conduit à une erreur ;
refaites l'exercice en enlevant le mot-clé var ! N devient connu hors de la fonction
revenons sur la variable A définie plus haut sans le mot-clé var - on dit que sa déclaration est
implicite : sa portée est étendue à l'ensemble du code JavaScript, y compris n'importe quelle
fonction

Il est important de bien connaître la portée de chaque variable. On peut ainsi souhaiter que certaines
d'entre elles aient une portée globale à tout le code, ou locale, afin éviter les interférences qui ne
manqueraient pas de se produire si deux variables portaient le même nom !

s11 ----------

Structures conditionnelles
Dans cet exercice, nous allons voir d'une part comment tester si une condition est vraie et d'autre
part comment mettre en place des boucles.

Commençons par les boucles.

Dans la première partie de l'exercice proposé, on définit un tableau d'auteurs
ensuite on écrit dans le document la première balise d'une liste à puces, la balise <ul>
ensuite, on fait une boucle qui parcourt tous les enregistrements du tableau depuis l'enregistrement
d'indice 0 jusqu'au dernier qui est l'enregistrement d'indice 2, car la longueur du tableau étant 3 , la
dernière valeur est bien entendu tab1[2]
pour chaque enregistrement, on écrit dans le document une chaîne de caractères correspondant à
une ligne de la liste à puces : cette chaîne commence par la balise <li>, continue par
l'enregistrement courant tab1[i] et finit par la balise fermante </li>
enfin, il faut écrire la balise fermante </ul>

Vous pouvez tester le résultat. Remarque : dans l'exercice qui va suivre tout à l'heure vous aurez
l'occasion de créer une liste déroulante à partir d'un tableau

Dans la seconde partie, on introduit une condition de type if / else

ainsi à l'intérieur de la boucle, c'est-à-dire pour chaque valeur du tableau, on effectue le test
suivant : si la longueur de la chaîne de caractères tab[i] est <=7 et si le premier caractère de la
chaîne tab[i] est différent de la lettre "P" alors on affiche cette ligne
sinon, on affiche une ligne avec un simple tiret

Au passage, nous venons de découvrir deux éléments utiles concernant les chaînes de caractères :

Introduction à HTML5 – Animations et Jeux 4/9

l'attribut length qui donne leur longueur et la méthode charAt()

Vous trouvez facilement sur internet ou dans le lien ci-dessous comment tester une égalité et
comment tester l'opérateur logique OU

s12 ----------

Voilà pour une introduction rapide à JavaScript.

Revenons au quiz sur les pays.
Quel est le fonctionnement souhaité pour ce jeu ?
Une carte est affichée ; elle représente plusieurs pays ; un numéro est associé à chaque pays ; sur le
côté gauche de la page, on retrouve ces numéros avec en regard une liste déroulante de noms de
pays ; il s'agit donc d'associer à chaque numéro le nom du pays qui lui correspond
deux boutons sont également présents sur la page : un bouton qui permet de valider notre choix ; un
bouton qui permet de réinitialiser le jeu

Comment allons-nous procéder pour développer ce jeu ?

Nous allons suivre le cheminement suivant
• création du fichier HTML
• développement du code JavaScript
• enfin, introduction d'une feuille de style

Bien entendu, il y plusieurs façons de développer ce jeu. J'ai fait ici des choix pédagogiques qui
vous permettront à la fois de découvrir de nouvelles balises HTML et les instructions JavaScript les
plus communes. Cet exemple appelle d'ailleurs des améliorations qui feront l'objet de la prochaine
leçon.

s13 ----------

Je vais vous demander de reproduire les fichiers HTML et JS suivants, de tester le fonctionnement
du jeu, pas à pas. Je vous donnerai des explications sur le comportement du jeu et la nature du code
écrit. Cet exemple nous permettra de retrouver les notions vues précédemment : les Variables, les
Tableaux, les Chaînes de caractères, les Structures conditionnelles (de type if else) et les Fonctions.
En outre, nous découvrirons ici comment prendre en compte des événements souris (un clic sur un
bouton notamment).

s14 ----------

Première étape : on s'occupe du fichier HTML

On commence par créer un dossier : "HTML5_Javascript_ex2"

On ouvre éditeur de bas niveau
On crée d'abord le fichier HTML, on le sauve, par exemple jeu_pays.html
On écrit la première ligne indiquant qu'il s'agit d'un fichier HTML et on commence à structurer le
document : en-tête, corps
On prépare le lien vers la feuille de style

On introduit les différents éléments dont on a besoin :

le texte du titre
puis un élément initialement vide repéré par une balise form (c'est-à-dire un élément de type

Introduction à HTML5 – Animations et Jeux 5/9

formulaire - nous verrons pourquoi plus tard) et qui va contenir toutes les listes déroulantes
autre élément l'image de la carte
enfin, les derniers éléments de cette page : les deux boutons.

Quelques remarques :
• l'élément titre est vide pour l'instant : c'est le code JavaScript qui va le remplir
• les deux éléments de type input sont des boutons auxquels est attaché le nom d'une fonction
JavaScript qui est la fonction qui sera lancée au moment du clic. Nous définirons ces
fonctions plus tard.
• l'élément form sera défini plus loin
• le placement de la carte à droite des listes déroulantes sera réalisé plus tard grâce à une
feuille de style

Tout à la fin, on déclare l'appel au fichier qui contiendra le code JavaScript. Ce code va dans notre
exemple initialiser le titre ; il doit donc être lancé une fois que l'élément titre est créé.
Cependant, on a beau placer son code en fin de body, il se peut parfois que ce code n'ait pas d'effet,
car les éléments de la page web n'ont pas encore eu le temps d'être identifiés par le navigateur au
moment où le code s'exécute.

Nous verrons plus tard comment contourner ce problème.

s15 ----------

Dans l'élément form, on introduit les 7 éléments select (c'est-à-dire les 7 listes déroulantes) précédés
d'éléments span qui nous permettent d'isoler le numéro afin plus tard de lui affecter un style.
Dans l'élément select, name représente le nom associé au champ, c'est le nom qui permettra
d'identifier la liste ; option représente chaque entrée de la liste, value le nom associé à une entrée,
c'est le nom qui permettra d'identifier cette entrée

La carte fait référence à un fichier qui est présent dans le même dossier que le fichier HTML/

On peut d'ores et déjà tester ce fichier en l'ouvrant dans un navigateur.

Comme on pouvait s'y attendre, la carte est pour l'instant placée en dessous des listes déroulantes.
On se rappelle en effet qu'en l'absence d'information de positionnement, le navigateur place par
défaut les éléments de type div les uns en dessous des autres dans l'ordre dans lequel ils se trouvent
dans le fichier HTML. Vous pouvez d'ailleurs faire quelques tests pour vous en convaincre.

s16 ----------

Deuxième étape : le fichier Javacript

On utilise le même éditeur de bas niveau. On ouvre un nouveau fichier et on le sauve sous le nom
code.js
Première chose : on va écrire les instructions JavaScript qui permettent de définir le titre (on aurait
pu évidemment le définir directement dans le fichier HTML mais cette façon de faire nous donne
l'occasion de réutiliser des instructions connues).
document.getElementById("titre").innerHTML
se lit de la façon suivante
pour ce document (c'est-à-dire le fichier HTML dans lequel ce code est inséré), applique la méthode
getElementById (c'est-à-dire, recherche l'élément appelé "titre") et à élément, donne à l'attribut

Introduction à HTML5 – Animations et Jeux 6/9

innerHTML (c'est-à-dire son contenu) la valeur située de l'autre côté du signe égale (c'est-à-dire ici
un élément de paragraphe).

On peut tester pour vérifier que le code est bien exécuté.

Il reste à écrire les fonctions associées aux deux boutons.

Mais avant cela, on crée un simple tableau pour définir quel pays est associé à un numéro de la
carte. Ceci de fait de la façon suivante :
l'instruction
tableauPays = new Array();
permet de déclarer la variable tableauPays comme un tableau
les lignes suivantes définissent les différents éléments du tableau
tableauPays[1] = 'Azerbaïdjan';

Testons d'ores et déjà ces premiers éléments. Profitons de cette pause pour bien comprendre le code
que nous avons écrit.

s17 ----------

On s'occupe maintenant da fonction de validation qui, on le rappelle, est lancée lorsque l'on clique
sur le bouton "Valider".

Que fait cette fonction ? Cette fonction fait une boucle sur les listes et teste pour chaque liste si c'est
le bon pays qui a été choisi.

La récupération de l'index choisi se lit de la façon suivante :

on fait une boucle de 1 à 7
pour un i donné, dans le document, dans le tableau (créé automatiquement) qui répertorie touts les
formulaires présents (ici un seul formulaire est présent), cibler celui qui a pour nom listes ; parmi
tous les éléments constituant ce formulaire, cibler celui qui pour nom listei (c'est-à-dire liste1, puis
liste2, etc.), et récupérer la valeur de l'index de l'option choisie : 0 pour la première, 1 pour la
seconde, etc.

La récupération du nom du pays choisi se lit de la façon suivante : pour un i donné dans le
document, parmi tous les formulaires présents, cibler celui qui a pour nom listes ; parmi tous les
éléments constituant ce formulaire, cibler celui qui pour nom listei (c'est-à-dire liste1, puis liste2,
etc.), et récupérer l'attribut value de l'option choisie

Si c'est le bon pays qui a été choisi, on change la couleur de fond du numéro correspondant. Pour
l'instant, on met le style en dur, ce qui nous permet de vérifier le jeu, mais nous allons changer cette
application de style plus tard

Enfin, une fonction de reset.

Cette fonction fait une boucle sur les listes et affiche le premier choix.

Avec ces quelques lignes de code, vous avez découvert très rapidement comment grâce à JavaScript
• cibler un élément d'un document par son identifiant
• définir un tableau
• définir une fonction associée à un bouton

Introduction à HTML5 – Animations et Jeux 7/9

 • écrire une boucle
• récupérer la valeur sélectionnée au sein d'une liste déroulante

Déjà beaucoup de choses que vous pouvez d'ores et déjà réutiliser à l'occasion de plusieurs tests

s18 ----------

Troisième étape : fichier CSS

On utilise le même éditeur de bas niveau, on ouvre un nouveau fichier, que l'on sauve sous le nom
styles.js, conformément à la déclaration faite plus tôt dans le fichier HTML

Dans ce fichier, on va d'abord définir un style général pour le document et un style pour le titre

On a vu que le positionnement par défaut des éléments de type div en blocks place la carte sous les
listes déroulantes. Il y a plusieurs façons de faire que la carte se retrouve à droite des listes - nous en
essaierons d'autres plus loin (association de positionnement relatif et absolu, utilisation d'un
positionnement flottant que nous avons eu l'occasion de découvrir dans le chapitre précédent...).
Ici, nous modifions simplement le positionnement par défaut des deux éléments
listes et cartes : on le change en éléments de type ligne, grâce à l'instruction display:inline-block;

s19 ----------

On définit aussi un style pour les boutons pour les écarter un peu des listes.

Enfin, on précise les styles OK et NOK pour les numéros des listes.

s20 ----------

On revient sur code JS des fonctions et on change le code JavaScript afin de prendre en compte ces
deux derniers styles : OK si le pays choisi est le bon, NOK dans le cas contraire

Voilà, c'est fini pour ce petit exemple.

Reprenez une à une chaque explication afin de comprendre
la structure générale du jeu et comment chaque fonctionnalité du jeu est traduite en code JS.
Ce jeu nous a permis de découvrir plusieurs éléments que vous pouvez approfondir grâce aux liens
proposés dans la dernière diapositive.

s21 ----------

On s'en doute, la duplication des éléments liés aux pays dans le fichier HTML et dans le fichier JS
n'est pas optimale, en particulier, si on veut faire évoluer le jeu en changeant le nombre de pays, il
faudra faire des modifications dans les deux fichiers.

Nous vous proposons comme exercice, de faire évoluer ce premier jeu de la façon suivante : au
départ le formulaire est vide et les 7 listes sont créées par le code JavaScript.
Je vous donne une indication : faire une boucle sur les pays, créer une chaîne contenant le span et le
select, introduire cette chaîne dans l'élément listes

Introduction à HTML5 – Animations et Jeux 8/9

Autre évolution : nous avons évoqué le fait qu'il était important que le code s'exécute après que les
éléments qu'il cible sont chargés par le navigateur et disponible.

Pour éviter ce genre de problèmes, nous allons faire en sorte que le code JavaScript ne se lance
qu'une fois le document prêt. Ceci se fait en plaçant l'ensemble du code Java-Script à l'intérieur de
l'expression

window.onload = function(){

ne pas oublier de refermer l'accolade tout à la fin du code

À vous de jouer !

s22 ----------

Dans la leçon suivante, nous allons revenir en détail sur la notion d'événement JavaScript et
retrouver notamment la méthode onload introduite dans le précédent exercice. Nous allons voir
comment faire en sorte grâce à JavaScript de détecter un événement se produisant sur la page
HTML : ce peut être la fin du chargement, un clic souris, le fait d'appuyer sur une touche du clavier,
etc.

À tout de suite.

Introduction à HTML5 – Animations et Jeux 9/9