Saison 2

Saison 1

Chap : JS

Saison 2

Chap : DOM

🪛 Objectifs

Saison 2 : Magie de JS dans le DOM

 Exemple 1

Dans la console d'un site Exemple collez le code suivant ! 

const allTag = (rootElement) => {

  let tags = [],

    counts = {};

  const explore = (element) => {

    for (const child of element.children) {

      tags.push(child.nodeName);

      explore(child);

    }

  };

  explore(rootElement);

  const getWordCnt = (arr) => {

    return arr.reduce((acc, tag) => {

      acc[tag] = (acc[tag] || 0) + 1;

      return acc;

    }, {});

  };

  counts = getWordCnt(tags);

  const sortCounts = (obj) => {

    let sortedEntries = Object.entries(obj).sort((a, b) => b[1] - a[1]);

    // return Object.fromEntries(sortedEntries);

    return sortedEntries

  };

  return sortCounts(counts);

};

const tagCounts = allTag(document.body);

const sortedKeys = tagCounts.map((entry) => entry[0].toLowerCase());

console.log(sortedKeys);

// Create a table for displaying results

const createTable = (data) => {

  let table = document.createElement("table");

  table.style.border = "1px solid black";

  table.style.borderCollapse = "collapse";

  table.style.width = "50%";

  let headerRow = table.insertRow();

  let tagHeader = headerRow.insertCell(0);

  let countHeader = headerRow.insertCell(1);

  tagHeader.textContent = "Tag Name";

  countHeader.textContent = "Count";

  tagHeader.style.border = countHeader.style.border = "1px solid black";

  tagHeader.style.padding = countHeader.style.padding = "5px";

  tagHeader.style.fontWeight = "bold";

  countHeader.style.fontWeight = "bold";

  for (let [tag, count] of (data)) {

    let row = table.insertRow();

    let tagCell = row.insertCell(0);

    let countCell = row.insertCell(1);

    tagCell.textContent = tag;

    countCell.textContent = count;

    tagCell.style.border = countCell.style.border = "1px solid black";

    tagCell.style.padding = countCell.style.padding = "5px";

  }

 // document.body.appendChild(table);

document.body.insertAdjacentHTML("afterbegin", table.outerHTML);

};

// Display the table

createTable(tagCounts);

Exemple 2

HTML

<div id="wrapper">

<div data-tabname="Onglet 1">Contenu 1</div>

  <div data-tabname="Onglet 2">Contenu 2</div>

  <div data-tabname="Onglet 3">Contenu 3</div>

</div>

Magie du JS

Création des boutons

Gestion des événements

Contenu 2

End of saison 1

 

Special event

 Préparation à l'examen : PizzaJS

Function Style, Method Style

 The main difference between the function style and the use of the `filter() or map()` method lies 

in the programming paradigm they represent.

🥇**Function Style**: The function style represents the procedural programming paradigm.

🎖️ **Method Style**: The method style represents the functional programming paradigm.

const languageSkills = [

  {

    language: "Spanish",

    skill: "Professional Proficiency",

  },

  {

    language: "English",

    skill: "Professional Working Proficiency",

  },

  {

    language: "German",

    skill: "Professional Proficiency",

  },

];

const output = languageSkills.reduce((map, { language, skill }) => {

  if (map.has(skill)) map.get(skill).push(language);

  else map.set(skill, [language]);

  return map;

}, new Map());

const nativeResult = Object.groupBy(languageSkills, (item) => item.skill);

DS : 30minutes Mercredi P1

 Thème : Films, genres, notes, années

const films = [

  { titre: "Inception", genre: "SF", note: 9, annee: 2010 },

  { titre: "Titanic", genre: "Romance", note: 8, annee: 1997 },

  { titre: "Interstellar", genre: "SF", note: 10, annee: 2014 },

  { titre: "Amélie", genre: "Comédie", note: 7, annee: 2001 },

  { titre: "Avatar", genre: "SF", note: 7, annee: 2009 }

];

Extraire la liste des titres des films. 

Donner les films par genre. 

Vérifier si tous les films sont sortis après 1990. 

Trouver le film dont le titre est "Titanic". 

Vérifier s’il existe au moins un film avec une note ≥ 9. 

Tester si la liste des genres contient "Comédie". 

Sélectionner les films de genre SF. 

Calculer la somme des notes des films.

JavaScript ↔ Python

🍕JavaScript ↔ Python

Les principales opérations sur les collections : filter, map, reduce, groupBy, find, some, every et includes.

JavaScript	Python	JavaScript
filter()	compréhension de liste	sélectionner
map()	compréhension de liste	transformer
reduce()	boucle for	accumuler
groupBy()	defaultdict + for	regrouper
find()	next() + générateur	trouver un élément
some()	any()	au moins un
every()	all()	tous
includes()	in	contient

1. filter()

// JavaScript
const parisiens = etudiants.filter(e => e.ville === "Paris");

// Python
parisiens = [
e for e in etudiants
if e["ville"] == "Paris"
]

2. map()

// JavaScript
const noms = etudiants.map(e => e.nom);

// Python
noms = [e["nom"] for e in etudiants]

3. reduce()

// JavaScript
const total = etudiants.reduce((acc, e) => {
return acc + e.age;
}, 0);
 

// Python

 total = 0

for e in etudiants:
total += e["age"]

4. groupBy()

// JavaScript
const groupes = Object.groupBy(
etudiants,
e => e.ville
);

// Python
from collections import defaultdict

groupes = defaultdict(list)

for e in etudiants:
    groupes[e["ville"]].append(e)

5. find()

// JavaScript
const etudiant = etudiants.find(
e => e.nom === "Alice"
);

// Python
etudiant = next(
(e for e in etudiants if e["nom"] == "Alice"),
None
)

6. some()

// JavaScript
const existe = etudiants.some(
e => e.ville === "Paris"
);

// Python
existe = any(
e["ville"] == "Paris"
for e in etudiants
)

7. every()

// JavaScript
const tousParisiens = etudiants.every(
e => e.ville === "Paris"
);

// Python
tous_parisiens = all(
e["ville"] == "Paris"
for e in etudiants
)

8. includes()

// JavaScript
const villes = ["Paris", "Lyon", "Marseille"];

villes.includes("Paris");

  // Python
villes = ["Paris", "Lyon", "Marseille"]

"Paris" in villes

Exemple complet : grouper les étudiants par ville

Données Python :

etudiants = [
{"nom": "Alice", "ville": "Paris"},
{"nom": "Bob", "ville": "Lyon"},
{"nom": "Chloé", "ville": "Paris"},
{"nom": "Alice", "ville": "Marseille"},
{"nom": "Bob", "ville": "Lyon"}
]

Équivalent du reduce JavaScript :

groupes = {}

for e in etudiants:
ville = e["ville"]

if ville not in groupes:
    groupes[ville] = []

groupes[ville].append(e)

🛟Mémo

·        filter() → [ ... for ... if ... ]

·        map() → [ ... for ... ]

·        reduce() → for + accumulateur

·        groupBy() → defaultdict + for

·        find() → next(...)

·        some() → any()

·        every() → all()

·        includes() → in

Remarque : en Python, filter(), map() et reduce() existent, mais les compréhensions de listes et les boucles for sont souvent plus naturelles pour apprendre ces opérations.

 

ficher → lien