« Technologies avancées du eLearning 2/exercices/Équipe » : différence entre les versions
De GBLL, TAL, ALAO, etc.
| Ligne 48 : | Ligne 48 : | ||
== Correction == | == Correction == | ||
<syntaxhighlight lang="JavaScript">class Equipe{ | <syntaxhighlight lang="JavaScript">class Equipe{ | ||
constructor(nomEq, logo){ | constructor(nomEq, logo){ | ||
| Ligne 69 : | Ligne 68 : | ||
toHTML(){ | 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>"; | |||
} | |||
}</syntaxhighlight> | |||
} | |||
</syntaxhighlight> | |||
Version du 22 janvier 2019 à 15:59
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>Correction
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>";
}
}