Vers l'infini et au delà !

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

Reduce : Last two

Fetch : one more

Notez l'événement sur le scrool !

code

Analyse de code

Analyse des structures

https://yellow-bush-09e121003.2.azurestaticapps.net/

https://dupontdenis.github.io/Quiz-App-Master/game.html

Clonez le code à compléter

https://github.com/dupontdenis/Quiz-App-Master-test-1.git

DS : 5 minutes

const joueurs = [

{nom:"Benzema",pays:"France",but:7},{nom:"Mbappe",pays:"FRANCE",but:8},

];

Donner sous forme de dessin le résultat de :

&) const noms = joueurs.map(( {nom }) => nom )

&) const formatCountry = joueurs.map( function(joueur){

joueur.pays = joueur.pays.toLowerCase()

return joueur

})

Notez que ce code ne correspondrait en rien à une demande de normalisation du pays d'origine.

Completer le code (lien) pour obtenir

Afficher le résultat du code

const formatCountry = joueurs.map( function(play){

const newPlayer = Object.assign({WorldCup: "Qatar 22"}, play);

newPlayer.pays = newPlayer.pays.toLowerCase();

return newPlayer

})

Extension chrome JSON Viewer

Installer une extension

Ouvrez le Chrome Web Store.
Recherchez et sélectionnez l'extension que vous souhaitez installer json viewer
Cliquez sur Ajouter à Chrome.
Certaines extensions vous indiquent si elles ont besoin d'autorisations ou d'informations particulières. Pour approuver, cliquez sur Ajouter l'extension.
- Important : Veillez à n'approuver que les extensions de confiance.

Pour utiliser l'extension, cliquez sur l'icône située à droite de la barre d'adresse.

Ennoncé du DS

⚽enoncé⚽

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

Plus d'infos »

Github

https://api.github.com/users/dupontdenis/repos

fetch

Update with async/await

How to : https://github.com/dupontdenis/testFetch.git

Pour utiliser fetch dans node !

update node https://nodejs.dev/en/

$ node --version

v18.12.1

Dans le terminal, vous pouvez lancer node app.js

Azure

Je vous rapelle que vous avez un compte azure https://portal.azure.com/#home (gratuit).

Azure deploiement !

Exemple :

https://ghiblifilms.azurewebsites.net/films

Préparation au DS

Le pays le plus peuplé par zone.👍

See the Pen reduce Europe le plus peuplé by dupont (@dupontcodepen) on CodePen.
Bilan
Tab
reduce/JS
Object.entries(zones)/DOM
const Europe = [
    { nom: "Allemagne", zone: "O", population: 83 },
    { nom: "Belgique", zone: "O", population: 2 },
    { nom: "Autriche", zone: "O", population: 20 },
    { nom: "Bulgarie", zone: "E", population: 1 },
    { nom: "Chypre", zone: "S", population: 1 },
    { nom: "Croatie", zone: "S", population: 2 },
    { nom: "Danemark", zone: "N", population: 12 },
    { nom: "Espagne", zone: "S", population: 22 },
    { nom: "Estonie", zone: "N", population: 2 },

...
"{
  'O': {
    'nom': 'Allemagne',
    'zone': 'O',
    'population': 83
  },
  'E': {
    'nom': 'Pologne',
    'zone': 'E',
    'population': 45
  },
  'S': {
    'nom': 'Italie',
    'zone': 'S',
    'population': 55
  },
  'N': {
    'nom': 'Irlande',
    'zone': 'N',
    'population': 35
  }
}"

<section class="europe">
   <h1 data-cat="O">O</h1>
   <p data-cat="O">Allemagne: 83 </p>

   <h1 data-cat="E">E</h1>
   <p data-cat="E">Pologne: 45 </p>

<h1 data-cat="S">S</h1>
   <p data-cat="S">Italie: 55 </p>

<h1 data-cat="N">N</h1>
   <p data-cat="N">Irlande: 35 </p>
</section>

🌍Les deux pays les plus peuplés par zone (structure tableau)

See the Pen reduce Europe les deux plus peuplé by dupont (@dupontcodepen) on CodePen.

🌍Deux pays par zone (Structure Map)

See the Pen reduce Europe 2 pays max by dupont (@dupontcodepen) on CodePen.

Bilan

Map

reduce

Object.entries(zones)

const mapEurope = new Map()

.set("Allemagne","O")

.set("Belgique","O")

.set("Autriche","O")

.set("Bulgarie","E")

.set("Chypre","S")

.set("Croatie","S")

.set("Danemark","N")

.set("Espagne","S")

.set("Estonie","N")

{

'O': [

'Allemagne',

'Belgique'

'E': [

'Bulgarie',

'Hongrie'

'S': [

'Chypre',

'Croatie'

'N': [

'Danemark',

'Estonie'

]

<p data-cat="O">Allemagne</p>

<p data-cat="O">Belgique</p>

<p data-cat="E">Bulgarie</p>

<p data-cat="E">Hongrie</p>

Explication : L'Europe

DM : discount contre la vie chère

En réponse à la crise nous avons mis un place une serie de discount.

Trouvez le code permettant de transformer les items

const items = [

{name:"A",price:11},

{name:"B",price:9},

]

avec les aides du gouvernement, ...

const codeDiscount = new Map([["dept",-2],["birthday",-0.5],["gouv",-1]]);

Le shéma suivant montre les nouvelles grilles tarifaires après application de l'aide du "dept" et "gouv" ou après application du discount "birthday"

Plus d'infos »

Projet PizzaJS 🍕

Base de donnés

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

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

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

Trouvez les pizzas sans viande

Ajoutez pour chaque pizza le type (vege/meat)

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

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

Ajoutez le prix de chaque pizza

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

Plus d'infos »

fetch

Update with async/await

How to : https://github.com/dupontdenis/testFetch.git

Pour utiliser fetch dans node !

update node https://nodejs.dev/en/

$ node --version

v18.12.1

Dans le terminal, vous pouvez lancer node app.js

voir la console de https://dupontdenis.github.io/testFetch/

Les revisions

Pizzas

Destructuration

const words = [1,2,2,1,5];

let minMaxDistSumMoyNb = words.reduce((a, x) => {

let [m,M] = [Math.min(a[0],x),Math.max(a[1],x)];

let sum = a[3]+x;

let nb = a[5]+1;

let moy = sum/nb;

return [m,M,M-m+1,sum,moy,nb]

}

,[Number.MAX_VALUE,Number.MIN_VALUE,Number.MIN_VALUE,0,0,0]);

console.log(minMaxDistSumMoyNb);

code

Amélioration

const words = [1,2,2,1,6];

let minMaxSumMoyNb = words.reduce(([min,max,sum,_,nb], x) => {

let [m,M] = [Math.min(min,x),Math.max(max,x)];

sum = sum+x;

nb = nb+1;

return [m,M,sum,sum/nb,nb]

}

,[Number.MAX_VALUE,Number.MIN_VALUE,0,0,0]);

const [min,max,sum,moy,nb] = minMaxSumMoyNb

console.log(min,max,sum,moy,nb);

TD : reduce & Co

Reduce à fond la forme !

Prérequis :

reduce 1 📉

reduce 2

reduce 3

reduce 4

reduce 5 📈

En action :

const words = [10,2,2,1,10,10,10,10,10];

const o = words.reduce((a, x) => {

if (!a[x]) a[x] = 0;

a[x]=a[x]+1;

return a},{});

code

les méthodes sur les tableaux

Some, every

rappel : destructuration

map

reduce

filter

MA FONCTION filter

Filtre et map

Etude de cas et Projet

Class en action

https://github.com/dupontdenis/Class-lesSoldes.git

Création d'un quizz !

Analyse des structures

Clonez le code

https://github.com/dupontdenis/Quiz-App-Master-test-1.git

https://dupontdenis.github.io/Quiz-App-Master/game.html

Pages

Analyse des structures

Installer une extension

Update with async/await

Pour utiliser fetch dans node !

Le pays le plus peuplé par zone.👍

🌍Les deux pays les plus peuplés par zone (structure tableau)

See the Pen reduce Europe les deux plus peuplé by dupont (@dupontcodepen) on CodePen.

🌍Deux pays par zone (Structure Map)

Base de donnés

Questions

Update with async/await

Pour utiliser fetch dans node !

Prérequis :

En action :

Some, every

map

reduce

filter

Création d'un quizz !

Analyse des structures