## Tâche
Vous travaillez sur une page produit où vous afficherez les informations du produit et permettrez aux utilisateurs de basculer le statut de disponibilité. 
1. Définissez le nom du produit sur `"Smartphone"`;
2. Définissez le prix initial à `"499.99"`;
3. **Basculer le statut de disponibilité à l'aide des attributs** : Lorsque le bouton est cliqué :
   - Vérifiez si le `<button>` a l'attribut `data-available`;
   - Si `data-available` est présent, supprimez-le et mettez à jour le contenu du texte à `"Indisponible"`.
   - Si `data-available` est absent, ajoutez-le avec une valeur de `"true"` et mettez à jour le contenu du texte à `"Disponible"`.
4. **Afficher le statut de disponibilité** :
   - Vérifiez si l'attribut `data-available` est présent sur le bouton;
   - Affichez `"En Stock"` dans `availability-status` si `data-available` est présent, ou `"Rupture de Stock"` s'il est absent.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgxIGlkPSJwcm9kdWN0LW5hbWUiPjwvaDE+CiAgICA8cD5QcmljZTogJDxpbnB1dCB0eXBlPSJ0ZXh0IiBpZD0icHJvZHVjdC1wcmljZSIgLz48L3A+CiAgICA8YnV0dG9uIGlkPSJhdmFpbGFiaWxpdHktYnRuIj5VbmF2YWlsYWJsZTwvYnV0dG9uPgogICAgPHA+U3RhdHVzOiA8c3BhbiBpZD0iYXZhaWxhYmlsaXR5LXN0YXR1cyI+PC9zcGFuPjwvcD4KICAgIDxzY3JpcHQgc3JjPSJpbmRleC5qcyI+PC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdBcmlhbCcsIHNhbnMtc2VyaWY7CiAgYmFja2dyb3VuZC1jb2xvcjogI2YwZjJmNTsKICBtYXJnaW46IDA7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgY29sb3I6ICMzMzM7Cn0KCiNwcm9kdWN0LW5hbWUgewogIGZvbnQtc2l6ZTogMnJlbTsKICBjb2xvcjogIzJhN2JjNzsKICBtYXJnaW4tYm90dG9tOiAxcmVtOwp9CgpwIHsKICBmb250LXNpemU6IDEuMXJlbTsKICBjb2xvcjogIzU1NTsKfQoKaW5wdXRbdHlwZT0ndGV4dCddIHsKICBwYWRkaW5nOiA1cHg7CiAgZm9udC1zaXplOiAxcmVtOwogIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7CiAgYm9yZGVyLXJhZGl1czogNHB4OwogIHdpZHRoOiAxMDBweDsKfQoKYnV0dG9uIHsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgZm9udC1zaXplOiAxcmVtOwogIG1hcmdpbi10b3A6IDEwcHg7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDRweDsKICBjb2xvcjogI2ZmZjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZDk1MzRmOwogIGN1cnNvcjogcG9pbnRlcjsKICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZTsKfQoKYnV0dG9uW2RhdGEtYXZhaWxhYmxlXSB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzVjYjg1YzsKfQoKYnV0dG9uOmhvdmVyIHsKICBvcGFjaXR5OiAwLjk7Cn0KCiNhdmFpbGFiaWxpdHktc3RhdHVzIHsKICBmb250LXdlaWdodDogYm9sZDsKICBjb2xvcjogI2Q5NTM0ZjsKfQoKYnV0dG9uW2RhdGEtYXZhaWxhYmxlXSArICNhdmFpbGFiaWxpdHktc3RhdHVzIHsKICBjb2xvcjogIzVjYjg1YzsKfQ==

Ly8gU2V0IHByb2R1Y3QgbmFtZQpjb25zdCBwcm9kdWN0TmFtZSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwcm9kdWN0LW5hbWUnKTsKcHJvZHVjdE5hbWUuX19fX18gPSAnU21hcnRwaG9uZSc7CgovLyBTZXQgcHJvZHVjdCBwcmljZQpjb25zdCBwcm9kdWN0UHJpY2UgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgncHJvZHVjdC1wcmljZScpOwpwcm9kdWN0UHJpY2UuX19fX18gPSBfX19fXzsKCi8vIFRvZ2dsZSBhdmFpbGFiaWxpdHkgc3RhdHVzIHVzaW5nIGF0dHJpYnV0ZXMKY29uc3QgYXZhaWxhYmlsaXR5U3RhdHVzID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2F2YWlsYWJpbGl0eS1zdGF0dXMnKTsKY29uc3QgYXZhaWxhYmlsaXR5QnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2F2YWlsYWJpbGl0eS1idG4nKTsKCmF2YWlsYWJpbGl0eVN0YXR1cy50ZXh0Q29udGVudCA9IGF2YWlsYWJpbGl0eUJ0bi5fX19fXygnZGF0YS1hdmFpbGFibGUnKQogID8gJ0luIFN0b2NrJwogIDogJ091dCBvZiBTdG9jayc7CgphdmFpbGFiaWxpdHlCdG4uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbiAoKSB7CiAgaWYgKGF2YWlsYWJpbGl0eUJ0bi5oYXNBdHRyaWJ1dGUoJ2RhdGEtYXZhaWxhYmxlJykpIHsKICAgIGF2YWlsYWJpbGl0eUJ0bi5fX19fXygnZGF0YS1hdmFpbGFibGUnKTsKICAgIGF2YWlsYWJpbGl0eUJ0bi5fX19fXyA9ICdVbmF2YWlsYWJsZSc7CiAgICBhdmFpbGFiaWxpdHlTdGF0dXMudGV4dENvbnRlbnQgPSAnT3V0IG9mIFN0b2NrJzsKICB9IGVsc2UgewogICAgYXZhaWxhYmlsaXR5QnRuLl9fX19fKCdkYXRhLWF2YWlsYWJsZScsICd0cnVlJyk7CiAgICBhdmFpbGFiaWxpdHlCdG4udGV4dENvbnRlbnQgPSAnQXZhaWxhYmxlJzsKICAgIGF2YWlsYWJpbGl0eVN0YXR1cy50ZXh0Q29udGVudCA9ICdJbiBTdG9jayc7CiAgfQp9KTs=

- Utilisez `textContent` pour définir le nom du produit sur `"Smartphone"`;
- Utilisez `value` pour définir le prix initial à `"499.99"`.
- Utilisez `hasAttribute` pour vérifier si le `<button>` a l'attribut `data-available`;
- Si `data-available` est présent, utilisez `removeAttribute` pour le supprimer et mettez à jour `textContent` à `"Unavailable"`;
- Si `data-available` est absent, utilisez `setAttribute` pour l'ajouter avec une valeur de `"true"` et mettez à jour `textContent` à `"Available"`.
- Utilisez `getAttribute` pour vérifier si l'attribut `data-available` est présent sur le bouton.

Ly8gU2V0IHByb2R1Y3QgbmFtZSB1c2luZyB0ZXh0Q29udGVudApjb25zdCBwcm9kdWN0TmFtZSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwcm9kdWN0LW5hbWUnKTsKcHJvZHVjdE5hbWUudGV4dENvbnRlbnQgPSAnU21hcnRwaG9uZSc7CgovLyBTZXQgcHJvZHVjdCBwcmljZSB1c2luZyB2YWx1ZQpjb25zdCBwcm9kdWN0UHJpY2UgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgncHJvZHVjdC1wcmljZScpOwpwcm9kdWN0UHJpY2UudmFsdWUgPSAnNDk5Ljk5JzsKCi8vIFRvZ2dsZSBhdmFpbGFiaWxpdHkgc3RhdHVzIHVzaW5nIGF0dHJpYnV0ZXMKY29uc3QgYXZhaWxhYmlsaXR5U3RhdHVzID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2F2YWlsYWJpbGl0eS1zdGF0dXMnKTsKY29uc3QgYXZhaWxhYmlsaXR5QnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2F2YWlsYWJpbGl0eS1idG4nKTsKCmF2YWlsYWJpbGl0eVN0YXR1cy50ZXh0Q29udGVudCA9IGF2YWlsYWJpbGl0eUJ0bi5oYXNBdHRyaWJ1dGUoJ2RhdGEtYXZhaWxhYmxlJykKICA/ICdJbiBTdG9jaycKICA6ICdPdXQgb2YgU3RvY2snOwoKYXZhaWxhYmlsaXR5QnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGlmIChhdmFpbGFiaWxpdHlCdG4uaGFzQXR0cmlidXRlKCdkYXRhLWF2YWlsYWJsZScpKSB7CiAgICBhdmFpbGFiaWxpdHlCdG4ucmVtb3ZlQXR0cmlidXRlKCdkYXRhLWF2YWlsYWJsZScpOwogICAgYXZhaWxhYmlsaXR5QnRuLnRleHRDb250ZW50ID0gJ1VuYXZhaWxhYmxlJzsKICAgIGF2YWlsYWJpbGl0eVN0YXR1cy50ZXh0Q29udGVudCA9ICdPdXQgb2YgU3RvY2snOwogIH0gZWxzZSB7CiAgICBhdmFpbGFiaWxpdHlCdG4uc2V0QXR0cmlidXRlKCdkYXRhLWF2YWlsYWJsZScsICd0cnVlJyk7CiAgICBhdmFpbGFiaWxpdHlCdG4udGV4dENvbnRlbnQgPSAnQXZhaWxhYmxlJzsKICAgIGF2YWlsYWJpbGl0eVN0YXR1cy50ZXh0Q29udGVudCA9ICdJbiBTdG9jayc7CiAgfQp9KTs=

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 : Travailler Avec les Propriétés et Attributs des Éléments

Tâche

Awesome!

Défi : Travailler Avec les Propriétés et Attributs des Éléments

Tâche