Skip to content
Snippets Groups Projects
Commit e0fb7e57 authored by Thomas Fritsch's avatar Thomas Fritsch
Browse files

déplacement poo composition -> poo avancée

parent 67716914
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
B-poo.md
+ 0
− 76
View file @ e0fb7e57
......@@ -7,8 +7,6 @@
- [B.2. Compiler avec Babel](#b2-compiler-avec-babel)
- [B.3. La classe Component](#b3-la-classe-component)
- [B.4. *Héritage :* La classe Img](#b4-héritage--la-classe-img)
- [B.5. *Composition :* La classe PizzaThumbnail](#b5-composition--la-classe-pizzathumbnail)
- [B.6. La classe HomePage](#b6-la-classe-homepage)
- [Étape suivante](#Étape-suivante)
***NB* : Dans ce TP vous coderez dans un premier temps vos classes directement dans le fichier `main.js` sans passer par des fichiers (modules) séparés.** Dans la suite du TP on organisera notre code plus proprement en séparant les classes dans des modules différents mais pour le moment on va simplifier la mise en place en remettant ça à plus tard.
......@@ -162,79 +160,5 @@ Pour pouvoir utiliser ces syntaxes, nous allons modifier la configuration de Bab
```
Le rendu doit être identique à la capture précédente : <br><a href="images/readme/pizzaland-03.jpg"><img src="images/readme/pizzaland-03.jpg" width="80%"></a>
## B.5. *Composition :* La classe PizzaThumbnail
1. **Modifiez le code de la méthode `render()`** pour permettre à la classe `Component` de recevoir dans le paramètre `children` :
- soit une chaîne de caractères (comme c'est déjà le cas actuellement)
- soit un tableau de chaînes de caractères.** <br>Par exemple : si `tag` vaut `"div"` et que `children` vaut `[ "youpi", "ça", "marche" ]` alors `render()` retournera la chaîne `"<div>youpiçamarche</div>"`.
Pour ne pas alourdir trop le code de la méthode `render()` et pour avoir un code plus lisible, passez le code de rendu des enfants, dans une méthode `renderChildren()`.
Pour tester si `children` est un tableau (classe `Array`), vous pouvez utiliser l'opérateur `instanceof` cf. https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/instanceof
Testez votre classe avec le code suivant :
```js
const title = new Component( 'h1', null, ['La', ' ', 'carte'] );
document.querySelector('.pageTitle').innerHTML = title.render();
```
2. **Adaptez la méthode `render()`** pour permettre de passer dans `children` non seulement des chaînes de caractères comme c'est déjà le cas mais aussi **d'autres `Component`**, comme ceci** :
```js
const c = new Component( 'span', null, [
new Component( 'img', null, ['FTW'] )
'JS',
] );
```
La méthode `renderChildren()` devra maintenant tester le type de chaque enfant :
- si cet enfant est lui-même une instance de Component, on fait alors appel à la méthode `render()` du `Component` enfant (petit indice : "récursivité")
- si l'enfant est une chaîne de caractères, alors la chaîne est ajoutée telle qu'elle, comme auparavant
Pour tester si un enfant est de la classe `Component`, vous pouvez là aussi utiliser l'opérateur `instanceof` cf. https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/instanceof
Si votre code fonctionne correctement, le code suivant :
```js
const c = new Component( 'article', {name:'class', value:'media'}, [
new Img('images/regina.jpg'),
'Regina'
]);
document.querySelector( '.pizzasContainer' ).innerHTML = c.render();
```
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`** 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" />
<section class="infos">
<h4>Regina</h4>
<ul>
<li>Prix petit format : 5.50 €</li>
<li>Prix grand format : 7.50 €</li>
</ul>
</section>
</a>
</article>
```
+ la classe `PizzaThumbnail` devra utiliser la classe `Img` pour le rendu de l'image de la pizza.
+ Testez la classe `PizzaThumbnail` avec le code suivant :
```js
const pt = new PizzaThumbnail(data[0]);
document.querySelector( '.pizzasContainer' ).innerHTML = pt.render();
```
## B.6. La classe HomePage
4. **Créez enfin une classe `HomePage` qui hérite de `Component`** :
- le constructeur recevra en paramètre le tableau `data`
- Pour chaque cellule du tableau `data`, le composant `HomePage` créera un composant `PizzaThumbnail` associé.
- le code HTML retourné par la méthode `render()` sera une balise `<section>` dans laquelle sera affichée la combinaison du `render()` de chaque `PizzaThumbnail` contenu dans la page.
***NB:** en théorie, un simple override du constructor et l'utilisation de la méthode [Array.map](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map) doivent suffire !*
Le résultat attendu est le suivant :<br><a href="images/readme/pizzaland-05.jpg"><img src="images/readme/pizzaland-05.jpg" width="80%"></a>
## Étape suivante
Si vous avez terminé cette partie sur la POO, il est l'heure de mettre en place les modules dans la partie suivante : [Les modules](C-modules.md).
\ No newline at end of file
E-poo-avancee.md
+ 76
− 0
View file @ e0fb7e57
......@@ -2,11 +2,87 @@
## Sommaire <!-- omit in toc -->
- [E. Pour aller plus loin](#e-pour-aller-plus-loin)
- [B.5. *Composition :* La classe PizzaThumbnail](#b5-composition--la-classe-pizzathumbnail)
- [B.6. La classe HomePage](#b6-la-classe-homepage)
- [E.1. *Propriétés et méthodes statiques :* La classe PageRenderer](#e1-propriétés-et-méthodes-statiques--la-classe-pagerenderer)
- [E.2. *Setter & Getter :* La propriété `data`](#e2-setter--getter--la-propriété-data)
## E. Pour aller plus loin
Si vous avez terminé les précédents exercices voici qui devrait vous occuper et permettre de gagner du temps pour le prochain TP :
## B.5. *Composition :* La classe PizzaThumbnail
1. **Modifiez le code de la méthode `render()`** pour permettre à la classe `Component` de recevoir dans le paramètre `children` :
- soit une chaîne de caractères (comme c'est déjà le cas actuellement)
- soit un tableau de chaînes de caractères.** <br>Par exemple : si `tag` vaut `"div"` et que `children` vaut `[ "youpi", "ça", "marche" ]` alors `render()` retournera la chaîne `"<div>youpiçamarche</div>"`.
Pour ne pas alourdir trop le code de la méthode `render()` et pour avoir un code plus lisible, passez le code de rendu des enfants, dans une méthode `renderChildren()`.
Pour tester si `children` est un tableau (classe `Array`), vous pouvez utiliser l'opérateur `instanceof` cf. https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/instanceof
Testez votre classe avec le code suivant :
```js
const title = new Component( 'h1', null, ['La', ' ', 'carte'] );
document.querySelector('.pageTitle').innerHTML = title.render();
```
2. **Adaptez la méthode `render()`** pour permettre de passer dans `children` non seulement des chaînes de caractères comme c'est déjà le cas mais aussi **d'autres `Component`**, comme ceci** :
```js
const c = new Component( 'span', null, [
new Component( 'img', null, ['FTW'] )
'JS',
] );
```
La méthode `renderChildren()` devra maintenant tester le type de chaque enfant :
- si cet enfant est lui-même une instance de Component, on fait alors appel à la méthode `render()` du `Component` enfant (petit indice : "récursivité")
- si l'enfant est une chaîne de caractères, alors la chaîne est ajoutée telle qu'elle, comme auparavant
Pour tester si un enfant est de la classe `Component`, vous pouvez là aussi utiliser l'opérateur `instanceof` cf. https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/instanceof
Si votre code fonctionne correctement, le code suivant :
```js
const c = new Component( 'article', {name:'class', value:'media'}, [
new Img('images/regina.jpg'),
'Regina'
]);
document.querySelector( '.pizzasContainer' ).innerHTML = c.render();
```
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`** 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" />
<section class="infos">
<h4>Regina</h4>
<ul>
<li>Prix petit format : 5.50 €</li>
<li>Prix grand format : 7.50 €</li>
</ul>
</section>
</a>
</article>
```
+ la classe `PizzaThumbnail` devra utiliser la classe `Img` pour le rendu de l'image de la pizza.
+ Testez la classe `PizzaThumbnail` avec le code suivant :
```js
const pt = new PizzaThumbnail(data[0]);
document.querySelector( '.pizzasContainer' ).innerHTML = pt.render();
```
## B.6. La classe HomePage
4. **Créez enfin une classe `HomePage` qui hérite de `Component`** :
- le constructeur recevra en paramètre le tableau `data`
- Pour chaque cellule du tableau `data`, le composant `HomePage` créera un composant `PizzaThumbnail` associé.
- le code HTML retourné par la méthode `render()` sera une balise `<section>` dans laquelle sera affichée la combinaison du `render()` de chaque `PizzaThumbnail` contenu dans la page.
***NB:** en théorie, un simple override du constructor et l'utilisation de la méthode [Array.map](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map) doivent suffire !*
Le résultat attendu est le suivant :<br><a href="images/readme/pizzaland-05.jpg"><img src="images/readme/pizzaland-05.jpg" width="80%"></a>
### E.1. *Propriétés et méthodes statiques :* La classe PageRenderer
1. Créez une classe `Page` (dans un module à part, bien entendu !) :
- qui hérite de `Component`
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment