Hey guys it's been a long time i've wrote here.

I decided to take a course in JS OOP, my problem is the program doesn't do the difference between objects. Exemple the program work only if i pop 1 object, if i pop a second one, it screws my functions. I want you guys to take a look at it and point me in the right direction.

cut-paste and try it, works fine with 1 object.

I thought that function were linked with the objects when put in the constructor, but it doesn't seem like it. I think the form ids overlap. So i thought a way around this would be to create a link between the form ids and the objects. But this means more variables.

All 2 cents and more :P are welcome.

Here's the html/ script test file, i can't modify this file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Exemple d'utilisation de la classe Etudiant</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  </head>
  <body>
    <div id="conteneur" style="width: 100%;">
      <h1 style="text-align: center;">Exemple d'utilisation de la classe Etudiant</h1>
      <p style="position: absolute; top: 10px; right: 30px;">Nombre étudiants: <span id="nbEtud">0</span></p>
      <form method="post" action="#" onsubmit="return false;">
          <div id="premier">
          </div>
          <div id="second">
          </div>
          <div id="bas" style="">
            <p><button onclick="afficherEtudiant(0, 'premier');">Afficher premier etudiant</button>
            <button onclick="afficherEtudiant(1, 'second');">Afficher deuxieme etudiant</button>
            <button onclick="calculerEtudiant(0);">Calculer la note premier etudiant</button>
            <button onclick="calculerEtudiant(1);">Calculer la note deuxieme etudiant</button>
            </p>
            <p>
            <a href="http://validator.w3.org/check?uri=referer"><img
                src="http://www.w3.org/Icons/valid-xhtml10-blue"
                alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
            </p>
          </div>
       </form>
    </div>
    <script type="text/javascript" src="classeEtudiant_tp1.js">
    </script>

  <script type="text/javascript">
    /* <![CDATA[ */

    var  tabEtudiants = new Array();
    tabEtudiants[0] = null; 
    tabEtudiants[1] = null; 

    function afficherEtudiant(indice, nomId) {
       if (!tabEtudiants[indice]){
            tabEtudiants[indice] = new Etudiant(nomId);
            document.getElementById(nomId).innerHTML = tabEtudiants[indice].construireForm();
            document.getElementById("nbEtud").innerHTML = Etudiant.nbInstances();
       } else 
            alert("Erreur, cet étudiant est déjà affiché");
    }

    function calculerEtudiant(indice) {
       var message="";
       if (tabEtudiants[indice] && tabEtudiants[indice].formDejaAffiche()) {
          if ((message=tabEtudiants[indice].validerForm()) === true){
              tabEtudiants[indice].lireForm();
              tabEtudiants[indice].calculerNotes();
              tabEtudiants[indice].afficherNotes();
          } else {
              alert(message);
          }
       }
    }
    /* ]]> */    
  </script>
</body>
</html>

Here's the class i wrote.

// Propriete de la classe Etudiant
Etudiant.add = 0;
Etudiant.nbInstances = function(){
    return Etudiant.add;
};

/* Classe Etudiant */
function Etudiant(id){
    //Bloc des variables
    this.id = id;
    this.nom = "";
    this.prenom = "";
    this.codePermanent = "";
    this.surForm = false;
    this.noteTP1 = 0;
    this.noteTP2 = 0;
    this.noteTP3 = 0;
    this.noteExamenIntra = 0;
    this.noteExamenFinale = 0;
    this.noteTravaux = 0;
    this.noteExamens = 0;
    this.noteGlobale = 0;
    this.noteLettre ="";

    //Bloc de functions
    this.construireForm = constForm;
    this.formDejaAffiche = affForm;
    this.validerForm = validForm;
    this.lireForm = addForm;
    this.calculerNotes = calNotes;
    this.afficherNotes = affNotes;

    // Incrementation du nombre d'instance
    Etudiant.add++; 
}

// Construit la form
function constForm(){
    var formText = "";
    formText += "<fieldset><legend>"+ this.id +"</legend><table>"+
       "<tr><td>Nom: </td><td><input type='text' id='nom'/></td>"+
         "<td>Note TP1: </td><td><input type='text' id='tp1'/></td>"+
         "<td>Note Intra: </td><td><input type='text' id='intra'/></td>"+
         "<td>Note Travaux:</td><td><span id='travaux'></span></td></tr>"+

       "<tr><td>Pr&eacute;nom: </td><td><input type='text' id='prenom'/></td>"+
         "<td>Note TP2: </td><td><input type='text' id='tp2'/></td>"+
         "<td>Note Finale: </td><td><input type='text' id='finale'/></td>"+
         "<td>Note Examens:</td><td><span id='examen'></span></td></tr>"+

       "<tr><td>Code Permanent: </td><td><input type='text' id='code'/></td>"+
       "<td>Note TP3: </td><td colspan='3'><input type='text' id='tp3'/></td>"+
       "<td>Note Globale: </td><td width='50px'><span id='globale'></span></td>"+
       "<td>Note Lettre: </td><td><span id='lettre'></span></td></tr>"+
       "</table></fieldset>";

    // Valide que la form a ete cree pour l'objet
    this.surForm = true;

    return formText;
}

// Retourne true si la form est deja utilise par l'objet
function affForm(){
    return this.surForm;
}

// Valide la form 
function validForm(){
    // Lecture de la form
    document.getElementById("tp1");
    document.getElementById("tp2");
    document.getElementById("tp3");
    document.getElementById("intra");
    document.getElementById("finale");

    // Validation de la form, selon les directives du TP, filtration des bornes seulement
    if(tp1.value < 0 || tp1.value > 10)
      return "Note TP1, hors bornes";
    else if(tp2.value < 0 || tp2.value > 15)
        return "Note TP2, hors bornes";
    else if(tp3.value < 0 || tp3.value > 15)
        return "Note TP3, hors bornes";
    else if(intra.value < 0 || intra.value > 100)
        return "Note Intra, hors bornes";
    else if(finale.value < 0 || finale.value > 100)
        return "Note Finale, hors bornes";

    return true;
}

// Lecture et attribution des variables a l'objet Etudiant
function addForm(){
    this.nom = document.getElementById("nom").value;
    this.prenom = document.getElementById("prenom").value;
    this.codePermanent = document.getElementById("code").value;
    this.noteTP1 = document.getElementById("tp1").value;
    this.noteTP2 = document.getElementById("tp2").value;
    this.noteTP3 = document.getElementById("tp3").value;
    this.noteExamenIntra = document.getElementById("intra").value;
    this.noteExamenFinale = document.getElementById("finale").value;
}

// Calcule des notes
function calNotes(){
    // Additionne les notes des TPs
    this.noteTravaux = Number(this.noteTP1) + Number(this.noteTP2) + Number(this.noteTP3);

    // Additionne les examens
    this.noteExamens = Number(this.noteExamenIntra)*0.2 + Number(this.noteExamenFinale)*0.4;

    // Valide le seuil de 23.5 et atribut la note globale
    if(this.noteExamens < 23.5)
        this.noteGlobale = this.noteExamens;
    else
        this.noteGlobale = Number(this.noteExamens) + Number(this.noteTravaux);

    // Attribut la note reliee au resultat numerique
    this.noteLettre = 
      (this.noteGlobale >= 89.5) ? "A+":
      (this.noteGlobale >= 84.5) ? "A":
      (this.noteGlobale >= 79.5) ? "A-":
      (this.noteGlobale >= 76.5) ? "B+":
      (this.noteGlobale >= 72.5) ? "B":
      (this.noteGlobale >= 69.5) ? "B-":
      (this.noteGlobale >= 64.5) ? "C+":
      (this.noteGlobale >= 59.5) ? "C":
      (this.noteGlobale >= 56.5) ? "C-":
      (this.noteGlobale >= 53.5) ? "D+":
      (this.noteGlobale >= 49.5) ? "D":
      "E";
}

// Affiche les notes dans les span respectifs
function affNotes(){
    document.getElementById("travaux").innerHTML = (this.noteTravaux).toFixed(1);
    document.getElementById("examen").innerHTML = (this.noteExamens).toFixed(1);
    document.getElementById("globale").innerHTML = (this.noteGlobale).toFixed(1);
    document.getElementById("lettre").innerHTML = this.noteLettre;
}

thx guys

i did add variables for the form and change the code accordingly, it work great.

but still, i don't think it's the optimal way to do it.

exemple:
this.tagNom = this.id+"nom";
"<tr><td>Nom: </td><td><input type='text' id='"+this.tagNom+"'/></td>"+
this.nom = document.getElementById(this.tagNom).value;

and so on ...

if you guys have any better way of doing this, like integrate an id ancor maybe in the affForm function, so i can get rid of the form variables.

thx guys

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.