« Technologies avancées du eLearning 2/exercices/Équipe » : différence entre les versions
De GBLL, TAL, ALAO, etc.
| Ligne 106 : | Ligne 106 : | ||
nomEq(){ | nomEq(){ | ||
} | } | ||
nbMembres(){ | nbMembres(){ | ||
} | } | ||
Version du 29 janvier 2019 à 13:58
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(){
}
nbMembres(){
}
ajoutMembre(nom){
//ajoute un li à la liste des membres
}
}