dupontL2: 2026

👩🏽‍🎓Voici votre DS dans la version DS

https://drive.google.com/file/d/1u6GCwVtLlSZT6B5mOPpksb4VibwSxYsp/view?usp=sharing

Voici votre DS dans une version 🛟🛟https://drive.google.com/file/d/1af8GnYTejs-3E49vR6FZsJYXjA7Y_f1z/view?usp=sharing

Tous mes TD sont en distantiel !

TD distantiel !

Relire : Afficher dans le DOM : Résumé

💥A maîtriser :

→ Projet L2 - Grouper les étudiants

Rappels :

Cours

Le cours a eu lieu :

- la nuit de l'info, présentée par les L3 alt. https://dupontl2.blogspot.com/2026/11/evenement-nuit-de-linfo.html

- Django (blabla)

- 💥 Les évenements : https://docs.google.com/document/d/10eYeFVDomsc9ErXQdeUf6xLox0LHLtNo7_ro-cwEhms/edit?usp=sharing

🚀 Cours : API Django

API

Client API Pizza

🚀 Clonez : https://github.com/dupontdenis/clientAPIPizzaRender.git

Cette application affiche et filtre les pizzas en interrogeant une API distante depuis le navigateur. L'URL de l'API est définie dans app.mjs : https://pizzaapi-2.onrender.com/api/pizzas/.

Lancer le client avec Live Server

Ouvrez le dossier du projet dans Visual Studio Code.
Installez l'extension Live Server si elle n'est pas déjà présente.
Ouvrez index.html, puis cliquez sur Go Live dans la barre d'état (ou faites un clic droit sur le fichier et choisissez Open with Live Server).
La page s'ouvre dans le navigateur. La liste des pizzas est chargée depuis l'API distante ; cliquez sur une pizza pour afficher son détail ou utilisez le formulaire pour filtrer.

Live Server sert uniquement les fichiers du client en local. Il ne lance pas l'API : une connexion Internet est nécessaire pour accéder à l'API distante.

Tester l'API sans client

Il est aussi possible d'appeler directement l'API, sans lancer l'application ni installer de client. Ouvrez simplement une URL dans un navigateur : la réponse est renvoyée au format JSON.

Recherche avec 🐷 ou 🍅 : https://pizzaapi-2.onrender.com/api/pizzas/?ingredients=🐷,🍅&mode=or
Recherche avec 🐷 et 🍅 : https://pizzaapi-2.onrender.com/api/pizzas/?ingredients=🐷,🍅&mode=and

Le paramètre ingredients accepte plusieurs noms séparés par des virgules. En mode or, une pizza est retenue si elle contient au moins l'un des ingrédients demandés. En mode and, elle doit contenir tous les ingrédients demandés. Sans paramètre mode, l'API utilise or par défaut. Les emojis peuvent être saisis directement dans l'URL ; le navigateur les encode lors de l'envoi.

La même requête peut être faite dans un terminal avec curl :

curl.exe -i -G "https://pizzaapi-2.onrender.com/api/pizzas/" --data-urlencode "ingredients=🐷,🍅" --data-urlencode "mode=or"

Dépannage

Si les données ne s'affichent pas, vérifiez la connexion Internet et consultez la console du navigateur. Si le navigateur signale une erreur CORS, l'API distante doit autoriser les requêtes provenant de l'adresse locale utilisée par Live Server ; ce réglage se fait côté API, pas dans Live Server.

Apprendre : Créer une liste de tâches

JS → HTML : template + replace

JS → HTML : template + methodes

Cours rédigé

🥷🏼 JS → HTML : hétérogènes

Projet JS → HTML

Liste des projets sur une structure "étudiants" !

🛟 Choix d'un projet : → Projet L2 - Grouper les étudiants

🥷🏼 Grouper les étudiants en accordéon

Les bases du DOM

L'idée est de transformer une donnée JavaScript en élément HTML affiché dans la page.

DS byYourself

💥Echauffement 10 minutes par jour

✒️Auto-corrigé
🖊️ Auto-corrigé
✏️ Auto-corrigé
🖌️ Auto-corrigé

🕑DS auto-corrigé

Entrainement aux examens

5 minutes pour tout comprendre : → Objectif

🕑 Le sujet d'examen 10 minutes !

🎞️const films = [

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

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

{ titre: "The Godfather", genre: "Crime", note: 10, annee: 1972 },

{ titre: "Pulp Fiction", genre: "Crime", note: 9, annee: 1994 },

{ titre: "Goodfellas", genre: "Crime", note: 8, annee: 1990 },

{ titre: "The Shawshank Redemption", genre: "Drame", note: 10, annee: 1994 },

{ titre: "The Dark Knight", genre: "Action", note: 9, annee: 2008 },

{ 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 },

];

🪛Trouvez la décennie la mieux notée !

Une décennie = une période de dix ans. Plus précisément, une décennie correspond à dix années consécutives.

Exemple : 2010 = la décennie des années 2011 à 2020.

Note d'une décenie = Somme des notes des films de la décenie.

🛟Aide

Réflechissez à une structure du style

Objet.entries : Object.entries

Map.entries : Map.entries

Plus d'infos »

TD : entrainement à l'examen !

const students = [
{ name: "Amed", city: "Evry" },
{ name: "Bob", city: "Evry" },
{ name: "Charlie", city: "Paris" },
{ name: "David", city: "Paris" },
{ name: "Emma", city: "Evry" },
{ name: "Fatima", city: "Lyon" }
];

trouvez les deux villes qui logent le plus d'habitants

Attention : utilisez une Map et Map.groupBy !

Plus d'infos »

Dans quelque temps, vous serez force de propositions pour proposer d'autres solutions

🛟code

Le must : Proposer l'utilisation de D3 !

👑https://github.com/dupontdenis/proposition-D3.git

Voici le code à injectez dans la cosnole de https://www.cinematheque.fr/video/1469.html le code doit ajouter la bibliothèque D3 !

https://gist.github.com/dupontdenis/feceb799636e48651f21b41565d6daef

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

Pages

👩🏽‍🎓Voici votre DS dans la version DS

Tous mes TD sont en distantiel !

TD distantiel !

Cours

🚀 Cours : API Django

Client API Pizza

Lancer le client avec Live Server

Tester l'API sans client

Dépannage

Apprendre : Créer une liste de tâches

Les bases du DOM

Saison 1

Chap : JS

Saison 2

Chap : DOM🪛 Objectifs

Exemple 2

Magie du JS

Chap : DOM

🪛 Objectifs