hackathlon:pronote:tableau [APs et stages du BTS SIO du lycée Suzanne Valadon]

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Pronote : récupérer le tableau des moyennes par classe  ======

===== Ressources =====
Lien : 
  * https://developer.mozilla.org/fr/docs/Web/API/Document
  * https://www.alsacreations.com/article/lire/1445-dom-queryselector-queryselectorall-selectors-api.html
  * https://openclassrooms.com/courses/creez-des-pages-web-interactives-avec-javascript/parcourez-le-dom
===== Principe =====
  * Accéder au tableau des moyennes avec le client Web de Pronote
  * Utiliser un script Javascript qui va parcourir le DOM de la page et extraire les informations
  * Mémoriser ces informations dans un objet Javascript
  * Mémoriser cet objet sur serveur Web en utilisant une API REST

===== Structure de la page HTML contenant le tableau des moyennes par classe  =====

<code html>
...
<h1 id="breadcrumbBandeau" >Tableau des moyennes par classe&nbsp;</h1>
...
<div id="GInterface.Instances[1].Instances[0].Instances[0].bouton_Edit" >B1&nbsp;SIO</div>
...
<div id="GInterface.Instances[1].Instances[0].Instances[1].bouton_Edit">Semestre&nbsp;1</div>
...
<table id="GInterface.Instances[1].Instances[3]_Contenu_1">
  <tbody>
    <tr>
      <td rowspan="2"></td>
      <td rowspan="2">
        <div>35 élèves</div>
      </td>
      <td rowspan="2">
        <div>Moyenne générale</div>
      </td>
    </tr>
    <tr>
    </tr>
  </thbody>
</table>
...
<table id="GInterface.Instances[1].Instances[3]_Contenu_2">
  <tbody>
    <tr>
      <td title="AEMJI  AN.ECO.MAN.JUR.S.INF  Coeff : 1">
        <div>AEMJI</div>
      </td>
      <td title="AGL1  ANGLAIS LV1  Coeff : 1">
        <div>AGL1</div>
      </td>
      ...
    </tr>
    <tr>
      <td title="AEMJI  AN.ECO.MAN.JUR.S.INF  Coeff : 1">
        <div>1</div>
      </td>
      <td title="AGL1  ANGLAIS LV1  Coeff : 1">
        <div>1</div>
      </td>
    </tr>
  </thbody>
</table>
...
<table id="GInterface.Instances[1].Instances[3]_Contenu_4">
  <thbody>
    <tr>
      <td></td>
      <td>
        <div>ANDRE Antoine</div>
      </td>
      <td colspan="2">
        <div>11,42</div>
      </td>
      ...> la liste verticale des étudiants et de leur moyenne annuelle
    </tr>
  </thbody>
</table>
...
<table id="GInterface.Instances[1].Instances[3]_Contenu_5">
  <tbody>
    <tr>
      <td>
        <div>11,00</div>
      </td>
      <td>
        <div>9,83</div>
      </td>
        ...> les différentes moyennes de l'étudiant horizontalement
    </tr>
    <tr>
      ...> les différentes moyennes des autres étudiants horizontalement
    </tr>
  </tbody>
</table>
...

            </div>
           </td>
           <td id="GInterface.Instances[1].Instances[3].ScrollV_Scroll">
           </td>
           <td>&nbsp;</td>
          </tr>
          <tr>
           ...>moyenne de la classe et des groupes
          </tr>
          <tr></tr>
          <tr></r>
         </thbody>
        </table>
       </td>
      </tr>
     </tbody>
    </table>
   </div>
  </td>
 </tr>
</thbody>

...
</code>

===== Parcours du DOM =====
Lien : https://openclassrooms.com/courses/creez-des-pages-web-interactives-avec-javascript/parcourez-le-dom

    * récupérer la classe avec getElementById("GInterface.Instances[1].Instances[0].Instances[0].bouton_Edit")
<code javascript>
var classe= document.getElementById("GInterface.Instances[1].Instances[0].Instances[0].bouton_Edit").innerHTML.replace("&nbsp;", " ");
</code>
    * récupérer le semestre avec getElementById("GInterface.Instances[1].Instances[0].Instances[1].bouton_Edit")
<code javascript>
var semestre = document.getElementById("GInterface.Instances[1].Instances[0].Instances[1].bouton_Edit").innerHTML.replace("&nbsp;", " ");
</code>
    * parcourir la liste des matières dans le tableau avec getElementById("GInterface.Instances[1].Instances[3]_Contenu_2")
      * 1ère ligne pour obtenir le libellé de la matière :
        * attribut title de la balise td pour le libellé long
        * contenu de la balise DIV pour le libellé court
      * 2ème ligne pour obtenir le coefficient (idem pour libellé long de la matière et DIV pour le coefficient)


<code javascript tableau.js>
// objet tableau avec la structure suivante :
// {titre: "", classe: "", semestre: "", moyenneClasse: x, nbEleves: x,
//    matieres: [{nomLong: "", nomCourt: "", coef: x, moyenneMatiereClasse: x},
//               {nomLong: "", nomCourt: "", coef: x, moyenneMatiereClasse: x},
//              ...],
//    eleves: [{nom: "", moyenneEleveSemestre: x,
//              moyenneMatiereEleve: [{matiere: "nomCourtMatiere", moyenne: x},
//                                    {matiere: "nomCourtMatiere", moyenne: x},
//                                    ...]
//            }]
// }

// fonction libelle
// extraire le nom de la matière du libelle long
//- au debut de la chaine enlever le libelle court
//- en fin de chaine enlever le coefficient
//- supprimer les espaces avant et apres
function libelle(valeur) {
  if (valeur.indexOf(' ')) {
    valeur = valeur.substring(valeur.indexOf(' ') + 1);
  }
  if (valeur.indexOf('Coeff')) {
    valeur = valeur.substring(0,valeur.indexOf('Coeff'));
  }
  return valeur.trim();
}

var tableau = new Object();
tableau.titre = document.getElementById("breadcrumbBandeau").innerHTML.replace("&nbsp;", " ");
tableau.classe = document.getElementById("GInterface.Instances[1].Instances[0].Instances[0].bouton_Edit").innerHTML.replace("&nbsp;", " ");
tableau.semestre = document.getElementById("GInterface.Instances[1].Instances[0].Instances[1].bouton_Edit").innerHTML.replace("&nbsp;", " ");

var i = 0;
var temp = new Object();

// récuperation du nombre d'eleves
var tabNbEleve = document.getElementById("GInterface.Instances[1].Instances[3]_Contenu_1");
// utilisation d'une expression rationnelle pour extraire le nombre d'eleves
var re = /([0-9]+)/;
tableau.nbEleves = re.exec(tabNbEleve.childNodes[0].childNodes[0].childNodes[1].childNodes[0].innerHTML)[0];

// recuperation de la moyenne de la classe
var tabMoyenneClasse = document.getElementById("GInterface.Instances[1].Instances[3]_Contenu_7");
tableau.moyenneClasse = tabMoyenneClasse.childNodes[0].childNodes[0].childNodes[2].childNodes[0].innerHTML;

// récuperation des noms de matieres
var tabMatiere = document.getElementById("GInterface.Instances[1].Instances[3]_Contenu_2");
i = 0;
// creation tableau des objets matieres
tableau.matieres = [];
// acces 1er TBODY, 1er TR pour le nom des matieres puis à tous les TD
tabMatiere.childNodes[0].childNodes[0].childNodes.forEach(function(matiere) {
     // attribut title du TD pour le nom long des matières
     // contenu balise DIV pour le nom court
     // memorisation dans le tableau matiere
     tableau.matieres[i] = {nomLong: libelle(matiere.title), nomCourt: matiere.childNodes[0].innerHTML};
     i++;
})
i = 0;
// acces 1er TBODY, 2eme TR pour le coefficient des matieres puis à tous les TD
tabMatiere.childNodes[0].childNodes[1].childNodes.forEach(function(coef) {
     // attribut title du TD pour le nom long des matières
     // contenu balise DIV pour le nom court
     temp = tableau.matieres[i];
     temp.coef = coef.childNodes[0].innerHTML;
     tableau.matieres[i] = temp;
     i++;
})

// recuperation des noms d'eleves et de leur moyenne semestrielle
var tabEleves = document.getElementById("GInterface.Instances[1].Instances[3]_Contenu_4");
// creation tableau des objets eleves
tableau.eleves = [];
i = 0;
// acces 1er TBODY puis à tous les TR des eleves
tabEleves.childNodes[0].childNodes.forEach(function(eleve) {
    // acces contenu balise DIV pour le nom
    //console.log(nom.childNodes[1].childNodes[0].innerHTML);
    tableau.eleves[i] = {nom: eleve.childNodes[1].childNodes[0].innerHTML, moyenneEleveSemestre: eleve.childNodes[2].childNodes[0].innerHTML};
     i++;
})

// recuperation des moyennes semestrielles des matieres de chaque eleve
var tabMoyenneEleves = document.getElementById("GInterface.Instances[1].Instances[3]_Contenu_5");
var j = 0;
i = 0;
// acces 1er TBODY puis à tous les TR des eleves avec utilisation de l'indice i
tabMoyenneEleves.childNodes[0].childNodes.forEach(function(moyennesEleve) {
    // creation tableau des objets moyenneMatiereEleve de l'eleve
    tableau.eleves[i].moyenneMatiereEleve = [];
    j = 0;
    // parcours de tous les TD et acces contenu balise DIV de chaque moyenne et utilisation de l'indice j
    moyennesEleve.childNodes.forEach(function(moyenne){
       // recupere nom de la matiere dans tableau.matieres[i].nomCourt
       // creation objet moyenne matiere avec nom court et moyenne
       tableau.eleves[i].moyenneMatiereEleve[j] = {matiere: tableau.matieres[j].nomCourt, moyenne: moyenne.childNodes[0].innerHTML};
       j++;
     })
     i++;
})


// recuperation des moyennes semestrielles des matieres de la classe
var tabMoyenneMatiereClasse = document.getElementById("GInterface.Instances[1].Instances[3]_Contenu_8");

j = 0;
// acces 1er TBODY, 1er TR puis à tous les TD
tabMoyenneMatiereClasse.childNodes[0].childNodes[0].childNodes.forEach(function(moyenneMatiereClasse){
    // creation tableau des objets moyenneMatiereClasse
    temp = tableau.matieres[j];
    temp.moyenneMatiereClasse = moyenneMatiereClasse.childNodes[0].innerHTML;
    tableau.matieres[j] = temp;
    j++;
})
</code>

===== Retour projet 2017 =====
<WRAP center round info>
  *  [[hackathlon:2017|PROJET 2017]]
</WRAP>