Contenu du cours

Maîtrise Avancée de JavaScript

1. Classes

Bienvenue dans le Cours Déclaration de Classe Défi : Construire une Classe Méthodes de Classe Défi : Ajouter des Méthodes à une Classe Objet Paramètre Propriétés Privées Défi : Implémentation de Propriétés Privées dans une Classe Accesseurs et Mutateurs Défi : Gestion des Propriétés avec Getters et Setters Propriétés Statiques Méthodes Statiques Défi : Utilisation des Propriétés et Méthodes Statiques dans une Classe Héritage avec Extends et Utilisation de super()Défi : Héritage de Classe avec Extends et Utilisation de Super

2. Manipulation du DOM

Qu'est-ce Que le DOM?Interroger le DOM Défi : Interroger le DOM Comprendre la Hiérarchie du DOM Défi : Hiérarchie DOM Propriétés Du DOM Travailler Avec les Attributs des Éléments Défi : Travailler Avec les Propriétés et Attributs des Éléments Ajouter des Éléments Suppression des Éléments Défi : Ajouter et Supprimer des Éléments Modifier les Styles des Éléments Défi : Modifier les Styles des Éléments

3. Événements et Gestion des Événements

Introduction aux Événements et aux Écouteurs d'Événements L'Objet Événement Défi : Événements et Écouteurs d'Événements Propagation et Délégation d'Événements Défi : Propagation et Délégation d'Événements Événements Clavier et Souris Gestion des Écouteurs d'Événements

4. JavaScript Asynchrone et APIs

Introduction à JavaScript Asynchrone Rappels Promesses Async/Await Travailler Avec les APIs Intégration Pratique de l'API Défi : Travailler Avec l'API Travailler avec des Bibliothèques Tierces Défi : Travailler Avec des Bibliothèques Tierces Gestion de Plusieurs Requêtes Asynchrones

Introduction aux Événements et aux Écouteurs d'Événements

Qu'est-ce que les événements en JavaScript ?

JavaScript fournit des mécanismes pour gérer ces événements et exécuter un code spécifique en réponse, rendant votre application web interactive et dynamique.

Types d'événements courants

Explication de addEventListener() et comment attacher des écouteurs d'événements

Pour répondre aux événements en JavaScript, vous attachez un écouteur d'événement à un élément. La méthode la plus courante pour le faire est avec la fonction addEventListener(), qui écoute des événements spécifiques et appelle une fonction lorsque l'événement se produit.

event: Le type d'événement que vous souhaitez écouter (par exemple, 'click', 'submit');
function: La fonction de rappel à exécuter lorsque l'événement est déclenché;
useCapture (optionnel): Un booléen qui indique si l'événement doit être capturé pendant la phase de capture ou de propagation (par défaut, c'est false, ce qui signifie qu'il écoute pendant la phase de propagation).

Écouteur d'événement de clic

Attachons un écouteur d'événement click au bouton. Lorsqu'il est cliqué, il déclenche une alerte.

index.html

index.css

index.js

L'écouteur d'événements est attaché à l'élément #myButton, et lorsque l'utilisateur clique sur le bouton, une boîte de message apparaît avec le texte "Button clicked!"

Écouteur d'événement de soumission

Ajoutons un écouteur d'événements pour l'événement submit, empêchant le comportement par défaut de soumission du formulaire pour gérer les données avec JavaScript.

index.html

index.css

index.js

Un écouteur d'événements sur l'événement submit du formulaire empêche la soumission par défaut avec event.preventDefault(), permettant à JavaScript personnalisé de gérer les données à la place. Lors de la soumission, le nom saisi est récupéré et affiché dans un paragraphe avec l'ID displayName.

Événement Keypress

Attachons un écouteur d'événements keypress au champ de saisie. Lorsqu'une touche est enfoncée, elle sera affichée dans le paragraphe.

index.html

index.css

index.js

Chaque fois qu'une touche est enfoncée lors de la saisie dans le champ de saisie, la touche enfoncée est enregistrée dans la console.

Exemple Pratique : Gestion de la Validation du Formulaire lors de la Soumission

Créons une logique pour la validation du formulaire avant la soumission du formulaire.

index.html

index.css

index.js

Le gestionnaire d'événements submit garantit que le formulaire ne se soumet pas si les champs requis sont vides. Si le champ du nom d'utilisateur ou du mot de passe est vide, l'événement est empêché de se poursuivre et un message d'erreur est affiché.

1. Quel est le but de `addEventListener()`?

2. Lequel des éléments suivants n'est PAS un type d'événement valide pour `addEventListener()`?

Tout était clair ?

Merci pour vos commentaires !

Section 3. Chapitre 1

Maîtrise Avancée de JavaScript

Introduction aux Événements et aux Écouteurs d'Événements

Qu'est-ce que les événements en JavaScript ?

Types d'événements courants

Explication de addEventListener() et comment attacher des écouteurs d'événements

Écouteur d'événement de clic

Écouteur d'événement de soumission

Événement Keypress

Exemple Pratique : Gestion de la Validation du Formulaire lors de la Soumission

1. Quel est le but de addEventListener()?

2. Lequel des éléments suivants n'est PAS un type d'événement valide pour addEventListener()?

1. Quel est le but de `addEventListener()`?

2. Lequel des éléments suivants n'est PAS un type d'événement valide pour `addEventListener()`?