« Technologies avancées du eLearning 2/exercices/Équipe » : différence entre les versions
De GBLL, TAL, ALAO, etc.
| Ligne 237 : | Ligne 237 : | ||
this.score = 0; | this.score = 0; | ||
this.scoreElt = document.createElement("p"); | this.scoreElt = document.createElement("p"); | ||
this.scoreElt.innerHTML = "Score de l'équipe = " + score; | this.scoreElt.innerHTML = "Score de l'équipe = " + this.score; | ||
this.elt.appendChild(this.scoreElt); | this.elt.appendChild(this.scoreElt); | ||
} | } | ||
Version du 12 février 2019 à 14:12
Pour la semaine prochaine
- Me proposer plusieurs créneaux pour rattraper le cours de cette semaine
- Faire ce qu'il fallait faire pour cette semaine
- Modifier la classe équipe pour qu'elle gère un score (tirage au sort ±1pt, etc. etc.)
- Ajouter l'attribut nécessaire
- Ajouter une méthode qui ajoute 1 point au score
- Assurer le rendu du score (via la méthode qui ajoute un point)
- Créer maintenant 2 équipes dans votre page Web
- Pour chaque équipe, créer un bouton qui permette d'ajouter un point au score
Si vous êtes complètement coincés, il y a dans les ressources liées à ce cours des choses qui peuvent vous aider. Cependant, ce qui vous aidera le plus est de concevoir vous mêmes une solution par analogie à ce qu'on a fait jusque là dans cet exercice.
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
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);
}
}