diff --git a/A-les-bases.md b/B-les-bases.md similarity index 82% rename from A-les-bases.md rename to B-les-bases.md index ad733eef942c5f611e3596f9f6ea7e16d3b67adf..6759faeefce87389a67e2f9df1ae5b545a22bda2 100644 --- a/A-les-bases.md +++ b/B-les-bases.md @@ -1,19 +1,19 @@ #### 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 diff --git a/B-evenements.md b/C-evenements.md similarity index 89% rename from B-evenements.md rename to C-evenements.md index 88cb6faf88b6fe9a8d12d0a9e77d50330c1056bc..555a4336fc5b1422a68b3f8dfc7d7e89203765af 100644 --- a/B-evenements.md +++ b/C-evenements.md @@ -1,14 +1,14 @@ #### 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 diff --git a/C-formulaires.md b/D-formulaires.md similarity index 92% rename from C-formulaires.md rename to D-formulaires.md index 1f281668e3f6387cd96c8015668da48fb8f6637e..83efa92e23836d5b83bf220a04d7ac0bb6e41af6 100644 --- a/C-formulaires.md +++ b/D-formulaires.md @@ -1,20 +1,20 @@ #### 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 diff --git a/D-navigation.md b/E-navigation.md similarity index 84% rename from D-navigation.md rename to E-navigation.md index db4ae4755346d99fd0b3bb0248f203002ff86091..661cd18f42edfb5847d2b0044c249ef76d7270f0 100644 --- a/D-navigation.md +++ b/E-navigation.md @@ -1,14 +1,14 @@ #### 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 : diff --git a/README.md b/README.md index 9cc15a42fa30b568888c762b33b8c39d79d523f2..8bcda39fa1fa5c25aba6ff21be74928786d4ca22 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,15 @@ -# 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 diff --git a/images/readme/header.jpg b/images/readme/header.jpg new file mode 100644 index 0000000000000000000000000000000000000000..55893cacf16ac039069d998e41e08205b594d4b2 Binary files /dev/null and b/images/readme/header.jpg differ