3. Ouvrez un terminal intégré dans VSCodium à l'aide du raccourci <kbd>CTRL</kbd>+<kbd>J</kbd> et tapez :
3. Ouvrez un terminal intégré dans VSCodium à l'aide du raccourci <kbd>CTRL</kbd>+<kbd>J</kbd> et installez les dépendances du projet :
```bash
npm install
```
...
...
@@ -37,7 +37,7 @@
### A.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 :
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
document.querySelector('#appContainer');
```
...
...
@@ -85,7 +85,7 @@ La propriété `innerHTML` permet à la fois de lire et de modifier le contenu d
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/"`)
2. Ajoutez la classe CSS "active" au `<li>` qui contient le lien "La carte" dans le menu
2. Ajoutez la classe CSS "active" au premier `<li>` du menu
1. le 2e paramètre que l'on passe à addEventListener est une référence vers la fonction `handleClick` et pas l'exécution de la fonction (`handleClick()`)
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()`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.
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.).
@@ -22,6 +22,8 @@ Comme vu en cours (cf. pdf sur moodle), on peut utiliser l'API DOM avec les form
-**La classe `js/components/PizzaThumbnail.js`** est une classe qui hérite de `Component` et qui permet d'afficher une pizza. Elle est utilisée dans `HomePage`.
-**Enfin la classe `js/PageRenderer.js`** est une classe qui dispose d'une méthode statique `PageRenderer.renderPage( page )` qui est appelée dans le `main.js`. Cette méthode statique permet d'afficher une page avec son contenu (méthode `page.render()`) et son titre (méthode `page.renderTitle()`).
Si vous ne l'avez pas déjà fait consultez le code de ces fichiers.
***Maintenant que les présentations sont faites, adaptons un peu le code pour préparer la suite du TP :***
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()` :
...
...
@@ -29,6 +31,7 @@ Pour permettre à chaque page de réagir aux événements de l'utilisateur, on v
1.**Ajouter la méthode `mount()`** dans la classe `Page` :
```js
mount(element){
// Cette méthode sera appelée par PageRenderer après chaque render()
// par défaut, cette méthode ne fait rien
// ce sont les classes filles qui devront surcharger cette méthode
}
...
...
@@ -140,7 +143,7 @@ Pour permettre à chaque page de réagir aux événements de l'utilisateur, on v
</form>
```
***NB:** Pour récupérer la valeur contenue dans un champ `<select multiple="true">` 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.*
***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).
