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>