diff --git a/A-les-bases.md b/A-les-bases.md
index b5f2b9a1d18bdad6ef39908a5afccb115ce9e092..aa48f8afae7bbf4958b47da8caf28fc88677ae33 100644
--- a/A-les-bases.md
+++ b/A-les-bases.md
@@ -2,7 +2,7 @@
# A. Les bases de l'API DOM <!-- omit in toc -->
## Sommaire <!-- omit in toc -->
-- [A.1. Installation](#a1-installation)
+- [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)
@@ -13,26 +13,24 @@
***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. Installation
-1. **Récupérez le contenu du dossier `demarrage`, il contient une solution du TP sur la POO, les modules et le typage qui servira de base pour ce TP sur l'API DOM.** Comme lors du TP précédent n'oubliez pas de lancer un serveur web dans ce dossier
+## A.1. Configuration du projet
+
+**Ce repo contient une solution commentée du précédent TP. Il servira de base au T3 :**
+
+1. Clonez le projet
```bash
- cd /chemin/vers/votre/dossier/demarrage
- python3 -m http.server 8000
+ mkdir -p ~/ws-js/tp3
+ git clone https://gitlab.univ-lille.fr/js/tp3.git ~/ws-js/tp3
```
- *Si vous avez des questions sur le lancement de ce serveur, ou sur la procédure à suivre dans le cas où vous n'utiliseriez pas les postes des salles de TP mais votre propre machine, relisez attentivement le [README du premier TP](../01-premiers-pas-en-js/README.md#Préparatifs) !*
-
-2. **Ouvrez le fichier `package.json` et constatez que Babel, webpack et Flow sont listés dans les dépendances du projet.** Le dossier `demarrage` est en effet **déjà configuré pour l'utilisation de tous les outils nécessaires au dev JS moderne**. On va donc pouvoir tout installer facilement grâce à la commande :
+2. Lancez VSCodium :
+ ```bash
+ codium ~/ws-js/tp2
+ ```
+3. Ouvrez un terminal intégré dans VSCodium à l'aide du raccourci <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>²</kbd> et tapez :
```bash
npm install
```
- (à lancer à la racine du dossier de votre projet, cad là où se trouve le fichier `package.json`)
-
- *Si vous voulez en savoir plus sur le détail de l'installation et de la configuration des différents outils, vous pouvez consulter les TPs précédents : [modules](../02-poo-modules-typage/C-modules.md#c2-rendre-les-modules-compatibles-avec-les-vieux-navigateurs) et [typage](../02-poo-modules-typage/D-typage.md#d1-installation-et-configuration).*
-
-3. **Une fois tout installé, vous pouvez relancer la compilation à l'aide de la commande `npm run watch`**. Vérifiez ensuite que la page s'affiche correctement dans le navigateur :<br><a href="images/pizzaland-05-modules-webpack.jpg"><img src="images/pizzaland-05.jpg" width="80%"></a>
-
- Tout au long du TP pensez à vérifier régulièrement que les types que vous utilisez pour les variables, paramètres et valeurs de retour des fonctions/méthodes, sont corrects à l'aide de la commande `./node_modules/.bin/flow`
-
+4. **Une fois tout installé, vous pouvez relancer la compilation à l'aide de la commande `npm run watch`**. Vérifiez ensuite que la page s'affiche correctement dans le navigateur :<br><a href="images/readme/pizzaland-05-modules-webpack.jpg"><img src="images/readme/pizzaland-05.jpg" width="80%"></a>
## A.2. Sélectionner des éléments
@@ -41,26 +39,25 @@ Comme vu en cours, la principale méthode pour sélectionner un élément de la
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 :
```js
-const appContainerElement:?HTMLElement = document.querySelector('#appContainer');
+document.querySelector('#appContainer');
```
-assigne dans la constante `appContainerElement` la balise d'id html 'appContainer' :
+retourne la balise d'id html 'appContainer' :
```html
<main id="appContainer">
```
-Dans le fichier `main.js`, sélectionnez les éléments suivants et affichez les dans la console à l'aide de l'instruction `console.log()`. Par exemple si l'on demande d'afficher la balise d'id *"appContainer"* il faudra taper le code suivant :
+Dans le fichier `main.js`, utilisez la fonction `console.log()` et la méthode `querySelector` pour afficher la balise qui a comme classe `"pageTitle"` comme ceci :
```js
-console.log( document.querySelector('#appContainer') );
+console.log( document.querySelector('.pageTitle') );
```
-En inspectant le code html de la page (à l'aide de l'onglet Elements/Inspecteur des devtools) trouvez les sélecteurs qui permettront d'afficher dans la console :
+Sur le même modèle, affichez dans la console :
1. La balise `<img>` qui contient le logo de la page (les 2 parts de pizza)
2. Le lien du menu "Ajouter une pizza"
3. Le lien vers le site [Unsplash](https://unsplash.com/) dans les crédits
4. le titre de la première pizza (*`<h4>Regina</h4>`*)
-<a href="images/queryselector-console.jpg"><img src="images/queryselector-console.jpg" width="80%"></a>
-
+<a href="images/readme/queryselector-console.jpg"><img src="images/readme/queryselector-console.jpg" width="80%"></a>
### A.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.
@@ -69,7 +66,7 @@ Affichez dans la console :
1. la liste des liens du menu de navigation ("La carte" et "Ajouter une pizza")
2. la liste des prix de toutes les pizzas de la page
-<a href="images/queryselectorall-console.jpg"><img src="images/queryselectorall-console.jpg" width="80%"></a>
+<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
@@ -82,7 +79,7 @@ La propriété `innerHTML` permet à la fois de lire et de modifier le contenu d
<small class="label label-success">les pizzas c'est la vie</small>
```
-<a href="images/pizzaland-innerhtml.jpg"><img src="images/pizzaland-innerhtml.jpg" width="80%"></a>
+<a href="images/readme/pizzaland-innerhtml.jpg"><img src="images/readme/pizzaland-innerhtml.jpg" width="80%"></a>
### A.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.
@@ -90,7 +87,7 @@ Les méthodes `getAttribute()` et `setAttribute()` de la classe Element permette
1. Affichez dans la console l'url du 2e lien contenu dans le footer (`"https://www.freepik.com/"`)
2. Ajoutez la classe CSS "active" au `<li>` qui contient le lien "La carte" dans le menu
-<a href="images/pizzaland-setatttribute.jpg"><img src="images/pizzaland-setatttribute.jpg" width="80%"></a>
+<a href="images/readme/pizzaland-setatttribute.jpg"><img src="images/readme/pizzaland-setatttribute.jpg" 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
diff --git a/B-evenements.md b/B-evenements.md
index 758a759673ca825d4a098ec5ffa55ac569f4fa44..6ca14792ef880040da2980f0a1a4bbc884c21deb 100644
--- a/B-evenements.md
+++ b/B-evenements.md
@@ -14,14 +14,12 @@ Comme vu en cours (cf. pdf du cours sur moodle) on peut associer une fonction à
Par exemple, pour déclencher la fonction `handleClick` lors du clic sur le premier lien de la page, on peut écrire :
```JavaScript
-const link:?HTMLElement = document.querySelector('a');
-function handleClick( event:Event ) {
+function handleClick( event ) {
event.preventDefault();
console.log(event);
}
-if ( link ){
- link.addEventListener('click', handleClick);
-}
+const link = document.querySelector('a');
+link.addEventListener('click', handleClick);
```
Notez que comme vu en cours :
@@ -30,7 +28,7 @@ Notez que comme vu en cours :
3. Il faut presque systématiquement (sauf cas particuliers) appeler en premier lieu la méthode `event.preventDefault()` qui 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
-Dans le fichier `main.js`
+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)
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** :
@@ -41,5 +39,10 @@ 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/pizzaland-nav.gif">
+<!--## B.3. Navigation en JS
+Il existe plusieurs façons de gérer la navigation en JS.
+
+On peut afficher/masquer des parties de code HTML déjà
+-->
## Étape suivante
Maintenant que l'on est capable de détecter les actions de l'utilisateur nous allons travailler sur la gestion des formulaires dans le prochain exercice : [C. Les formulaires](./C-formulaires.md).
\ No newline at end of file
diff --git a/C-formulaires.md b/C-formulaires.md
index 7652215cb2028901ac9109eef6c53c8980c83b29..56d33c29479cb00ccff8844c58c611cb04be46e6 100644
--- a/C-formulaires.md
+++ b/C-formulaires.md
@@ -9,36 +9,35 @@
- [C.5. Le formulaire complet :](#c5-le-formulaire-complet-)
## C.1. Rappels
-Comme vu en cours (cf. pdf sur moodle), on peut utiliser l'API DOM avec les formulaires principalement pour 3 utilisations :
-- vérifier la saisie de l'utilisateur et afficher des messages d'erreur si besoin
-- modifier éventuellement les valeurs des champs (corriger une valeur, ou vider un formulaire)
-- Soumettre les données en AJAX (ce qui sera abordé dans le prochain cours et TP)
+Comme vu en cours (cf. pdf sur moodle), on peut utiliser l'API DOM avec les formulaires principalement pour 2 utilisations :
+- 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
-Avant d'aller plus loin dans le TP faisons un point sur le code qui est fourni dans le dossier `demarrage` : il contient en effet des classes `Page` et `PageRenderer` qui correspondent à la solution de l'exercice [E. pour aller plus loin](../02-poo-modules-typage/E-pour-aller-plus-loin.md) :
+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 `Page` et `PageRenderer` qui correspondent à la solution de l'exercice [D. POO avancée](https://gitlab.univ-lille.fr/js/tp2/blob/master/D-poo-avancee.md) du précédent TP :
- La classe `Page` est une classe de base dont hérite la classe `HomePage` et qui implémente une méthode `renderTitle()`.
-- La classe `PageRenderer` est une classe qui dispose d'une méthode statique `PageRenderer.renderPage( page )` qui permet d'afficher une page (méthode `render()`) et son titre (méthode `renderTitle()` ci-dessus).
+- La classe `PageRenderer` est une classe qui dispose d'une méthode statique `PageRenderer.renderPage( page )`. Cette méthode permet d'afficher une page (méthode `page.render()`) et son titre (méthode `page.renderTitle()`).
Pour permettre à chaque page de réagir aux événements de l'utilisateur, on va ajouter une méthode `mount()` dans la classe `Page` et qui sera appelée par la classe `PageRenderer` à chaque fois qu'on affiche une page via `renderPage()` :
1. **Ajouter la méthode `mount()` à la classe `Page`** :
```js
- mount():void {
+ mount(contentElement) {
// par défaut, cette méthode ne fait rien
// ce sont les classes filles qui devront surcharger cette méthode
}
```
2. **Appeler la méthode `mount()` à la fin de la méthode statique `PageRenderer.renderPage()`** :
```js
- static renderPage( page:Page ):void {
+ static renderPage(page) {
// ...
- page.mount();
+ page.mount(this.contentElement);
}
```
## C.3. Le formulaire d'ajout de pizza
-1. **Créez la classe `AddPizzaPage`** (dans un module `js/AddPizzaPage.js`) dont le titre est "Ajouter une pizza" et dont la méthode `render()` est surchargée comme suit :
+1. **Créez la classe `AddPizzaPage`** (dans un module `js/pages/AddPizzaPage.js`). Le titre de la page devra être "Ajouter une pizza" et la méthode `render()` sera surchargée comme suit :
```js
render():string {
return `<form class="addPizzaPage">
@@ -58,14 +57,14 @@ Pour permettre à chaque page de réagir aux événements de l'utilisateur, on v
```
3. **Ajoutez une méthode `submit()` dans la classe `AddPizzaPage`.** Cette méthode sera appelée lorsque l'utilisateur soumettra le formulaire :
```js
- submit(event:Event):void {
+ submit(event) {
// ici le code de votre méthode
}
```
Cette méthode va pour le moment juste afficher un message dans la console.
***NB:** Souvenez vous de la méthode `event.preventDefault()`...*
-3. **Overridez la méthode `mount()` dans la classe `AddPizzaPage`** en y ajoutant un écouteur d'événement 'submit' sur la balise `<form class="addPizzaPage">` qui va déclencer la méthode `submit()` de l'instance.
+4. **Overridez la méthode `mount()` dans la classe `AddPizzaPage`** en y ajoutant un écouteur d'événement 'submit' sur la balise `<form class="addPizzaPage">` qui va déclencher la méthode `submit()` de l'instance.
***NB :** Pour rappel, la valeur du `this` à l'intérieur d'un écouteur d'événement (fonction appelée par addEventListener) est toujours l'élément HTML qui a déclenché l'événement (ici le formulaire). Pour pouvoir appeler une méthode de l'instance, il faut forcer la valeur du `this` pour qu'elle corresponde toujours à l'instance dans laquelle le code s'exécute. Comme expliqué dans le pdf du cours, il existe plusieurs manières de le faire, mais celle que je vous recommande est l'emploi de la méthode [`bind()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) dans le constructeur de la classe :*
```js
diff --git a/images/readme/flow-error.jpg b/images/readme/flow-error.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..94f0c578264a2fb43efb492a10251c2b7a550321
Binary files /dev/null and b/images/readme/flow-error.jpg differ
diff --git a/images/readme/npm-run-test.gif b/images/readme/npm-run-test.gif
new file mode 100644
index 0000000000000000000000000000000000000000..db60c378c6e1e5447e9c0f127042b9454b861cc4
Binary files /dev/null and b/images/readme/npm-run-test.gif differ
diff --git a/images/readme/pizzaland-00.jpg b/images/readme/pizzaland-00.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..dabe73afe86c8a6589eaecc7013eb83f7460f690
Binary files /dev/null and b/images/readme/pizzaland-00.jpg differ
diff --git a/images/readme/pizzaland-01.jpg b/images/readme/pizzaland-01.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..319867113024a52ffd24a0f679fbeca5cc152187
Binary files /dev/null and b/images/readme/pizzaland-01.jpg differ
diff --git a/images/readme/pizzaland-02.jpg b/images/readme/pizzaland-02.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..525bb6d6a50022ade6654bc15a33bf2ffde91a59
Binary files /dev/null and b/images/readme/pizzaland-02.jpg differ
diff --git a/images/readme/pizzaland-03.jpg b/images/readme/pizzaland-03.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b8ec1bfd21bd19cdd5ed9fa6ce98483389499e97
Binary files /dev/null and b/images/readme/pizzaland-03.jpg differ
diff --git a/images/readme/pizzaland-04.jpg b/images/readme/pizzaland-04.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c787fd76618e0a687e0ca5063dc4e3524c6b10ae
Binary files /dev/null and b/images/readme/pizzaland-04.jpg differ
diff --git a/images/readme/pizzaland-05.jpg b/images/readme/pizzaland-05.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..bef0220daf46aecc7fe67b0f14133f30f45b8f9e
Binary files /dev/null and b/images/readme/pizzaland-05.jpg differ
diff --git a/images/readme/pizzaland-06-modules.jpg b/images/readme/pizzaland-06-modules.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5530781db1029aa64ae93e4125662ab99b5f86ef
Binary files /dev/null and b/images/readme/pizzaland-06-modules.jpg differ
diff --git a/images/readme/pizzaland-07-modules-webpack.jpg b/images/readme/pizzaland-07-modules-webpack.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c038efd68101d15f6546d64d06d579a24172f9e7
Binary files /dev/null and b/images/readme/pizzaland-07-modules-webpack.jpg differ
diff --git a/images/readme/pizzaland-innerhtml.jpg b/images/readme/pizzaland-innerhtml.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f183e17bf33be6a92759b42fa53803c3d7f79237
Binary files /dev/null and b/images/readme/pizzaland-innerhtml.jpg differ
diff --git a/images/readme/pizzaland-nav.gif b/images/readme/pizzaland-nav.gif
new file mode 100644
index 0000000000000000000000000000000000000000..81da2f846a9342f6fec7743a261023c0a3dcbd92
Binary files /dev/null and b/images/readme/pizzaland-nav.gif differ
diff --git a/images/readme/pizzaland-setatttribute.jpg b/images/readme/pizzaland-setatttribute.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5e3b2d9bdb1d8f461661a012fa5ff3ead4803a7b
Binary files /dev/null and b/images/readme/pizzaland-setatttribute.jpg differ
diff --git a/images/readme/queryselector-console.jpg b/images/readme/queryselector-console.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..279edc9106ed3ea924d2f7b4f947327f78e87085
Binary files /dev/null and b/images/readme/queryselector-console.jpg differ
diff --git a/images/readme/queryselectorall-console.jpg b/images/readme/queryselectorall-console.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..664b827366cae14132cb0cf4c440551017fad546
Binary files /dev/null and b/images/readme/queryselectorall-console.jpg differ