dupontL2: 2023

AI microsoft !

Test de copilot (AI microsoft) dans l'éditeur Visual Studio code (code Javascript).

🆘console.log(res);

Entrainement

💰Les salaires

Nous allons analyser les données d'un ensemble d'entreprises !

En Action

TD : module

Les modules en actions !

lien

🖋️Devoir sur table : 5 min / level 🥷

Que valent les affichages 🪛

const add10 = {

val: 10,

addTo: function(array) {

return array.map(function(elt) {

return this.val + elt;

});

}

};

🪛console.log(add10.addTo([5,10,15]));

const add10 = {

val: 10,

addTo: function(array) {

return array.map( v => v + this.val )

}

};

🪛console.log(add10.addTo([5,10,15]));

Cours : module

This

let me = {
name:"dupont",
ptrMe: function() {console.log(this.name)}
}
, you = {
name:"dupond",
ptrYou: function() {console.log(this.name)}
};
me.print = you.ptrYou;
me.print()

🚀me.print()

🆘this what's that

https://docs.google.com/document/d/1TJ8-3_9copZ0o_-GsS-to9wrLJYgPhj84TE_3Nd-XJA/edit?usp=sharing

Reduce : Vidéo

this: Objet statique

Objet statique

const counter = {

🥷Il est important de comprendre que this=counter dans la fonction next() par ce que on excute counter.next();

Pipeline !

const counter = {

next: function () {

++this.count;

return this;

};

🪳Attention:

const counter = {

next: function () {

return ++this.count;

};

let fxNext = counter.next;

console.log(fxNext());

🤢Arrow fonction

const counter = {

next: () => ++this.count

};

console.log(counter.count);

Projet : A rendre avant le 10/12

Projet à rendre (au choix)

https://docs.google.com/document/d/10h_6uHYvPKyLtQPNlUNkr7L_jqS98r0AD3PlAvsHE2g/edit?usp=sharing

https://docs.google.com/document/d/1t0oOJ5Vo2AmxwvLodTaobpY7BOs0_QPIME23wAx08SA/edit?usp=sharing

https://docs.google.com/document/d/1PUUE7HBeqJ2hDh6c5MxJsBS3N0W2xl83l0kaVofl4V4/edit?usp=sharing

https://docs.google.com/document/d/1DYadNNz9MejGkKGWo31DCLhT_Nxnbh94vohXyDaJ_YY/edit?usp=sharing

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

https://docs.google.com/document/d/1En2R7iD3RabNgeSjYjjofCVxKjXglSNH8_34qgD54SQ/edit?usp=sharing

https://docs.google.com/document/d/1U7StYdejEdcYjezKIkgukU23awAz4nwWLzNq6AF54YY/edit?usp=sharing

La note CC est le MAX(DS, (Projet+DS)/2)

This and arrow function

🆘lien

🆘this

Fonction fléchée

🍕TD class

Création de la classe Pizza ! Et oui tout est ~~pizza~~ objet.

🍕TD

Cours : class

DS : correction

ul.insertAdjacentHTML(

"afterBegin",

DS.reduce(

(acc, cur) =>

acc + `<li data-cohorte=${cur.cohorte}>${cur.name}</li>`,

)

);

const showInfoCohorte = function ({ target }) {

student.innerText = target.dataset.cohorte;

};

ul.addEventListener("click", showInfoCohorte, false);

See the Pen students by SuperDupont (@SuperDupont) on CodePen.

Fetch and co

Etude de cas

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

🥷DM: Closest value

const table = new Map([

    [0,'yellowgreen'],

    [150, 'green'],

    [600, 'olive'],

    [750, 'red'],

    [800, 'black'],

]);

🪛Trouvez un algorithme pour trouver la valeur 

de la table la plus proche d'une valeur.

 600 est la plus proche de la valeur 610.

 600 est la plus proche de la valeur 500.

🆘 Pensez à évaluer [...table.keys()]

Plus d'infos »

🥷🥇 Fan club reduce

Voici un code donné à titre d'information 🥇.

🥷Objectif : Faire l'équivalent de l'aggregation dans les BD.

Code

https://glitch.com/edit/#!/carnation-south-servant

Résultats

https://carnation-south-servant.glitch.me

👻Réduce

reduce 1

reduce 2
reduce 3
reduce 4
reduce 5

reduce 6

Vacances : achats

Découvrez les méthodes filter, map et reduce en action !

Vous disposez de 80€ de budget.

Vous indiquez dans votre panier vos achats

Type:Prix:Quantité

Cliquez pour calculer l'estimation d'achat et l'aide à la vente.

Vacances : Réservez votre place !

Selectionnez vos places et Confimez la réservation.

🆘Aide au DS

🥇Questions

Plus d'infos »

Délégation : 🆘DS

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

Préparation au DS

See the Pen Calendrier selection Periode by dupont (@dupontcodepen) on CodePen.

Structuration

Lecture

🆘 calendrier

cours

Objectifs du cours

🥷Passez au niveau Sup

Avant

Après

const pizzasWithCheese = [];

for (let i = 0; i < pizzas.length; i++) {

if (pizzas[i].ingredients.includes("🧀")) {

pizzasWithCheese.push(pizzas[i]);

}

console.log(pizzasWithCheese);

const pizzaWithTomato = [];

for (let i = 0; i < pizzas.length; i++) {

if (pizzas[i].ingredients.includes("🍅")) {

pizzaWithTomato.push(pizzas[i]);

}

console.log(pizzaWithTomato);

const pizzaWithCactus = [];

for (let i = 0; i < pizzas.length; i++) {

if (pizzas[i].ingredients.includes("🌵")) {

pizzaWithCactus.push(pizzas[i]);

}

console.log(pizzaWithCactus);

const hasIng = (ing) => (pizza)

=> pizza.ingredients.includes(ing);

const chees = pizzas.filter(hasIng("🧀")),

tomato = pizzas.filter(hasIng("🍅")),

cactus = pizzas.filter(hasIng("🌵"));

Code BD

const findToppins = { toppings: { $in: ["cheese", "pepper"] } };

try {

const cursor = await collection.find(findToppins).sort({ name: 1 });

await cursor.forEach((pizza) => {

console.log(`${pizza.name} has "cheese" or "pepper" toppings \n`);

});

} catch (err) {

console.error(

`Something went wrong trying to find the documents: ${err}\n`

);

}

code

Pour tester le code, vous devez mettre en place une vaiable d'environnement

du type :

mongodb+srv://moz:<password>@cluster0.kkmmj.mongodb.net/?retryWrites=true&w=majority

DOM

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

Plus d'infos »

🖋️Devoir sur table : 5 min

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: "US 26"}, play);
  newPlayer.pays = newPlayer.pays.toLowerCase();
  return newPlayer
})

DM : CB et map

QCM maison

Ecrire sa bibliothèque de fonctions sur les tableaux !

😈Testez vous !

Voici le résultat en mémoire !

🪛Comparer ces différentes écritures :

const filles_callBackArrow = pers.filter(p => p.sex === "f");

const filles_callBackDest = pers.filter(function( {sex}){

return (sex === "f");
});

const filles_callBackArrowDestruc = pers.filter( ( {sex} ) => sex === "f" );

Ces écritures sont toutes équivalentes !

🪛Pour chaque transformation donner le résultat sous forme graphique :

Par exemple pour le code suivant

const filles= pers.filter(function(p){

return (p.sex === "f");

});

const dates = filles.map(function annee( p, index ) {

return {

num : index,

annee : p.born

};

});

Vous dessinez le résultat en mémoire suivant :

Voici les fonctions de CallBack !

Déssinez le résultat pour :

🪛filles.map(function annee( p, index ) {
return [p.nom,p.born]
});

🪛filles.map(ajout);

🪛filles.map(ajout_2);

🪛filles.map(p=>p);

🪛filles.map(p=>p["new"]="hallo");

🪛filles.map(ageObj);

🪛filles.map(ageVal);

🪛filles.map(function({ born : annee }) {return { annee }});

🪛filles.map(function({ born :annee, nom }) {return { nom,annee }});

🪛filles.map(function ({ nom, ville }) {
return {
info: `${nom} habite à ${ville}`
}
});

🆘 https://goo.gl/G6u1Cz