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

corrections readme

parent 096c4ded
Branches
No related tags found
No related merge requests found
......@@ -75,9 +75,9 @@ Si ce n'est pas le cas, le choix entre guillemets simples ou double est une ques
Même si nous n'avons pas encore vu comment manipuler la page html grâce à l'API DOM (prochains chapitres), vous trouverez ci-dessous le code qui va permettre d'injecter notre balise `<a>` dans la page. A la fin de votre code, ajoutez donc l'instruction suivante :
```js
document.querySelector('.pizzasContainer').innerHTML = html;
document.querySelector('.pageContent').innerHTML = html;
```
Cette instruction va injecter le code HTML contenu dans la variable `html` à l'intérieur de la balise de classe CSS `"pizzasContainer"`.
Cette instruction va injecter le code HTML contenu dans la variable `html` à l'intérieur de la balise de classe CSS `"pageContent"`.
Si tout s'est bien passé, vous devriez désormais :
- voir le texte 'images/regina.jpg' dans la page de votre navigateur.
......
......@@ -68,5 +68,10 @@ L'installation de Babel se fait avec npm (Node Package Manager - l'outil fourni
2. **Une fois le fichier `build/main.js` créé, modifiez le fichier `index.html` pour charger ce fichier à la place du `src/main.js`.** Rechargez la page pour vérifier que tout fonctionne toujours correctement !
3. **Pour simplifier le travail et éviter d'avoir à compiler manuellement à chaque modification**, vous pourrez utiliser dans les futurs TP, la commande suivante qui va tourner en tâche de fond et recompiler à chaque sauvegarde du fichier js/main.js :
```bash
./node_modules/.bin/babel src -d build --verbose --watch --source-maps
```
## É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
......@@ -49,19 +49,19 @@ Une des fonctionnalités ES6+ les plus pratiquées s'appelle le "destructuring".
Le destructuring permet de déclarer des variables dont les valeurs vont être remplies automatiquement par des propriétés d'objets. Prenons par exemple l'objet `character` ci-dessous :
```js
const character = { prenom: 'Skyler', nom: 'White' };
const character = { firstName: 'Skyler', lastName: 'White' };
```
Si l'on veut récupérer son nom et son prénom, sans le destructuring, on ferait ceci :
```js
const firstname = character.firstname,
lastname = character.lastname;
const firstName = character.firstName,
lastName = character.lastName;
```
**C'est assez verbeux** : on répète `character` deux fois, `firstname` deux fois et `lastname` deux fois également.
**C'est assez verbeux** : on répète `character` deux fois, `firstName` deux fois et `lastName` deux fois également.
Et bien avec le destructuring on va pouvoir faire exactement la même chose mais en plus rapide :
```js
const { firstname, lastname } = character;
const { firstName, lastName } = character;
```
Notez les deux accolades autour du nom des constantes : c'est la syntaxe pour faire du desctructuring d'objets.
......@@ -77,18 +77,18 @@ Le destructuring est souvent utilisé dans la déclaration de fonctions qui reç
```js
function kill(character) {
console.log( `${character.firstname} ${character.lastname} is dead :'(` );
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 :'(` );
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 !
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 !
### G.3.3. Mise en application
La consigne pour ce dernier exercice est simple : **appliquez le destructuring partout où c'est possible dans votre code !**
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment