« Technologies avancées du eLearning 2/exercices/Équipe » : différence entre les versions
De GBLL, TAL, ALAO, etc.
Aucun résumé des modifications |
|||
| Ligne 169 : | Ligne 169 : | ||
<span id="correction" class="mw-customtoggle-correction1">Voir une correction</span> | <span id="correction" class="mw-customtoggle-correction1">Voir une correction</span> | ||
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-correction1"> | <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-correction1"> | ||
<syntaxhighlight lang=" | <syntaxhighlight lang="javascript">//Partie manquante ci-dessus | ||
function addMembers(){ | function addMembers(){ | ||
var message = "Saisir le nom du membre, “stop” pour arrêter.", | var message = "Saisir le nom du membre, “stop” pour arrêter.", | ||
Version du 5 février 2019 à 10:03
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();
}
}