From 0c907f1a3579198ad8781de6e3e324652388d5f0 Mon Sep 17 00:00:00 2001
From: Thomas Fritsch <thomas@uidlt.fr>
Date: Sun, 6 Feb 2022 18:24:37 +0100
Subject: [PATCH] =?UTF-8?q?correction=20num=C3=A9rotation=20readme=20&=20w?=
=?UTF-8?q?ording?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
C-evenements.md | 8 ++++----
E-navigation-avancee.md | 10 +++++-----
2 files changed, 9 insertions(+), 9 deletions(-)
diff --git a/C-evenements.md b/C-evenements.md
index 4fda5da..9f44448 100644
--- a/C-evenements.md
+++ b/C-evenements.md
@@ -7,7 +7,7 @@ _**Maintenant que l'on sait sélectionner et modifier des éléments de la page
## Sommaire <!-- omit in toc -->
- [C.1. Rappels](#c1-rappels)
- [C.2. Navigation en JS : afficher/masquer un élément](#c2-navigation-en-js-affichermasquer-un-élément)
-- [C.2. Navigation en JS : Le menu](#c2-navigation-en-js-le-menu)
+- [C.3. Navigation en JS : Le menu](#c3-navigation-en-js-le-menu)
## C.1. Rappels
@@ -58,10 +58,10 @@ link.addEventListener('click', handleClick); // écoute l'événement
<img src="images/readme/newscontainer.png" >
-3. A**u clic sur le bouton `<button class="closeButton"></button>` (_contenu dans la section_) masquez à nouveau le bandeau de news.**
+3. **Au clic sur le bouton `<button class="closeButton"></button>` (_contenu dans la section_) masquez à nouveau le bandeau de news.**
-## C.2. Navigation en JS : Le menu
+## C.3. Navigation en JS : Le menu
La technique de navigation vue à l'instant (_masquer/afficher des balises_) est pratique pour des applications simples, où tout le contenu HTML est déjà généré côté serveur (_en JAVA, en PHP, en C# ou encore avec Node.JS_). \
**En revanche elle n'est pas très adaptée aux SPA où en général on a du contenu dynamique à injecter dans la page.**
@@ -105,7 +105,7 @@ Pour approfondir cette technique de navigation et **permettre de passer d'une pa
```
> _**NB :** en faisant cela on envoie au Router une **référence vers la balise `<ul class="mainMenu">`** qui contient le menu de navigation (cela nous évitera de faire référence à `document` dans la classe `Router` et en plus ça reste cohérent avec le fonctionnement des propriétés `titleElement` et `contentElement`)_
- Router.menuElement est en fait un "setter" dont je vous fourni le code de base à compléter (_à coller **dans** le corps de la classe `Router`_) :
+ `Router.menuElement` est en fait un "setter" dont je vous fourni le code de base à compléter (_à coller **dans** le corps de la classe `Router`_) :
```js
static #menuElement;
static set menuElement(element) {
diff --git a/E-navigation-avancee.md b/E-navigation-avancee.md
index 4c2b002..3266baa 100644
--- a/E-navigation-avancee.md
+++ b/E-navigation-avancee.md
@@ -8,9 +8,9 @@ _**Pour terminer ce TP, nous allons finaliser le mécanisme de navigation dans l
- lorsqu'on recharge la page dans le navigateur (F5) on doit afficher la page sur laquelle l'utilisateur se trouvait
## Sommaire <!-- omit in toc -->
-- [E.1. Mise à jour de la liste](#e1-mise-à-jour-de-la-liste)
-- [D.5. Le formulaire complet :](#d5-le-formulaire-complet-)
-- [E.2. Formulaire d'ingrédients](#e2-formulaire-dingrédients)
+- [E.1. activation du menu](#e1-activation-du-menu)
+- [E.2. History API](#e2-history-api)
+- [E.3. Le Deeplinking](#e3-le-deeplinking)
## E.1. activation du menu
**Actuellement lorsqu'on clique sur un lien du menu, rien n'indique dans le menu sur quelle page on se trouve.** On va donc remédier à ça en ajoutant une **classe CSS** sur le lien qui correspond à la page sur laquelle on se rend (_notez le trait plus grand sur le lien cliqué_) :
@@ -45,11 +45,11 @@ Ce qui permet ensuite d'utiliser les boutons précédent/suivant du navigateur (
2. **L'URL change maintenant à chaque fois que vous cliquez sur un lien du menu, mais si vous utilisez les boutons précédent/suivant du navigateur, vous verrez que rien ne se passe.** Il reste en effet à détecter le changement d'URL dans notre code pour **invoquer `Router.navigate()` à chaque fois que l'utilisateur utilise les boutons précédent/suivant**.
- Pour celà nous avons à notre disposition 2 outils :
+ Pour cela nous avons à notre disposition 2 outils :
- le **callback [`window.onpopstate` _(mdn)_](https://developer.mozilla.org/fr/docs/Web/API/WindowEventHandlers/onpopstate)** qui permet d'appeler une fonction lors de l'utilisation des boutons précédent/suivant du navigateur
- et la **propriété [`document.location` _(mdn)_](https://developer.mozilla.org/fr/docs/Web/API/Document/location)** qui permet d'obtenir des informations sur l'URL de la page courante
- Dans `src/main.js`, assignez une fonction (un arrow function par exemple) à `window.onpopstate` et placez-y pour le moment juste un `console.log(document.location)`.
+ Dans `src/main.js`, assignez une fonction (une arrow function par exemple) à `window.onpopstate` et placez-y pour le moment juste un `console.log(document.location)`.
Rechargez la page, naviguez un peu via le menu et les boutons précédent/suivant et inspectez dans la console le contenu de `document.location`, vous devriez y trouver quelque chose qui peut vous aider à afficher la bonne page...
--
GitLab