## Tâche
Vous construisez une liste dynamique où les utilisateurs peuvent ajouter et supprimer des éléments spécifiques.
1. Utilisez **la délégation d'événements** en ajoutant un seul écouteur d'événements de clic au `ul` avec l'ID `dynamic-list`;
2. Lorsqu'un élément est cliqué :
   - Si l'élément cliqué est un `<li>`, affichez une alerte avec le texte de l'élément cliqué;
   - Si l'élément cliqué est un bouton "Supprimer", retirez l'élément `<li>` correspondant de la liste.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHVsIGlkPSJkeW5hbWljLWxpc3QiPgogICAgICA8bGk+SXRlbSAxIDxidXR0b24gY2xhc3M9ImRlbGV0ZS1idG4iPkRlbGV0ZTwvYnV0dG9uPjwvbGk+CiAgICAgIDxsaT5JdGVtIDIgPGJ1dHRvbiBjbGFzcz0iZGVsZXRlLWJ0biI+RGVsZXRlPC9idXR0b24+PC9saT4KICAgIDwvdWw+CiAgICA8YnV0dG9uIGlkPSJhZGQtaXRlbSI+QWRkIEl0ZW08L2J1dHRvbj4KICAgIDxzY3JpcHQgc3JjPSJpbmRleC5qcyI+PC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdBcmlhbCcsIHNhbnMtc2VyaWY7CiAgYmFja2dyb3VuZC1jb2xvcjogI2YwZjRmODsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBtYXJnaW46IDA7CiAgY29sb3I6ICMzMzM7Cn0KCnVsIHsKICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7CiAgcGFkZGluZzogMDsKICBtYXJnaW46IDIwcHggMDsKICB3aWR0aDogMzAwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjsKICBib3JkZXItcmFkaXVzOiA4cHg7CiAgYm94LXNoYWRvdzogMCA1cHggMTVweCByZ2JhKDAsIDAsIDAsIDAuMSk7Cn0KCiNkeW5hbWljLWxpc3QgbGkgewogIHBhZGRpbmc6IDEycHg7CiAgbWFyZ2luOiA4cHggMDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjlmYWZiOwogIGJvcmRlci1yYWRpdXM6IDZweDsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlOwogIGNvbG9yOiAjMWYyOTM3Owp9CgojZHluYW1pYy1saXN0IGxpOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZTVlZmZmOwp9CgojZHluYW1pYy1saXN0IGJ1dHRvbiB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2VmNDQ0NDsKICBjb2xvcjogI2ZmZmZmZjsKICBib3JkZXI6IG5vbmU7CiAgcGFkZGluZzogNnB4IDEycHg7CiAgYm9yZGVyLXJhZGl1czogNHB4OwogIGZvbnQtc2l6ZTogMC45cmVtOwogIGN1cnNvcjogcG9pbnRlcjsKICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZTsKfQoKI2R5bmFtaWMtbGlzdCBidXR0b246aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICNkYzI2MjY7Cn0KCiNhZGQtaXRlbSB7CiAgcGFkZGluZzogMTBweCAxNXB4OwogIGZvbnQtc2l6ZTogMXJlbTsKICBjb2xvcjogI2ZmZmZmZjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjM2I4MmY2OwogIGJvcmRlcjogbm9uZTsKICBib3JkZXItcmFkaXVzOiA2cHg7CiAgY3Vyc29yOiBwb2ludGVyOwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlOwp9CgojYWRkLWl0ZW06aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICMyNTYzZWI7Cn0=

Y29uc3QgZHluYW1pY0xpc3QgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZHluYW1pYy1saXN0Jyk7CmNvbnN0IGFkZEl0ZW1CdXR0b24gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnYWRkLWl0ZW0nKTsKbGV0IGl0ZW1Db3VudCA9IDI7CgphZGRJdGVtQnV0dG9uLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgKCkgPT4gewogIGl0ZW1Db3VudCsrOwogIGNvbnN0IG5ld0l0ZW0gPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdsaScpOwogIG5ld0l0ZW0udGV4dENvbnRlbnQgPSBgSXRlbSAke2l0ZW1Db3VudH0gYDsKCiAgY29uc3QgZGVsZXRlQnV0dG9uID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnYnV0dG9uJyk7CiAgZGVsZXRlQnV0dG9uLnRleHRDb250ZW50ID0gJ0RlbGV0ZSc7CiAgZGVsZXRlQnV0dG9uLmNsYXNzTGlzdC5hZGQoJ2RlbGV0ZS1idG4nKTsKCiAgbmV3SXRlbS5hcHBlbmRDaGlsZChkZWxldGVCdXR0b24pOwogIGR5bmFtaWNMaXN0LmFwcGVuZENoaWxkKG5ld0l0ZW0pOwp9KTsKCi8vIEV2ZW50IGRlbGVnYXRpb24gdG8gaGFuZGxlIGl0ZW0gYW5kIGRlbGV0ZSBidXR0b24gY2xpY2tzCl9fX19fLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZXZlbnQgPT4gewogIGlmIChfX19fXykgewogICAgYWxlcnQoYFlvdSBjbGlja2VkIG9uOiAke2V2ZW50LnRhcmdldC5maXJzdENoaWxkLnRleHRDb250ZW50fWApOwogIH0KCiAgaWYgKGV2ZW50LnRhcmdldC5jbGFzc0xpc3QuY29udGFpbnMoJ2RlbGV0ZS1idG4nKSkgewogICAgY29uc3QgbGlzdEl0ZW0gPSBldmVudC50YXJnZXQucGFyZW50Tm9kZTsKICAgIGR5bmFtaWNMaXN0LnJlbW92ZUNoaWxkKGxpc3RJdGVtKTsKICB9Cn0pOw==

- Utilisez `event.target.tagName === 'LI'` pour vérifier si l'élément cliqué est un `<li>`;
- Utilisez `event.target.classList.contains('delete-btn')` pour vérifier si l'élément cliqué est un bouton "Supprimer".

Y29uc3QgZHluYW1pY0xpc3QgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZHluYW1pYy1saXN0Jyk7CmNvbnN0IGFkZEl0ZW1CdXR0b24gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnYWRkLWl0ZW0nKTsKbGV0IGl0ZW1Db3VudCA9IDI7CgovLyBBZGQgbmV3IGl0ZW1zIHRvIHRoZSBsaXN0CmFkZEl0ZW1CdXR0b24uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCAoKSA9PiB7CiAgaXRlbUNvdW50Kys7CiAgY29uc3QgbmV3SXRlbSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2xpJyk7CiAgbmV3SXRlbS50ZXh0Q29udGVudCA9IGBJdGVtICR7aXRlbUNvdW50fSBgOwoKICBjb25zdCBkZWxldGVCdXR0b24gPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdidXR0b24nKTsKICBkZWxldGVCdXR0b24udGV4dENvbnRlbnQgPSAnRGVsZXRlJzsKICBkZWxldGVCdXR0b24uY2xhc3NMaXN0LmFkZCgnZGVsZXRlLWJ0bicpOwoKICBuZXdJdGVtLmFwcGVuZENoaWxkKGRlbGV0ZUJ1dHRvbik7CiAgZHluYW1pY0xpc3QuYXBwZW5kQ2hpbGQobmV3SXRlbSk7Cn0pOwoKLy8gRXZlbnQgZGVsZWdhdGlvbiB0byBoYW5kbGUgaXRlbSBhbmQgZGVsZXRlIGJ1dHRvbiBjbGlja3MKZHluYW1pY0xpc3QuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBldmVudCA9PiB7CiAgaWYgKGV2ZW50LnRhcmdldC50YWdOYW1lID09PSAnTEknKSB7CiAgICBhbGVydChgWW91IGNsaWNrZWQgb246ICR7ZXZlbnQudGFyZ2V0LmZpcnN0Q2hpbGQudGV4dENvbnRlbnR9YCk7CiAgfQoKICBpZiAoZXZlbnQudGFyZ2V0LmNsYXNzTGlzdC5jb250YWlucygnZGVsZXRlLWJ0bicpKSB7CiAgICBjb25zdCBsaXN0SXRlbSA9IGV2ZW50LnRhcmdldC5wYXJlbnROb2RlOwogICAgZHluYW1pY0xpc3QucmVtb3ZlQ2hpbGQobGlzdEl0ZW0pOwogIH0KfSk7

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.

Défi : Propagation et Délégation d'Événements

Tâche

Défi : Propagation et Délégation d'Événements

Tâche