films

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

BD

 https://github.com/dupontdenis/update-courses-mongodb.git

Test de Révisions

reduce

Object.entries

Vous disposez d'un tableau d'articles. un article = {nom: String, cat: String, prix: Number}

data = [

{nom: 'coka', cat: 'Boisson', prix: 4}

{nom: 'farine', cat: 'Epicerie', prix: 4}

{nom: 'carotte', cat: 'Legume', prix: 9}

{nom: 'cafe', cat: 'Petit-dej', prix: 4}

{nom: 'jus de fruit', cat: 'Boisson', prix: 2}

{nom: 'choux', cat: 'Legume', prix: 2}

{nom: 'olives', cat: 'Epicerie', prix: 60}

{nom: 'veau', cat: 'Boucherie', prix: 40}

{nom: 'poireau', cat: 'Legume', prix: 2}

];


Donner 

Le nombre d'articles.

Ajouter un attribut facture sous la forme prix.toLocaleString("fr-FR", { style: "currency", currency: "EUR" } pour chaque article

{ nom: 'carotte', cat: 'Legume', prix: 9, facture: '9,00 €' },

Afficher le tableau par ordre alpha des articles.

Les articles d'une "cat" donnée.

[
  { nom: 'carotte', cat: 'Legume', prix: 9, facture: '9,00 €' },
  { nom: 'choux', cat: 'Legume', prix: 2, facture: '2,00 €' },
  { nom: 'poireau', cat: 'Legume', prix: 2, facture: '2,00 €' }
]

Le coût du panier (total achat).

    127

L'ensemble des "cat".

[ 'Petit-dej', 'Legume', 'Boisson', 'Epicerie', 'Boucherie' ]

Un objet donnant par "cat" le nombre d'articles.

{ 'Petit-dej': 1, Legume: 3, Boisson: 2, Epicerie: 2, Boucherie: 1 }

La "cat" qui a le plus d'articles.

 {Legume: 3}

Un objet ou tableau donnant par "cat" un tableau d'articles.

[
  'Petit-dej': [ 'cafe' ],
  Legume: [ 'carotte', 'choux', 'poireau' ],
  Boisson: [ 'coka', 'jus de fruit' ],
  Epicerie: [ 'farine', 'olives' ],
  Boucherie: [ 'veau' ]
]

Un objet donnant par "cat" un tableau des prix des articles.

[
  'Petit-dej': [ 4 ],
  Legume: [ 9, 2, 2 ],
  Boisson: [ 4, 2 ],
  Epicerie: [ 4, 60 ],
  Boucherie: [ 40 ]
]

Un tableau d'objet avec par cat le total des prix des articles

[{"categorie":"Petit-dej","total":4}
,{"categorie":"Legume","total":15.3}
,{"categorie":"Boisson","total":2.4}
,{"categorie":"Epicerie","total":64}
,{"categorie":"Boucherie","total":40}]

Donner le coût du panier à partir du tableau précédent.

    127


 


Plus d'infos »

Préparation examen !

Modifier le code : https://github.com/dupontdenis/fetch.git

Pour afficher à partir de https://ghibliapi.herokuapp.com/films

H. Miyazakis's Films

  1. The Red Turtle : Michaël Dudok de Wit
  2. When Marnie Was There : Hiromasa Yonebayashi
  3. The Tale of the Princess Kaguya : Isao Takahata
  4. The Wind Rises : Hayao Miyazaki
  5. From Up on Poppy Hill : Gorō Miyazaki
  6. Arrietty : Hiromasa Yonebayashi
  7. Ponyo : Hayao Miyazaki
  8. Tales from Earthsea : Gorō Miyazaki
  9. Howl's Moving Castle : Hayao Miyazaki
  10. The Cat Returns : Hiroyuki Morita
  11. Spirited Away : Hayao Miyazaki
  12. My Neighbors the Yamadas : Isao Takahata
  13. Princess Mononoke : Hayao Miyazaki
  14. Whisper of the Heart : Yoshifumi Kondō
  15. Pom Poko : Isao Takahata
  16. Porco Rosso : Hayao Miyazaki
  17. Only Yesterday : Isao Takahata
  18. Kiki's Delivery Service : Hayao Miyazaki
  19. My Neighbor Totoro : Hayao Miyazaki
  20. Grave of the Fireflies : Isao Takahata
  21. Castle in the Sky : Hayao Miyazaki

Directors

  1. Michaël Dudok de Wit
  2. Yoshifumi Kondō
  3. Gorō Miyazaki
  4. Hayao Miyazaki
  5. Hiroyuki Morita
  6. Isao Takahata
  7. Hiromasa Yonebayashi

H. Miyazakis's Films

  1. The Red Turtle : Michaël Dudok de Wit
  2. When Marnie Was There : Hiromasa Yonebayashi
  3. The Tale of the Princess Kaguya : Isao Takahata
  4. The Wind Rises : Hayao Miyazaki
  5. From Up on Poppy Hill : Gorō Miyazaki
  6. Arrietty : Hiromasa Yonebayashi
  7. Ponyo : Hayao Miyazaki
  8. Tales from Earthsea : Gorō Miyazaki
  9. Howl's Moving Castle : Hayao Miyazaki
  10. The Cat Returns : Hiroyuki Morita
  11. Spirited Away : Hayao Miyazaki
  12. My Neighbors the Yamadas : Isao Takahata
  13. Princess Mononoke : Hayao Miyazaki
  14. Whisper of the Heart : Yoshifumi Kondō
  15. Pom Poko : Isao Takahata
  16. Porco Rosso : Hayao Miyazaki
  17. Only Yesterday : Isao Takahata
  18. Kiki's Delivery Service : Hayao Miyazaki
  19. My Neighbor Totoro : Hayao Miyazaki
  20. Grave of the Fireflies : Isao Takahata
  21. Castle in the Sky : Hayao Miyazaki

Directors

  1. Michaël Dudok de Wit
  2. Yoshifumi Kondō
  3. Gorō Miyazaki
  4. Hayao Miyazaki
  5. Hiroyuki Morita
  6. Isao Takahata
  7. Hiromasa Yonebayashi

Films By Director

  • Michaël Dudok de Wit
    • The Red Turtle
  • Hiromasa Yonebayashi
    • When Marnie Was There
    • Arrietty
  • Gorō Miyazaki
    • From Up on Poppy Hill
    • Tales from Earthsea
  • Hiroyuki Morita
    • The Cat Returns
  • Yoshifumi Kondō
    • Whisper of the Heart
  • Isao Takahata
    • The Tale of the Princess Kaguya
    • My Neighbors the Yamadas
    • Pom Poko
    • Only Yesterday
    • Grave of the Fireflies
  • Hayao Miyazaki
    • The Wind Rises
    • Ponyo
    • Howl's Moving Castle
    • Spirited Away
    • Princess Mononoke
    • Porco Rosso
    • Kiki's Delivery Service
    • My Neighbor Totoro
    • Castle in the Sky



async function getFilms() {
    try {
        const url = 'https://ghibliapi.herokuapp.com/films';
        const filmsResponse = await fetch(`${url}`);
        const films = await filmsResponse.json();

        //Hayao Miyazaki
        films.forEach(({ director, title }) =>
            document
                .querySelector("#filmsBy")
                .insertAdjacentHTML('afterbegin', `<li ${"Hayao Miyazaki" == director ? 'class="selected"' : ""}> ${title} : ${director} </li>`))


        //find directors
        const directors = films.map(({ director }) => director);

        [... new Set(directors)]
            .sort((a, b) => {
                if (a.split(" ")[1] > b.split(" ")[1])
                    return -1;
                else
                    return 1;
            })
            .forEach((director) => {
                document
                    .querySelector("#directors")
                    .insertAdjacentHTML('afterbegin', `<li> ${director} </li>`)
            })

        //directors's films
        const directorsFilms = films.reduce((a, { director, title }) => {
            if (!a[director]) a[director] = [];
            a[director].push(title);
            return a;
        }, []);


        //views
        Object.entries(directorsFilms).forEach(([director, films]) => {
            const tempLi = document.createElement('li')
                , tempUl = document.createElement('ul');

            films.forEach((film) => tempUl.insertAdjacentHTML('afterbegin', `<li> ${film} </li>`))
           
            tempLi.insertAdjacentElement('beforeend', tempUl)
                .insertAdjacentText('beforebegin', `${director}`)

            document
                .querySelector("#directorsfilmsList")
                .insertAdjacentElement('afterbegin', tempLi)

        })

    } catch (error) {
        console.log(error);
    }
}

getFilms();




Application :


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

Mongodb

 En action : https://github.com/dupontdenis/BlogBD

Création d'une API

API Courses

Express

 express en action

base de données

 base de données

Aide au DS

 

DS : sujet 2020

 Exercice n1

Soit la classe BD :
class BD {
    constructor(villes) {
        this.villes = villes;
    }
    find(query, callback) {
        callback(-- ? -- )
    }
}

Création de trois villes :

villes = new BD([{ ville: "vincennes", h: 2 }
    , { ville: "paris", h: 2 }
    , { ville: "roubais", h: 1 }]);

Modifications : Les villes avec h=2 passe à h=30

villes.find({ h: 2 }, function (villes) {
    for (let ville of villes) {
        ville["h"] = 30;
    }
});

Modification :  La propriété capitale = true pour la ville de Paris

villes.find({ ville: "paris" }, function (villes) {
    for (let ville of villes) {
        ville["capitale"] = true;
    }
});

Résultat :

villes = [{ ville: "vincennes", "h": 30 }
    , { ville: "paris", "h": 30, "capitale": true }
    , { ville: "roubais", "h": 1 }]}


💢 Question : 

Compléter le code -- ? -- pour filtrer les arguments du callback.


Aide : for in permet de boucler sur les clefs d'un objet.

let obj = { a: 1, b: 2 };
for (let prop in obj) {
    console.log(`${prop} = ${obj[prop]}`); // a = 1 b = 2
}

Application WEB !

Objectifs

Transformer notre code en une application.
Découvrir la notion de module.

Définir la fonction createArray

/**
 *
 * @param {number} start The start of the createTab.
 * @param {number} end The end of the createTab.
 * @param {number} step The value to increment or decrement by.
 * @param {boolean} [fromRight] Specify iterating from right to left.
 * @returns {Array} Returns the createTab of numbers.
 */

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

createTab&(0,9,3) = [ 0, 3, 6 ]

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


Transformer notre code en une application : http://localhost:3000/








TD min/max

 

// pour un tableau simple

const t = [20, 12, 2, 12];
const [min, max] = t.reduce(([min, max], cur) => {

    if (min > cur) min = cur;
    if (max < cur) max = cur;

    return [min, max];

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


//tableau de pers

const etudiants = [
    { nom: "superA", note: 20 },
    { nom: "superB", note: 12 },
    { nom: "superC", note: 2 },
    { nom: "superD", note: 12 },
];

//retourne un tableau de valeurs

const [minE, maxE] = etudiants.reduce(([min, max], { note }) => {

    if (min > note) min = note;
    if (max < note) max = note;

    return [min, max];

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


//retourne un tableau de pointeurs

const [dernier, major] = etudiants.reduce(([dernier, premier], etudiant) => {

    if (dernier.note > etudiant.note) dernier = etudiant;
    if (premier.note < etudiant.note) premier = etudiant;

    return [dernier, premier];

}, [etudiants[0], etudiants[0]]);



//retourne un objet

const { dernier, major } = etudiants.reduce(({ dernier, major }, etudiant) => {

    if (dernier.note > etudiant.note) dernier = etudiant;
    if (major.note < etudiant.note) major = etudiant;

    return { dernier, major };

}, { dernier: etudiants[0], major: etudiants[0] });


Dans le grand bain des applications WEB

Clonage

Express

Pug

Heroku

Mongodb

Mongoose


En action

My blog !

Un petit tour et puis ...

Méthodes Array

Méthodes sur les tableaux


Suite à vos interrogations sur la méthode sort , je vous ai rédigé quelques approfondissements : lien

Entrainement

 


Soit la BD suivante ( code ) 

const COMPAGNIES = [
    {
        name: "DUPONTco",
        ranges: [66864, 66928],
    },
    {
        name: "HAL",
        ranges: [7800, 65952, 200000],
    },
    {
        name: "GOUGLE",
        ranges: [7936, 65952, 119290],
    },
    {
        name: "YOUTOUBE",
        ranges: [65856, 119000, 200000],
    },
    {
        name: "ECRY",
        ranges: [126000,125264, 127000,125278, 126100],
    }   
]

Trouver les compagnies qui ont au moins un salaire au dessus de 120000 €.

Trouver les compagnies qui ont tous leur salaire au dessus de 120000 €.

Some

 

some

Nous connaissons la méthode some.

La méthode some() teste si au moins un élément du tableau passe le test implémenté par la fonction fournie. Elle renvoie un booléen indiquant le résultat du test.


  1. const T = [41, 23, 65, 43, 57],
  2.    test = (element) => element % 2;

  4. console.log(t.some(test));

Que recherchons nous dans ce tableau avec la fonction test ?

Modifier le code précédent, sans utiliser la négation, pour tester si un élément du tableau est pair.

Donner le code de la fonction some qui teste si au moins un élément du tableau vérifie la fonction test.
  1. const T = [41, 23, 65, 43, 57];
  2.    test = (element) => element % 2;

  4. console.log(some(T,test));

Pourrait on appliquer de telle fonction à des tableaux de vidéos ?

closure !

Comprendre la closure : myForEach(fruits, couper(3));

 code

Problème

  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


Donner pour chaque ingrédient le nombre de pizzas 


Ajouter le prix pour chaque pizza

[[object Object] {

  name: "queen",

  price: 13,

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

}, 

...

}]


    Trouver si une pizza a de la salade "🥗" 

Trouver si une pizza a du "🌵"

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

Je suis végétarien, je filtre mes ingrédients !

 

Nous allons utiliser notre fonction de filtre pour retirer les ingrédient qui n'appartiennent pas à un ensemble regroupant ["🐷", "🐑","🐔"].
Nous reviendrons sur cet objet Ensemble qui est très facile d'utilisation.
en action 

Lectures

Lectures



N'oublions pas de nous amuser sur des exemples de la vie quotidienne ! 


PLUS JAMAIS de boucles

L'idée géniale est d'encapsuler les boucles dans une fonction.
La fonction appliquée à chaque itération est passée en paramètre.


forEach

  1. function forEach(t, fx) {
  2.     for (let i = 0; i < t.length; i++) {
  3.         fx(t[i])
  4.     }
  5. }

trans

  1. function trans(t, fx) {
  2.     const tmp = [];
  3.     for (let i = 0; i < t.length; i++) {
  4.         tmp[i] = fx(t[i])
  5.     }
  6.     return tmp;
  7. }

filter

  1. function filter(t, fx) {
  2.     const tmp = [];
  3.     for (let i = 0; i < t.length; i++) {
  4.         if (fx(t[i])) {
  5.             tmp.push(t[i]);
  6.         }
  7.     }
  8.     return tmp;
  9. }


En action : 

💥lien

les méthodes des tableaux

 

Some, every



rappel : destructuration

map

   

reduce

   

filter

  

Boucles

 

Discussion autour des boucles

Amélioration du code

La structuration de valeurs dans un tableau, nécessite une boucle pour réaliser un parcours des valeurs.

Exemple : 

Affichons simplement les éléments d'un tableau :

  1. let array = [1, 2, 3];
  2. for (let i = 0; i < array.length; i++) {
  3.   let current = array[i];
  4.   console.log(current); // affichage
  5. }

Imaginons l'affichage des valeurs comme une action.

  1. for (let i = 0; i < array.length; i++) {
  2.   let current = array[i];
  3.   actionAffichage(current); // affichage
  4. }

Affichage des positifs

Pour afficher les valeurs positives, il est facile de créer une condition ; la fonction précédente devient.

  1. for (let i = 0; i < array.length; i++) {
  2.   let current = array[i];
  3.   if (current>0) actionAffichage(current);
  4. }

ou

  1. for (let i = 0; i < array.length; i++) {
  2.   let current = array[i];
  3.   actionAffichagePositif(current);
  4. }


Affichage des Négatifs

Pour afficher les valeurs négatives, il est facile de créer une condition ; la fonction précédente devient.

  1. for (let i = 0; i < array.length; i++) {
  2.   let current = array[i];
  3.   actionAffichageNégatif(current);
  4. }


Bilans

Pour chaque type d'affichage, il est nécessaire de redéfinir la boucle.

Améliorations

Nous allons encapsuler le code de la boucle dans une fonction forEach. 👿

Il nous reste à réfléchir sur le passage des actions (positif, négatif ...) 

comme paramètres.


Ainsi,  "afficher quelque chose" peut être vu comme une fonction.
Les fonctions étant des variables et comme les variables peuvent être passées en paramètres, on peut passer "afficher quelque chose" à une fonction.

Ainsi, la fonction "afficher quelque chose" sera passée en paramètre à la fonction forEach.

Résumé des codes


Affichage

function affVal(v){
   console.log(`val tab : ${v}`)
}


Affichage Positif

function AffPositif(v){
   if (v>0) console.log(` val positif : ${v} `);
}


Boucle sur le tableau

function forEach(array, fx) {
  for (var i = 0; i < array.length; i++)//for of
    fx(array[i]);
}


Appel


forEach(T, AffPositif);

Appel anonyme

forEach(T, function (v){
  console.log(`-> tab : ${v}`);
});


En Action


Inscription à : Articles (Atom)