Actions

Cours

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

De GBLL, TAL, ALAO, etc.

< Cours:Technologies avancées du eLearning 2
La version imprimable n’est plus prise en charge et peut comporter des erreurs de génération. Veuillez mettre à jour les signets de votre navigateur et utiliser à la place la fonction d’impression par défaut de celui-ci.

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.
<!doctype html>
<html>
   <head>
      <meta charset="utf-8" />
      <script type="text/javascript" src="equipe.js"></script>
      <link type="text/css" rel="stylesheet" href="style.css" />
      <script type="text/javascript">
		function init(){
			var monEquipe = new Equipe("DILIPEM", "logo.svg") ;
			//Test de la méthode nomEq()
			if(monEquipe.nomEq() == "DILIPEM"){
			   console.log("Bravo nomEq() marche.");
			}
			else{
			   console.error("Attention à la méthode nomEq() (ou au constructeur)");
			}
			//test de la méthode nbMembres()
			if(monEquipe.nbMembres() === 0){
			   console.log("Bravo, il y a des chances que nbMembres() fonctionne");
			}
			else{
			   console.error("Attention à nbMembres (ou au constructeur)");
			}
			//test de l'ajout de membres
			monEquipe.ajoutMembre("Jean-Pierre") ;
			monEquipe.ajoutMembre("Jacqueline") ;
			if(monEquipe.nbMembres() === 2){
			   console.log("Bravo, il y a des chances que nbMembres() et ajoutMembre() fonctionnent.");
			}
			else{
			   console.error("Attention à nbMembres (ou à nbMembres)");
			}
			var elt = document.getElementsByTagName('body')[0];
			console.log(elt);
			elt.innerHTML = monEquipe.toHTML();
		}
		window.onload=init;
      </script>
   </head>
   <body>
   </body>
</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. 

class Equipe{
	constructor(nomEq, logo, parentId){
		//on récupère l'élément parent d'après parentId
		var parent = document.getElementById(parentId),
			//on vérifie qu'il existe
			 res = (parent != null) ;
		if(res){
			this.elt = document.createElement("article");
			parent.appendChild(this.elt);
			this.logo = document.createElement("img");
			this.logo.src = logo ;
			this.logo.style="float:left; height:64px;margin-right:1em;";
			this.elt.appendChild(this.logo);
			this.nom = document.createElement("h1");
			this.nom.innerHTML = nomEq;
			this.elt.appendChild(this.nom);
			this.listeMembres = document.createElement("ul");
			this.elt.appendChild(this.listeMembres);
		}
		else{
			console.error("No element with id “"+parentId+"”");
		}
		return res;
	}
	nomEq(){
		return this.nom.innerHTML;
	}

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

	ajoutMembre(nom){
		var tmpElt = document.createElement("li");
		tmpElt.innerHTML = nom;
		this.listeMembres.appendChild(tmpElt);
	}
}

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

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Test équipe</title>
		<script type="text/javascript" src="equipe.js"></script>
		<link type="text/css" rel="stylesheet" href="style.css" />
		<script type="text/javascript">
		function init(){
			var monEquipe = new Equipe("DILIPEM", "logo.svg", "test") ;
			//Test de la méthode nomEq()
			if(monEquipe.nomEq() == "DILIPEM"){
				console.log("Bravo nomEq() marche.");
			}
			else{
				console.error("Attention à la méthode nomEq() (ou au constructeur)");
			}
			//test de la méthode nbMembres()
			if(monEquipe.nbMembres() === 0){
				console.log("Bravo, il y a des chances que nbMembres() fonctionne");
			}
			else{
				console.error("Attention à nbMembres (ou au constructeur)");
			}
			//test de l'ajout de membres
			monEquipe.ajoutMembre("Jean-Pierre") ;
			monEquipe.ajoutMembre("Jacqueline") ;
			if(monEquipe.nbMembres() === 2){
				console.log("Bravo, il y a des chances que nbMembres() et ajoutMembre() fonctionnent.");
			}
			else{
				console.error("Attention à nbMembres (ou à nbMembres)");
			}

			function addMembers(){
				//fonction qui accède à monEquipe
			}
			//associer addMembers à l'evt onclick du bouton
		}
		window.onload=init;
		</script>
	</head>
	<body>
		<div id="test"> </div>
		<button id="AjouterMembres">Ajouter des membres à l'équipe</button>
	</body>
</html>

Voir une correction 

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

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 

function supprimerMembre(){
	this.remove();
}

class Equipe{
	constructor(nomEq, logo, parentId, score){
		//on récupère l'élément parent d'après parentId
		var parent = document.getElementById(parentId),
			//on vérifie qu'il existe
			 res = (parent != null) ;
		if(res){
			this.elt = document.createElement("article");
			parent.appendChild(this.elt);
      this.nom = document.createElement("h1");
      this.nom.innerHTML = nomEq;
      this.elt.appendChild(this.nom);
      this.logo = document.createElement("img");
      this.logo.src = logo;
      this.elt.appendChild(this.logo);
      this.listeMembres = document.createElement("ul");
      this.elt.appendChild(this.listeMembres);
			this.score = 0;
			this.scoreElt = document.createElement("p");
			this.scoreElt.innerHTML = "Score de l'équipe = " + this.score;
      this.elt.appendChild(this.scoreElt);
		}
		else{
			console.error("No element with id “"+parentId+"”");
		}
		return res;
	}

	nomEq(){
    return this.nom.innerHTML;
	}

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

	ajoutMembre(nom){
    this.membre = document.createElement("li");
    this.membre.innerHTML = nom;
    this.listeMembres.appendChild(this.membre);
		this.membre.addEventListener("click", supprimerMembre);
	}
        plus1(){
		this.score++;
		this.scoreElt.innerHTML = "Score de l'équipe = " + this.score;
	}
}



<!doctype html>
<html>
   <head>
      <meta charset="utf-8" />
      <script type="text/javascript" src="equipeDOM.js"></script>
      <link type="text/css" rel="stylesheet" href="style.css" />
      <script type="text/javascript">
  		  function init(){
          var scoreDILIPEM = 0;
          var scoreFLE = 0;
    			var monEquipe = new Equipe("DILIPEM", "logo.svg", "contenu", scoreDILIPEM);
          var monEquipe2 = new Equipe("FLE", "logo.svg", "contenu2", scoreFLE)

    			//Test de la méthode nomEq()
    			if(monEquipe.nomEq() == "DILIPEM"){
    			   console.log("Bravo nomEq() marche.");
    			}
    			else{
    			   console.error("Attention à la méthode nomEq() (ou au constructeur)");
    			}

    			//test de la méthode nbMembres()
    			if(monEquipe.nbMembres() === 0){
    			   console.log("Bravo, il y a des chances que nbMembres() fonctionne");
    			}
    			else{
    			   console.error("Attention à nbMembres (ou au constructeur)");
    			}

    			//test de l'ajout de membres
    			monEquipe.ajoutMembre("Jean-Pierre") ;
    			monEquipe.ajoutMembre("Jacqueline") ;
    			if(monEquipe.nbMembres() === 2){
    			   console.log("Bravo, il y a des chances que nbMembres() et ajoutMembre() fonctionnent.");
    			}
    			else{
    			   console.error("Attention à nbMembres (ou à nbMembres)");
    			}

          var addDILIPEM = document.getElementById("addDILIPEM");
          addDILIPEM.addEventListener("click", addMembersDILIPEM);
          var addFLE = document.getElementById("addFLE");
          addFLE.addEventListener("click", addMembersFLE);

          function addMembersDILIPEM() {
            var ajout = prompt("Ajoute un membre");
            while (ajout != "stop" && ajout != "" && ajout != null) {
              monEquipe.ajoutMembre(ajout);
              ajout = prompt("Entrez le nom d'un membre");
            }
          }

          function addMembersFLE() {
            var ajout = prompt("Ajoute un membre");
            while (ajout != "stop" && ajout != "" && ajout != null) {
              monEquipe2.ajoutMembre(ajout);
              ajout = prompt("Entrez le nom d'un membre");
            }
          }

          var ajoutScoreDILIPEM = document.getElementById("ajoutScoreDILIPEM");
          ajoutScoreDILIPEM.addEventListener("click", ajoutPointDILIPEM);

          function ajoutPointDILIPEM() {
            monEquipe.plus1();
          }

          var ajoutScoreFLE = document.getElementById("ajoutScoreFLE");
          ajoutScoreFLE.addEventListener("click", ajoutPointFLE);

          function ajoutPointFLE() {
            monEquipe2.plus1();
          }
        }
        window.onload = init;
      </script>
   </head>
   <body>
    <div id="contenu"></div>
    <button id="addDILIPEM">Ajouter des membres à l'équipe</button>
    <button id="ajoutScoreDILIPEM">+1</button>
    <div id="contenu2"></div>
    <button id="addFLE">Ajouter des membres à l'équipe</button>
    <button id="ajoutScoreFLE">+1</button>
   </body>
</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

class Equipe{
	constructor(nomEq, logo, parentId){
		//on récupère l'élément parent d'après parentId
		var parent = document.getElementById(parentId),
			//on vérifie qu'il existe
			 res = (parent != null) ;
		if(res){
			this.elt = document.createElement("article");
			this.elt.className = "team";
			parent.appendChild(this.elt);
			this.nom = document.createElement("h1");
			this.nom.innerHTML = nomEq;
			this.elt.appendChild(this.nom);
			this.listeMembres = document.createElement("ul");
			this.elt.appendChild(this.listeMembres);
			this.logo = document.createElement("div");
			this.logo.className = "logo";
			var img = document.createElement("img");
			img.src = logo ;
			this.logo.appendChild(img);
			this.elt.appendChild(this.logo);
			this.score = new ScoreManager(this.elt, this.logo);
		}
		else{
			console.error("No element with id “"+parentId+"”");
		}
		return res;
	}

	nomEq(){
		return this.nom.innerHTML;
	}

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

	ajoutMembre(nom){
		var tmpElt = document.createElement("li");
		tmpElt.innerHTML = nom;
		this.listeMembres.appendChild(tmpElt);
		tmpElt.onclick = function(){
			this.remove();
		}
	}

	getScore(){
		return this.score.getScore();
	}
}

Classe ScoreManager

class ScoreManager{
	constructor(displayParent, buttonParent){
		if(typeof buttonParent == "undefined"){
			buttonParent = displayParent;
		}
		this.score = 0;
		this.plus1elt = document.createElement("button");
		this.plus1elt.innerHTML = "+1";
		this.scoreElt = document.createElement("p");
		this.scoreElt.className = "score";
		var self = this ;
		this.plus1elt.onclick = function(){
			self.plus1();
			self.renderScore();
		}
		displayParent.appendChild(this.scoreElt);
		buttonParent.appendChild(this.plus1elt);
		this.renderScore()
	}

	getScore(){
		return this.score ;
	}

	renderScore(){
		this.scoreElt.innerHTML = this.score;
	}

	setButtonLabel(label){
		this.plus1elt.innerHTML = label;
	}

	plus1(){
		this.score++;
	}

	reset(){
		this.score = 0;
	}
}

Document HTML

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Test équipe</title>
		<script type="text/javascript" src="score.js"></script>
		<script type="text/javascript" src="equipe.js"></script>
		<link type="text/css" rel="stylesheet" href="style.css" />
		<script type="text/javascript">
		function init(){
			var monEquipe = new Equipe("DILIPEM", "2.png", "test") ;
			//Test de la méthode nomEq()
			if(monEquipe.nomEq() == "DILIPEM"){
				console.log("Bravo nomEq() marche.");
			}
			else{
				console.error("Attention à la méthode nomEq() (ou au constructeur)");
			}
			//test de la méthode nbMembres()
			if(monEquipe.nbMembres() === 0){
				console.log("Bravo, il y a des chances que nbMembres() fonctionne");
			}
			else{
				console.error("Attention à nbMembres (ou au constructeur)");
			}
			//test de l'ajout de membres
			monEquipe.ajoutMembre("Jean-Pierre") ;
			monEquipe.ajoutMembre("Jacqueline") ;
			if(monEquipe.nbMembres() === 2){
				console.log("Bravo, il y a des chances que nbMembres() et ajoutMembre() fonctionnent.");
			}
			else{
				console.error("Attention à nbMembres (ou à nbMembres)");
			}
			var elt = document.getElementsByTagName('body')[0];
			console.log(elt);

			function addMembers(equipe){
				var message = "Saisir le nom du membre, “stop” pour arrêter.",
				membre = prompt(message);
				while(membre != "stop" &&
						membre != null){
					equipe.ajoutMembre(membre);
					membre = prompt(message);
				}
			}
			var leurEquipe = new Equipe("IdL", "4.png", "test") ;
			document.getElementById("AjouterMembres").onclick = function(){addMembers(monEquipe);};
			document.getElementById("AjouterMembres2").onclick = function(){addMembers(leurEquipe);};

		}
		window.onload=init;
		</script>
	</head>
	<body>
		<header>
			<div id="test"> </div>
		</header>
		<h2>Ajout de membres</h2>
		<button style="clear:both" id="AjouterMembres">Équipe 1</button>
		<button style="clear:both" id="AjouterMembres2">Équipe 2</button>

	</body>
</html>

Exemple de feuille de style

body{
	padding:0;
	margin:0;
}

header{
	height: 400px;
	background-color: #cacaca;
	margin: 0px;
	padding: 3px;
	position: relative;
}

.team{
	padding-right: 3em;
	width:400px;
	top:0;
	position:absolute;
}

.team:nth-child(2n+1){
	padding-left:70px;
	left:0;
}

.team:nth-child(2n){
	padding-right:70px;
	right:0;;
}

.score{
	position:absolute;
	margin:0;
	font-weight:bold;
	font-family:monotype;
	font-size : 32px;
	background-color:black;
	color: green;
	padding:5px;
	text-align:center;
}

.team:nth-child(2n+1) .logo{
	width:64px;
	position:absolute;
	top:0;
	left:0;
	text-align:left;
}

.team:nth-child(2n) .logo{
	width:64px;
	position:absolute;
	top:0;
	right:0;
	text-align:right;
}

.team img{
	margin-bottom:2px;
	height:64px;
	display:block;
}

.team:nth-child(2n+1) h1, .team:nth-child(2n+1) ul{
	text-align: left;
}

.team:nth-child(2n) h1, .team:nth-child(2n+1) ul{
	text-align: right;
}

.team:nth-child(2n) .score{
	top:0;
	left:0;
}

.team:nth-child(2n+1) .score{
	top:0;
	right:0;
}

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 ? 

//fonction utilitaire qui tire au sort un entier de l'intervalle [min ; max[
function getRandomInt(min, max){
	min = Math.ceil(min);
	max = Math.floor(max);
	return Math.floor(Math.random() * (max-min) + min) ;
}

//Classe Jeu
class Jeu{
	//Crée un objet Jeu à partir de deux objets Equipe
	constructor(equipe1, equipe2){
		this.equipes = [equipe1, equipe2];
	}
	
	//Renvoie l'équipe (objet) en train de gagner
	getWinner(){
		var res = false;
		var score1 = ;
		var score2 = this.equipes[1].getScore();
		if(this.equipes[0].getScore() < this.equipes[1].getScore()){
			res = this.equipes[1];
		}
		else if(this.equipes[0].getScore() > this.equipes[1].getScore()){
			res = this.equipes[0];
		}
		return res ;
	}
	
	//renvoie le nom (string) de l'équipe qui gagne
	getWinnerName(){
		var res = "Match nul",
			winner = this.getWinner();
		if(winner !== false){
			res = winner.getName();
		}
		return winner ;
	}

	//Renvoie une équipe (objet) tirée au sort.
	pickTeam(){
		return this.equipes[getRandomInt(0,2)];
	}
}
Récupérée de « https://wiki.lezinter.net/w/index.php?title=Cours:Technologies_avancées_du_eLearning_2/exercices/Équipe&oldid=59778 »