NSI, TP JS, Jeu des 7 familles

On veut créer une page html contenant les illustrations des membres d’une des familles du jeu des 7 familles proposé par l’INRIA :
https://interstices.info/dossier/7-familles-de-linformatique/

Une ressource utile :
https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Eventslocks/Events

Etape 1

Créer une page html proposant les illustrations des membres d’une famille de l’informatique de votre choix.

Ce que l’on veut faire :

On désire à présent ajouter un peu d’interactivité à notre page. Pour cela, l’utilisateur doit cliquer sur l’illustration correspondant à l’un des personnages affichés que l’on a choisi.
Un message doit alors indiquer à l’utilisateur si il a fait le bon choix.

Version 1

On utilise l’attribut onclick des images dans le html et un message alert()

Version 2

On utilise un script .js et on attribue un évènement à nos images dans le .js. On en profite pour supprimer le message via le alert et on modifie le DOM de la page pour communiquer avec l’utilisateur. On améliore notre programme.

Version 1 : Proposition de correction avec attribut dans le html :

<!DOCTYPE html>
<html lang="fr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <title>Dessiner et programmer avec canvas_V1</title>
</head>
<body>
<img src="images/Ada_Lovelace.png" onclick="alert('Gagné')">
<img src="images/Al-Khwarizmi.png" onclick="alert('Perdu')">
<img src="images/Dorothy_Vaughan.png" onclick="alert('Perdu')">
<img src="images/Gerard_Berry.png" onclick="alert('Perdu')">
<img src="images/Gilles_Kahn.png" onclick="alert('Perdu')">
<img src="images/Grace_Hopper.png" onclick="alert('Perdu')">
<h1>Cliquer sur Ada Lovelace.</h1>
</body></html>

Version 2 : Proposition de correction avec JS

Le html :

<!DOCTYPE html>
<html lang="fr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jeu des familles</title>

</head>
<body>
<img id="Ada Lovelace" src="images/Ada_Lovelace.png">
<img id="Al-Khwarizmi" src="images/Al-Khwarizmi.png">
<img id="Dorothy Vaughan" src="images/Dorothy_Vaughan.png">
<img id="Gerard Berry" src="images/Gerard_Berry.png" >
<img id="Gilles Kahn" src="images/Gilles_Kahn.png" >
<img id="Grace_Hopper" src="images/Grace_Hopper.png" >
<h1></h1>
<script src="mon-script.js"></script>
</body>
</html>

Le js :

var nom_personnage="Ada Lovelace";
// on recupere le premier élément h1
var mon_titre=document.getElementsByTagName("h1")[0];
// on change le texte du contenu de ce h1
mon_titre.textContent="Cliquer sur "+nom_personnage;

// on recupère toutes les images
var mes_images=document.getElementsByTagName("img");
// on va affecter à chaque image un événement qui déclenchera une fonction
for (var i=0;i<mes_images.length;i++){
	var mon_image=mes_images[i];
	mon_image.onclick=verification;
}
// on vérifie si l'id de l'élément qui a déclenché l'événement
// correspond au bon personnage
function verification(evt){
	if (this.id==nom_du_personnage){
		alert("gooodddd");
	}
	else {
		alert("oupsssss");
	}
}

Pour la prochaine fois , modifier le js pour que le message d’erreur s’affiche dans le html. Il affichera le nom de la personne sur laquelle on a cliqué en cas d’erreur.
Exemple : « Bravo, vous avez bien cliqué sur Ada Lovelace » ou « Désolé, vous avez cliqué sur Gérard Berry ».

Version 3 : on utilise les écouteurs d’événements.

Le html :

<!DOCTYPE html>
<html lang="fr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <title>Jeu des 7 familles</title>
</head>
<body>
<img src="images/Ada_Lovelace.png" id='Ada Lovelace'>
<img src="images/Al-Khwarizmi.png" id="Al-Khwarizmi">
<img src="images/Dorothy_Vaughan.png" id='Dorothy Vaughan'>
<img src="images/Gerard_Berry.png"
id="Gerard Berry">
<img src="images/Gilles_Kahn.png"
     id="Gilles Kahn">
<img src="images/Grace_Hopper.png" id="Grace Hopper">
<h1></h1>
<h1></h1>
<script src="mon_script.js"></script>
    
</body></html>

le js :

var bonne_reponse="Dorothy Vaughan";
// https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Events
var mon_texte=document.getElementsByTagName("h1")[0]
var mon_message=document.getElementsByTagName("h1")[1];
mon_texte.textContent="Cliquer sur "+bonne_reponse+" .";

var mes_images=document.getElementsByTagName("img");
// on recupère tous les éléments images
for (var i = 0; i < mes_images.length; i++) {
    mon_image=mes_images[i];
   // on ajoute un écouteur d'événements
    mon_image.addEventListener('click', verification);
}

function verification(evt){
    if (this.id==bonne_reponse) {
        mon_message.textContent="Bravo";
    }
        else {
             mon_message.textContent="Désolé, ce n'est pas "+bonne_reponse+ " mais "+this.id;
        }
}

Quelle est la différence entre les versions 2 et 3 ?

La version 2 consiste à attribuer un attribut onclic à nos images et une valeur à celui-ci. Comme on ne peut attribuer qu’une seule valeur à un attribut, cette méthode ne permet pas de déclencher plusieurs fonctions à l’appel de l’événement.

Par contre il est possible d’attribuer plusieurs écouteurs d’un même événement à un élément.

Exemple 1 : on modifie le js de la version 2

var bonne_reponse="Dorothy Vaughan";
// https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Events
var mon_texte=document.getElementsByTagName("h1")[0]
var mon_message=document.getElementsByTagName("h1")[1];
mon_texte.textContent="Cliquer sur "+bonne_reponse+" .";

var mes_images=document.getElementsByTagName("img");

for (var i = 0; i < mes_images.length; i++) {
    mon_image=mes_images[i];
    mon_image.onclick=verification1;
    mon_image.onclick=verification2;
}

function verification1(evt){
    alert("verif1");
}
function verification2(evt){
    alert("verif2");
}

Seule la fonction verification2 sera déclenchée lors d’un clic sur une image.

Exemple 2 : on modifie le js de la version 2

var bonne_reponse="Dorothy Vaughan";
// https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Events
var mon_texte=document.getElementsByTagName("h1")[0]
var mon_message=document.getElementsByTagName("h1")[1];
mon_texte.textContent="Cliquer sur "+bonne_reponse+" .";

var mes_images=document.getElementsByTagName("img");
// on recupère tous les éléments images
for (var i = 0; i < mes_images.length; i++) {
    mon_image=mes_images[i];
   // on ajoute un écouteur d'événements
    mon_image.addEventListener('click', verification1);
    mon_image.addEventListener('click', verification2);
}

function verification1(evt){
    alert("verif1");
}
function verification2(evt){
    alert("verif2");
}

Les deux fonctions vérifications sont appelées lors d’un clic sur une image.