dupontL1

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.

NSI

🛠 Exercices JS

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

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;

Pages