## Compito
Stai lavorando su una pagina prodotto dove verranno visualizzate le informazioni del prodotto e sarà possibile agli utenti di attivare o disattivare lo stato di disponibilità.
1. Impostare il nome del prodotto su `"Smartphone"`;
2. Impostare il prezzo iniziale su `"499.99"`;
3. **Attivare/Disattivare lo Stato di Disponibilità Utilizzando Attributi**: Quando il pulsante viene cliccato:
   - Verificare se il `<button>` ha l'attributo `data-available`;
   - Se `data-available` è presente, rimuoverlo e aggiornare il contenuto testuale in `"Non disponibile"`.
   - Se `data-available` è assente, aggiungerlo con valore `"true"` e aggiornare il contenuto testuale in `"Disponibile"`.
4. **Visualizzare lo Stato di Disponibilità**:
   - Verificare se l'attributo `data-available` è presente sul pulsante;
   - Visualizzare `"In Stock"` in `availability-status` se `data-available` è presente, oppure `"Out of Stock"` se è assente.

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

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdBcmlhbCcsIHNhbnMtc2VyaWY7CiAgYmFja2dyb3VuZC1jb2xvcjogI2YwZjJmNTsKICBtYXJnaW46IDA7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgY29sb3I6ICMzMzM7Cn0KCiNwcm9kdWN0LW5hbWUgewogIGZvbnQtc2l6ZTogMnJlbTsKICBjb2xvcjogIzJhN2JjNzsKICBtYXJnaW4tYm90dG9tOiAxcmVtOwp9CgpwIHsKICBmb250LXNpemU6IDEuMXJlbTsKICBjb2xvcjogIzU1NTsKfQoKaW5wdXRbdHlwZT0ndGV4dCddIHsKICBwYWRkaW5nOiA1cHg7CiAgZm9udC1zaXplOiAxcmVtOwogIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7CiAgYm9yZGVyLXJhZGl1czogNHB4OwogIHdpZHRoOiAxMDBweDsKfQoKYnV0dG9uIHsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgZm9udC1zaXplOiAxcmVtOwogIG1hcmdpbi10b3A6IDEwcHg7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDRweDsKICBjb2xvcjogI2ZmZjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZDk1MzRmOwogIGN1cnNvcjogcG9pbnRlcjsKICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZTsKfQoKYnV0dG9uW2RhdGEtYXZhaWxhYmxlXSB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzVjYjg1YzsKfQoKYnV0dG9uOmhvdmVyIHsKICBvcGFjaXR5OiAwLjk7Cn0KCiNhdmFpbGFiaWxpdHktc3RhdHVzIHsKICBmb250LXdlaWdodDogYm9sZDsKICBjb2xvcjogI2Q5NTM0ZjsKfQoKYnV0dG9uW2RhdGEtYXZhaWxhYmxlXSArICNhdmFpbGFiaWxpdHktc3RhdHVzIHsKICBjb2xvcjogIzVjYjg1YzsKfQ==

Ly8gU2V0IHByb2R1Y3QgbmFtZQpjb25zdCBwcm9kdWN0TmFtZSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwcm9kdWN0LW5hbWUnKTsKcHJvZHVjdE5hbWUuX19fX18gPSAnU21hcnRwaG9uZSc7CgovLyBTZXQgcHJvZHVjdCBwcmljZQpjb25zdCBwcm9kdWN0UHJpY2UgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgncHJvZHVjdC1wcmljZScpOwpwcm9kdWN0UHJpY2UuX19fX18gPSBfX19fXzsKCi8vIFRvZ2dsZSBhdmFpbGFiaWxpdHkgc3RhdHVzIHVzaW5nIGF0dHJpYnV0ZXMKY29uc3QgYXZhaWxhYmlsaXR5U3RhdHVzID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2F2YWlsYWJpbGl0eS1zdGF0dXMnKTsKY29uc3QgYXZhaWxhYmlsaXR5QnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2F2YWlsYWJpbGl0eS1idG4nKTsKCmF2YWlsYWJpbGl0eVN0YXR1cy50ZXh0Q29udGVudCA9IGF2YWlsYWJpbGl0eUJ0bi5fX19fXygnZGF0YS1hdmFpbGFibGUnKQogID8gJ0luIFN0b2NrJwogIDogJ091dCBvZiBTdG9jayc7CgphdmFpbGFiaWxpdHlCdG4uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbiAoKSB7CiAgaWYgKGF2YWlsYWJpbGl0eUJ0bi5oYXNBdHRyaWJ1dGUoJ2RhdGEtYXZhaWxhYmxlJykpIHsKICAgIGF2YWlsYWJpbGl0eUJ0bi5fX19fXygnZGF0YS1hdmFpbGFibGUnKTsKICAgIGF2YWlsYWJpbGl0eUJ0bi5fX19fXyA9ICdVbmF2YWlsYWJsZSc7CiAgICBhdmFpbGFiaWxpdHlTdGF0dXMudGV4dENvbnRlbnQgPSAnT3V0IG9mIFN0b2NrJzsKICB9IGVsc2UgewogICAgYXZhaWxhYmlsaXR5QnRuLl9fX19fKCdkYXRhLWF2YWlsYWJsZScsICd0cnVlJyk7CiAgICBhdmFpbGFiaWxpdHlCdG4udGV4dENvbnRlbnQgPSAnQXZhaWxhYmxlJzsKICAgIGF2YWlsYWJpbGl0eVN0YXR1cy50ZXh0Q29udGVudCA9ICdJbiBTdG9jayc7CiAgfQp9KTs=

- Utilizzare `textContent` per impostare il nome del prodotto su `"Smartphone"`;
- Utilizzare `value` per impostare il prezzo iniziale su `"499.99"`.
- Utilizzare `hasAttribute` per verificare se il `<button>` ha l'attributo `data-available`;
- Se `data-available` è presente, utilizzare `removeAttribute` per rimuoverlo e aggiornare `textContent` in `"Unavailable"`;
- Se `data-available` è assente, utilizzare `setAttribute` per aggiungerlo con valore `"true"` e aggiornare `textContent` in `"Available"`.
- Utilizzare `getAttribute` per verificare se l'attributo `data-available` è presente sul pulsante.

Ly8gU2V0IHByb2R1Y3QgbmFtZSB1c2luZyB0ZXh0Q29udGVudApjb25zdCBwcm9kdWN0TmFtZSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwcm9kdWN0LW5hbWUnKTsKcHJvZHVjdE5hbWUudGV4dENvbnRlbnQgPSAnU21hcnRwaG9uZSc7CgovLyBTZXQgcHJvZHVjdCBwcmljZSB1c2luZyB2YWx1ZQpjb25zdCBwcm9kdWN0UHJpY2UgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgncHJvZHVjdC1wcmljZScpOwpwcm9kdWN0UHJpY2UudmFsdWUgPSAnNDk5Ljk5JzsKCi8vIFRvZ2dsZSBhdmFpbGFiaWxpdHkgc3RhdHVzIHVzaW5nIGF0dHJpYnV0ZXMKY29uc3QgYXZhaWxhYmlsaXR5U3RhdHVzID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2F2YWlsYWJpbGl0eS1zdGF0dXMnKTsKY29uc3QgYXZhaWxhYmlsaXR5QnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2F2YWlsYWJpbGl0eS1idG4nKTsKCmF2YWlsYWJpbGl0eVN0YXR1cy50ZXh0Q29udGVudCA9IGF2YWlsYWJpbGl0eUJ0bi5oYXNBdHRyaWJ1dGUoJ2RhdGEtYXZhaWxhYmxlJykKICA/ICdJbiBTdG9jaycKICA6ICdPdXQgb2YgU3RvY2snOwoKYXZhaWxhYmlsaXR5QnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGlmIChhdmFpbGFiaWxpdHlCdG4uaGFzQXR0cmlidXRlKCdkYXRhLWF2YWlsYWJsZScpKSB7CiAgICBhdmFpbGFiaWxpdHlCdG4ucmVtb3ZlQXR0cmlidXRlKCdkYXRhLWF2YWlsYWJsZScpOwogICAgYXZhaWxhYmlsaXR5QnRuLnRleHRDb250ZW50ID0gJ1VuYXZhaWxhYmxlJzsKICAgIGF2YWlsYWJpbGl0eVN0YXR1cy50ZXh0Q29udGVudCA9ICdPdXQgb2YgU3RvY2snOwogIH0gZWxzZSB7CiAgICBhdmFpbGFiaWxpdHlCdG4uc2V0QXR0cmlidXRlKCdkYXRhLWF2YWlsYWJsZScsICd0cnVlJyk7CiAgICBhdmFpbGFiaWxpdHlCdG4udGV4dENvbnRlbnQgPSAnQXZhaWxhYmxlJzsKICAgIGF2YWlsYWJpbGl0eVN0YXR1cy50ZXh0Q29udGVudCA9ICdJbiBTdG9jayc7CiAgfQp9KTs=

Apprendi i concetti fondamentali di JavaScript, inclusi classi, manipolazione del DOM, gestione degli eventi e programmazione asincrona. Impara a creare applicazioni web dinamiche e interattive gestendo le interazioni utente, recuperando e visualizzando dati e gestendo operazioni asincrone in modo efficiente. Attraverso una combinazione di teoria, esercizi pratici e esempi reali, questo corso fornisce le competenze pratiche necessarie per lo sviluppo web moderno.

Apprendimento dei fondamenti delle classi in JavaScript, dalle dichiarazioni di classe alla definizione di metodi che ne migliorano la funzionalità.
Esplorazione dell'uso efficace degli oggetti parametro, gestione delle proprietà private e controllo dell'accesso tramite getter e setter.
Padronanza delle proprietà statiche e dei metodi statici, oltre allo sfruttamento dell'ereditarietà delle classi tramite "extends" e "super()" per sviluppare codice scalabile e riutilizzabile.

Padronanza della manipolazione del DOM per creare applicazioni web dinamiche e interattive. Navigazione e modifica della struttura del DOM, aggiornamento dinamico dei contenuti e implementazione delle migliori pratiche per sicurezza e prestazioni. Distinzione tra proprietà e attributi per ottimizzare il codice.

Sblocca l'interattività delle tue applicazioni web padroneggiando gli eventi JavaScript. Comprendi la propagazione degli eventi, controlla il comportamento degli eventi e implementa una gestione efficiente degli eventi per le interazioni utente. Ottimizza le prestazioni con tecniche avanzate come la delega degli eventi.

Approfondimento su JavaScript asincrono, inclusi callback, Promises e async/await. Studio delle tecniche per recuperare dati da API, integrare librerie di terze parti e gestire più richieste in modo efficiente, sviluppando competenze per la creazione di applicazioni basate sui dati.

Sfida: Gestione delle Proprietà e degli Attributi degli Elementi

Compito

Sfida: Gestione delle Proprietà e degli Attributi degli Elementi

Compito