dupontL1: avril 2026

Correction DS

myForEach : sujet A

myMap : sujet B

myFilter : sujet C

myMethod

Création de vos outils :

myForEach

myFilter

note DS

https://docs.google.com/spreadsheets/d/1krd-tvfspL5HwDCFasPdKcGm6aZSCYZcr5PtplXkipY/edit?usp=sharing

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

Correction DS machine

Lien vers la cinémathèque

Cinéma 1900 : Magie & technologie (02/10) : Les lieux de tournage du premier cinéma en France, cartographie et contextualisation from La Cinémathèque française on Vimeo.

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

Create element

Etude de la structure de l'application :

Code : https://github.com/dupontdenis/beautifullAnim.git

TOP anim : https://dupontdenis.github.io/animTrail/

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

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

Comptez le nombre de paragraphes

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

Une boucle sur la selection des paragraphes

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

1️⃣Ajouter une classe à tous les paragraphes

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

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

const paragraphes = document.querySelectorAll("p");
for (let p of paragraphes ) {
p.addEventListener("click", () => {
p.classList.toggle("second");
});
}

🥇La délégation

const fun = function (event) {
const targetElement = event.target; // p or em
if (targetElement.closest("p")) {
let para = targetElement.closest("p");
para.classList.toggle("second");
}
};
const parent = document.querySelector("body");
parent.addEventListener("click", fun, false);

🥷Autres exemples de code à tester sur codePen.

Somme des valeurs contenu dans l'attribut data-code

let value = 0;
for (let para of articles) {
value+= parseInt(para.dataset.code) // parseInt transforme la valeur en entier !
}
console.log(value)

Affichez le résultat dans un div.

let value = 0;
for (let para of articles) {
value+= parseInt(para.dataset.code) // parseInt transforme la valeur en entier !
}
document.querySelector("div").innerText = value

🔜 Pour la moyenne !

const students = document.querySelectorAll("[data-mark]");
const total = [...students].reduce(
(sum, el) => sum + Number(el.dataset.mark),
0
);
const average = (total / students.length).toFixed(2);
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

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);

Plus d'infos »

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);

Plus d'infos »

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

Pages