Pages

DS : 15mn

 


const pizzas = [
  { name: "queen", ing: ["🐷", "🍄", "🍅", "🧀"] },
  { name: "cheese", ing: ["🧀", "🍅", "🌵"] },
  { name: "oriental", ing: ["🍅", "🐑", "🍄", "🌶"] },
];

const prices = new Map([
  ["🍅", 1],
  ["🐷", 2],
  ["🌶", 2],
  ["🍄", 5],
  ["🧀", 5],
  ["🐑", 2],
  ["🌵", 10],
]);

🪛Donnez le code JavaScript qui calcule la pizza la plus chère dans une liste de pizzas, en se basant sur les ingrédients et leurs prix.


🪛 Dessinez la structure du code pizzas et pizzasWithPrices (like pythontutor)
const pizzasWithPrices = pizzas.map(pizza => ({
  ...pizza,
  price: pizza.ing.reduce((acc, ing) => acc + prices.get(ing), 0)
}));

Cours 2 :

Chap 1 :JS



Chap 2 : DOM


🪛 Objectifs

View dom ( svg )

 

Le code HTML

<body>
  <p class="premier">Para 1</p>
  <p><em>second </em> Para 2</p>
  <p id="dernier"> dernier Para</p>
  <!-- je suis un commentaire -->
</body>


La représentation 



La structuration


On peut retrouver une représentation suivante !

 

Magie de JS

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 1
Contenu 2
Contenu 3


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

Cours : Map/Set

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





Préparation au DS

   ...

🍕Base des données

const pizzas = [

    { name:"queen", ingredients: ["🐷","🍄","🍅","🧀"] },

    { name: "cheese", ingredients: ["🧀", "🍅"]},

    { name: "oriental", ingredients: ["🍅","🐑","🍄","🌶"]},

    { name: "royal", ingredients: ["🍅","🌵"]},

  ];

🪛 Questions

Trouvez les pizzas avec du 🧀

Trouvez les pizzas avec du 🍅

Trouvez les pizzas avec un ingrédient quelconque (soit du "🍅" ou du "🧀" ou du "🐑" ...)

Trouvez les pizzas avec au moins un ingrédient parmi une liste d'ingrédients

Trouvez les pizzas avec tous les ingrédients d'une liste

Trouvez les pizzas avec viande

Ajoutez pour chaque pizza le type (🐮ou ☘️)

Trouvez l'ensemble des ingrédients  "🐷","🍄","🍅","🧀","🐑","🌶","🌵"

Trouvez pour chaque ingrédient le nombre de pizzas l'utilisant ,"🧀":2 …

Trouvez pour chaque ingrédient la liste des pizzas l'utilisant

Ajoutez le prix de chaque pizza

prices = new Map([ ["🍅", 1], ["🐷", 2], ["🌶",2], ["🍄", 5], ["🧀", 5], ["🐑", 2], ["🌵", 10]]);