Actions

Cours

Technologies avancées du eLearning 2/exercices/Équipe

De GBLL, TAL, ALAO, etc.

< Cours:Technologies avancées du eLearning 2
(diff) ← Version précédente | Voir la version actuelle (diff) | Version suivante → (diff)

Premières versions

Test de votre classe

Créer un document HTML avec le contenu suivant, en veillant à adapter :

  • la ligne n°5 en fonction du nom de votre fichier javascript ;
  • la ligne n°9 en fonction de votre fichier de logo.
 1 <!doctype html>
 2 <html>
 3    <head>
 4       <meta charset="utf-8" />
 5       <script type="text/javascript" src="equipe.js"></script>
 6       <link type="text/css" rel="stylesheet" href="style.css" />
 7       <script type="text/javascript">
 8 		function init(){
 9 			var monEquipe = new Equipe("DILIPEM", "logo.svg") ;
10 			//Test de la méthode nomEq()
11 			if(monEquipe.nomEq() == "DILIPEM"){
12 			   console.log("Bravo nomEq() marche.");
13 			}
14 			else{
15 			   console.error("Attention à la méthode nomEq() (ou au constructeur)");
16 			}
17 			//test de la méthode nbMembres()
18 			if(monEquipe.nbMembres() === 0){
19 			   console.log("Bravo, il y a des chances que nbMembres() fonctionne");
20 			}
21 			else{
22 			   console.error("Attention à nbMembres (ou au constructeur)");
23 			}
24 			//test de l'ajout de membres
25 			monEquipe.ajoutMembre("Jean-Pierre") ;
26 			monEquipe.ajoutMembre("Jacqueline") ;
27 			if(monEquipe.nbMembres() === 2){
28 			   console.log("Bravo, il y a des chances que nbMembres() et ajoutMembre() fonctionnent.");
29 			}
30 			else{
31 			   console.error("Attention à nbMembres (ou à nbMembres)");
32 			}
33 			var elt = document.getElementsByTagName('body')[0];
34 			console.log(elt);
35 			elt.innerHTML = monEquipe.toHTML();
36 		}
37 		window.onload=init;
38       </script>
39    </head>
40    <body>
41    </body>
42 </html>

Version "modèle"

class Equipe{
   constructor(nomEq, logo){
      this.nom = nomEq;
      this.logo = logo;
      this.listeMembres = []
   }

   nomEq(){
      return this.nom;
   }

   nbMembres(){
      return this.listeMembres.length;
   }

   ajoutMembre(nom){
      this.listeMembres.push(nom);
   }

   toHTML(){
		var res = "<article>\n\t<h1><img src='"+this.logo+"' />"+ this.nomEq()+"</h1>\n\t<ul>" ;
		for(let i=0;i<this.nbMembres();i++){
			res += "\n\t\t<li>"+this.listeMembres[i]+"</li>";
		}
		return res + "\n\t</ul>\n</article>";
	}
}

Version DOM

On veut maintenant que notre classe ne manipule plus des types simples, mais directement les éléments du DOM, ce qui permettra de s'assurer que la représentation du document HTML est toujours cohérente avec l'objet concerné.

Le code de test reste le même sauf la ligne 35 elt.innerHTML = monEquipe.toHTML(); qui doit être supprimée.

 1 class Equipe{
 2 	constructor(nomEq, logo, parentId){
 3 		//on récupère l'élément parent d'après parentId
 4 		var parent = document.getElementById(parentId),
 5 			//on vérifie qu'il existe
 6 			 res = (parent != null) ;
 7 		if(res){
 8 			this.elt = document.createElement("article");
 9 			parent.appendChild(this.elt);
10 			this.logo = document.createElement("img");
11 			this.logo.src = logo ;
12 			this.logo.style="float:left; height:64px;margin-right:1em;";
13 			this.elt.appendChild(this.logo);
14 			this.nom = document.createElement("h1");
15 			this.nom.innerHTML = nomEq;
16 			this.elt.appendChild(this.nom);
17 			this.listeMembres = document.createElement("ul");
18 			this.elt.appendChild(this.listeMembres);
19 		}
20 		else{
21 			console.error("No element with id “"+parentId+"”");
22 		}
23 		return res;
24 	}
25 	nomEq(){
26 		return this.nom.innerHTML;
27 	}
28 
29 	nbMembres(){
30 		return this.listeMembres.children.length;
31 	}
32 
33 	ajoutMembre(nom){
34 		var tmpElt = document.createElement("li");
35 		tmpElt.innerHTML = nom;
36 		this.listeMembres.appendChild(tmpElt);
37 	}
38 }

Créer une fonction qui appelle AjoutMembre et l'associer à un bouton

 1 <!doctype html>
 2 <html>
 3 	<head>
 4 		<meta charset="utf-8" />
 5 		<title>Test équipe</title>
 6 		<script type="text/javascript" src="equipe.js"></script>
 7 		<link type="text/css" rel="stylesheet" href="style.css" />
 8 		<script type="text/javascript">
 9 		function init(){
10 			var monEquipe = new Equipe("DILIPEM", "logo.svg", "test") ;
11 			//Test de la méthode nomEq()
12 			if(monEquipe.nomEq() == "DILIPEM"){
13 				console.log("Bravo nomEq() marche.");
14 			}
15 			else{
16 				console.error("Attention à la méthode nomEq() (ou au constructeur)");
17 			}
18 			//test de la méthode nbMembres()
19 			if(monEquipe.nbMembres() === 0){
20 				console.log("Bravo, il y a des chances que nbMembres() fonctionne");
21 			}
22 			else{
23 				console.error("Attention à nbMembres (ou au constructeur)");
24 			}
25 			//test de l'ajout de membres
26 			monEquipe.ajoutMembre("Jean-Pierre") ;
27 			monEquipe.ajoutMembre("Jacqueline") ;
28 			if(monEquipe.nbMembres() === 2){
29 				console.log("Bravo, il y a des chances que nbMembres() et ajoutMembre() fonctionnent.");
30 			}
31 			else{
32 				console.error("Attention à nbMembres (ou à nbMembres)");
33 			}
34 
35 			function addMembers(){
36 				//fonction qui accède à monEquipe
37 			}
38 			//associer addMembers à l'evt onclick du bouton
39 		}
40 		window.onload=init;
41 		</script>
42 	</head>
43 	<body>
44 		<div id="test"> </div>
45 		<button id="AjouterMembres">Ajouter des membres à l'équipe</button>
46 	</body>
47 </html>

Voir une correction

 1 //Partie manquante ci-dessus
 2 			function addMembers(){
 3 				var message = "Saisir le nom du membre, “stop” pour arrêter.",
 4 				membre = prompt(message);
 5 				while(membre != "stop" &&
 6 						membre != null){
 7 					monEquipe.ajoutMembre(membre);
 8 					membre = prompt(message);
 9 				}
10 			}
11 			document.getElementById("AjouterMembres").onclick = addMembers;
12 //Modification à apporter dans la classe Equipe pour pouvoir supprimer des éléments
13 	ajoutMembre(nom){
14 		var tmpElt = document.createElement("li");
15 		tmpElt.innerHTML = nom;
16 		this.listeMembres.appendChild(tmpElt);
17         /*on voit ici qu'on peut créer une fonction en la mettant dans une variable
18           c'est la même chose que ce qu'on faisait en disant que window.onload = init ;
19           sauf que ce qu'on fait ici, c'est qu'on la déclare directement dans la variable
20           au lieu de la créer d'abord*/
21 		tmpElt.onclick = function(){
22                 //cette fonction est la méthode onclick d'un élément du DOM
23                 //le this représente donc l'élément cliqué lors du déclenchement de l'évènement
24                 //et non l'instance de l'objet Equipe. Et ce bien que la méthode ajoutMembre
25                 //soit une méthode de la classe Equipe. 
26 			this.remove();
27 		};
28 	}

Gestion du score

Solution de Margaux

Il s'agit d'une solution qui exporte l'interface de gestion du score, hors de la classe, qui ne gère que la modélisation des données Voir La solution de Margaux

 1 function supprimerMembre(){
 2 	this.remove();
 3 }
 4 
 5 class Equipe{
 6 	constructor(nomEq, logo, parentId, score){
 7 		//on récupère l'élément parent d'après parentId
 8 		var parent = document.getElementById(parentId),
 9 			//on vérifie qu'il existe
10 			 res = (parent != null) ;
11 		if(res){
12 			this.elt = document.createElement("article");
13 			parent.appendChild(this.elt);
14       this.nom = document.createElement("h1");
15       this.nom.innerHTML = nomEq;
16       this.elt.appendChild(this.nom);
17       this.logo = document.createElement("img");
18       this.logo.src = logo;
19       this.elt.appendChild(this.logo);
20       this.listeMembres = document.createElement("ul");
21       this.elt.appendChild(this.listeMembres);
22 			this.score = 0;
23 			this.scoreElt = document.createElement("p");
24 			this.scoreElt.innerHTML = "Score de l'équipe = " + this.score;
25       this.elt.appendChild(this.scoreElt);
26 		}
27 		else{
28 			console.error("No element with id “"+parentId+"”");
29 		}
30 		return res;
31 	}
32 
33 	nomEq(){
34     return this.nom.innerHTML;
35 	}
36 
37 	nbMembres(){
38 		return this.listeMembres.children.length;
39 	}
40 
41 	ajoutMembre(nom){
42     this.membre = document.createElement("li");
43     this.membre.innerHTML = nom;
44     this.listeMembres.appendChild(this.membre);
45 		this.membre.addEventListener("click", supprimerMembre);
46 	}
47         plus1(){
48 		this.score++;
49 		this.scoreElt.innerHTML = "Score de l'équipe = " + this.score;
50 	}
51 }


 1 <!doctype html>
 2 <html>
 3    <head>
 4       <meta charset="utf-8" />
 5       <script type="text/javascript" src="equipeDOM.js"></script>
 6       <link type="text/css" rel="stylesheet" href="style.css" />
 7       <script type="text/javascript">
 8   		  function init(){
 9           var scoreDILIPEM = 0;
10           var scoreFLE = 0;
11     			var monEquipe = new Equipe("DILIPEM", "logo.svg", "contenu", scoreDILIPEM);
12           var monEquipe2 = new Equipe("FLE", "logo.svg", "contenu2", scoreFLE)
13 
14     			//Test de la méthode nomEq()
15     			if(monEquipe.nomEq() == "DILIPEM"){
16     			   console.log("Bravo nomEq() marche.");
17     			}
18     			else{
19     			   console.error("Attention à la méthode nomEq() (ou au constructeur)");
20     			}
21 
22     			//test de la méthode nbMembres()
23     			if(monEquipe.nbMembres() === 0){
24     			   console.log("Bravo, il y a des chances que nbMembres() fonctionne");
25     			}
26     			else{
27     			   console.error("Attention à nbMembres (ou au constructeur)");
28     			}
29 
30     			//test de l'ajout de membres
31     			monEquipe.ajoutMembre("Jean-Pierre") ;
32     			monEquipe.ajoutMembre("Jacqueline") ;
33     			if(monEquipe.nbMembres() === 2){
34     			   console.log("Bravo, il y a des chances que nbMembres() et ajoutMembre() fonctionnent.");
35     			}
36     			else{
37     			   console.error("Attention à nbMembres (ou à nbMembres)");
38     			}
39 
40           var addDILIPEM = document.getElementById("addDILIPEM");
41           addDILIPEM.addEventListener("click", addMembersDILIPEM);
42           var addFLE = document.getElementById("addFLE");
43           addFLE.addEventListener("click", addMembersFLE);
44 
45           function addMembersDILIPEM() {
46             var ajout = prompt("Ajoute un membre");
47             while (ajout != "stop" && ajout != "" && ajout != null) {
48               monEquipe.ajoutMembre(ajout);
49               ajout = prompt("Entrez le nom d'un membre");
50             }
51           }
52 
53           function addMembersFLE() {
54             var ajout = prompt("Ajoute un membre");
55             while (ajout != "stop" && ajout != "" && ajout != null) {
56               monEquipe2.ajoutMembre(ajout);
57               ajout = prompt("Entrez le nom d'un membre");
58             }
59           }
60 
61           var ajoutScoreDILIPEM = document.getElementById("ajoutScoreDILIPEM");
62           ajoutScoreDILIPEM.addEventListener("click", ajoutPointDILIPEM);
63 
64           function ajoutPointDILIPEM() {
65             monEquipe.plus1();
66           }
67 
68           var ajoutScoreFLE = document.getElementById("ajoutScoreFLE");
69           ajoutScoreFLE.addEventListener("click", ajoutPointFLE);
70 
71           function ajoutPointFLE() {
72             monEquipe2.plus1();
73           }
74         }
75         window.onload = init;
76       </script>
77    </head>
78    <body>
79     <div id="contenu"></div>
80     <button id="addDILIPEM">Ajouter des membres à l'équipe</button>
81     <button id="ajoutScoreDILIPEM">+1</button>
82     <div id="contenu2"></div>
83     <button id="addFLE">Ajouter des membres à l'équipe</button>
84     <button id="ajoutScoreFLE">+1</button>
85    </body>
86 </html>

Version embarquant le contrôleur

Dans la version ci-dessous, la classe ScoreHandler crée également tous les éléments d'interfaces et les modalités d'interaction associées. Voir la solution

Classe Equipe

 1 class Equipe{
 2 	constructor(nomEq, logo, parentId){
 3 		//on récupère l'élément parent d'après parentId
 4 		var parent = document.getElementById(parentId),
 5 			//on vérifie qu'il existe
 6 			 res = (parent != null) ;
 7 		if(res){
 8 			this.elt = document.createElement("article");
 9 			this.elt.className = "team";
10 			parent.appendChild(this.elt);
11 			this.nom = document.createElement("h1");
12 			this.nom.innerHTML = nomEq;
13 			this.elt.appendChild(this.nom);
14 			this.listeMembres = document.createElement("ul");
15 			this.elt.appendChild(this.listeMembres);
16 			this.logo = document.createElement("div");
17 			this.logo.className = "logo";
18 			var img = document.createElement("img");
19 			img.src = logo ;
20 			this.logo.appendChild(img);
21 			this.elt.appendChild(this.logo);
22 			this.score = new ScoreManager(this.elt, this.logo);
23 		}
24 		else{
25 			console.error("No element with id “"+parentId+"”");
26 		}
27 		return res;
28 	}
29 
30 	nomEq(){
31 		return this.nom.innerHTML;
32 	}
33 
34 	nbMembres(){
35 		return this.listeMembres.children.length;
36 	}
37 
38 	ajoutMembre(nom){
39 		var tmpElt = document.createElement("li");
40 		tmpElt.innerHTML = nom;
41 		this.listeMembres.appendChild(tmpElt);
42 		tmpElt.onclick = function(){
43 			this.remove();
44 		}
45 	}
46 
47 	getScore(){
48 		return this.score.getScore();
49 	}
50 }

Classe ScoreManager

 1 class ScoreManager{
 2 	constructor(displayParent, buttonParent){
 3 		if(typeof buttonParent == "undefined"){
 4 			buttonParent = displayParent;
 5 		}
 6 		this.score = 0;
 7 		this.plus1elt = document.createElement("button");
 8 		this.plus1elt.innerHTML = "+1";
 9 		this.scoreElt = document.createElement("p");
10 		this.scoreElt.className = "score";
11 		var self = this ;
12 		this.plus1elt.onclick = function(){
13 			self.plus1();
14 			self.renderScore();
15 		}
16 		displayParent.appendChild(this.scoreElt);
17 		buttonParent.appendChild(this.plus1elt);
18 		this.renderScore()
19 	}
20 
21 	getScore(){
22 		return this.score ;
23 	}
24 
25 	renderScore(){
26 		this.scoreElt.innerHTML = this.score;
27 	}
28 
29 	setButtonLabel(label){
30 		this.plus1elt.innerHTML = label;
31 	}
32 
33 	plus1(){
34 		this.score++;
35 	}
36 
37 	reset(){
38 		this.score = 0;
39 	}
40 }

Document HTML

 1 <!doctype html>
 2 <html>
 3 	<head>
 4 		<meta charset="utf-8" />
 5 		<title>Test équipe</title>
 6 		<script type="text/javascript" src="score.js"></script>
 7 		<script type="text/javascript" src="equipe.js"></script>
 8 		<link type="text/css" rel="stylesheet" href="style.css" />
 9 		<script type="text/javascript">
10 		function init(){
11 			var monEquipe = new Equipe("DILIPEM", "2.png", "test") ;
12 			//Test de la méthode nomEq()
13 			if(monEquipe.nomEq() == "DILIPEM"){
14 				console.log("Bravo nomEq() marche.");
15 			}
16 			else{
17 				console.error("Attention à la méthode nomEq() (ou au constructeur)");
18 			}
19 			//test de la méthode nbMembres()
20 			if(monEquipe.nbMembres() === 0){
21 				console.log("Bravo, il y a des chances que nbMembres() fonctionne");
22 			}
23 			else{
24 				console.error("Attention à nbMembres (ou au constructeur)");
25 			}
26 			//test de l'ajout de membres
27 			monEquipe.ajoutMembre("Jean-Pierre") ;
28 			monEquipe.ajoutMembre("Jacqueline") ;
29 			if(monEquipe.nbMembres() === 2){
30 				console.log("Bravo, il y a des chances que nbMembres() et ajoutMembre() fonctionnent.");
31 			}
32 			else{
33 				console.error("Attention à nbMembres (ou à nbMembres)");
34 			}
35 			var elt = document.getElementsByTagName('body')[0];
36 			console.log(elt);
37 
38 			function addMembers(equipe){
39 				var message = "Saisir le nom du membre, “stop” pour arrêter.",
40 				membre = prompt(message);
41 				while(membre != "stop" &&
42 						membre != null){
43 					equipe.ajoutMembre(membre);
44 					membre = prompt(message);
45 				}
46 			}
47 			var leurEquipe = new Equipe("IdL", "4.png", "test") ;
48 			document.getElementById("AjouterMembres").onclick = function(){addMembers(monEquipe);};
49 			document.getElementById("AjouterMembres2").onclick = function(){addMembers(leurEquipe);};
50 
51 		}
52 		window.onload=init;
53 		</script>
54 	</head>
55 	<body>
56 		<header>
57 			<div id="test"> </div>
58 		</header>
59 		<h2>Ajout de membres</h2>
60 		<button style="clear:both" id="AjouterMembres">Équipe 1</button>
61 		<button style="clear:both" id="AjouterMembres2">Équipe 2</button>
62 
63 	</body>
64 </html>

Exemple de feuille de style

 1 body{
 2 	padding:0;
 3 	margin:0;
 4 }
 5 
 6 header{
 7 	height: 400px;
 8 	background-color: #cacaca;
 9 	margin: 0px;
10 	padding: 3px;
11 	position: relative;
12 }
13 
14 .team{
15 	padding-right: 3em;
16 	width:400px;
17 	top:0;
18 	position:absolute;
19 }
20 
21 .team:nth-child(2n+1){
22 	padding-left:70px;
23 	left:0;
24 }
25 
26 .team:nth-child(2n){
27 	padding-right:70px;
28 	right:0;;
29 }
30 
31 .score{
32 	position:absolute;
33 	margin:0;
34 	font-weight:bold;
35 	font-family:monotype;
36 	font-size : 32px;
37 	background-color:black;
38 	color: green;
39 	padding:5px;
40 	text-align:center;
41 }
42 
43 .team:nth-child(2n+1) .logo{
44 	width:64px;
45 	position:absolute;
46 	top:0;
47 	left:0;
48 	text-align:left;
49 }
50 
51 .team:nth-child(2n) .logo{
52 	width:64px;
53 	position:absolute;
54 	top:0;
55 	right:0;
56 	text-align:right;
57 }
58 
59 .team img{
60 	margin-bottom:2px;
61 	height:64px;
62 	display:block;
63 }
64 
65 .team:nth-child(2n+1) h1, .team:nth-child(2n+1) ul{
66 	text-align: left;
67 }
68 
69 .team:nth-child(2n) h1, .team:nth-child(2n+1) ul{
70 	text-align: right;
71 }
72 
73 .team:nth-child(2n) .score{
74 	top:0;
75 	left:0;
76 }
77 
78 .team:nth-child(2n+1) .score{
79 	top:0;
80 	right:0;
81 }

Classe Jeu

Nous allons maintenant créer une classe qui embarquera les règles du jeu : combien d'équipe, qui jouent dans quel ordre, combien de point peuvent elles gagner, qui gagne ?

 1 //fonction utilitaire qui tire au sort un entier de l'intervalle [min ; max[
 2 function getRandomInt(min, max){
 3 	min = Math.ceil(min);
 4 	max = Math.floor(max);
 5 	return Math.floor(Math.random() * (max-min) + min) ;
 6 }
 7 
 8 //Classe Jeu
 9 class Jeu{
10 	//Crée un objet Jeu à partir de deux objets Equipe
11 	constructor(equipe1, equipe2){
12 		this.equipes = [equipe1, equipe2];
13 	}
14 	
15 	//Renvoie l'équipe (objet) en train de gagner
16 	getWinner(){
17 		var res = false;
18 		var score1 = ;
19 		var score2 = this.equipes[1].getScore();
20 		if(this.equipes[0].getScore() < this.equipes[1].getScore()){
21 			res = this.equipes[1];
22 		}
23 		else if(this.equipes[0].getScore() > this.equipes[1].getScore()){
24 			res = this.equipes[0];
25 		}
26 		return res ;
27 	}
28 	
29 	//renvoie le nom (string) de l'équipe qui gagne
30 	getWinnerName(){
31 		var res = "Match nul",
32 			winner = this.getWinner();
33 		if(winner !== false){
34 			res = winner.getName();
35 		}
36 		return winner ;
37 	}
38 
39 	//Renvoie une équipe (objet) tirée au sort.
40 	pickTeam(){
41 		return this.equipes[getRandomInt(0,2)];
42 	}
43 }