Discussion :

[Matteo53]

Bonjour,
j'ai une classe avec la methode suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
tempsCompose(id, iPre, temps) {
 
        if(this.pronomsP[iPre] ==='noi' || this.pronomsP[iPre] ==='voi' || this.pronomsP[iPre]==='loro') {
            document.getElementById(id).innerHTML+=
            `${this.pronomsP[iPre]}  ${temps} ${this.participe.participePasse[2]}(e) <br>`;
        } else {
            document.getElementById(id).innerHTML+=
            `${this.pronomsP[iPre]}  ${temps} ${this.participe.participePasse[1]}(a) <br>`;
        }
    }

pour l'affichage dans une boucle :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

verbe.tempsCompose('passeCompose', i, verbe.indicatifEtre.present[i]);

Je souhaiterais ne pas avoir document.getElement... dans ma méthode donc j'ai essayé de la manière suivante mais j'ai undefined

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 tempsCompose(iPre, temps) {
 
        if(this.pronomsP[iPre] ==='noi' || this.pronomsP[iPre] ==='voi' || this.pronomsP[iPre]==='loro') {
            `${this.pronomsP[iPre]}  ${temps} ${this.participe.participePasse[2]}(e) <br>`;
        } else {
            `${this.pronomsP[iPre]}  ${temps} ${this.participe.participePasse[1]}(a) <br>`;
        }
    }

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
document.getElementById('id').innerHTML+=
verbe.tempsCompose(i, verbe.indicatifEtre.imparfait[i]);

Pouvez vous me dire pourquoi j'ai undefined avec la deuxième méthode ?
merci

[NoSmoking]

Bonjour,

Pouvez vous me dire pourquoi j'ai undefined avec la deuxième méthode ?

une fonction qui ne retourne rien retourne undefined !
Il te faut faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
tempsCompose(iPre, temps) {
  let result;
  if(this.pronomsP[iPre] ==='noi' || this.pronomsP[iPre] ==='voi' || this.pronomsP[iPre]==='loro') {
    result = `${this.pronomsP[iPre]}  ${temps} ${this.participe.participePasse[2]}(e) <br>`;
  } else {
    result = `${this.pronomsP[iPre]}  ${temps} ${this.participe.participePasse[1]}(a) <br>`;
  }
  return result;
}

et là tu peux exploiter le résultat.

Nota: l’utilisation d'une instruction swicth serait peut-être plus pertinente.

[Matteo53]

Ah oui alors la j'ai vraiment pas assuré
merci beaucoup oui je vais essayer ave switch si j'y arrive
j'ai encore quelques questions pour éclaircir mes doutes ?
Pourquoi quand on ajoute document.get... il n'y as pas besoin de return?
Puis je me pose toujours la question quelle est la pratique concernant les méthodes d'une la classe comme la mienne? faut il intégrer les conditions dans la méthode et les document.getElement... ou bien s'en servir à l'extérieur de la classe comme la solution que vous m'avez donné ? (j'espère que ma question est claire) Y a t il des règles à ce sujet?
merci

[NoSmoking]

Pourquoi quand on ajoute document.get... il n'y as pas besoin de return?

parce que l'action est exécutée directement dans ton objet

Puis je me pose toujours la question quelle est la pratique concernant les méthodes d'une la classe comme la mienne? faut il intégrer les conditions dans la méthode et les document.getElement... ou bien s'en servir à l'extérieur de la classe comme la solution que vous m'avez donné ?

en règle générale on appelle la méthode de l'objet et le job se fait, donc on se sert du résultat, si existe, à l'extérieur, la soupe interne reste en interne.

Je te mets un exemple de classe, c'est pas le top, mais c'est pour te montrer une façon de faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
class Console {
  constructor(id) {
    this.element = document.getElementById(id);
    this.histo = [];
  }
 
  log(html) {
    this.histo.push(html);
    this.element.innerHTML = html;
    return this;
  }
 
  clear() {
    this.element.innerHTML = "";
    return this;
  }
 
  getHisto(ind) {
    if (this.histo[ind]) {
      return this.histo[ind];
    }
    else {
      return "erreur lecture histo";
    }
  }
 
  logHisto() {
    this.clear();
    this.histo.forEach((el, ind) => {
      this.element.insertAdjacentHTML("beforeend", "<p><span>" + (ind + 1) + ". </span>" + el);
    });
    return this;
  }
 
  clearHisto() {
    this
      .clear()
      .histo = [];
    return this;
  }
}

Maintenant il faut s'en servir et pour cela on va s'appuyer sur le HTML suivant pour que cela fonctionne :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<button id="btn-clear">Clear Histo</button>
<button id="btn-show">Show Histo</button>
<input  id="saisie-log">
<div    id="console-1"></div>

... c'est bestial mais suffisant !

Passons à l'initialisation de ton script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const c1 = new Console("console-1");
const data = [
  "première entrée",
  "deuxième entrée",
  "troisième entrée",
  "etc ..."
];
 
const clearBtn1 = document.getElementById("btn-clear");
clearBtn1.onclick = () => c1.clearHisto();
 
const histoBtn1 = document.getElementById("btn-show");
histoBtn1.onclick = () => c1.logHisto();
 
const logInput = document.getElementById("saisie-log");
logInput.onchange = (e) => {
  c1.log(e.target.value);
}  
 
data.forEach((d, ind) => {
  setTimeout(() => c1.log(d), ind * 1000);
});

mets tout cela dans une page, fait tourner et teste

Nota : pas trop, voire pas, de commentaire alors si tu as besoin de précision n'hésite pas

Un peu de littérature sur les Classes qui ne manquent pas sur le web.

[Matteo53]

Bonjour,
Je ne sais pas trop quoi dire, c'est impressionnant, un vrai cours , je vais bien regarder et comprendre votre exemple, pour un débutant un peu complexe mais je vais réfléchir et étudier votre exemple et la littérature sur les classes en étant attentif. Merci de m'avoir consacré de votre temps pour ce petit cours.
J'ai une question mais peut être c'est un peu hors sujet et je devrais faire un nouveau sujet :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
for(let i in Verbes.modeTemps) {
    document.getElementById('modeTemps').innerHTML+=
     i + " " + Verbes.modeTemps[i] +'<br>';
}

Verbes.modeTemps est un objet et chaque mode comporte un tableau de temps ex.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 let modeTemps = {indicatif :['present', ...]

document.getElementById('modeTemps') seraient mes <h6>temps</h6>.
Pour éviter d'écrire individuellement mes balises y a t il un moyen de donner un id numérique à mes <h6> pour qu'elles s'incrémentent et utiliser la boucle?
Si il faut créer un nouveau sujet je vais le faire, désolé si je ne connais pas bien les termes techniques et je me trompe sur mes questions ?
merci

[mathieu]

puisqu'il ne s'agit plus de la question initiale au sujet de la variable, il vaut mieux créer une nouvelle question.
et je ne suis pas sur d'avoir bien compris ce que vous voulez faire donc ça pourrait aider si vous ajoutiez un petit schéma.