ajout filtres/tri & champ image dans pizza

D-chaines.md

@@ -69,7 +69,7 @@ let s3 = `Les étudiants de ${ getCurrentSchool() } sont les meilleurs`;
 
    Même si nous n'avons pas encore vu comment manipuler la page html grâce à l'API DOM (chapitre 3), vous trouverez ci-dessous le code qui va permettre d'injecter notre balise `<a>` dans la page. A la fin de votre code, ajouter l'instruction suivante :
    ```js
-   document.querySelector(".pizzasContainer").innerHTML = html;
+   document.querySelector('.pizzasContainer').innerHTML = html;
    ```
    Cette instruction va avoir pour effet d'injecter le code HTML contenu dans la variable `html` à l'intérieur de la balise de classe CSS `"pizzasContainer"`.
 

E-tableaux-objets.md

@@ -6,28 +6,56 @@
 
 ## E.1. Manipulation des tableaux
 
-Initialiser un tableau nommé `data` avec 3 chaines de caractères : 'Regina', 'Napolitaine', 'Spicy'. Parcourir ce tableau afin de générer 3 liens sur le modèle de celui réalisé plus haut.
+Initialisez un tableau nommé `data` avec 3 chaines de caractères : 'Regina', 'Napolitaine', 'Spicy'. Parcourez ce tableau afin de générer 3 liens sur le modèle de celui réalisé plus haut.
 
-Utilisez les différentes méthodes de parcours des tableaux :
+Utilisez pour cela les différentes méthodes de parcours des tableaux :
 1. Une boucle `for` classique
 2. La méthode `Array.forEach` cf. https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach
 3. la méthode `Array.map` cf. https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map accompagnée de la méthode `Array.join` cf. https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/join
+4. la méthode `Array.reduce` cf. https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/reduce
 
-Le résultat obtenu sera identique dans les 3 cas :
+*NB: pour `forEach`, `map` et surtout `reduce` pensez à utiliser les arrow functions !*
+
+Le résultat obtenu sera identique dans les 4 cas :
 <a href="images/readme/pizzaland-03.jpg"><img src="images/readme/pizzaland-03.jpg" width="80%"></a>
 
 ## E.2. Les Objets littéraux
-Modifier le tableau `data` : au lieu de 3 chaînes de caractères, on va maintenant y mettre 3 objets littéraux de la forme suivante :
+Modifiez le tableau `data` : au lieu de 3 chaînes de caractères, on va maintenant y mettre 3 objets littéraux :
+
+Première pizza :
 ```js
 {
 	nom: 'Regina',
 	base: 'tomate',
 	prix_petite: 5.5,
-	prix_grande: 7.5
+	prix_grande: 7.5,
+	image: 'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
+}
+```
+
+Deuxième pizza :
+```js
+{
+	nom: 'Napolitaine',
+	base: 'tomate',
+	prix_petite: 6.5,
+	prix_grande: 8.95,
+	image: 'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300&q=80'
 }
 ```
 
-Modifier la boucle pour générer un code de ce type :
+Troisième pizza :
+```js
+{
+	nom: 'Spicy',
+	base: 'crème',
+	prix_petite: 5.5,
+	prix_grande: 8,
+	image: 'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300&q=80'
+}
+```
+
+ModifieZ la boucle pour générer un code de ce type :
 ```html
 <article class="media">
 	<a href="images/regina.jpg">
@@ -47,5 +75,7 @@ Le rendu final devra correspondre à ceci :
 
 <a href="images/readme/pizzaland-04.jpg"><img src="images/readme/pizzaland-04.jpg" width="90%"></a>
 
+***Attention au formatage des prix** (examinez bien la capture d'écran) !*
+
 ## Étape suivante <!-- omit in toc -->
 Si tout fonctionne, vous pouvez passer à l'étape suivante : [F. Compiler avec Babel](./F-babel.md)
\ No newline at end of file

F-babel.md

@@ -57,3 +57,5 @@ L'installation de Babel se fait avec npm (Node Package Manager - l'outil fourni
 	```
 
 
+## Étape suivante <!-- omit in toc -->
+Si tout fonctionne, vous pouvez passer à l'étape suivante : [G. Filtres et tris](./G-filtres-tri.md)
\ No newline at end of file

G-filtres-tri.md

+# TP 1 : G. Filtres, tri et destructuring <!-- omit in toc -->
+
+## Sommaire <!-- omit in toc -->
+- [G.1. Tri de tableau](#g1-tri-de-tableau)
+- [G.2. Système de filtres](#g2-système-de-filtres)
+- [G.3. Destructuring](#g3-destructuring)
+	- [Principe du destructuring](#principe-du-destructuring)
+	- [Destructuring et fonctions](#destructuring-et-fonctions)
+	- [Mise en application](#mise-en-application)
+
+## G.1. Tri de tableau
+A l'aide de la méthode sort de la classe Array (https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/sort) triez les pizzas :
+1. Par ordre alphabétique
+
+	<a href="images/readme/pizzaland-05.jpg"><img src="images/readme/pizzaland-05.jpg" width="80%"></a>
+
+1. Par prix petit format croissant
+
+	<a href="images/readme/pizzaland-06.jpg"><img src="images/readme/pizzaland-06.jpg" width="80%"></a>
+
+
+1. Par prix petit format croissant et en cas d'égalité, par prix grand format croissant
+
+	<a href="images/readme/pizzaland-07.jpg"><img src="images/readme/pizzaland-07.jpg" width="80%"></a>
+
+
+
+## G.2. Système de filtres
+A l'aide de la méthode filter (https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/filter), n'affichez que les pizzas dont :
+1. la propriété `base` est 'tomate'
+
+	<a href="images/readme/pizzaland-08.jpg"><img src="images/readme/pizzaland-08.jpg" width="80%"></a>
+
+1. le prix petit format est inférieur à 6€
+
+	<a href="images/readme/pizzaland-09.jpg"><img src="images/readme/pizzaland-09.jpg" width="80%"></a>
+
+1. le nom contient deux fois la lettre "i"
+
+	<a href="images/readme/pizzaland-10.jpg"><img src="images/readme/pizzaland-10.jpg" width="80%"></a>
+
+
+
+## G.3. Destructuring
+
+### Principe du destructuring
+Une des fonctionnalités ES6+ les plus pratiquées s'appelle le "destructuring".
+
+Le destructuring permet de facilement déclarer des variables dont les valeurs vont être remplies automatiquement par des propriétés d'objets. Prenons par exemple l'objet 'hodor' ci-dessous :
+
+```js
+const hodor = {
+	firstname: 'hodor',
+	lastname: 'hodor'
+};
+```
+
+Si l'on veut récupérer son nom et son prénom, sans le destructuring, on ferait ceci :
+```js
+const firstname = hodor.firstname,
+	lastname = hodor.lastname;
+```
+
+Le destructuring va permettre de faire la même chose mais en plus rapide :
+```js
+const { firstname, lastname } = hodor;
+```
+
+Notez les deux accolades autour du nom des constantes. Les constantes doivent aussi avoir le même nom que les propriétés de l'objet (même si un [système d'alias existe](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Affecter_par_d%C3%A9composition#Affecter_avec_un_nom_diff%C3%A9rent)).
+
+Le résultat lui est le même que dans l'exemple précédent : on crée deux constantes, dont les valeurs sont celles des propriétés de l'objet hodor.
+
+**Notez bien que cela fonctionne pour les `const` mais bien entendu aussi pour les `let` !**
+
+### Destructuring et fonctions
+Le destructuring est souvent utilisé dans la déclaration de fonctions qui reçoivent des objets en paramètre. Par exemple, imaginons la fonction suivante :
+
+```js
+function kill(character) {
+	console.log( `${character.firstname} ${character.lastname} is dead :'(` );
+}
+```
+
+Le destructuring permet de simplifier l'écriture de la fonction :
+```js
+function kill({firstname, lastname}) {
+	console.log( `${firstname} ${lastname} is dead :'(` );
+}
+```
+
+Dans cette nouvelle version, le code est beaucoup moins verbeux, et surtout la fonction est maintenant quasiment **auto-documentée** : rien qu'en lisant la signature de la fonction, on sait que le paramètre qu'on doit lui passer est un objet (grâce aux accolades) et aussi qu'il doit avoir deux propriétés, firstname et lastname. Pratique !
+
+### Mise en application
+Appliquez le destructuring partout où c'est possible dans votre code !
\ No newline at end of file