WEB: CLIENT 2COURS 08

PLAN▸ Retour sur le laboratoire #2

Vous devez me présenter votre projet durant les périodes d’exercice pour en démontrer le fonctionnement et recevoir une rétroaction(et votre note…)

▸ Interactivité en JavaScript: Formulaires et évènements

▸ Exercices

Interactivité en JavaScript

FORMULAIRES - COMPOSANTS▸ Standards: texte, nombre, cases à cocher, etc.

▸ HTML5: couleurs, date, intervalle(slider), etc.

COMPOSANTS - EXEMPLE▸ Balises

▸ input

▸ textarea

▸ select

▸ button

▸ Pour l’instant, nous retirons les composants de la balise f o r m p o u r r é c u p é r e r manuellement les données avec JavaScript

COMPOSANTS - VALIDATIONS▸ On peut offrir une meilleure expérience utilisateur en offrant certaines validations

des données directement dans le formulaire. ▸ On valide TOUJOURS du côté serveur quand même.

▸ Attribut required pour les données obligatoires

▸ Attribut pattern pour forcer un format(Utilise le mécanisme d’expressions régulières: regex, regular expression)

▸ Attributs minlength et maxlengthPour les inputs de type number: min et max

▸ Pour des validations plus approfondies, on doit utiliser JS

▸ https://codepen.io/anon/pen/rYpoKE

FORMULAIRES - RÉFÉRENCES▸ Composants

https://htmlreference.io/forms/https://www.w3schools.com/html/html_form_elements.asp

▸ Validationshttps://www.w3schools.com/html/html_form_input_types.asp https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

▸ Utilisation en JShttps://www.w3schools.com/js/js_validation.asp https://eloquentjavascript.net/2nd_edition/18_forms.html .value, .checked, .selected, …

INTERACTIVITÉ EN JAVASCRIPT▸ Jusqu’à maintenant, JavaScript nous a permis de construire dynamiquement le contenu

d’une page web

▸ Nous avons eu une interaction minimale avec notre utilisateur en utilisant les alertes ou même la console…

▸ Donc, la logique de notre programme influence le contenu et l’expérience de consommation de l’utilisateur

▸ On souhaite maintenant offrir à l’utilisateur la possibilité de participer directement à l’expérience offerte par la page web

▸ En combinant les formulaires et les évènements(clic, saisie, touches, etc.) on peut récupérer efficacement des données auprès de l’utilisateur et les utiliser dans notre logique applicative

ÉVÈNEMENTS▸ On peut demander aux éléments du DOM de nous informer de certains

changements d’état(évènement) et y réagir via JavaScript.

▸ Clic

▸ Survol de la souris

▸ Changement de valeur

▸ Appui/relâchement d’une touche

▸ On peut spécifier plusieurs évènements, ex: clic ET survol de la souris

▸ Évènement disponibles: https://www.w3schools.com/jsref/dom_obj_event.asp

S’INSCRIRE À UN ÉVÈNEMENT▸ Via les attributs HTML

▸ On spécifie directement le nom de l’évènement en tant qu’attribut et la valeur est le code JavaScript à exécuter.

À ÉVITER!

S’INSCRIRE À UN ÉVÈNEMENT▸ Via les attributs en JavaScript

S’INSCRIRE À UN ÉVÈNEMENT▸ Via les fonctions JavaScript

▸ On demande à l’élément DOM d’inscrire un évènement (on peut enregistrer plusieurs fois le même évènements, les fonctions seront appelées dans l’ordre de l’ajout): addEventListener

▸ On précise le nom de l’évènement (sans le on) en 1er paramètre: click, mouseover, …

▸ On indique la fonction à appeler (anonyme ou standard): function() { … } , hello

▸ En utilisant la même syntaxe, on peut aussi removeEventListener(…, …)

RÉCUPÉRER LES INFORMATIONS DE L’ÉLÉMENT VISÉ▸ Essayons de créer des boutons dynamiquement en JavaScript à partir du

tableau [“A”, “B”, “C”] et afficher une alerte indiquant le texte du bouton ainsi que sa position dans le tableau lorsqu’il est cliqué

RÉCUPÉRER LES INFORMATIONS DE L’ÉLÉMENT VISÉ

🤔

RÉCUPÉRER LES INFORMATIONS DE L’ÉLÉMENT VISÉ

🥳

ÉVÈNEMENTS - RÉFÉRENCES▸ Utiliser les évènements

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events https://www.w3schools.com/js/js_htmldom_eventlistener.asp

▸ Liste des évènements disponibleshttps://www.w3schools.com/jsref/dom_obj_event.asp

▸ Exemples d’évènementshttps://www.w3schools.com/js/js_events_examples.asp

▸ Manipuler les composants de formulaire en JShttps://www.w3schools.com/js/js_input_examples.asp

▸ Validations avancées en JShttps://www.w3schools.com/js/js_validation_api.asphttps://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

Exercices

EXERCICES▸ Pour tous les exercices, utilisez le mécanisme de fichier .js externe pour créer les éléments

DOM via JavaScript, exploitez ensuite les évènements pour offrir différentes interactions a l’utilisateur.

1. Afficher la table de multiplication d’un nombre, par exemple pour 4: Utiliser une liste déroulante contenant les valeur de 1 à 100 et mettre à jour la table de multiplication lorsque l’utilisateur sélectionne une valeur.

EXERCICES2. Afficher les nombres premiers inférieurs à un nombre Utilisez un slider en combinaison avec une zone de saisie numérique pour permettre à l’utilisateur de choisir le nombre. Lorsque la valeur du slider change la valeur de la zone de saisie est mise à jour et vice-versa.

EXERCICES3. Calculer la somme des nombres contenus dans un tableau.

Permettez à l’utilisateur d’ajouter une valeur via une zone de saisie, de supprimer un item du tableau et de réinitialiser le tableau.

EXERCICES4. Faire un formulaire qui demande le nom et l’année de naissance de l’utilisateur. On peut

également supprimer une ligne du tableau. Afficher les données saisies dans un tableau en modifiant la couleur du texte selon l’âge.Aller plus loin: Ajouter une action Edit pour modifier les valeurs d’une ligne, supporter le tri sur les colonnes Nom et Age.