Pages

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

      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 (🍌, 🍍)

      DS

        

      Integrez cette vidéo dans votre site ! Comment la faire demarrer automatiquement ?