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 2 avec tirage au hasard du nom du personnage
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>tp2</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>Clique sur Ada Lovelace</h1>
<h1 id="texte_retour"></h1>
</body></html>
<script src="script.js"></script>// on crée une liste des noms
var liste_noms=["Ada Lovelace","Al-Khwarizmi","Dorothy Vaughan"
,"Gerard Berry","Grace Hopper","Gilles Kahn"];
// on tire un nombre au hasard entre 0 et 5
var nbr_hasard= Math.floor(Math.random() * (6));
// on recupere le nom correspondant à l'indice dans la liste
var nom=liste_noms[nbr_hasard];
// on recupere la liste des h1
var elt=document.getElementsByTagName("h1");
// on recupere le 1er h1
var premier_h1=elt[0];
//on change son contenu
premier_h1.innerText="Clique sur "+nom;
// 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){
var el_retour=document.getElementById("texte_retour");
// on verifie que l'identite de l'image
// correspond au nom recherché
if (this.id==nom){
el_retour.innerText="Bravo vous avez bien cliqué sur "+nom;
}
else {
el_retour.innerText="Désolé vous avez cliqué sur "+this.id;
}
}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.