dupontL3alt: 2022

Révision

https://github.com/dupontdenis/MiyazakisFilms.git

Etudiez en détail le code qui nous permet de représenter les films par directeurs.

Pour info : vous pouvez trouver ce code dans une application express + view (PUG)

>clone : https://github.com/dupontdenis/directorsGhibli.git

>node index.js

>http://localhost:3000/films

Remarque :

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

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

Last call for reduce and for of

closestColor

const table = new Map([

        [0, 'green'],
        [150, 'yellow'],
        [300, 'indianred'],
        [450, 'red'],
        [500, 'black'],
    ]);

Trouvez pour une valeur la plus proche des couleurs.

310 => 'indianred',

390 => 'red',

Mise en place d'une extension

https://docs.google.com/document/d/1Rs4tQupiPBaggO1W344ChAiZHQBy9rNDZ7-YFy3l_dw/edit?usp=sharing

Objectifs

Afficher le total du montant d'une catégorie d'achats.

le code suivant permet de créer la structure des achats.

build.js

const fs = require("fs").promises;
const path = require("path");
async function createDir(name) {
try {
await fs.mkdir(name);
} catch {
console.log(`${name} already exists.`);}}
async function createFile(dirName) {
fs.writeFile(path.join(dirName, `${new Date().toISOString().split('T')[0]}.json`),
JSON.stringify({ total: Math.ceil(1000 * Math.random()) }, null, 2))}
async function createPurchases(name) {
await createDir(path.join(__dirname, name));
await createFile(path.join(__dirname, name));}
async function main() {
const DB = new Map([
['shopping', new Set(["restaurant", "food", "clothing"])],
['vacations', new Set(["Paris", "NY"])],
]);
for (const [catName, catSet] of DB) {
await createDir(catName);
catSet.forEach(async (item) => {
await createPurchases(path.join(catName, item));})}}
main();

Lancez > node build.js

Définir le code qui permet d'avoir le total des achats "shopping"

Correction

https://github.com/dupontdenis/Projetfs.git

Range

Définition de la fonction range. lecture

allez plus loin : utils.js

DM : module 1

Ecrire la fonction baseR :

baseR(10,20) = [10, 11, 12, 13, 14, 15, 16, 17, 18, 19]

baseR(0,9,3) = [ 0, 3, 6 ]

baseR(0,9,3,true) = [ 6, 3, 0 ]

lien

Plus d'infos »

Guessing Game

HELP to start

Rappel : Saisie

Frontend

Node

Projet

Création d'un jeu.

Règle du jeu :

Le joueur a trois chances pour trouver un nombre secret !

Imaginez que vous soyez chef de projet, vous rédigez en urgence un prototype pour les membres de votre équipe.

Ce prototype permet à tous de fixer les idées (proto).

👷 Il faudra l'implémenter en JS.

http://dupontcours.free.fr/quizz/quizz-css2-2/code.html

Git and Co

https://sites.google.com/view/duponthtml/git?authuser=0

HELP GIT

https://docs.microsoft.com/fr-fr/learn/modules/introduction-to-github/2-what-is-github

Projet

https://docs.google.com/document/d/15pHlEeBaUeHxoVmHVbF3D0iBf0do1HHcLyc2bO6rlmo/edit#heading=h.rmn4h4rbv445

vidéos : https://sites.google.com/view/duponthtml/dm?authuser=0

Cerise sur le gâteau !

Que fait ce code

const groupBy = (arr, key) =>
  arr.reduce((acc, i) => {
    (acc[i[key]] = acc[i[key]] || [] ).push(i);
    return acc;
  }, {});

const data = [
    {
        nom: "coka",
        cat: "Boisson",
        prix: 4,
    },
    {
        nom: "pepsi",
        cat: "Boisson",
        prix: 9,
    },
    {
        nom: "farine",
        cat: "Epicerie",
        prix: 4,
    },
];

const cat = groupBy(data,"cat")

, prix = groupBy(data,"prix");

Plus d'infos »

Min, max and co

Nous commençons par définir un immense tableau data de 50000 objets.

const data = [];
const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
for (let i = 0; i < 50000; i++) {
    data.push({ x: random(1, 1000000) });
}

Nous pouvons réduire le tableau à un objet contenant les valeurs

let {min, max, sum} = data.reduce(function( {max, min, sum}, {x}) {

    min = Math.min(min,x);
    max = Math.max(max,x);
    sum = sum + x;
    return { min, max, sum}
 },
 {min : Number.MAX_VALUE,
 max : Number.MIN_VALUE,
 sum : 0
 });
console.log( min, max, sum );

AutreNous utilisons ici la méthode map qui transforme le tableau d'objets en tableaux de valeurs

 
const mapData = data.map(i => i.x);
const maxData = Math.max(...mapData);
const minData = Math.min(...mapData);

Reduce en 6 actes !

reduce 1
reduce 2
reduce 3
reduce 4
reduce 5

Améliorations

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

Générer un tab de valeurs

const data = [],
nbV = 5;
const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
for (let i = 0; i < nbV; i++) {
data.push({ x: random(1, 1000000) });
}

Python

Et connaissez vous Array.from !

Array.from permet d'initialiser un tableau.

const T = Array.from(new Array(5), (x,i) => i);
console.log(T);

// il suffit d'avoir un itérateur :
const tab = Array.from({length : 5}, (x,i) => 2*i);
console.log(tab);

⇦code⇨

les dessous de js

Episode 1 : __proto__

Episode 2 : Object.create

Episode 3 : prototype

Episode 4 : new

TEST

const Pizzas = [

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

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

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

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

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

a) Donner l'ensemble des ingrédients

b) Donner pour chaque ingrédient le nombre de pizzas

c) Ajouter le prix pour chaque pizza

[[object Object] {

name: "queen",

price: 13,

w: ["🐷", "🍄", "🍅", "🧀"]

...

}]

d) trouver si une pizza a de la salade "🥗"

trouver si une pizza a du "🌵"

e) Donner le code pour savoir si une pizza est végétarienne ("🐷", "🐑")

Plus jamais de boucle

Boucle sur le tableau

function forEach(array, fx) {

for (var i = 0; i < array.length; i++)//for of

fx(array[i]);

}

filtre sur un tableau

function filter(array, test) {
let passed = [];
for (let val of array) {
if (test(val))
passed.push(val);
}
return passed;
}

Plus en détail :

dernier essai pour les fonctions : trans, filtre et Compagnie !

... en action

code

Mon filtre à moi

Projet : Aide

Les données

let tabPers = [
{
nom: "Brusel",
sex : "m",
age: 35
},
{
nom: "Dupont",
sex : "n",
age: 36
},
{
nom: "Toto",
sex : "f",
age: 40
},
{
nom: "Dupont",
sex : "m",
age: 10
},
];

Ainsi
tabPers[1]
<{nom: "Dupont", sex: "n", age: 36}

tabPers[1]["nom"]
<"Dupont"

tabPers[1].nom
<"Dupont"

- Ecrire la boucle for classique affichant :

"0 : 35 ans"
"1 : 36 ans"
"2 : 40 ans"
"3 : 43 ans"

for (let i=0; i< ? ; i++){
console.log(`${i} : ? ans`);
}

- Réécrire la boucle avec le for of

let i = 1;
for (let pers of tabPers) {
console.log(`${i++} : ? ans`);
}

- Utilisation la destructuration
let i = 1;
for (let { ? } of tabPers) {
console.log(`${i++} : ${a} ans`);
}

- Pour info (niveau avancé) : utilisation de Object.entries
for (var [cle, valeur] of Object.entries(tabPers)){
console.log(`${cle} : ${valeur.age} ans`);
}

- Création d'un tableau des personnes de sex h

let tabPersF = [];
for (let {age,sex} of tabPers) {
if ( ? ) {
tabPersF.push( ? ); // stocker l'age
}
}
console.log(tabPersF);

- Création d'un tableau des personnes de sex f

// inspirez vous du code précédent

- ATTENTION c'est ici que tout commence

Comparez les deux écritures, extraire le code commun et le mettre dans une fonction filtre

function filtre( ? ){
let tabR = [];

// code ?
return tabR;
}

Passons maintenant à autre chose qu'un filtre sur le sex :

- Création d'un tableau en utilisant la fonction filtre des

personnes majeurs
personnes mineurs
personnes de nom "Dupont"

Réfléchissez sur la souplesse de votre code.

- Soit les deux fonctions

function femme(person) {
return (person.sex === "f");
}

function homme(person) {
return (person.sex === "m");
}

Essayer d’écrire une fonction de filtre qui renvoie le tableau filtré par une fonction passée en argument !

function filter(array, fx) {
let passed = [];

?

return passed;
}

Appel de la fonction
filter(tabPers,femme);
filter(tabPers,homme);