Le cours et TD

 Le cours du 07 est en distantiel ainsi que les TDs.

La seule vidéo de moi sera celle-ci ! 

🪛 Je vous propose de faire d'abord le TD

L'objectif est de comprendre l'utilisation des méthodes Object.* 

• Object.groupBy

• Object.entries

• Object.keys

• Object.values

• Object.fromEntries

Le sujet du TD est ici

🪛 En guise de Cours, je vous propose de vous entrainer à l'examen ! 

Durée : 45 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 ! 

La réponse à trouver est :  La décennie avec la note totale la plus élevée est 1990 avec un total de 35.

🛟Aide : la decenie d'une année est donnée par Math.floor(film.annee / 10) * 10

☎️Je reste dispo sur mon adresse et je réponds aux questions ! 

Message reçu ce jour par un ancien étudiant !

 

Object : les méthodes

https://docs.google.com/document/d/1yZ3SrqSbcCwErYmLZ9W6WceJBqYRj0mhx8CZYfjH9MQ/edit?usp=sharing

Stage en entreprise how-to !

 👑Je viens de vous rediger une aide pour la conduite de votre projet !

→ lien

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

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);