dupontL1

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

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 > 0 ? (value / count).toFixed(2) : "0.00";

// utilisez le bon selector 

const elements = document.querySelectorAll("[data-mark]");

let sum = 0;
let count = 0;

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

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

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

// 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";

Décomposition !

Create element

Etude de la structure de l'application :

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

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

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

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

Parcours DOM

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

Pages