On s’intéresse à un algorithme récursif qui permet de rendre la monnaie à partir d’une liste donnée de valeurs de pièces et de billets.
Le système monétaire est donné sous forme d’un tableau de données const pieces = [100, 50, 20, 10, 5, 2, 1]. On supposera qu’il n’y a pas de limitation quant à leur nombre.
On cherche à donner le tableau de pièces à rendre pour une somme donnée en argument. le tableau de pièce est donné en second argument. Le troisième paramétre et l'index sur le tableau pieces.
Donnez la fonction rendu_glouton qui implémente cet algorithme et renvoie le tableau des pièces à rendre.
Exemples des appels récursifs
legende : ▲reste sur la même pièce, ▶ change de pièce.
rendu_glouton(68, [ ], 0)
[50, 10, 5, 2, 1]
Voici la liste des appels
100€ rendu_glouton(68, [], 0)
50€ ▶ rendu_glouton(68, [], 1)
50€ ▶ ▲ rendu_glouton(18, [50], 1)
20€ ▶ ▲ ▶ rendu_glouton(18, [50], 2)
10€ ▶ ▲ ▶ ▶ rendu_glouton(18, [50], 3)
10€ ▶ ▲ ▶ ▶ ▲ rendu_glouton(8, [50,10], 3)
5€ ▶ ▲ ▶ ▶ ▲ ▶ rendu_glouton(8, [50,10], 4)
5€ ▶ ▲ ▶ ▶ ▲ ▶ ▲ rendu_glouton(3, [50,10,5], 4)
2€ ▶ ▲ ▶ ▶ ▲ ▶ ▲ ▶ rendu_glouton(3, [50,10,5], 5)
2€ ▶ ▲ ▶ ▶ ▲ ▶ ▲ ▶ ▲ rendu_glouton(1, [50,10,5,2], 5)
1€ ▶ ▲ ▶ ▶ ▲ ▶ ▲ ▶ ▲ ▶ rendu_glouton(1, [50,10,5,2], 6)
1€ ▶ ▲ ▶ ▶ ▲ ▶ ▲ ▶ ▲ ▶ ▲ rendu_glouton(0, [50,10,5,2,1], 6)
✕ FIN ✕

rendu_glouton(300, [ ], 0)
[100, 100, 100]
Voici la liste des appels
> rendu_glouton(300, [], 0: 100€ )
100€ rendu_glouton(300, [], 0)
100€ ▲ rendu_glouton(200, [100], 0)
100€ ▲ ▲ rendu_glouton(100, [100,100], 0)
100€ ▲ ▲ ▲ rendu_glouton(0, [100,100,100], 0)
✕ FIN ✕

le troisième paramétre correspond à l'indice de recherche dans le tableau des pieces. 
Fixant sa valeur à 0, c'est en cela que l'algorithme est glouton, on recherche le plus gros billet à rendre à chaque itération. Ainsi rendre 100€ c'est 1 billet de 100 et pas 2 billets de 50 ou 10 billets de 10.

Chargement&#8230;

Plus d'infos »

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

Résumé des cours précédents

http://dupontcours.free.fr/JavaScript/DOM-javascript/dom.html

Interface : https://dupontdenis.github.io/DomElement/

🆘 Projet arbre DOM

basic DOM

https://dupontdenis.github.io/FindWord/

See the Pen TD 8 DOM event by dupont (@dupontcodepen) on CodePen.

Projet à RENDRE

Nous avons vu comment afficher les éléments du DOM

🚧 Nous voulons maintenant comptabiliser les éléments du DOM.

Copiez et collez le code dans la console d'un site pour observer le nombre et le type de balises.

🆘 kit de survie !

Projet

Affichez les balises d'une pages !

Test

http://dupontcours.free.fr/JavaScript/DOM-javascript/dom.html

Plus d'infos »

DS : Découvrir la force de JS

See the Pen Grid JS finale by dupont (@dupontcodepen) on CodePen.

Etude de cas !

deep destructuration

Exemple pour la deep destructuration :lien

Plan

Décomposition : exemple

Allez dans la console de votre navigateur et tapez :
const doc = document.documentElement;
const { clientWidth:largueur } = doc;
console.log( `la largeur de la fenêtre est : ${largueur} ` );

Décomposition : fonction fléchée

Définition

let f = ([a, b] = [10, 10], {x: c} = {x: a - b}) => a + b + c;

Paramètres

f([2,3],{x:10});

f = ([a, b], {x: c}) => a + b + c;

// 15 = 2 + 3 + 10

Paramètres

f([2,3]);

([a, b], {x: c} = {x: a - b}) => a + b + c;

// 4 = 2 + 3 + ( 2 - 3 )

Paramètres

f();

f = ([a, b] = [10, 10], {x: c} = {x: a - b}) => a + b + c;

// 20 = 10 + 10 + ( 10 - 10 )

décomposition et renomage :

const cours = [
{
langue: "fr",
niveau: {
lu: 2,
ecrit: 5,
parle: 5
},
test: 35
},
{
langue: "eng",
niveau: {
lu: 4,
ecrit: 4,
parle: 4
},
test: 100
}
]

// sans renomage
for (let {langue, niveau: { ecrit} } of cours) {
console.log(`langue : ${langue}
\t\tniveau de l'écrit = ${ecrit}`)

}

// on peut redéfinir les variables
for (let {langue: l, niveau: { ecrit: e } } of cours) {
console.log(`langue : ${l}
\t\tniveau de l'écrit = ${e}`)
}

>

"langue : fr
niveau de l'écrit = 5"
"langue : eng
niveau de l'écrit = 4"

En action :

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

Projet :

Réaliser l'interface d'une calculette

Ce projet perrmet d'appréhender de nombreux aspects de la technologie CSS-grid.

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

Les snippets ?

et ses snippets (lisez l'article)

Travail en DM : CV

Workshop Microsoft

Nous avons mis en place un workshop pour illustrer la mise en ligne de votre CV

Exemple

https://dupontdenis.github.io/CV/

Suivez le guide

Create a resume website in the Browser using HTML, CSS, github.dev, and GitHub Pages

https://github.com/ornelladotcom/resume-website-workshop

L'inspection montre l'utilisation d'une grille CSS.

Cours : grid

Objectifs

https://dupontdenis.github.io/grid-exemple/

Cours

JavaScript

Js : with Mash

Enoncé

Let's start

Mettez un maximum de cerise 🍒 dans votre panier 🧺 énoncé
🍒 = niveau de difficulté,
💻 = connectez vous.

Wait 0ms🍒🍒

Donnez l'affichage du code
const wait = 0;
setTimeout(function () {
console.log('First');
}, wait);
console.log('Second');

Game💻, 🍒

✍️Trouvez un moyen pour déclencher le bouton
https://dupontdenis.github.io/hack-lelia/

Voici ce que vous devriez obtenir, sans le code de sécurité installé par la république !

Opérateurs 🍒

x = 10; y = ++x; z = x++;
Donner les valeurs de x,y,z

Opérateurs🍒

let [x, y] = [,1,f(){}]
Donner les valeurs de x,y

This 🍒🍒🍒

let user = {
  name: "John",
  sayHi: function () {
    console.log(`hi ${this.name}`);
  }
}
✍️Quelle est la valeur de this ?

Find a bug 💻,🍒

Charger le code du simulateur de sélecteurs
https://gist.github.com/dupontdenis/06a9f0519ff11b14994f10386348ad4a

Testez le simulateur, il semblerait y avoir un Bug.
En effet le résultat pour le sélecteur 😡n'est pas celui attendu :
😡p:nth-child(4) {
border : 1px solid;
}
Le simulateur fonctionne parfaitement.
✍️Trouvez une explication à ce résultat.

Code 🥇

let obj = {
  nom: "dupont",
  sex: "m"
};

obj = {
  nom: "dupont",
  sex: "f"
};
✍️Expliquez le déroulement du code en mémoire. Quel mot important dans les langages doit être ici invoqué.

Algorithmique 🍒🍒🍒

✍️Donnez le code de separe qui isole les valeurs du tableau non nulle à droite.
separe([1, 0, 1, 1, 1, 0, 1, 0])
// [0, 0, 0, 1, 1, 1, 1, 1]

Les méthodes sur les structures 🍒

✍️Dessinez le résultat en mémoire du code !
const data = [
    {
        nom: "coka",
        cat: "Boisson",
        prix: 4, }
, {
        nom: "pepsi",
        cat: "Boisson",
        prix: 9, }
,{
        nom: "farine",
        cat: "Epicerie",
        prix: 4,
    },];
const groupBy = (arr, key) =>
  arr.reduce((acc, i) => {
    (acc[i[key]] = acc[i[key]] || [] ).push(i);
    return acc;
  }, {});

const cat = groupBy(data,"cat");

Langage 🍒🍒🍒

✍️A quoi sert toto ! Pourriez-vous lui donner un nom plus approprié ?
Function.prototype.toto= function (obj) {
  const method = this,
  temp = function(){
    return method.apply(obj, arguments)
  };
  return temp;
}

map 🍒🍒

const animals = [{name: "i", age: 3, type: 'dog'},
{name: "ii", age: 6,type: 'cat'}];

const format = Animals.map( function(animal){
animal.type = `${animal.name}-${animal.type}`
return animal
})
Que valent les tableaux animals et format.

Pages

Afficher les regions et les villes !

Trouvez la region d'une ville

MAP à Array

Trouvez la région avec le plus de villes

fichier db.json

On cherche à donner le tableau de pièces à rendre pour une somme donnée en argument. le tableau de pièce est donné en second argument. Le troisième paramétre et l'index sur le tableau pieces.

Exemples des appels récursifs

🆘 kit de survie !

Projet

Test

Plan

Décomposition : exemple

Décomposition : fonction fléchée

Définition

Paramètres

Paramètres

Paramètres

Correction lien

Code

Plan du cours

Projet :

Exemple

Suivez le guide

Cours

Js : with Mash

Mettez un maximum de cerise 🍒 dans votre panier 🧺 énoncé🍒 = niveau de difficulté, 💻 = connectez vous.

Wait 0ms🍒🍒

Donnez l'affichage du codeconst wait = 0;setTimeout(function () { console.log('First');}, wait); console.log('Second');

Game💻, 🍒

✍️Trouvez un moyen pour déclencher le boutonhttps://dupontdenis.github.io/hack-lelia/Voici ce que vous devriez obtenir, sans le code de sécurité installé par la république !

Opérateurs 🍒

x = 10; y = ++x; z = x++;Donner les valeurs de x,y,z

Opérateurs🍒

let [x, y] = [,1,f(){}]Donner les valeurs de x,y

This 🍒🍒🍒

let user = { name: "John", sayHi: function () { console.log(`hi ${this.name}`); }}✍️Quelle est la valeur de this ?

Find a bug 💻,🍒

Code 🥇

let obj = { nom: "dupont", sex: "m"};obj = { nom: "dupont", sex: "f"};✍️Expliquez le déroulement du code en mémoire. Quel mot important dans les langages doit être ici invoqué.

Algorithmique 🍒🍒🍒

✍️Donnez le code de separe qui isole les valeurs du tableau non nulle à droite.separe([1, 0, 1, 1, 1, 0, 1, 0]) // [0, 0, 0, 1, 1, 1, 1, 1]

Les méthodes sur les structures 🍒

Langage 🍒🍒🍒

✍️A quoi sert toto ! Pourriez-vous lui donner un nom plus approprié ?Function.prototype.toto= function (obj) { const method = this, temp = function(){ return method.apply(obj, arguments) }; return temp;}

map 🍒🍒

const animals = [{name: "i", age: 3, type: 'dog'}, {name: "ii", age: 6,type: 'cat'}];const format = Animals.map( function(animal){ animal.type = `${animal.name}-${animal.type}` return animal})Que valent les tableaux animals et format.

Mettez un maximum de cerise 🍒 dans votre panier 🧺 énoncé
🍒 = niveau de difficulté,
💻 = connectez vous.

Donnez l'affichage du code
const wait = 0;
setTimeout(function () {
console.log('First');
}, wait);
console.log('Second');

✍️Trouvez un moyen pour déclencher le bouton
https://dupontdenis.github.io/hack-lelia/

Voici ce que vous devriez obtenir, sans le code de sécurité installé par la république !

x = 10; y = ++x; z = x++;
Donner les valeurs de x,y,z

let [x, y] = [,1,f(){}]
Donner les valeurs de x,y

let user = {
name: "John",
sayHi: function () {
console.log(`hi ${this.name}`);
}
}
✍️Quelle est la valeur de this ?

let obj = {
nom: "dupont",
sex: "m"
};

obj = {
nom: "dupont",
sex: "f"
};
✍️Expliquez le déroulement du code en mémoire. Quel mot important dans les langages doit être ici invoqué.

✍️Donnez le code de separe qui isole les valeurs du tableau non nulle à droite.
separe([1, 0, 1, 1, 1, 0, 1, 0])
// [0, 0, 0, 1, 1, 1, 1, 1]

✍️A quoi sert toto ! Pourriez-vous lui donner un nom plus approprié ?
Function.prototype.toto= function (obj) {
const method = this,
temp = function(){
return method.apply(obj, arguments)
};
return temp;
}

const animals = [{name: "i", age: 3, type: 'dog'},
{name: "ii", age: 6,type: 'cat'}];

const format = Animals.map( function(animal){
animal.type = `${animal.name}-${animal.type}`
return animal
})
Que valent les tableaux animals et format.