renumérotation readme

A-les-bases.md → B-les-bases.md

 #### TP3 - API DOM <!-- omit in toc -->
-# A. Les bases de l'API DOM <!-- omit in toc -->
+# B. Les bases de l'API DOM <!-- omit in toc -->
 
 ## Sommaire <!-- omit in toc -->
-- [A.1. Configuration du projet](#a1-configuration-du-projet)
-- [A.2. Sélectionner des éléments](#a2-sélectionner-des-éléments)
-	- [A.2.1. querySelector()](#a21-queryselector)
-	- [A.2.2. querySelectorAll()](#a22-queryselectorall)
-- [A.3. Modifier des éléments](#a3-modifier-des-éléments)
-	- [A.3.1. innerHTML](#a31-innerhtml)
-	- [A.3.2. getAttribute/setAttribute](#a32-getattributesetattribute)
-- [Étape suivante](#Étape-suivante)
+- [B.1. Configuration du projet](#b1-configuration-du-projet)
+- [B.2. Sélectionner des éléments](#b2-sélectionner-des-éléments)
+	- [B.2.1. querySelector()](#b21-queryselector)
+	- [B.2.2. querySelectorAll()](#b22-queryselectorall)
+- [B.3. Modifier des éléments](#b3-modifier-des-éléments)
+	- [B.3.1. innerHTML](#b31-innerhtml)
+	- [B.3.2. getAttribute/setAttribute](#b32-getattributesetattribute)
+- [Étape suivante](#étape-suivante)
 
 ***Ce TP va permettre de mettre en oeuvre les principales méthodes de sélection et de modification d'éléments de l'arbre DOM.***
 
-## A.1. Configuration du projet
+## B.1. Configuration du projet
 
 **Ce repo contient une solution commentée du précédent TP. Il servira de base au T3 :**
 
@@ -32,9 +32,9 @@
 	```
 4. **Une fois tout installé, vous pouvez relancer la compilation à l'aide de la commande `npm run watch` et lancer le serveur http avec `npx serve -l 8000`**. Vérifiez ensuite que la page s'affiche correctement dans le navigateur :<br><a href="images/readme/pizzaland-05.png"><img src="images/readme/pizzaland-05.png" width="80%"></a>
 
-## A.2. Sélectionner des éléments
+## B.2. Sélectionner des éléments
 
-### A.2.1. querySelector()
+### B.2.1. querySelector()
 Comme vu en cours, la principale méthode pour sélectionner un élément de la page HTML est la méthode `querySelector()`.
 
 querySelector() est une méthode de la classe `Element` qui permet de retourner une référence vers un élément de la page (une balise) à partir d'un sélecteur CSS. Par exemple :
@@ -59,7 +59,7 @@ Sur le même modèle, affichez dans la console  :
 
 <a href="images/readme/queryselector-console.jpg"><img src="images/readme/queryselector-console.jpg" width="80%"></a>
 
-### A.2.2. querySelectorAll()
+### B.2.2. querySelectorAll()
 La méthode `querySelectorAll()` permet de récupérer non pas un, mais tous les éléments qui correspondent au sélecteur CSS passé en paramètre.
 
 Affichez dans la console :
@@ -68,8 +68,8 @@ Affichez dans la console :
 
 <a href="images/readme/queryselectorall-console.jpg"><img src="images/readme/queryselectorall-console.jpg" width="80%"></a>
 
-## A.3. Modifier des éléments
-### A.3.1. innerHTML
+## B.3. Modifier des éléments
+### B.3.1. innerHTML
 La propriété `innerHTML` permet à la fois de lire et de modifier le contenu d'un Element HTML (le contenu HTML compris entre les balises ouvrantes et fermantes)
 
 1. Affichez dans la console le titre de la deuxième pizza (*"Napolitaine"*)
@@ -81,7 +81,7 @@ La propriété `innerHTML` permet à la fois de lire et de modifier le contenu d
 
 <a href="images/readme/pizzaland-innerhtml.png"><img src="images/readme/pizzaland-innerhtml.png" width="80%"></a>
 
-### A.3.2. getAttribute/setAttribute
+### B.3.2. getAttribute/setAttribute
 Les méthodes `getAttribute()` et `setAttribute()` de la classe Element permettent de lire, d'ajouter ou de modifier des attributs HTML.
 
 1. Affichez dans la console l'url du 2e lien contenu dans le footer (`"https://www.freepik.com/"`)
@@ -90,4 +90,4 @@ Les méthodes `getAttribute()` et `setAttribute()` de la classe Element permette
 <a href="images/readme/pizzaland-setattribute.png"><img src="images/readme/pizzaland-setattribute.png" width="80%"></a>
 
 ## Étape suivante
-Maintenant que l'on est capable de sélectionner / modifier des éléments HTML, nous allons voir dans le prochain exercice comment détecter les événements : [B. Les événements](./B-evenements.md).
\ No newline at end of file
+Maintenant que l'on est capable de sélectionner / modifier des éléments HTML, nous allons voir dans le prochain exercice comment détecter les événements : [C. Les événements](./C-evenements.md).
\ No newline at end of file

B-evenements.md → C-evenements.md

 #### TP3 - API DOM <!-- omit in toc -->
-# B. Les événements de l'API DOM <!-- omit in toc -->
+# C. Les événements de l'API DOM <!-- omit in toc -->
 
 ## Sommaire <!-- omit in toc -->
-- [B.1. Rappels](#b1-rappels)
-- [B.2. La gestion du menu](#b2-la-gestion-du-menu)
-- [B.3. Navigation en JS](#b3-navigation-en-js)
-- [Étape suivante](#Étape-suivante)
+- [C.1. Rappels](#c1-rappels)
+- [C.2. La gestion du menu](#c2-la-gestion-du-menu)
+- [C.3. Navigation en JS](#c3-navigation-en-js)
+- [Étape suivante](#étape-suivante)
 
 
-## B.1. Rappels
+## C.1. Rappels
 **Le système d'événements en JS permet de réagir à des actions de l'utilisateur (survol d'un élément, click sur un lien, soumission d'un formulaire, etc.) ou à des événements déclenchés par le navigateur (fin du chargement de la page ou d'une image, etc.).**
 
 Comme vu en cours (cf. pdf du cours sur moodle) on peut associer une fonction à un événement grâce à la méthode `addEventListener()` de la classe Element.
@@ -28,9 +28,9 @@ Notez que comme vu en cours :
 2. la fonction qui est passée à `addEventListener()` recevra un objet de la classe [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event)
 3. Il faut presque systématiquement (sauf cas  particuliers) appeler en premier lieu la méthode `event.preventDefault()` : cette méthode permet d'éviter que le navigateur n'exécute le traitement par défaut de l'événement (par exemple rediriger l'utilisateur vers une nouvelle page lorsqu'il clique sur un lien, recharger la page lorsqu'il soumet un formulaire, etc.).
 
-## B.2. La gestion du menu
+## C.2. La gestion du menu
 Dans le fichier `main.js` :
-1. **Commencez par commenter le code de l'exercice [A. Les bases de l'API DOM](./A-les-bases.md)** (certains sélecteurs pourront vous être utiles par la suite)
+1. **Commencez par commenter le code de l'exercice [B. Les bases de l'API DOM](./B-les-bases.md)** (certains sélecteurs pourront vous être utiles par la suite)
 2. A l'aide de `querySelector()` et `addEventListener()`, **affichez un message dans la console à chaque fois que l'utilisateur clique sur le lien du menu de navigation "Ajouter une pizza"**
 3. **Effacez le code précédent et remplacez le par un code qui permette d'écouter le clic sur *tous* les liens du menu de navigation** :
 
@@ -40,7 +40,7 @@ Dans le fichier `main.js` :
 4. **Ajoutez la classe CSS "active" sur la balise `<li>` qui contient le lien qui a été cliqué** (utilisez pour cela la propriété [element.parentElement](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement))
 5. **Juste avant d'ajouter la classe "active" sur le lien cliqué, effacez les classes CSS du `<li>` du menu qui était précédemment actif** de manière à n'avoir qu'un seul lien actif à la fois<br><img src="./images/readme/pizzaland-nav.gif">
 
-## B.3. Navigation en JS
+## C.3. Navigation en JS
 Il existe plusieurs façons de gérer la navigation en JS.
 
 On peut soit générer du code HTML entièrement en JS et l'injecter dans la page (comme on le fait pour la `HomePage`) soit se contenter d'afficher/masquer des portions de la page déjà présentes dans le code html. **C'est cette deuxième technique que l'on va maintenant travailler.**
@@ -54,4 +54,4 @@ On peut soit générer du code HTML entièrement en JS et l'injecter dans la pag
 3. Faites en sorte qu'au clic sur le bouton `<button class="closeButton">` (contenu dans la section) la section soit à nouveau masquée
 
 ## Étape suivante
-Maintenant que l'on est capable de détecter les actions de l'utilisateur nous allons travailler sur la gestion des formulaires : [C. Les formulaires](./C-formulaires.md).
\ No newline at end of file
+Maintenant que l'on est capable de détecter les actions de l'utilisateur nous allons travailler sur la gestion des formulaires : [D. Les formulaires](./D-formulaires.md).
\ No newline at end of file

C-formulaires.md → D-formulaires.md

 #### TP3 - API DOM <!-- omit in toc -->
-# C. La gestion des formulaires <!-- omit in toc -->
+# D. La gestion des formulaires <!-- omit in toc -->
 
 ## Sommaire <!-- omit in toc -->
-- [C.1. Rappels](#c1-rappels)
-- [C.2. Préparatifs](#c2-préparatifs)
-- [C.3. Le formulaire d'ajout de pizza](#c3-le-formulaire-dajout-de-pizza)
-- [C.4. La validation de la saisie](#c4-la-validation-de-la-saisie)
-- [C.5. Le formulaire complet :](#c5-le-formulaire-complet-)
-- [Étape suivante](#Étape-suivante)
-
-## C.1. Rappels
+- [D.1. Rappels](#d1-rappels)
+- [D.2. Préparatifs](#d2-préparatifs)
+- [D.3. Le formulaire d'ajout de pizza](#d3-le-formulaire-dajout-de-pizza)
+- [D.4. La validation de la saisie](#d4-la-validation-de-la-saisie)
+- [D.5. Le formulaire complet :](#d5-le-formulaire-complet-)
+- [Étape suivante](#étape-suivante)
+
+## D.1. Rappels
 Comme vu en cours (cf. pdf sur moodle), on peut utiliser l'API DOM avec les formulaires principalement pour 2 choses :
 - détecter les changements de valeurs dans les champs de saisie et afficher des messages d'erreur si besoin
 - détecter la soumission du formulaire (pour envoyer des données en AJAX par exemple)
 
-## C.2. Préparatifs
+## D.2. Préparatifs
 **Avant d'aller plus loin dans le TP faisons un point sur le code qui est fourni dans ce repo** : il contient en effet des classes qui correspondent à la solution du précédent TP [D. POO avancée](https://gitlab.univ-lille.fr/js/tp2/blob/master/D-poo-avancee.md) :
 
 - **La classe `js/pages/Page.js`** est une classe de base dont hériterons les pages de notre application et qui implémente juste une méthode `renderTitle()`. cette méthode `renderTitle()` retourne le titre de la page (passé dans le constructeur sous forme de chaîne de caractères).
@@ -46,7 +46,7 @@ Pour permettre à chaque page de réagir aux événements de l'utilisateur, on v
 
 **Ces deux modifications faites, passons à la création du formulaire d'ajout de pizza.**
 
-## C.3. Le formulaire d'ajout de pizza
+## D.3. Le formulaire d'ajout de pizza
 1. **Créez la classe `AddPizzaPage`** (dans un module `js/pages/AddPizzaPage.js`) :
 	```js
 	import Page from './Page.js';
@@ -100,14 +100,14 @@ Pour permettre à chaque page de réagir aux événements de l'utilisateur, on v
 	***NB:** Souvenez vous de la méthode `event.preventDefault()` et vérifiez que la soumission du formulaire n'entraîne pas un rechargement de page...*
 
 
-## C.4. La validation de la saisie
+## D.4. La validation de la saisie
 1. **Au submit, afficher dans la console la valeur saisie par l'utilisateur dans le champ "nom"**. Un sélecteur CSS qui peut être utile ici est le [sélecteur d'attributs](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors).
 
 2. **Si le champ "nom" est vide, afficher un message d'erreur** à l'aide de la fonction [`alert()`](https://developer.mozilla.org/fr/docs/Web/API/Window/alert)
 
 3. **Si le champ "nom" n'est pas vide, afficher une alerte "La pizza xxxxx a été ajoutée"** (où "xxxxx" correspond au nom qu'a saisi l'utilisateur) **et vider le champ de saisie** pour permettre à l'utilisateur de saisir une nouvelle pizza.
 
-## C.5. Le formulaire complet :
+## D.5. Le formulaire complet :
 1. Coder le formulaire complet de création de pizza selon le code HTML suivant (tous les champs sont obligatoires) :
 ```html
 <form class="addPizzaPage">
@@ -150,4 +150,4 @@ Pour permettre à chaque page de réagir aux événements de l'utilisateur, on v
 ***NB:** Pour récupérer la valeur contenue dans un champ `<select>` ce n'est pas la propriété `value` qu'il faut utiliser mais `selectedOptions` (https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions). Cette propriété retourne un tableau des valeurs sélectionnées, si le tableau est vide, c'est qu'aucune valeur n'a été choisie par l'utilisateur.*
 
 ## Étape suivante
-Pour terminer, voyons comment intégrer ce que saisit l'utilisateur dans le reste de l'application : [D. Formulaires et navigation](./D-navigation.md).
\ No newline at end of file
+Pour terminer, voyons comment intégrer ce que saisit l'utilisateur dans le reste de l'application : [E. Formulaires et navigation](./E-navigation.md).
\ No newline at end of file

D-navigation.md → E-navigation.md

 #### TP3 - API DOM <!-- omit in toc -->
-# D. Formulaires et navigation <!-- omit in toc -->
+# E. Formulaires et navigation <!-- omit in toc -->
 
 ## Sommaire <!-- omit in toc -->
-- [D.1. Mise à jour de la liste](#d1-mise-à-jour-de-la-liste)
-- [D.2. Formulaire d'ingrédients](#d2-formulaire-dingrédients)
+- [E.1. Mise à jour de la liste](#e1-mise-à-jour-de-la-liste)
+- [E.2. Formulaire d'ingrédients](#e2-formulaire-dingrédients)
 
-## D.1. Mise à jour de la liste
+## E.1. Mise à jour de la liste
 Lorsque l'utilisateur soumet le formulaire (et à condition que l'utilisateur n'ait pas fait d'erreur de saisie), faites en sorte que l'on retourne sur la `HomePage` avec la liste des pizzas mise à jour.
 
-## D.2. Formulaire d'ingrédients
+## E.2. Formulaire d'ingrédients
 **Ajoutez dans le formulaire `AddPizzaPage` un lien "ajouter un ingrédient".**
 
 Au clic sur ce lien, il faut :

README.md

-# TP 3 - API DOM
+<img src="images/readme/header.jpg">
 
 ## Objectifs
 - Savoir manipuler la page HTML avec l'API DOM
-- Savoir ajouter des écouteurs d'événements pour réagir aux actions de l'utilisateur
+- Savoir détecter les actions de l'utilisateur avec les Event
 - Être capable de gérer des formulaires avec JS
-- Et faire encore évoluer notre application ***"Pizzaland"*** 🍕
 
 ## Sommaire
 Pour plus de clarté, les instructions du TP se trouvent dans des fichiers distincts (un fichier par sujet), procédez dans l'ordre sinon, ça fonctionnera beaucoup moins bien ! :
 
-1. [A. Les bases de l'API DOM](A-les-bases.md)
-2. [B. Les événements](B-evenements.md)
-3. [C. Les formulaires](C-formulaires.md)
-4. [D. Formulaires et navigation](D-navigation.md)
\ No newline at end of file
+1. [A. Préparatifs](A-preparatifs.md)
+2. [B. Les bases de l'API DOM](B-les-bases.md)
+3. [C. Les événements](C-evenements.md)
+4. [D. Les formulaires](D-formulaires.md)
+5. [E. Formulaires et navigation](E-navigation.md)
\ No newline at end of file