Pages

Etude de cas

See the Pen examen event delegation by dupont (@dupontcodepen) on CodePen.

🪛Modifiez le CSS en supprimant le filtre de la classe show ! 

.show::after {

  content: " — " attr(data-population)".000" ;

  font-weight: bold;

  color: #555;

}


🚀Verifiez le bon comportement des événements avec le code HTML suivant

 <section>

    <p data-population="30" data-zone="zone1">Evry</p>

    <div data-population="20" data-zone="zone1">Corbeil-Essonnes</div>


🚨Verifiez le mauvais comportement des événement avec du code HTML suivant ! 

 <section>

   <div data-population="30" data-zone="zone1"><span>la ville </span>d'Evry</div>

   <div data-population="20" data-zone="zone1">Corbeil-Essonnes</div>


🛟Proposez une amélioration dans le code JS ! 




ETUDIANTS EN DDL



Pour accéder à la L2 Informatique venant du double diplôme Droit-Informatique ou Bio-informatique, vous devez valider les 60 ECTS et tous les blocs d'informatique.


🅰️La rumeur selon laquelle il suffirait de valider uniquement les modules d’informatique est fausse. Pour passer en L2 Info, il faut obligatoirement valider un ensemble de 60 ECTS de la L1. Les seuls modules d’informatique ne représentent qu’une partie de ces crédits : même si vous les réussissez, vous n’atteignez pas le total requis. 

Entrainement Examen

- Donnez le corps de la fonction myFilter(array, test) qui renvoie un nouveau tableau contenant uniquement les éléments qui passent le test.

- Donnez la fonction de test fx pour obtenir le résultat suivant :  u = myFilter(T,fx)

Vous disposez de toutes les fonctions myForEach, mySome, myEvery, myIncludes, myMap … les boucles sont donc à bannir ! 

 <section>

    <div data-population="30" data-zone="zone1">Evry</div>

    <div data-population="20" data-zone="zone1">Corbeil-Essonnes</div>

    <div data-population="20" data-zone="zone2">Juvisy-sur-Orge</div>

    <div data-population="22" data-zone="zone1">Ris-Orangis</div>

    <div data-population="20" data-zone="zone3">Athis-Mons</div>

    <div data-population="20" data-zone="zone2">Massy</div>

  </section>

  <div id="population"></div>

-Récupérer tous les <div> contenus dans la balise <section> ?

 

-Récupérer la population d’une ville à partir d’un élément <div> ?

 

-Calculez la population totale et l’afficher dans #population ?


-Ajoutez une classe "highlight" aux villes ayant une population > 20. L'utilisation de l'opérateur && est obligatoire !


- Sélectionnez les villes de la zone 1 en utilisant myFilter()


- Sélectionnez les villes de la zone 1 sans utiliser myFilter()


- Trouvez toutes les zones en utilisant myMap puis myForEach et myIncludes.


- Evaluez le programme

  1. const t = [];


  2. myForEach(

  3.   myMap(villes, v => Number(v.dataset.population)) ,

  4.   p => {

  5.     if (!myIncludes(t, p)) {

  6.       t.push(p);

  7.     }

  8.   }

  9. );


- - Evaluez ce code

div.show::after {

  content: " — " attr(data-population)".000" ;

  font-weight: bold;

  color: #555;

} // CSS


const showPopulation = function (event) {

  event.target.classList.toggle("show");

};


const parent = document.querySelector("section");

parent.addEventListener("click", showPopulation, false);

// JS

- proposez une amélioration !


Correction DS

myForEach : sujet A

myMap : sujet B

myFilter : sujet C

myMethod

Création de vos outils : 

myForEach

myFilter

DOM TD

 introduction au DOM

l'opérateur &&

const myForEach = (tab, callback) => {
  for (let i = 0; i < tab.length; i++) {
    callback(tab[i], i, tab);
  }
};

const notes = [12, 7, 17, 5, 19];
// 👉 Si la note < 6 on met Ajourné

myForEach(notes, (n, i, t) => n < 7 && (t[i] = "AJ")); 

 

 📦Cas des objets

Le DOM

Calculer la moyenne d'un groupe avec des étudiants absents

📒 Selecteur = p

const students = document.querySelectorAll("p");

let sum = 0;
let count = 0;

for (const student of students) {
  const mark = Number(student.dataset.mark);

  if (!isNaN(mark)) {
    sum += mark;
    count++;
  }
}


const average = count
  ? (sum / count).toFixed(2)
  : "Aucune note";

const students = document.querySelectorAll("p");

let sum = 0;
let count = 0;

for (const student of students) {
  const mark = Number(student.dataset.mark);

  if (!isNaN(mark)) {
    sum += mark;
    count++;
  }
}


const average = count
  ? (sum / count).toFixed(2)
  : "Aucune note";

Choix d'un selecteur ! 

// utilisez le bon selecteur
const elements = document.querySelectorAll("[data-mark]");

let sum = 0;

for (const el of elements) {
    sum += Number(el.dataset.mark);
}

const average = sum / elements.length;

;



🤌🏼En action

See the Pen UsetherightSelector by dupont (@dupontcodepen) on CodePen.


En action : github

🥷🏼 En action (L2)

// 🥷🏼utilisation des méthodes en L2

const marks = [...document.querySelectorAll("[data-mark]")]
  .map(p => Number(p.dataset.mark));

const average =
  marks.length ? (marks.reduce((a, b) => a + b) / marks.length).toFixed(2) : "Aucune note";

See the Pen querySelector by dupont (@dupontcodepen) on CodePen

TD DOM

TD de base


Parcours de l'arbre : help

DOM : Start coding !

 

DOM de base

Fonctions de base à tester dans la console de http://dupontcours.free.fr/JavaScript/DOM-javascript/dom.html


🆒Sélectionnez tous les paragraphes

  1. const paragraphes = document.querySelectorAll("p");

Comptez le nombre de paragraphes

  1. const  paragraphes = document.querySelectorAll("p");
  2. console.log( paragraphes.length)

Une boucle sur la selection des paragraphes

  1. const  paragraphes = document.querySelectorAll("p");
  2. for (let p of  paragraphes) {
  3.         console.log(p.innerText.split(" ").length); // count words
  4. }

      1️⃣Ajouter une classe à tous les paragraphes

      1. const  paragraphes = document.querySelectorAll("p");
      2. for (let p of  paragraphes) {
      3.     p.classList.add("second");
      4. }

      🪛Ajoutez un événement click (voir amélioration par délégation)

      1. const paragraphes = document.querySelectorAll("p");
      2. for (let p of paragraphes ) {
      3.   p.addEventListener("click", () => {
      4.     p.classList.toggle("second");
      5.   });
      6. }

      🥇La délégation 

      1. const fun = function (event) {
      2.   const targetElement = event.target; // p or em

      3.   if (targetElement.closest("p")) {
      4.     let para = targetElement.closest("p");
      5.     para.classList.toggle("second");
      6.   }
      7. };

      8. const parent = document.querySelector("body");
      9. parent.addEventListener("click", fun, false);
      🥷Autres exemples de code à tester sur codePen.
      Somme des valeurs contenu dans l'attribut data-code
      1. let value = 0;
      2. for (let para of articles) {
      3.   value+= parseInt(para.dataset.code) // parseInt transforme la valeur en entier !
      4. }
      5. console.log(value)

      Affichez le résultat dans un div.
      1. let value = 0;
      2. for (let para of articles) {
      3.   value+= parseInt(para.dataset.code) // parseInt transforme la valeur en entier !
      4. }
      5. document.querySelector("div").innerText = value


      🔜 Pour la moyenne ! 
      1. const students = document.querySelectorAll("[data-mark]");

      2. const total = [...students].reduce(
      3.   (sum, el) => sum + Number(el.dataset.mark),
      4.   0
      5. );

      6. const average = (total / students.length).toFixed(2);

      7. document.querySelector(".msg").textContent += average;

      🥷🏿parcours

       Parcours à la recherche de texte !


      Rechercher un mot dans une page !

       en action !

      Afficher le DOM dans une page

      Remarque :

      Code avec expReg : en action

      Parcours DOM

       

        https://dupontdenis.github.io/AnimDOM/

      Cours DOM : parcours

       Parcours du DOM

      Ecrire une fonction de parcours du DOM : printDomEle


      🎁
      HTML

      <body>
      article{article $}>section{section $}*2>p{para $}*3(puis Tab)
      </body>


      JS
      fonctions utiles :   console.group(); console.groupEnd();
      on utilise children pour avoir les enfants d'un noeud.
      on utilise for of pour réaliser une boucle

      La fonction est lancée sur le body avec printDomEle(document.body);

      You are ningas ! 🥷🏽

      Dans un groupe, il y a des étudiants [👩🏼‍🦰👦🏿👨‍🦱👨🏽‍🦳👩🏽🧔🏽 👩🏽 ]avec chacun une moyenne.

      Comment écrire que l'on recherche s'il existe un.E étudiant.e abscent (ABI)

      → Réponse  mySome(students, isABI); 


      Dans un panier (basket) 🧺, il y a plein de fruits et des légumes 🍍🍑 🥕🍅🥦🍒🍌🥔🍄🍓🧄🌰🫛.

      Comment écrire que l'on recherche s'il existe un fruit sans pépin (seed) ?

      → Réponse  mySome(basket, isSeedlessFruit); 



      🪛En action


      const basket = [
        { icon: "🍎", hasSeeds: true, color: "red", price: 1.2, category: "fruit" },
        {
          icon: "🥕",
          hasSeeds: false,
          color: "orange",
          price: 0.7,
          category: "vegetable",
        },
        {
          icon: "🍌",
          hasSeeds: false,
          color: "yellow",
          price: 1.0,
          category: "fruit",
        },
        {
          icon: "🥦",
          hasSeeds: false,
          color: "green",
          price: 1.8,
          category: "vegetable",
        },
        { icon: "🍓", hasSeeds: true, color: "red", price: 0.5, category: "fruit" },
        {
          icon: "🍆",
          hasSeeds: true,
          color: "purple",
          price: 2.1,
          category: "vegetable",
        },
        { icon: "🥝", hasSeeds: true, color: "green", price: 1.3, category: "fruit" },
        {
          icon: "🍍",
          hasSeeds: false,
          color: "yellow",
          price: 3.5,
          category: "fruit",
        },
      ];

      const isSeedlessFruit = basketItem =>
              basketItem.category === "fruit" && !basketItem.hasSeeds;

      const hasSeedlessFruit = mySome(basket, isSeedlessFruit); 


      DS

      ---------------------------------------------

      // Basket: a mixed list of fruits and vegetables
      // Each item has properties describing what it is
      // ---------------------------------------------
      const basket = [
        {
          icon: "🍎",
          hasSeeds: true,
          color: "red",
          weight: 180,
          sweetness: 6,
          price: 1.2,
          category: "fruit",
        },
        {
          icon: "🥕",
          hasSeeds: false,
          color: "orange",
          weight: 80,
          sweetness: 4,
          price: 0.7,
          category: "vegetable",
        },
        {
          icon: "🍌",
          hasSeeds: false,
          color: "yellow",
          weight: 120,
          sweetness: 8,
          price: 1.0,
          category: "fruit",
        },
        {
          icon: "🥦",
          hasSeeds: false,
          color: "green",
          weight: 300,
          sweetness: 3,
          price: 1.8,
          category: "vegetable",
        },
        {
          icon: "🍓",
          hasSeeds: true,
          color: "red",
          weight: 25,
          sweetness: 9,
          price: 0.5,
          category: "fruit",
        },
        {
          icon: "🍆",
          hasSeeds: true,
          color: "purple",
          weight: 250,
          sweetness: 2,
          price: 2.1,
          category: "vegetable",
        },
        {
          icon: "🥝",
          hasSeeds: true,
          color: "green",
          weight: 75,
          sweetness: 7,
          price: 1.3,
          category: "fruit",
        },
        {
          icon: "🍍",
          hasSeeds: false,
          color: "yellow",
          weight: 900,
          sweetness: 5,
          price: 3.5,
          category: "fruit",
        },
      ];

      /**
       * Custom implementation of Array.prototype.some()
       * ------------------------------------------------
       * @param {Array} array - the list we want to check
       * @param {Function} fxn - the test function applied to each element
       * @returns {boolean} - true if at least one element passes the test
       *
       * How it works:
       * - Loop through the array
       * - Apply the callback to each element
       * - If the callback returns true → stop and return true
       * - If no element matches → return false
       */
      function mySome(array, fxn) {
        for (let i = 0; i < array.length; i++) {
          if (fxn(array[i])) {
            return true; // Found at least one matching item
          }
        }
        return false; // No match found
      }

      // ------------------------------------------------------
      // Example 1: Check if the basket contains a vegetable
      // Using a classic function expression
      // ------------------------------------------------------
      const hasVegetable = mySome(
        basket,
        function (basketItem) {
          return basketItem.category === "vegetable";
        }
      );
      console.log("Has vegetable?", hasVegetable); // true

      // ------------------------------------------------------
      // Example 2: Same test, but using an arrow function
      // ------------------------------------------------------
      const hasVegetable2 = mySome(
        basket,
        basketItem => basketItem.category === "vegetable"
      );
      console.log("Has vegetable?", hasVegetable2); // true

      // ------------------------------------------------------
      // Example 3: Store the callback in a variable
      // ------------------------------------------------------
      const hasVegetable3 = basketItem => basketItem.category === "vegetable";

      const hasVegetable3Result = mySome(basket, hasVegetable3);

      console.log("Has vegetable?", hasVegetable3Result); // true

      // ------------------------------------------------------
      // Example 4: Check if the basket contains an expensive item
      // ------------------------------------------------------
      const hasExpensiveItem = mySome(
        basket,
        basketItem => basketItem.price > 3
      );
      console.log("Has expensive item?", hasExpensiveItem); // true (🍍)

      // ------------------------------------------------------
      // Example 5: Check if the basket contains a seedless fruit
      // ------------------------------------------------------
      const seedlessFruit = mySome(
        basket,
        basketItem => basketItem.category === "fruit" && !basketItem.hasSeeds
      );
      console.log("Has seedless fruit?", seedlessFruit); // true (🍌, 🍍)