From 76bfb69c0917b1c185a660d57fd2ac56115c0ff7 Mon Sep 17 00:00:00 2001
From: Thomas Fritsch <tf@kumquats.fr>
Date: Mon, 10 Feb 2020 01:16:47 +0100
Subject: [PATCH] maj instructions
---
B-poo.md | 2 +-
C-modules.md | 2 +-
D-poo-avancee.md | 20 ++++++++++----------
3 files changed, 12 insertions(+), 12 deletions(-)
diff --git a/B-poo.md b/B-poo.md
index f3be2ac..7126af1 100644
--- a/B-poo.md
+++ b/B-poo.md
@@ -152,7 +152,7 @@ Pour pouvoir utiliser ces syntaxes, nous allons modifier la configuration de Bab
## B.4. Héritage : La classe Img
1. **Créez maintenant une nouvelle classe `Img`** qui hérite de `Component` et dont le constructeur s'utilise comme ceci :
```js
- const img = new Img('images/regina.jpg');
+ const img = new Img('https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300');
```
Testez le résultat de ce composant à l'aide de l'instruction :
```js
diff --git a/C-modules.md b/C-modules.md
index c503acc..10c7aab 100644
--- a/C-modules.md
+++ b/C-modules.md
@@ -126,7 +126,7 @@ Comme vu en cours, le bundler le plus employé en JS est [Webpack](https://webpa
"build": "webpack --mode=production",
"watch": "webpack --mode=development --watch"
```
-5. **Lancez la compilation** : stoppez le watch précédent (<kbd>CTRL</kbd>+<kbd>C</kbd>) et relancez la compilation à l'aide de la commande `npm run watch` (*qui lancera cette fois webpack et plus Babel*)
+5. **Lancez la compilation** : stoppez le watch précédent (<kbd>CTRL</kbd>+<kbd>C</kbd>), effacez tout le contenu du dossier `build` et relancez la compilation à l'aide de la commande `npm run watch` (*qui lancera cette fois webpack et plus Babel*)
6. **Enfin, vérifiez dans le navigateur que la page s'affiche toujours** et que dans l'onglet "Réseau"/"Network" vous n'avez maintenant bien plus qu'un seul fichier JS téléchargé par le navigateur : le `build/main.bundle.js`<a href="images/readme/pizzaland-07-modules-webpack.jpg"><img src="images/readme/pizzaland-07-modules-webpack.jpg" width="80%"></a>
diff --git a/D-poo-avancee.md b/D-poo-avancee.md
index 2e694e3..9acdecb 100644
--- a/D-poo-avancee.md
+++ b/D-poo-avancee.md
@@ -4,7 +4,7 @@
- [D.1. *Composition :* La classe PizzaThumbnail](#d1-composition--la-classe-pizzathumbnail)
- [D.2. La classe HomePage](#d2-la-classe-homepage)
- [D.3. *Propriétés et méthodes statiques :* La classe PageRenderer](#d3-propriétés-et-méthodes-statiques--la-classe-pagerenderer)
-- [D.4. *Setter & Getter :* La propriété `data`](#d4-setter--getter--la-propriété-data)
+- [D.4. *Setter & Getter :* La propriété `pizzas`](#d4-setter--getter--la-propriété-pizzas)
- [Étape suivante](#Étape-suivante)
## D.1. *Composition :* La classe PizzaThumbnail
@@ -41,7 +41,7 @@
'article',
{name:'class', value:'media'},
[
- new Img('images/regina.jpg'),
+ new Img('https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'),
'Regina'
]
);
@@ -49,18 +49,18 @@
```
doit afficher la page suivante :<br><a href="images/readme/pizzaland-04.jpg"><img src="images/readme/pizzaland-04.jpg" width="80%"></a>
-3. **Créez une classe `PizzaThumbnail`** (dans js/components/PizzaThumbnail.js`) qui hérite de la classe `Component` :
+3. **Créez une classe `PizzaThumbnail`** (dans `js/components/PizzaThumbnail.js`) qui hérite de la classe `Component` :
+ le constructeur prend en paramètre un objet nommé `pizza` dont le format correspond à celui d'un élément du tableau `data` (cad. propriétés `nom`, `base`, `prix_petite`, `prix_grande` et `image`)
+ la méthode `render()` retourne un code du type :
```html
<article class="media">
- <a href="images/readme/regina.jpg">
- <img src="images/readme/regina.jpg" />
+ <a href="https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300">
+ <img src="https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300" />
<section class="infos">
<h4>Regina</h4>
<ul>
- <li>Prix petit format : 5.50 €</li>
- <li>Prix grand format : 7.50 €</li>
+ <li>Prix petit format : 6.50 €</li>
+ <li>Prix grand format : 9.95 €</li>
</ul>
</section>
</a>
@@ -98,12 +98,12 @@
4. Assigner à `titleElement` : `document.querySelector('.pageTitle')` et à `contentElement` : `document.querySelector( '.pizzasContainer' )`
5. Afficher la `HomePage` grâce à la classe `PageRenderer`
-## D.4. *Setter & Getter :* La propriété `data`
+## D.4. *Setter & Getter :* La propriété `pizzas`
A l'aide des propriétés privées, des getters et des setters, faire en sorte que le code suivant permette d'afficher la liste des pizzas :
```js
-let homePage:HomePage = new HomePage([]);
+const homePage = new HomePage([]);
PageRenderer.renderPage( homePage ); // affiche une page vide
-homePage.data = data;
+homePage.pizzas = data;
PageRenderer.renderPage( homePage ); // affiche la liste des pizzas
```
--
GitLab