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é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