## Tâche
Vous construisez un formulaire où les utilisateurs peuvent soumettre leurs détails. Votre objectif est de valider les entrées des utilisateurs, de fournir un retour en temps réel pendant qu'ils tapent, et d'empêcher la soumission du formulaire si l'entrée est invalide.
1. **Retour en Temps Réel sur les Entrées** :
   - Écoutez les changements pendant que l'utilisateur tape ;
   - À l'intérieur du gestionnaire d'événements, vérifiez la longueur de la valeur d'entrée ;
   - Si elle est inférieure à 3 caractères, définissez le contenu du `<p>` avec l'ID `feedback` sur `"Le nom est trop court."` ;
   - Si elle est de 3 caractères ou plus, définissez `feedback` sur `"Le nom semble bon !"`.
2. **Empêcher la Soumission par Défaut du Formulaire** :
   - Écoutez les soumissions de formulaire ;
   - Empêchez le formulaire de se soumettre par défaut ;
   - Vérifiez la valeur d'entrée ;
   - Si elle est inférieure à 3 caractères, affichez `"Veuillez entrer un nom plus long"` dans le `<p>` avec l'ID `form-message` ;
   - Si elle est de 3 caractères ou plus, affichez `"Formulaire soumis avec succès !"` dans `form-message`.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgxPlNpZ24gVXAgRm9ybTwvaDE+CiAgICA8Zm9ybSBpZD0idXNlci1mb3JtIj4KICAgICAgPGxhYmVsIGZvcj0ibmFtZS1pbnB1dCI+TmFtZTo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9Im5hbWUtaW5wdXQiIHBsYWNlaG9sZGVyPSJFbnRlciB5b3VyIG5hbWUiIC8+CiAgICAgIDxidXR0b24gaWQ9InN1Ym1pdC1idG4iIHR5cGU9InN1Ym1pdCI+U3VibWl0PC9idXR0b24+CiAgICAgIDxwIGlkPSJmZWVkYmFjayI+PC9wPgogICAgICA8cCBpZD0iZm9ybS1tZXNzYWdlIj48L3A+CiAgICA8L2Zvcm0+CiAgICA8c2NyaXB0IHNyYz0iaW5kZXguanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdIZWx2ZXRpY2EgTmV1ZScsIEFyaWFsLCBzYW5zLXNlcmlmOwogIGJhY2tncm91bmQtY29sb3I6ICNmM2Y0ZjY7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgbWFyZ2luOiAwOwogIGNvbG9yOiAjMWYyOTM3Owp9CgpoMSB7CiAgZm9udC1zaXplOiAxLjVyZW07CiAgY29sb3I6ICMzYjgyZjY7CiAgbWFyZ2luLWJvdHRvbTogMjVweDsKfQoKZm9ybSB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjsKICBwYWRkaW5nOiAyNXB4IDMwcHg7CiAgd2lkdGg6IDQwMHB4OwogIGJvcmRlci1yYWRpdXM6IDEycHg7CiAgYm94LXNoYWRvdzogMCAxMHB4IDI1cHggcmdiYSgwLCAwLCAwLCAwLjEpOwogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBnYXA6IDE1cHg7Cn0KCmxhYmVsIHsKICBmb250LXNpemU6IDFyZW07CiAgY29sb3I6ICM0YjU1NjM7CiAgbWFyZ2luLWJvdHRvbTogNXB4Owp9CgppbnB1dFt0eXBlPSd0ZXh0J10gewogIHBhZGRpbmc6IDEycHg7CiAgZm9udC1zaXplOiAxcmVtOwogIGJvcmRlcjogMXB4IHNvbGlkICNkMWQ1ZGI7CiAgYm9yZGVyLXJhZGl1czogNnB4OwogIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2U7Cn0KCmlucHV0W3R5cGU9J3RleHQnXTpmb2N1cyB7CiAgYm9yZGVyLWNvbG9yOiAjM2I4MmY2OwogIG91dGxpbmU6IG5vbmU7CiAgYm94LXNoYWRvdzogMCAwIDhweCByZ2JhKDU5LCAxMzAsIDI0NiwgMC4zKTsKfQoKYnV0dG9uIHsKICBwYWRkaW5nOiAxMnB4OwogIGZvbnQtc2l6ZTogMXJlbTsKICBjb2xvcjogI2ZmZmZmZjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMTBiOTgxOwogIGJvcmRlcjogbm9uZTsKICBib3JkZXItcmFkaXVzOiA2cHg7CiAgY3Vyc29yOiBwb2ludGVyOwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlLCB0cmFuc2Zvcm0gMC4ycyBlYXNlOwp9CgpidXR0b246aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICMwNTk2Njk7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0ycHgpOwp9CgpidXR0b246YWN0aXZlIHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCk7Cn0KCiNmZWVkYmFjayB7CiAgZm9udC1zaXplOiAwLjlyZW07CiAgY29sb3I6ICNmNTllMGI7CiAgZm9udC13ZWlnaHQ6IDYwMDsKfQoKI2Zvcm0tbWVzc2FnZSB7CiAgZm9udC1zaXplOiAxcmVtOwogIGZvbnQtd2VpZ2h0OiA3MDA7CiAgbWFyZ2luLXRvcDogNnB4Owp9CgojZm9ybS1tZXNzYWdlLnN1Y2Nlc3MgewogIGNvbG9yOiAjMTBiOTgxOwp9CgojZm9ybS1tZXNzYWdlLmVycm9yIHsKICBjb2xvcjogI2VmNDQ0NDsKfQ==

Ly8gUmVhbC10aW1lIGlucHV0IGZlZWRiYWNrCmNvbnN0IG5hbWVJbnB1dCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCduYW1lLWlucHV0Jyk7CmNvbnN0IGZlZWRiYWNrID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2ZlZWRiYWNrJyk7CgpuYW1lSW5wdXQuYWRkRXZlbnRMaXN0ZW5lcihfX19fXywgZnVuY3Rpb24gKGV2ZW50KSB7CiAgaWYgKF9fX19fKSB7CiAgICBmZWVkYmFjay50ZXh0Q29udGVudCA9IF9fX19fOwogIH0gZWxzZSB7CiAgICBmZWVkYmFjay50ZXh0Q29udGVudCA9IF9fX19fOwogIH0KfSk7CgovLyBQcmV2ZW50IGRlZmF1bHQgZm9ybSBzdWJtaXNzaW9uIGFuZCB2YWxpZGF0ZSBpbnB1dApjb25zdCB1c2VyRm9ybSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd1c2VyLWZvcm0nKTsKY29uc3QgZm9ybU1lc3NhZ2UgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZm9ybS1tZXNzYWdlJyk7Cgp1c2VyRm9ybS5hZGRFdmVudExpc3RlbmVyKF9fX19fLCBmdW5jdGlvbiAoZXZlbnQpIHsKICBldmVudC5wcmV2ZW50RGVmYXVsdCgpOwoKICBpZiAobmFtZUlucHV0LnZhbHVlLmxlbmd0aCA8IDMpIHsKICAgIGZvcm1NZXNzYWdlLnRleHRDb250ZW50ID0gX19fX187CiAgfSBlbHNlIHsKICAgIGZvcm1NZXNzYWdlLnRleHRDb250ZW50ID0gX19fX187CiAgICBuYW1lSW5wdXQudmFsdWUgPSAnJzsKICAgIGZlZWRiYWNrLnRleHRDb250ZW50ID0gJyc7CiAgfQp9KTs=

- Utilisez l'événement `input` pour écouter les changements lorsque l'utilisateur tape ;
- Utilisez `event.target.value.length < 3` pour vérifier la longueur de la valeur d'entrée ;
- Utilisez l'événement `submit` pour écouter les soumissions de formulaire ;
- Utilisez `event.preventDefault()` pour arrêter le comportement par défaut de soumission du formulaire ;
- Utilisez `nameInput.value.length < 3` pour vérifier la valeur d'entrée.

Ly8gUmVhbC10aW1lIGlucHV0IGZlZWRiYWNrCmNvbnN0IG5hbWVJbnB1dCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCduYW1lLWlucHV0Jyk7CmNvbnN0IGZlZWRiYWNrID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2ZlZWRiYWNrJyk7CgpuYW1lSW5wdXQuYWRkRXZlbnRMaXN0ZW5lcignaW5wdXQnLCBmdW5jdGlvbiAoZXZlbnQpIHsKICBpZiAoZXZlbnQudGFyZ2V0LnZhbHVlLmxlbmd0aCA8IDMpIHsKICAgIGZlZWRiYWNrLnRleHRDb250ZW50ID0gJ05hbWUgaXMgdG9vIHNob3J0Lic7CiAgfSBlbHNlIHsKICAgIGZlZWRiYWNrLnRleHRDb250ZW50ID0gJ05hbWUgbG9va3MgZ29vZCEnOwogIH0KfSk7CgovLyBQcmV2ZW50IGRlZmF1bHQgZm9ybSBzdWJtaXNzaW9uIGFuZCB2YWxpZGF0ZSBpbnB1dApjb25zdCB1c2VyRm9ybSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd1c2VyLWZvcm0nKTsKY29uc3QgZm9ybU1lc3NhZ2UgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZm9ybS1tZXNzYWdlJyk7Cgp1c2VyRm9ybS5hZGRFdmVudExpc3RlbmVyKCdzdWJtaXQnLCBmdW5jdGlvbiAoZXZlbnQpIHsKICBldmVudC5wcmV2ZW50RGVmYXVsdCgpOwoKICBpZiAobmFtZUlucHV0LnZhbHVlLmxlbmd0aCA8IDMpIHsKICAgIGZvcm1NZXNzYWdlLnRleHRDb250ZW50ID0gJ1BsZWFzZSBlbnRlciBhIGxvbmdlciBuYW1lJzsKICB9IGVsc2UgewogICAgZm9ybU1lc3NhZ2UudGV4dENvbnRlbnQgPSAnRm9ybSBzdWJtaXR0ZWQgc3VjY2Vzc2Z1bGx5ISc7CiAgICBuYW1lSW5wdXQudmFsdWUgPSAnJzsKICAgIGZlZWRiYWNrLnRleHRDb250ZW50ID0gJyc7CiAgfQp9KTs=

Ce cours offre une exploration approfondie des principes clés de JavaScript, en se concentrant sur les classes, la manipulation du DOM, la gestion des événements et la programmation asynchrone. Vous apprendrez à créer des éléments dynamiques et interactifs, à gérer les interactions utilisateur et à traiter les opérations asynchrones. Grâce à un mélange de théorie et de défis pratiques, ce cours vous aide à développer des compétences pratiques en JavaScript pour des applications du monde réel.

Apprenez les fondamentaux des classes JavaScript, des déclarations de classes à la définition de méthodes qui améliorent la fonctionnalité. Découvrez comment utiliser efficacement les objets de paramètres, gérer les propriétés privées et contrôler l'accès avec les accesseurs et les mutateurs. Maîtrisez les propriétés statiques et les méthodes statiques et libérez la puissance de l'héritage de classe en utilisant "extends" et "super()" pour construire un code évolutif et réutilisable.

Maîtrisez la manipulation du DOM pour créer des applications web dynamiques et interactives. Naviguez et modifiez la structure du DOM, mettez à jour le contenu de manière dynamique et appliquez les meilleures pratiques en matière de sécurité et de performance. Différenciez les propriétés et les attributs pour optimiser votre code.

Débloquez l'interactivité de vos applications web en maîtrisant les événements JavaScript. Comprenez la propagation des événements, contrôlez le comportement des événements et implémentez une gestion efficace des événements pour les interactions utilisateur. Optimisez les performances avec des techniques avancées comme la délégation d'événements.

Cette section couvre les éléments essentiels de JavaScript asynchrone, y compris les callbacks, les Promesses et async/await. Vous apprendrez à récupérer des données à partir d'APIs, à intégrer des bibliothèques tierces et à gérer efficacement plusieurs requêtes, développant des compétences pour créer des applications axées sur les données.

Maîtrise Avancée de JavaScript

Défi : Événements et Écouteurs d'Événements

Tâche