## Tarea
Se está trabajando en una página de producto donde se mostrará la información del producto y se permitirá a los usuarios alternar el estado de disponibilidad.
1. Establecer el nombre del producto como `"Smartphone"`;
2. Establecer el precio inicial en `"499.99"`;
3. **Alternar el estado de disponibilidad usando atributos**: Cuando se haga clic en el botón:
   - Comprobar si el `<button>` tiene el atributo `data-available`;
   - Si `data-available` está presente, eliminarlo y actualizar el contenido de texto a `"Unavailable"`.
   - Si `data-available` está ausente, agregarlo con el valor `"true"` y actualizar el contenido de texto a `"Available"`.
4. **Mostrar el estado de disponibilidad**:
   - Comprobar si el atributo `data-available` está presente en el botón;
   - Mostrar `"In Stock"` en `availability-status` si `data-available` está presente, o `"Out of Stock"` si está ausente.

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

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdBcmlhbCcsIHNhbnMtc2VyaWY7CiAgYmFja2dyb3VuZC1jb2xvcjogI2YwZjJmNTsKICBtYXJnaW46IDA7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgY29sb3I6ICMzMzM7Cn0KCiNwcm9kdWN0LW5hbWUgewogIGZvbnQtc2l6ZTogMnJlbTsKICBjb2xvcjogIzJhN2JjNzsKICBtYXJnaW4tYm90dG9tOiAxcmVtOwp9CgpwIHsKICBmb250LXNpemU6IDEuMXJlbTsKICBjb2xvcjogIzU1NTsKfQoKaW5wdXRbdHlwZT0ndGV4dCddIHsKICBwYWRkaW5nOiA1cHg7CiAgZm9udC1zaXplOiAxcmVtOwogIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7CiAgYm9yZGVyLXJhZGl1czogNHB4OwogIHdpZHRoOiAxMDBweDsKfQoKYnV0dG9uIHsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgZm9udC1zaXplOiAxcmVtOwogIG1hcmdpbi10b3A6IDEwcHg7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDRweDsKICBjb2xvcjogI2ZmZjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZDk1MzRmOwogIGN1cnNvcjogcG9pbnRlcjsKICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZTsKfQoKYnV0dG9uW2RhdGEtYXZhaWxhYmxlXSB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzVjYjg1YzsKfQoKYnV0dG9uOmhvdmVyIHsKICBvcGFjaXR5OiAwLjk7Cn0KCiNhdmFpbGFiaWxpdHktc3RhdHVzIHsKICBmb250LXdlaWdodDogYm9sZDsKICBjb2xvcjogI2Q5NTM0ZjsKfQoKYnV0dG9uW2RhdGEtYXZhaWxhYmxlXSArICNhdmFpbGFiaWxpdHktc3RhdHVzIHsKICBjb2xvcjogIzVjYjg1YzsKfQ==

Ly8gU2V0IHByb2R1Y3QgbmFtZQpjb25zdCBwcm9kdWN0TmFtZSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwcm9kdWN0LW5hbWUnKTsKcHJvZHVjdE5hbWUuX19fX18gPSAnU21hcnRwaG9uZSc7CgovLyBTZXQgcHJvZHVjdCBwcmljZQpjb25zdCBwcm9kdWN0UHJpY2UgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgncHJvZHVjdC1wcmljZScpOwpwcm9kdWN0UHJpY2UuX19fX18gPSBfX19fXzsKCi8vIFRvZ2dsZSBhdmFpbGFiaWxpdHkgc3RhdHVzIHVzaW5nIGF0dHJpYnV0ZXMKY29uc3QgYXZhaWxhYmlsaXR5U3RhdHVzID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2F2YWlsYWJpbGl0eS1zdGF0dXMnKTsKY29uc3QgYXZhaWxhYmlsaXR5QnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2F2YWlsYWJpbGl0eS1idG4nKTsKCmF2YWlsYWJpbGl0eVN0YXR1cy50ZXh0Q29udGVudCA9IGF2YWlsYWJpbGl0eUJ0bi5fX19fXygnZGF0YS1hdmFpbGFibGUnKQogID8gJ0luIFN0b2NrJwogIDogJ091dCBvZiBTdG9jayc7CgphdmFpbGFiaWxpdHlCdG4uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbiAoKSB7CiAgaWYgKGF2YWlsYWJpbGl0eUJ0bi5oYXNBdHRyaWJ1dGUoJ2RhdGEtYXZhaWxhYmxlJykpIHsKICAgIGF2YWlsYWJpbGl0eUJ0bi5fX19fXygnZGF0YS1hdmFpbGFibGUnKTsKICAgIGF2YWlsYWJpbGl0eUJ0bi5fX19fXyA9ICdVbmF2YWlsYWJsZSc7CiAgICBhdmFpbGFiaWxpdHlTdGF0dXMudGV4dENvbnRlbnQgPSAnT3V0IG9mIFN0b2NrJzsKICB9IGVsc2UgewogICAgYXZhaWxhYmlsaXR5QnRuLl9fX19fKCdkYXRhLWF2YWlsYWJsZScsICd0cnVlJyk7CiAgICBhdmFpbGFiaWxpdHlCdG4udGV4dENvbnRlbnQgPSAnQXZhaWxhYmxlJzsKICAgIGF2YWlsYWJpbGl0eVN0YXR1cy50ZXh0Q29udGVudCA9ICdJbiBTdG9jayc7CiAgfQp9KTs=

- Utilizar `textContent` para establecer el nombre del producto como `"Smartphone"`;
- Utilizar `value` para establecer el precio inicial en `"499.99"`.
- Utilizar `hasAttribute` para comprobar si el `<button>` tiene el atributo `data-available`;
- Si `data-available` está presente, utilizar `removeAttribute` para eliminarlo y actualizar `textContent` a `"Unavailable"`;
- Si `data-available` está ausente, utilizar `setAttribute` para agregarlo con el valor `"true"` y actualizar `textContent` a `"Available"`.
- Utilizar `getAttribute` para comprobar si el atributo `data-available` está presente en el botón.

Ly8gU2V0IHByb2R1Y3QgbmFtZSB1c2luZyB0ZXh0Q29udGVudApjb25zdCBwcm9kdWN0TmFtZSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwcm9kdWN0LW5hbWUnKTsKcHJvZHVjdE5hbWUudGV4dENvbnRlbnQgPSAnU21hcnRwaG9uZSc7CgovLyBTZXQgcHJvZHVjdCBwcmljZSB1c2luZyB2YWx1ZQpjb25zdCBwcm9kdWN0UHJpY2UgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgncHJvZHVjdC1wcmljZScpOwpwcm9kdWN0UHJpY2UudmFsdWUgPSAnNDk5Ljk5JzsKCi8vIFRvZ2dsZSBhdmFpbGFiaWxpdHkgc3RhdHVzIHVzaW5nIGF0dHJpYnV0ZXMKY29uc3QgYXZhaWxhYmlsaXR5U3RhdHVzID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2F2YWlsYWJpbGl0eS1zdGF0dXMnKTsKY29uc3QgYXZhaWxhYmlsaXR5QnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2F2YWlsYWJpbGl0eS1idG4nKTsKCmF2YWlsYWJpbGl0eVN0YXR1cy50ZXh0Q29udGVudCA9IGF2YWlsYWJpbGl0eUJ0bi5oYXNBdHRyaWJ1dGUoJ2RhdGEtYXZhaWxhYmxlJykKICA/ICdJbiBTdG9jaycKICA6ICdPdXQgb2YgU3RvY2snOwoKYXZhaWxhYmlsaXR5QnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGlmIChhdmFpbGFiaWxpdHlCdG4uaGFzQXR0cmlidXRlKCdkYXRhLWF2YWlsYWJsZScpKSB7CiAgICBhdmFpbGFiaWxpdHlCdG4ucmVtb3ZlQXR0cmlidXRlKCdkYXRhLWF2YWlsYWJsZScpOwogICAgYXZhaWxhYmlsaXR5QnRuLnRleHRDb250ZW50ID0gJ1VuYXZhaWxhYmxlJzsKICAgIGF2YWlsYWJpbGl0eVN0YXR1cy50ZXh0Q29udGVudCA9ICdPdXQgb2YgU3RvY2snOwogIH0gZWxzZSB7CiAgICBhdmFpbGFiaWxpdHlCdG4uc2V0QXR0cmlidXRlKCdkYXRhLWF2YWlsYWJsZScsICd0cnVlJyk7CiAgICBhdmFpbGFiaWxpdHlCdG4udGV4dENvbnRlbnQgPSAnQXZhaWxhYmxlJzsKICAgIGF2YWlsYWJpbGl0eVN0YXR1cy50ZXh0Q29udGVudCA9ICdJbiBTdG9jayc7CiAgfQp9KTs=

Domina los conceptos esenciales de JavaScript, incluyendo clases, manipulación del DOM, manejo de eventos y programación asíncrona. Aprende a crear aplicaciones web dinámicas e interactivas gestionando interacciones de usuario, obteniendo y mostrando datos, y manejando operaciones asíncronas de manera eficiente. A través de una combinación de teoría, desafíos prácticos y ejemplos del mundo real, este curso te proporciona las habilidades prácticas necesarias para el desarrollo web moderno.

Aprenda los fundamentos de las clases en JavaScript, desde las declaraciones de clases hasta la definición de métodos que mejoran la funcionalidad. Descubra cómo utilizar objetos de parámetros de manera eficaz, gestionar propiedades privadas y controlar el acceso mediante getters y setters. Domine las propiedades y métodos estáticos y aproveche el poder de la herencia de clases utilizando "extends" y "super()" para construir código escalable y reutilizable.

Domina la manipulación del DOM para crear aplicaciones web dinámicas e interactivas. Navega y modifica la estructura del DOM, actualiza el contenido de forma dinámica e implementa las mejores prácticas de seguridad y rendimiento. Diferencia entre propiedades y atributos para optimizar tu código.

Desbloquee la interactividad de sus aplicaciones web dominando los eventos en JavaScript. Comprenda la propagación de eventos, controle el comportamiento de los eventos e implemente una gestión eficiente de eventos para las interacciones de usuario. Optimice el rendimiento con técnicas avanzadas como la delegación de eventos.

Profundización en JavaScript asíncrono, incluyendo callbacks, Promesas y async/await. Estudio de la obtención de datos desde APIs, integración de bibliotecas de terceros y gestión eficiente de múltiples solicitudes, desarrollando habilidades para crear aplicaciones orientadas a datos.

Desafío: Gestionar Propiedades y Atributos de Elementos

Tarea

Desafío: Gestionar Propiedades y Atributos de Elementos

Tarea