Actions

Cours

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

De GBLL, TAL, ALAO, etc.

< Cours:Technologies avancées du eLearning 2
Révision datée du 29 janvier 2019 à 15:07 par Loizbek (discussion | contributions) (→‎Version DOM)

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. 

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);
	}
}
Récupérée de « https://wiki.lezinter.net/w/index.php?title=Cours:Technologies_avancées_du_eLearning_2/exercices/Équipe&oldid=40787 »