diff --git a/A-preparatifs-linux.md b/A-preparatifs-linux.md
new file mode 100644
index 0000000000000000000000000000000000000000..b894ae809a20abb1b1e6fff9b6c7a28451724626
--- /dev/null
+++ b/A-preparatifs-linux.md
@@ -0,0 +1,74 @@
+<img src="images/readme/header-small.jpg" >
+
+# Installations et configuration Linux<!-- omit in toc -->
+### (instructions spéciales Université de Lille)<!-- omit in toc -->
+- [1. Installation de VSCodium](#1-installation-de-vscodium)
+- [2. Installation et configuration de Node](#2-installation-et-configuration-de-node)
+- [3. configurer le proxy](#3-configurer-le-proxy)
+
+## 1. Installation de VSCodium
+**Pour installer VSCodium sur Linux en mode portable (sans les droits d'admin) :**
+- téléchargez la version **"linux x64"** disponible sur https://github.com/VSCodium/vscodium/releases/latest
+- décompressez-la dans le dossier de votre choix,
+- créez un sous-dossier nommé `"data"` et `"data/tmp"` dans le répertoire de vscodium
+ ```bash
+ cd chemin/vers/vscodium
+ mkdir -p data/tmp
+ ```
+- Ajoutez ensuite le sous-dossier `"bin"` de vscodium à votre PATH dans votre fichier `~/.bashrc` :
+ ```bash
+ export PATH=$PATH:chemin/vers/VSCodium/bin
+ ```
+ puis appliquer votre modif dans votre terminal
+ ```bash
+ source ~/.bashrc
+ ```
+- vous pouvez maintenant ouvrir VSCodium via un terminal, avec la commande `codium` :
+ ```bash
+ codium chemin/vers/un/dossier/
+ ```
+
+## 2. Installation et configuration de Node
+**Pour installer Node sans droit d'admin, vous pouvez utiliser [Node Version Manager (nvm)](https://github.com/nvm-sh/nvm).**
+
+- Commencez par ajouter le proxy à votre `~/.bashrc` si ce n'est pas déjà fait :
+ ```bash
+ export http_proxy=http://cache.univ-lille.fr:3128
+ export https_proxy=http://cache.univ-lille.fr:3128
+ ```
+ puis
+ ```bash
+ source ~/.bashrc
+ ```
+- Lancez ensuite l'install de `nvm` :
+ ```bash
+ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
+ ```
+ puis
+ ```bash
+ source ~/.bashrc
+ ```
+- Enfin, téléchargez et installez la version de Node que l'on souhaite (ici la 14) grâce à nvm :
+ ```bash
+ nvm install 14
+ ```
+ > _**NB :** si la commande `nvm` n'est pas reconnue, tentez de fermer et relancer votre terminal. Si ça ne suffit pas, ajoutez les lignes suivantes à votre `.bashrc` :_
+ > ```bash
+ > export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
+ > [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
+ > ```
+- vérifiez ensuite que la version de node est correcte :
+ ```bash
+ node -v
+ ```
+ doit retourner `v14.15.4`
+
+## 3. configurer le proxy
+Il ne reste ensuite plus qu'à indiquer à npm le proxy de l'université. A cause d'un bug pour le moment non résolu, il n'est pas possible d'utiliser le nom de domaine du proxy (cache.univ-lille.fr), il faut à la place utiliser son IP comme ceci :
+```bash
+npm config set proxy http://193.49.225.25:3128/
+```
+
+
+## Étape suivante <!-- omit in toc -->
+Une fois tout installé, vous pouvez revenir aux préparatifs : [A. Préparatifs](A-preparatifs.md#a2-récupération-des-fichiers)
\ No newline at end of file
diff --git a/A-preparatifs.md b/A-preparatifs.md
index 560a26d9c24388fb220a4c010cfce5d61d006cee..c422ef246c305b2fe74459b6b308dc6b97846ef0 100644
--- a/A-preparatifs.md
+++ b/A-preparatifs.md
@@ -3,70 +3,103 @@
# A. Préparatifs <!-- omit in toc -->
## Sommaire <!-- omit in toc -->
-- [A.1. Configuration du projet](#a1-configuration-du-projet)
-- [A.2. Lancement serveur HTTP](#a2-lancement-serveur-http)
-- [A.3. Installation IDE](#a3-installation-ide)
+- [A.1. Installations](#a1-installations)
+- [A.2. À propos de ce repo](#a2-à-propos-de-ce-repo)
+- [A.3. Récupération des fichiers](#a3-récupération-des-fichiers)
+- [A.3. VSCod[e/ium]](#a3-vscodeium)
+- [A.3. Ouvrir le projet dans VSCodium](#a3-ouvrir-le-projet-dans-vscodium)
-## A.1. Configuration du projet
-1. **Clonez ce repo dans un dossier de votre choix :**
+
+## A.1. Installations
+**Avant de démarrer le TP, installez, si vous ne les avez pas déjà, les logiciels suivants :**
+- Git : https://git-scm.com/
+- Node.js (_version LTS **14.x**_): https://nodejs.org/en/download/releases/
+- VSCodium : https://vscodium.com/ (Si vous avez déjà vscode, ça fera très bien l'affaire !)
+
+> _**NB :** Si vous êtes sur un poste **linux sans droits d'admin**, par exemple à l'**Université de Lille** ou si vous êtes derrière **un proxy** suivez [ce tuto pour installer Node et VSCodium](A-preparatifs-linux.md) puis revenez suivre la suite du TP ici_
+
+## A.2. À propos de ce repo
+
+**Ce repo contient un ensemble de fichiers qui vous seront utiles pour la réalisation des exercices de ce cours.**
+
+Il contient notamment des fichiers html, css et des assets graphiques (images et vidéos) qui vous permettront de vous concentrer sur le JS sans trop vous soucier de l'apparence de ce que vous codez tout en ayant **quand même** quelque chose de présentable visuellement 😎
+
+La première étape est donc de récupérer (_via git_) les fichiers du TP.<br>
+_**Allons y !**_
+
+
+## A.3. Récupération des fichiers
+
+**La solution la plus simple pour récupérer les fichiers du TP consiste à cloner ce repository à l'aide de git :**
+
+1. **Commencez par faire un fork du TP :**
+ - soit en cliquant sur le bouton `"Créer une divergence"` (_`"Fork"` sur la version anglaise de gitlab_)
+ - soit en vous rendant directement sur https://gitlab.univ-lille.fr/js/tp1/-/forks/new
+
+ Choisissez de placer le fork dans votre profil utilisateur et vérifiez que le repo est **bien en mode "privé"**
+
+2. **Ajoutez-moi en tant que "reporter" pour que j'ai accès à votre code :**
+ - dans le menu de gauche, cliquez sur `"Membres"`,
+ - entrez `@thomas.fritsch` comme nom d'utilisateur...
+ - ... et `"reporter"` comme rôle.
+
+3. **Ouvrez ensuite un terminal et récupérez les fichiers de ce TP grâce à Git en clonant votre fork dans un dossier de votre choix :**
```bash
- mkdir ~/ws-js
- git clone https://gitlab.univ-lille.fr/js/tp1.git ~/ws-js/tp1
+ mkdir ~/tps-js
+ git clone https://gitlab.univ-lille.fr/<votre-username>/tp1.git ~/tps-js/tp1
```
-## A.2. Lancement serveur HTTP
+ > _**NB1 :** si ce n'est pas déjà fait, il faut que vous renseigniez un mot de passe dans votre compte gitlab ([Paramètres > Mot de passe](https://gitlab.univ-lille.fr/profile/password/edit)) pour pouvoir cloner en http_
-2. **Lancez un serveur http dans le dossier du TP**.
+ > _**NB2 :** je clone ici dans mon dossier `/home/thomas/tps-js/tp1`. **Si vous êtes sous Windows faites attention au sens des slashs et au caractère `"~"`** qui représente le dossier de l'utilisateur sur système unix. Si vous êtes sous windows je vous recommande d'utiliser **Git bash** (qui comprend cette syntaxe) ou si vous tenez vraiment à utiliser **cmd** pensez à adapter !_
- Pour consulter notre appli web dans un navigateur, il nous faut un serveur http. On pourrait, pour cet exercice, utiliser n'importe quel serveur http (apache, tomcat, etc.) mais je vous propose d'utiliser Node.JS (déjà installé sur les machines des salles de TP) et 2 utilitaires qui fournis avec : [npm (Node Package Manager)](https://fr.wikipedia.org/wiki/Npm) et [npx](https://www.npmjs.com/package/npx).
+ > _**NB3 :** si vous préférez **cloner en SSH** pour ne pas avoir à taper votre mot de passe à chaque fois que vous clonerez un TP, renseignez votre clé SSH dans votre [compte utilisateur gitlab](https://gitlab.univ-lille.fr/profile/keys) et clonez à partir de cette URL : `git@gitlab-ssh.univ-lille.fr:js/tp1.git`_
- ***NB**: Si vous utilisez votre propre machine, installez la dernière version de Node : https://nodejs.org/en/download/current/*
- 1. **Pour commencer, configurez le proxy :**
- ```bash
- npm config set proxy http://cache.univ-lille1.fr:3128
- ```
- 2. **Lancez un serveur http avec npx** :
- ```bash
- cd ~/ws-js/tp1
- npx serve -l 8000
- ```
- Node télécharge alors le paquet "serve" puis le lance dans le dossier tp1. Node se met alors en attente de connexions http et affiche quelque chose comme ceci :
+## A.3. VSCod[e/ium]
- <img src="images/readme/npx-serve.gif" />
+_**Pour développer je vous recommande d'utiliser un éditeur adapté au JS moderne. Si vous ne l'avez pas encore testé, je ne peux que vous recommander d'utiliser Visual Studio Code / VSCodium au moins pour ce cours.**_
+<img src="images/readme/vscode-ium.jpg" />
-3. **Vérifiez dans votre navigateur que la page index.html** (fournie dans ce repo) **s'affiche correctement** en ouvrant l'url http://localhost:8000. Le résultat attendu est le suivant : <br><a href="images/readme/pizzaland-00.jpg"><img src="images/readme/pizzaland-00.jpg" width="80%"></a>
+[Visual Studio Code](https://code.visualstudio.com/) (vscode) est à l'heure actuelle l'un des éditeurs les plus **populaires** pour le développement web et en particulier dans l'écosystème React. C'est un éditeur opensource et développé avec [Electron](https://electronjs.org/), c'est donc un outil qui est **lui-même développé en JS !**
- *Si la page ne s'affiche pas correctement, vérifiez que vous avez bien lancé votre serveur Node avec npx dans le bon dossier (c'est à dire celui où se trouve le fichier `index.html`).*
+Malheureusement des questions de licence liées à Microsoft [plus ou moins obscures](https://vscodium.com/#why) viennent ternir un peu le tableau. Je vous conseille donc d'utiliser **la distribution "vraiment opensource" du logiciel qu'est [VSCodium](https://vscodium.com/)** (_aucune différence de fonctionnalité, hormis le [store d'extensions](https://github.com/VSCodium/vscodium/blob/master/DOCS.md#extensions-marketplace)_).
-## A.3. Installation IDE
+> _**NB :** Si vous avez déjà VSCode et que vous ne souhaitez pas faire la bascule vers VSCodium, pas de soucis, comme les deux sont strictement identiques en terme de fonctionnalités (hormis le store d'extension qui diffère), les TP fonctionneront de la même manière avec vscode !_
-4. **Installez un éditeur de code optimisé pour le développement web et particulièrement le JS moderne**. L'un des éditeurs les plus populaires actuellement est [Visual Studio Code](https://code.visualstudio.com/) (vscode). C'est un éditeur opensource et développé avec [Electron](https://electronjs.org/), c'est donc un outil qui est lui-même développé en JS !
- Malheureusement des questions de licence liées à Microsoft [plus ou moins obscures](https://vscodium.com/#why) viennent ternir un peu le tableau. Je vous conseille donc d'utiliser la distribution "vraiment opensource" du logiciel qu'est **[VSCodium](https://vscodium.com/)** :
+1. **Ouvrez le panneau des extensions de VSCod[e/ium]** à l'aide du raccourci <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>X</kbd>
- **Pour l'installer sur Linux en mode portable (sans les droits d'admin) :**
- - téléchargez la version **"linux x64"** disponible sur https://github.com/VSCodium/vscodium/releases/latest
- - décompressez-la dans le dossier de votre choix,
- - créez un sous-dossier nommé `"data"` et `"data/tmp"` dans le répertoire de vscodium puis ajoutez le dossier `"bin"` à votre path :
- ```bash
- cd chemin/vers/vscodium
- mkdir -p data/tmp
- export PATH=$PATH:$(pwd)/bin
- ```
- - vous pouvez maintenant ouvrir VSCodium dans le dossier de votre projet :
+1. **Installez l'extension `Prettier - Code formatter`** (_esbenp.prettier-vscode_)
+
+ Prettier permet de formater automatiquement notre code en respectant de base un certain nombre de bonnes pratiques. Les possibilités de configuration sont volontairement limitées mais suffisantes pour avoir quand même l'impression d'avoir encore un peu la main sur son formatage 😄
+
+ On configurera cette extension dans le prochain TP.
+
+## A.3. Ouvrir le projet dans VSCodium
+
+_**Pour travailler efficacement avec vscodium, je vous recommande d'ouvrir tout le dossier de votre projet plutôt que d'ouvrir les fichiers un à un. Cela vous permettra notamment de passer plus rapidement de l'un à l'autre.**_
+
+1. **Commencez donc par ouvrir le dossier du TP dans VSCodium :**
+ - soit en lançant VSCodium **depuis un terminal** directement dans le dossier (*adaptez le chemin vers le projet*):
```bash
- cd ~/ws-js/tp1
- codium .
+ codium ~/tps-js/tp1
```
+ > _**NB :** Si vous utilisez VSCode, la commande `codium` doit être remplacée par `code`_
+ - soit en ouvrant VSCodium, et **en glissant le dossier** du TP (_celui dans lequel vous avez cloné_) depuis l'explorateur de fichier/finder directement sur la fenêtre de VSCodium
+ - soit en **ouvrant le dossier du projet** avec le raccourci <kbd>CTRL</kbd>+<kbd>O</kbd> ou via le menu `File` > `Open` de VSCodium
+
+2. **Une fois le projet ouvert, profitez-en pour tester quelques raccourcis clavier :**
+ - <kbd>CTRL</kbd>+<kbd>P</kbd> : Permet d'ouvrir un fichier à partir de son nom
+ - <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>P</kbd> : Permet de lancer n'importe quelle commande de n'importe quel menu
+ - <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>:</kbd> : commente/décommente une ligne de code
- **Les 3 raccourcis clavier à connaître :**
- - <kbd>CTRL</kbd>+<kbd>P</kbd> : ouvrir un fichier à partir de son nom
- - <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>P</kbd> : lancer n'importe quelle commande des menus.
- - <kbd>CTRL</kbd>+<kbd>/</kbd> : commenter/décommenter
+ - cheat sheet windows : https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
+ - cheat sheet mac : https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
- cheat sheet linux : https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf
+
## Étape suivante <!-- omit in toc -->
Si tout fonctionne, vous pouvez passer à l'étape suivante : [B. Intégration du JS](B-integration.md)
\ No newline at end of file
diff --git a/B-integration.md b/B-integration.md
index 879645e94f97dbda1eae9807672636b66a7ec52e..ff17217f8f2cec51a6c9f89671c1e032266a92bc 100644
--- a/B-integration.md
+++ b/B-integration.md
@@ -2,41 +2,88 @@
# B. Intégration du JS <!-- omit in toc -->
+***Maintenant que l'on a récupéré les fichiers du TP et que notre éditeur de code est prêt, lançons le projet pour voir à quoi ça ressemble !***
+## Sommaire <!-- omit in toc -->
-1. **Incluez le fichier `main.js` dans le fichier `index.html`** à l'aide d'une balise `<script>`. (*Pour rappel, pour ouvrir le fichier dans vscodium, utilisez le raccourci* <kbd>CTRL</kbd>+<kbd>P</kbd>)<br>
-
- Comme vu pendant le cours il existe plusieurs manières d'intégrer du code JavaScript dans une page HTML :
- - *en "inline"* c'est à dire directement dans les attributs d'une balise. Dans l'exemple ci-dessous, le code JS s'exécutera lorsque l'utilisateur cliquera sur le lien :
- ```html
- <a href="#" onclick="alert('Welcome to Westeros');return false;">
- GOT
- </a>
- ```
- - dans une balise `<script>`. Le code s'exécute alors au chargement de la page, au moment où le navigateur arrive à cette ligne (le navigateur parse le document html de haut en bas):
- ```html
- <script>alert('Bienvenue à Westeros');</script>
- ```
- - dans une balise `<script>` avec un attribut `src`. Dans ce cas le code JS peut alors être externalisé dans un fichier distinct. Le code s'exécute lorsque le fichier est chargé :
- ```html
- <script src="westeros.js"></script>
- ```
- C'est cette dernière technique que nous emploierons car elle permet de bien séparer les responsabilités de notre appli (HTML et JS séparés).
-
- **Attention :** Pour éviter que le chargement du fichier JS ne bloque le chargement de la page HTML (comportement par défaut), il existe 2 solutions :
- - placer la balise `<script>` en toute fin de fichier html, juste **avant** la balise fermante `</body>`
- - placer la balise `<script>` dans le `<head>` du fichier, mais y ajouter un attribut **`defer`** (cf. [doc](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer))
- C'est cette dernière solution que je préconise car elle présente l'avantage de ne pas mélanger le contenu du document (le `<body>`) avec des informations annexes comme le chargement de scripts JS (qui relèvent plutôt du `<head>`) par ailleurs le support navigateur est très bon (IE10, Android 3+, iOS 5+, etc.) cf. https://caniuse.com/#feat=script-defer
-
-2. **Testez la page pour vérifier que le js est correctement chargé** : Ouvrez les outils de développement de votre navigateur (touche <kbd>F12</kbd> sur Chrome) et ouvrez le panneau "Console".
-
- Si le fichier `main.js` est correctement chargé, le texte `'welcome to PizzaLand 🍕 !'` doit s'afficher dans la console. En effet, le fichier main.js contient l'instruction
- ```js
- console.log('Welcome to PizzaLand 🍕 !');
+- [B.1. Lancement d'un serveur HTTP](#b1-lancement-dun-serveur-http)
+- [B.2. Inclure le JS dans la page](#b2-inclure-le-js-dans-la-page)
+- [B.3. Tester la page](#b3-tester-la-page)
+
+## B.1. Lancement d'un serveur HTTP
+
+
+**Pour consulter notre appli web dans un navigateur, il nous faut un serveur http.** <br>
+On pourrait, pour cet exercice, utiliser n'importe quel serveur http (apache, tomcat, etc.) mais je vous propose d'utiliser Node.js (_installé au point A.1._) et **[npx](https://www.npmjs.com/package/npx)** qui est un des 2 principaux utilitaires fournis automatiquement avec Node (_l'autre étant [npm : Node Package Manager](https://fr.wikipedia.org/wiki/Npm) dont nous parlerons plus tard_).
+
+1. **Tout d'abord, ouvrez un terminal directement dans VSCodium** en tapant <kbd>CTRL</kbd>+<kbd>J</kbd> (PC) / <kbd>CMD</kbd>+<kbd>J</kbd> (Mac) (_ou <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>P</kbd> puis `View: toggle panel`_).
+
+ > _**NB :** Utiliser le terminal intégré à VSCodium a plusieurs avantages :_
+ > - _pas besoin de jongler entre plusieurs fenêtres pour passer de l'IDE au terminal_
+ > - _le terminal s'ouvre **directement dans le dossier du projet**_
+
+2. **Dans ce terminal intégré, lancez un serveur http dans le dossier du TP** :
+ ```bash
+ npx serve -l 8000
```
- Cette instruction `console.log()` permet d'afficher du texte ou des variables dans la console.
+ Node télécharge alors le paquet "serve" puis le lance dans le dossier `tp1`. Node se met ensuite en attente de connexions http et affiche quelque chose comme ceci :
+
+ <img src="images/readme/npx-serve.gif" />
+
+3. **Vérifiez dans votre navigateur que la page index.html** (fournie dans ce repo) **s'affiche correctement** en ouvrant l'url http://localhost:8000. Le résultat attendu est le suivant :
+
+ <img src="images/readme/pizzaland-00.jpg" >
+
+ > _**NB :** Si la page ne s'affiche pas correctement, vérifiez que vous avez bien lancé votre serveur Node avec npx dans **le bon dossier** (c'est à dire celui où se trouve le fichier `index.html`)._
+
+## B.2. Inclure le JS dans la page
+
+**Ce repo est fourni avec un fichier `src/main.js` qu'il va falloir intégrer dans la page html.**
+
+Ouvrez le d'abord dans VSCodium pour voir à quoi il ressemble à l'aide du raccourci <kbd>CTRL</kbd>+<kbd>P</kbd> : tapez simplement son nom dans le panneau qui s'est ouvert puis utilisez les flèches directionnelles et la touche `Entrée` pour valider.
+
+**Incluez ensuite le fichier `src/main.js` dans le fichier `index.html`** à l'aide d'une balise `<script>`.
+
+Pour rappel, il existe plusieurs manières d'intégrer du code JavaScript dans une page HTML :
+- **en "inline"** c'est à dire directement dans les attributs d'une balise. Dans l'exemple ci-dessous, le code JS s'exécutera lorsque l'utilisateur cliquera sur le lien :
+ ```html
+ <a href="#" onclick="alert('Welcome to Albuquerque');return false;">
+ BB
+ </a>
+ ```
+- **dans une balise `<script>`.** Le code s'exécute alors au chargement de la page, au moment où le navigateur arrive à cette ligne (le navigateur parse le document html de haut en bas):
+ ```html
+ <script>alert('Welcome to Albuquerque');</script>
+ ```
+- **dans une balise `<script>` avec un attribut `src`**. Dans ce cas le code JS peut alors être externalisé dans un fichier distinct. Le code s'exécute lorsque le fichier est chargé :
+ ```html
+ <script src="welcome.js"></script>
+ ```
+**C'est cette dernière technique que nous emploierons car elle permet de bien séparer les responsabilités de notre appli** (*HTML et JS séparés*).
+
+**Attention :** Pour éviter que le chargement du fichier JS ne bloque le chargement de la page HTML (comportement par défaut), il existe 2 solutions :
+- placer la balise `<script>` en toute fin de fichier html, juste **avant** la balise fermante `</body>`
+- placer la balise `<script>` dans le `<head>` du fichier, mais y ajouter un attribut **`defer`** (cf. [doc](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer))
+
+C'est cette solution que je préconise car elle présente l'avantage de ne pas mélanger le contenu du document (le `<body>`) avec des informations annexes comme le chargement de scripts JS (qui relèvent plutôt du `<head>`) par ailleurs le support navigateur est très bon (IE10, Android 3+, iOS 5+, etc.)
+
+<a href="https://caniuse.com/#feat=script-defer"><img src="https://caniuse.bitsofco.de/image/script-defer.webp" /></a>
+
+
+## B.3. Tester la page
+**Testez la page pour vérifier que le js est correctement chargé** : Ouvrez les outils de développement de votre navigateur (touche <kbd>F12</kbd> sur Chrome) et ouvrez le panneau "Console".
+
+Si le fichier `main.js` est correctement chargé, le texte `'welcome to Pizzaland !'` doit s'afficher dans la console. <br>
+En effet, le fichier `main.js` contient l'instruction :
+```js
+console.log('Welcome to Pizzaland !');
+```
+
+Cette instruction `console.log()` permet d'afficher du texte ou des variables dans la console.
-**NB :** _Si le texte ne s'affiche pas, c'est probablement que le fichier `main.js` n'est pas correctement intégré dans la page html. <br>Ouvrir le panneau "Network"/"Réseau" des devtools puis recharger la page en désactivant le cache navigateur : touche <kbd>CTRL</kbd>+<kbd>F5</kbd>, ou <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>R</kbd> selon les navigateurs. S'assurer que cette fois le fichier `main.js` figure bien dans la liste des fichiers téléchargés. Si ce n'est toujours pas le cas, c'est que votre balise `<script>` n'est pas correcte (vérifiez le chemin vers le fichier)._
+> _**NB :** Si le texte ne s'affiche pas, c'est probablement que le fichier `main.js` n'est pas correctement intégré dans la page html :_
+>
+> _Ouvrez le panneau "Network"/"Réseau" des devtools puis rechargez la page en désactivant le cache navigateur : touche <kbd>CTRL</kbd>+<kbd>F5</kbd>, ou <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>R</kbd> selon les navigateurs. Assurez-vous que cette fois le fichier `main.js` figure bien dans la liste des fichiers téléchargés. Si ce n'est toujours pas le cas, c'est que votre balise `<script>` n'est pas correcte (vérifiez le chemin vers le fichier)._
**_Pour la suite du TP, tout le code se fera dans ce fichier `main.js`, le fichier html ne devra pas être modifié !_**
diff --git a/C-devtools.md b/C-devtools.md
index 8924dba05114bea14ab43743ccda972f3a8e8700..66df4d2803de248f5c3d99bb0353e380aafaa462 100644
--- a/C-devtools.md
+++ b/C-devtools.md
@@ -2,47 +2,48 @@
# C. les devtools <!-- omit in toc -->
-## Sommaire <!-- omit in toc -->
-- [B.1. devtools : La console](#b1-devtools-la-console)
-- [B.2. devtools : l'inspecteur d'éléments](#b2-devtools-linspecteur-déléments)
-- [B.3. devtools : l'onglet Sources](#b3-devtools-longlet-sources)
+_**Lorsque l'on développe en JS, les outils de debug dont on dispose nous sont fournis par le navigateur. Tous les navigateurs (même Internet Explorer...) disposent d'outils de développement. Sur Chrome, pour les afficher c'est donc, comme vu plus haut, la touche <kbd>F12</kbd>. On peut également les afficher en faisant un clic droit dans la page et en cliquant sur "Inspecter l'élément".**_
+### IMPORTANT !! <!-- omit in toc -->
+**Pendant les TP gardez TOUJOURS les outils de développement (_et notamment la console_) ouverts, ça vous sauvera la vie !**
-***Lorsque l'on développe en JS, les outils de debug dont on dispose nous sont fournis par le navigateur. Tous les navigateurs (même Internet Explorer...) disposent d'outils de développement. Sur Chrome, pour les afficher c'est donc, comme vu plus haut, la touche <kbd>F12</kbd>. On peut également les afficher en faisant un clic droit dans la page et en cliquant sur "Inspecter l'élément".***
-**Pendant les TP gardez <u>toujours</u> les outils de développement (et notamment la console) ouverts, ça vous sauvera la vie.**
+## Sommaire <!-- omit in toc -->
+- [C.1. devtools : La console](#c1-devtools-la-console)
+- [C.2. devtools : l'inspecteur d'éléments](#c2-devtools-linspecteur-déléments)
+- [C.3. devtools : l'onglet Sources](#c3-devtools-longlet-sources)
-## B.1. devtools : La console
+## C.1. devtools : La console
La console sert à afficher les instructions `console.log()` mais aussi les erreurs éventuelles dans votre code (vous me direz que ce n'est pas la peine, que vous ne faites jamais d'erreur, mais on sait tous les deux que c'est un mensonge, *"n'est-ce pas ?"*).
-<img src="images/readme/devtools-console.jpg" width="80%">
+<img src="images/readme/devtools-console.jpg" >
-La méthode `console.log()` peut recevoir plusieurs paramètres, ils seront dans ce cas affichés les un après les autres, séparés par un espace. Remplacer le `console.log(...);` du `main.js` par :
+La méthode `console.log()` peut recevoir plusieurs paramètres, ils seront dans ce cas affichés les un après les autres, séparés par un espace. Remplacez le `console.log(...);` du `main.js` par :
```js
console.log('Welcome to ', {title:'PizzaLand', emoji: '🍕'});
```
-L'objet `console` est un objet global qui contient la méthode `.log()` mais aussi d'autres méthodes qui permettent d'avoir un rendu différent et de filtrer les messages. Essayez les méthodes suivantes et constatez le résultat dans la console :
+En fait l'objet `console` est un objet global qui contient la méthode `.log()` mais aussi d'autres méthodes qui permettent d'avoir un rendu différent et de filtrer les messages. Essayez les méthodes suivantes et constatez le résultat dans la console :
- console.warn()
- console.error()
- console.clear()
-Enfin, la console permet de tester rapidement du code JS grâce à un champ de saisie. Tapez-y l'instruction `42+"12"-10` puis tapez <kbd>Entrée</kbd>. Incroyable !
+Enfin, la console permet de tester rapidement du code JS grâce à un champ de saisie. Tapez-y l'instruction `42+"12"-10` puis tapez <kbd>Entrée</kbd>. Le résultat s'affiche directement dans la console. Incroyable !
-## B.2. devtools : l'inspecteur d'éléments
+## C.2. devtools : l'inspecteur d'éléments
L'inspecteur d'éléments permet de consulter ET de manipuler le code HTML et CSS de la page.
-<img src="images/readme/devtools-inspecteur.jpg" width="80%">
+<img src="images/readme/devtools-inspecteur.jpg" >
Il sera utile pour vérifier que le code HTML que va générer votre JS correspond bien à ce qui est attendu.
-## B.3. devtools : l'onglet Sources
+## C.3. devtools : l'onglet Sources
L'onglet sources permet d'inspecter le code JavaScript de la page, de placer des breakpoints et de stopper l'exécution du code quand une erreur survient. Quand l'exécution du JS est stoppée, on peut consulter les valeurs des variables locales et globales, de voir la call-stack, etc.
C'est probablement l'onglet des devtools le plus important lorsqu'on développe en JavaScript.
-<img src="images/readme/devtools-sources.jpg" width="80%">
+<img src="images/readme/devtools-sources.jpg" >
Pour l'utiliser, remplacez le contenu de votre fichier `main.js` en ajoutant le code suivant :
```js
diff --git a/D-chaines.md b/D-chaines.md
index 2935ce75e1b8ccc3a7a5ab96a1af6c8d8edc647b..1c3bf45de34fc00ba0d56b8b4cf075f2d08c16c9 100644
--- a/D-chaines.md
+++ b/D-chaines.md
@@ -7,7 +7,6 @@
- [D.2. Rappels sur les chaînes en JS](#d2-rappels-sur-les-chaînes-en-js)
- [D.3. Manipulations simples](#d3-manipulations-simples)
- [D.4. Injection dans la page HTML](#d4-injection-dans-la-page-html)
-
## D.1. Note à propos d'EcmaScript
### Pour tous les TP vous coderez en ES6+ ! <!-- omit in toc -->
@@ -17,17 +16,16 @@
Consultez le support navigateur des différentes fonctionnalités EcmaScript ici :
- pour ES6 : http://kangax.github.io/compat-table/es6/
-- pour ES7, ES8, ES9 (ES2016+) : http://kangax.github.io/compat-table/es2016plus/
+- pour ES7, ES8, ES9, etc. (ES2016+) : http://kangax.github.io/compat-table/es2016plus/
- pour les features en cours de spécification (comme les propriétés de classes, ou le mot clé `static`) : http://kangax.github.io/compat-table/esnext/
Ceci étant dit, tout ce qui a été vu en cours jusqu'ici est compatible avec les dernières versions de Chrome/Chromium !
-**NB :** *Dans la vraie vie se reposer sur la version du navigateur de l'utilisateur est trop "risqué", on utilisera donc par la suite le compilateur [Babel](https://babeljs.io) pour rendre notre code compatible avec tous les navigateurs. Pour l'instant on va mettre de côté cette problématique pour ce concentrer sur le code, nous y reviendrons dans la suite du TP.*
-
+> _**NB :** Dans la vraie vie se reposer sur la version du navigateur de l'utilisateur est trop "risqué", on utilisera donc par la suite le compilateur [Babel](https://babeljs.io) pour rendre notre code compatible avec tous les navigateurs. Pour l'instant on va mettre de côté cette problématique pour ce concentrer sur le code, nous y reviendrons dans la suite du TP._
## D.2. Rappels sur les chaînes en JS
-***Pour rappel il existe 3 manières de déclarer des chaînes de caractères en JS :***
+_**Pour rappel il existe 3 manières de déclarer des chaînes de caractères en JS :**_
```js
/* guillemets simples */
let s1 = 'je suis une chaîne avec des single quotes';
@@ -38,9 +36,9 @@ let s2 = "je suis une chaîne avec des double quotes";
/* ou accent grave (template strings ES6) */
let s3 = `Les étudiants de ${ getCurrentSchool() } sont les meilleurs`;
```
-*Les templates strings sont à privilégier si vous devez injecter des valeurs dynamiques dans la chaîne ou si vous souhaitez la déclarer sur plusieurs ligne.*
+Les templates strings sont à privilégier si vous devez injecter des valeurs dynamiques dans la chaîne ou si vous souhaitez la déclarer sur plusieurs ligne.
-*Si ce n'est pas le cas, le choix entre guillemets simples ou double est une question de préférences (les goûts et les couleurs...), la seule contrainte est qu'une fois qu'on a fait un choix, il faut s'y tenir (conventions de code). Entre guillemets doubles ou simples, ma préférence va aux guillemets simples qui évitent de devoir échapper les double quotes (souvent utilisées lorsqu'on génère du code HTML).*
+Si ce n'est pas le cas, le choix entre guillemets simples ou double est une question de préférences (_les goûts et les couleurs..._), la seule contrainte est qu'une fois qu'on a fait un choix, il faut s'y tenir (conventions de code). Entre guillemets doubles ou simples, ma préférence va aux guillemets simples qui évitent de devoir échapper les double quotes (_souvent utilisées lorsqu'on génère du code HTML_).
## D.3. Manipulations simples
@@ -49,16 +47,22 @@ let s3 = `Les étudiants de ${ getCurrentSchool() } sont les meilleurs`;
1. **Effacez le code contenu dans le fichier `main.js`** pour repartir d'un fichier vide.
2. **Créez une constante appelée `nom`** et assignez lui la chaîne de caractères `Regina`
3. **Créez une constante nommée `url`.** Sa valeur initiale sera la concaténation de :
- - la chaîne de caractères `'images/'`,
- - la valeur de la variable `nom` transformée en minuscules à l'aide de la méthode `.toLowerCase()` cf. [doc](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase)
- - et de la chaîne de caractères `'.jpg'`
+ - la chaîne de caractères `'images/'`,
+ - la valeur de la variable `nom` transformée en minuscules à l'aide de la méthode `.toLowerCase()` cf. [doc](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase)
+ - et de la chaîne de caractères `'.jpg'`
+
+ Affichez la valeur de `url` dans la console, vous devez obtenir :
+ ```js
+ 'images/regina.jpg'
+ ```
+
4. **Sur la ligne suivante, créez une variable nommée `html`** :
Votre code devra permettre d'assigner à la variable `html` une chaîne qui corresponde au code d'une balise `<a>` (*lien hypertexte*) :
- L'URL du lien (*attribut `href`*) devra correspondre à la valeur la constante `url`.
- Le contenu de la balise `<a>` correspondra lui aussi à la valeur de la constante `url`
- ***NB:** pour ça, les template strings sont parfaitement adaptées !*
+ > _**NB:** pour ça, les template strings sont parfaitement adaptées !_
Affichez dans la console la valeur de la variable html, elle doit correspondre à la chaîne de caractères suivante :
```html
@@ -69,17 +73,17 @@ let s3 = `Les étudiants de ${ getCurrentSchool() } sont les meilleurs`;
5. **C'est le moment d'afficher le contenu de la variable `html` dans la page.**
- 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;
- ```
- 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"`.
+ 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;
+ ```
+ Cette instruction va injecter le code HTML contenu dans la variable `html` à l'intérieur de la balise de classe CSS `"pizzasContainer"`.
- Si tout s'est bien passé, vous devriez désormais :
- - voir le texte 'images/regina.jpg' dans la page de votre navigateur.
- - pouvoir cliquer sur ce texte et être redirigé vers une image de pizza !
+ Si tout s'est bien passé, vous devriez désormais :
+ - voir le texte 'images/regina.jpg' dans la page de votre navigateur.
+ - pouvoir cliquer sur ce texte et être redirigé vers une image de pizza !
- <a href="images/readme/pizzaland-01.jpg"><img src="images/readme/pizzaland-01.jpg" width="80%"></a>
+ <img src="images/readme/pizzaland-01.jpg" />
6. **Modifiez encore la variable html avant son affichage** en remplaçant le texte contenu dans la balise `<a>` par
- **une balise `<img>`** dont la source (_attribut `src`_) sera la chaîne `images/regina.jpg` valeur initiale de la variable `html`.
@@ -94,7 +98,7 @@ let s3 = `Les étudiants de ${ getCurrentSchool() } sont les meilleurs`;
```
Le rendu doit être celui-ci :<br>
- <a href="images/readme/pizzaland-02.jpg"><img src="images/readme/pizzaland-02.jpg" width="80%"></a>
+ <img src="images/readme/pizzaland-02.jpg" />
## Étape suivante <!-- omit in toc -->
diff --git a/E-tableaux-objets.md b/E-tableaux-objets.md
index 4733012e5dbad8a4a54576aa44ae74728eb34b03..ae5f970a673d0ed17c5ee3dbd80460d9a45c7119 100644
--- a/E-tableaux-objets.md
+++ b/E-tableaux-objets.md
@@ -8,53 +8,68 @@
## E.1. Manipulation des tableaux
-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.
+Dans une constante nommée `data`, initialisez un tableau avec 3 cellules contenant les chaines de caractères suivantes : `'Regina'`, `'Napolitaine'` et `'Spicy'`.
+```js
+const data = ['Regina', 'Napolitaine', 'Spicy'];
+```
+
+
+Parcourez ce tableau afin de générer 3 liens sur le modèle de celui réalisé à l'étape [D. les chaînes de caractères](./D-chaines.md) :
+
+```html
+<a href="images/regina.jpg">
+ <img src="images/regina.jpg"/>
+ <h4>Regina</h4>
+</a>
+<a href="images/napolitaine.jpg">
+ <img src="images/napolitaine.jpg"/>
+ <h4>Napolitaine</h4>
+</a>
+<a href="images/spicy.jpg">
+ <img src="images/spicy.jpg"/>
+ <h4>Spicy</h4>
+</a>
+```
-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
+Utilisez pour cela **au moins 2 techniques parmi les 4 suivantes** :
+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
-*NB: pour `forEach`, `map` et surtout `reduce` pensez à utiliser les arrow functions !*
+> _**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>
+
+<img src="images/readme/pizzaland-03.jpg" />
## E.2. Les Objets littéraux
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: 6.5,
- prix_grande: 9.95,
- 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'
-}
-```
-
-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',
-}
+const data = [
+ {
+ nom: 'Regina',
+ base: 'tomate',
+ prix_petite: 6.5,
+ prix_grande: 9.95,
+ image: 'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
+ },
+ {
+ 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'
+ },
+ {
+ 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',
+ }
+];
```
Modifiez la boucle pour générer un code de ce type :
@@ -75,7 +90,7 @@ Modifiez la boucle pour générer un code de ce type :
Le rendu final devra correspondre à ceci :
-<a href="images/readme/pizzaland-04.jpg"><img src="images/readme/pizzaland-04.jpg" width="90%"></a>
+<img src="images/readme/pizzaland-04.jpg" />
***Attention au formatage des prix** (examinez bien la capture d'écran) !*
diff --git a/F-babel.md b/F-babel.md
index 6be2bfb0dff07d0af0f3f9279b9aff9d932eb025..07244502d497d1ae44814f63239df702f5ebec97 100644
--- a/F-babel.md
+++ b/F-babel.md
@@ -2,20 +2,25 @@
# F. Compiler avec Babel <!-- omit in toc -->
+_**Jusque là on ne s'est pas préoccupé de la compatibilité navigateur du code que l'on a tapé.**_
+
+En revanche dans la vraie vie, si l'on veut que tous les internautes puissent utiliser notre application sans encombre, **il faut compiler notre code ES6+ en ES5**. Cette compilation se fait avec [Babel](https://babeljs.io).
+
## Sommaire <!-- omit in toc -->
- [F.1. Installation](#f1-installation)
- [F.2. Compilation](#f2-compilation)
-Jusque là on ne s'est pas préoccupé de la compatibilité navigateur du code que l'on a tapé.
-
-En revanche dans la vraie vie, si l'on veut que tous les internautes puissent utiliser notre application sans encombre, il faut compiler notre code ES6+ en ES5. Cette compilation se fait avec [Babel](https://babeljs.io).
## F.1. Installation
L'installation de Babel se fait avec npm (Node Package Manager - l'outil fourni avec Node et qui permet de télécharger des utilitaires JS).
-1. **Tout d'abord, ouvrez un terminal directement dans VSCodium** en tapant <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>P</kbd> puis `View: toggle panel`. Utiliser le terminal intégré à VSCodium a plusieurs avantages :
- - pas besoin de jongler entre plusieurs fenêtres pour passer de l'IDE au terminal
- - le terminal s'ouvre directement dans le dossier du projet
+1. **Tout d'abord, ouvrez un nouveau terminal intégré dans VSCodium** (_vous en avez normalement déjà un qui exécute le serveur http `npx serve -l 8000`_).
+
+ Je vous recommande d'utiliser ici [un terminal splitté](https://code.visualstudio.com/docs/editor/integrated-terminal#_terminal-splitting) pour afficher deux terminaux côte à côté. : Tapez <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>P</kbd> puis **`Terminal: split terminal`** ou cliquez sur l'icône suivante :
+
+ <img src="images/readme/split-terminal.png" />
+
+ L'avantage du terminal splitté, c'est que vous pouvez garder un oeil sur les deux terminaux en parallèle. Pratique !
2. **Initialisez votre projet npm :** Dans le terminal de VSCodium tapez la commande :
```bash
@@ -27,36 +32,38 @@ L'installation de Babel se fait avec npm (Node Package Manager - l'outil fourni
```bash
npm install --save-dev @babel/core @babel/cli
```
- Ouvrez le fichier `package.json`dans VSCodium. Vous noterez que les paquets `@babel/core` et `@babel/cli` ont été rajoutés dans les dépendances du projet !
+ Ouvrez le fichier `package.json` dans VSCodium (<kbd>CTRL</kbd>+<kbd>P</kbd>). Vous noterez que les paquets `@babel/core` et `@babel/cli` ont été rajoutés dans les dépendances du projet !
Vous pourrez aussi remarquer qu'un dossier `node_modules` a également été créé. C'est lui qui contient le code de toutes les dépendances du projet (toutes les librairies js qu'on a installé avec npm).
-4. **Installez le preset `env`.** Un preset est une sorte de dictionnaire qui indique à babel la syntaxe à compiler (sans preset, Babel n'applique aucune modification au code source). Le preset `env` permet de transpiler **toutes les features ES6+ en ES5** (c'est une sorte de dictionnaire de traduction ES6+ -> ES5) :
+4. **Installez le preset `env` :**
+
+ Un **preset** est une sorte de dictionnaire qui indique à babel la syntaxe à compiler (_sans preset, Babel n'applique aucune modification au code source_). Le preset `env` permet de transpiler **toutes les features officielle ES6+ en ES5** (c'est une sorte de dictionnaire de traduction ES6+ -> ES5) :
```bash
npm install --save-dev @babel/preset-env
```
-5. **Enfin, créez un fichier `.babelrc` à la racine de votre projet** (au même niveau que le `index.html` et le `package.json`) pour dire à Babel d'utiliser le preset `env` :
+
+5. **Enfin, créez un fichier `.babelrc` à la racine de votre projet** (_au même niveau que le `index.html` et le `package.json`_) pour dire à Babel d'utiliser le preset `env` que l'on vient d'installer :
```json
{
"presets": ["@babel/env"]
}
```
+ > _**NB :** le nom du fichier à créer est bien **`.babelrc`**. Si vous êtes sous windows vous ne pourrez pas créer ce fichier avec l'explorateur de fichiers (windows vous oblige à choisir un nom de fichier de la forme `nom-du-fichier.extension`) utilisez donc VSCodium pour ça : <kbd>CTRL</kbd>+<kbd>N</kbd> puis <kbd>CTRL</kbd>+<kbd>S</kbd>_
## F.2. Compilation
-6. **Vous pouvez maintenant compiler votre code ES6+ en ES5 à l'aide de la commande** :
+1. **Vous pouvez maintenant compiler votre code ES6+ en ES5 à l'aide de la commande** :
```bash
- ./node_modules/.bin/babel js -d build
+ ./node_modules/.bin/babel src -d build
```
- Cette commande va créer un dossier `build` dans lequel sera placé le fichier `main.js` compilé !
- Vérifiez que le fichier `build/main.js` est bien compilé et qu'il ne reste plus de traces de code ES6 (const, let, ...). Si ce n'est pas le cas (s'il reste des `const`, des template strings ou des arrow functions), c'est que le .babelrc est mal configuré ou que vous avez raté une étape !
+ <img src="images/readme/babel-build.gif" />
+
+ Cette commande va créer un dossier `build` dans lequel sera placé le fichier `main.js` compilé !
-7. **Une fois le fichier `build/main.js` créé, modifiez le fichier index.html pour charger ce fichier à la place du `js/main.js`.** Rechargez la page pour vérifier que tout fonctionne toujours correctement !
+ Vérifiez que le fichier `build/main.js` est bien compilé et qu'il ne reste plus de traces de code ES6 (const, let, ...). Si ce n'est pas le cas (s'il reste des `const`, des template strings ou des arrow functions), c'est que le `.babelrc` est mal configuré ou que vous avez raté une étape !
-8. **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 js -d build --verbose --watch --source-maps
- ```
+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 !
## Étape suivante <!-- omit in toc -->
diff --git a/G-filtres-tri.md b/G-filtres-tri.md
index cbd07f6a4bf41fba8bf07a667a03382eb8138122..78a54c50c5b04d2921852937434e95db06e3f56c 100644
--- a/G-filtres-tri.md
+++ b/G-filtres-tri.md
@@ -6,75 +6,73 @@
- [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.3.1. Principe du destructuring](#g31-principe-du-destructuring)
+ - [G.3.2. Destructuring et fonctions](#g32-destructuring-et-fonctions)
+ - [G.3.3. Mise en application](#g33-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 :
+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>
+ <img src="images/readme/pizzaland-05.jpg" />
1. Par prix petit format croissant
- <a href="images/readme/pizzaland-06.jpg"><img src="images/readme/pizzaland-06.jpg" width="80%"></a>
+ <img src="images/readme/pizzaland-06.jpg" />
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>
+ <img src="images/readme/pizzaland-07.jpg" />
## 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 :
+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>
+ <img src="images/readme/pizzaland-08.jpg" />
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>
+ <img src="images/readme/pizzaland-09.jpg" />
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>
-
-
+ <img src="images/readme/pizzaland-10.jpg" />
## G.3. Destructuring
-### Principe du destructuring
+### G.3.1. 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 :
+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 hodor = {
- firstname: 'hodor',
- lastname: 'hodor'
-};
+const character = { prenom: 'Skyler', nom: 'White' };
```
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;
+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.
-Le destructuring va permettre de faire la même chose mais en plus rapide :
+Et bien avec le destructuring on va pouvoir faire exactement la même chose mais en plus rapide :
```js
-const { firstname, lastname } = hodor;
+const { firstname, lastname } = character;
```
-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)).
+Notez les deux accolades autour du nom des constantes : c'est la syntaxe pour faire du desctructuring d'objets.
+
+Notez que pour que ça marche, il faut que les constantes qu'on crée aient le même nom que les propriétés de l'objet qu'on destructure (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.
+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 character.
**Notez bien que cela fonctionne pour les `const` mais bien entendu aussi pour les `let` !**
-### Destructuring et fonctions
+### G.3.2. 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
@@ -92,5 +90,5 @@ function kill({firstname, lastname}) {
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
+### 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
diff --git a/js/main.js b/src/main.js
similarity index 100%
rename from js/main.js
rename to src/main.js