dupontL2

Parcours d'un arbre

Parcours arbre du DOM : Action

Travail perso !

Mon tirage

Comment savoir mes numéros gagnants ?

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)

}));

Plus d'infos »

Cours 2 :

Chap 1 :JS

Chap 2 : DOM

🪛 Objectifs

View dom ( svg )

Le code HTML

<body>
Para 1
second Para 2
 dernier Para

</body>

La représentation

vue

La structuration

arbre

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.

The end

pizzas : https://docs.google.com/document/d/1WtTFIo9p5tqizm7m3oxpfqabaS63iUOsUGHp1nf-Gt8/edit?usp=sharing

Pages