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

DS

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

DOM

🥷🏿Parcours l'arbre du DOM

<body>

Para 1

second Para 2

dernier Para

</body>

https://dupontdenis.github.io/parcoursArbreGenerator/

code :

function* search(node) {
  console.log("➡️ Entrée dans search() avec :", node);

  if (!node) {
    console.log("⛔ Node est null, on stoppe ici.");
    return;
  }

  console.log("📤 Yield du node :", node);
  yield node;

  console.log("🔽 Appel récursif sur firstChild :", node.firstChild);
  yield* search(node.firstChild);

  console.log("➡️ Appel récursif sur nextSibling :", node.nextSibling);
  yield* search(node.nextSibling);
}

// document.body.insertAdjacentHTML("beforeend", `<h1> the DOM`);
const nodes = [];

for (let node of search(document.body)) {
  console.log("📥 Node reçu dans le for...of :", node);
  if (node.localName) nodes.push(node.localName);
}

document.body.insertAdjacentHTML(
  "beforeend",
  `<p>${nodes.join("<span> </span>")}</p>`
);

Cours JS

LE DOM

Interface/fonctionnalité

Interface

Le code de l'interface

Fonctionnalité

Cas de la calculette !

Clonez le code de l'interface

DOM

🖋️DOM

Travail personel sur le DOM

Property / Method	Description
element.appendChild()	Adds a new child node, to an element, as the last child node
element.attributes	Returns a NamedNodeMap of an element's attributes
element.childElementCount	Returns the number of child elements an element has
element.childNodes	Returns a collection of an element's child nodes (including text and comment nodes)
element.children	Returns a collection of an element's child element (excluding text and comment nodes)
element.classList	Returns the class name(s) of an element
element.className	Sets or returns the value of the class attribute of an element
element.cloneNode()	Clones an element
element.contains()	Returns true if a node is a descendant of a node, otherwise false
element.contentEditable	Sets or returns whether the content of an element is editable or not
element.firstChild	Returns the first child node of an element
element.firstElementChild	Returns the first child element of an element
element.getAttribute()	Returns the specified attribute value of an element node
element.getAttributeNode()	Returns the specified attribute node
element.getElementsByClassName()	Returns a collection of all child elements with the specified class name
element.getElementsByTagName()	Returns a collection of all child elements with the specified tag name
element.hasChildNodes()	Returns true if an element has any child nodes, otherwise false
element.id	Sets or returns the value of the id attribute of an element
element.innerHTML	Sets or returns the content of an element
element.insertBefore()	Inserts a new child node before a specified, existing, child node
element.lastChild	Returns the last child node of an element
element.lastElementChild	Returns the last child element of an element
element.nextSibling	Returns the next node at the same node tree level
element.nextElementSibling	Returns the next element at the same node tree level
element.nodeName	Returns the name of a node
element.nodeType	Returns the node type of a node
element.nodeValue	Sets or returns the value of a node
element.parentNode	Returns the parent node of an element
element.parentElement	Returns the parent element node of an element
element.previousSibling	Returns the previous node at the same node tree level
element.previousElementSibling	Returns the previous element at the same node tree level
element.querySelector()	Returns the first child element that matches a specified CSS selector(s) of an element
element.querySelectorAll()	Returns all child elements that matches a specified CSS selector(s) of an element
element.removeAttribute()	Removes a specified attribute from an element
element.removeChild()	Removes a child node from an element
element.replaceChild()	Replaces a child node in an element
element.setAttribute()	Sets or changes the specified attribute, to the specified value
element.setAttributeNode()	Sets or changes the specified attribute node
element.style	Sets or returns the value of the style attribute of an element
element.tagName	Returns the tag name of an element
element.textContent	Sets or returns the textual content of a node and its descendants
nodelist.item()	Returns the node at the specified index in a NodeList
nodelist.length	Returns the number of nodes in a NodeList

Solution rendre la money !

→ lien

Rendre la monnaie !

Il est facile de trouver comment rendre 33€ en utilisant des pièces de 5,3 et 1.

En effet, il suffit de décomposer 33 sous la forme [ 33 = 5x + 2y + 1z ].

Pages

Correction DS

myMethod

DOM TD

note DS

l'opérateur &&

📦Cas des objets

Correction DS machine

NSI

Le DOM

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

Create element

TD DOM

DOM : Start coding !

DOM de base

🥷🏿parcours

Parcours DOM

Cours DOM : parcours

You are ningas ! 🥷🏽

🪛En action

DS

DS

DOM

Cours JS

LE DOM

Interface/fonctionnalité

Interface

Fonctionnalité

Cas de la calculette !

Clonez le code de l'interface

DOM

🖋️DOM

Travail personel sur le DOM

Solution rendre la money !

Rendre la monnaie !

Pages

📦Cas des objets

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

DOM de base

🪛En action

Interface

Fonctionnalité

Cas de la calculette ! Clonez le code de l'interface

🖋️DOM

Travail personel sur le DOM

Cas de la calculette !

Clonez le code de l'interface