## Compito
Hai una semplice lista di attività in HTML. L'obiettivo è navigare nella gerarchia del DOM utilizzando proprietà come `parentNode`, `childNodes`, `firstChild`, `lastChild`, `previousSibling` e `nextSibling` per comprenderne il comportamento e come accedono ai diversi nodi.
1. **Accedere al nodo genitore**: Viene selezionato l'elemento `<li>` con l'ID `current-task`. Accedere al suo elemento genitore `<ul>`;
2. **Accedere a tutti i nodi figli**: Recuperare tutti i nodi figli, inclusi i nodi di testo (come gli spazi bianchi);
3. **Accedere al primo e all'ultimo nodo figlio**:
   - Accedere al primo nodo figlio del genitore `<ul>`;
   - Accedere all'ultimo nodo figlio del genitore `<ul>`.
4. **Navigare tra i nodi fratelli**:
   - Accedere al nodo fratello precedente di `current-task`;
   - Accedere al nodo fratello successivo di `current-task`.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHVsIGlkPSJ0YXNrLWxpc3QiPgogICAgICA8bGkgY2xhc3M9InRhc2staXRlbSI+UHJlcGFyZSBwcmVzZW50YXRpb248L2xpPgogICAgICA8bGkgY2xhc3M9InRhc2staXRlbSI+V3JpdGUgcmVwb3J0PC9saT4KICAgICAgPGxpIGlkPSJjdXJyZW50LXRhc2siIGNsYXNzPSJ0YXNrLWl0ZW0iPlJldmlldyBwcm9qZWN0PC9saT4KICAgICAgPGxpIGNsYXNzPSJ0YXNrLWl0ZW0iPlN1Ym1pdCBmZWVkYmFjazwvbGk+CiAgICAgIDxsaSBjbGFzcz0idGFzay1pdGVtIj5QbGFuIG5leHQgc3RlcHM8L2xpPgogICAgPC91bD4KICAgIDwhLS0gRGlzcGxheSBSZXN1bHRzIC0tPgogICAgPGRpdj4KICAgICAgPHAgaWQ9InBhcmVudC1ub2RlLWluZm8iPjwvcD4KICAgICAgPHAgaWQ9ImNoaWxkLW5vZGVzLWNvdW50Ij48L3A+CiAgICAgIDxwIGlkPSJmaXJzdC1jaGlsZC1pbmZvIj48L3A+CiAgICAgIDxwIGlkPSJsYXN0LWNoaWxkLWluZm8iPjwvcD4KICAgICAgPHAgaWQ9InByZXZpb3VzLXNpYmxpbmctaW5mbyI+PC9wPgogICAgICA8cCBpZD0ibmV4dC1zaWJsaW5nLWluZm8iPjwvcD4KICAgIDwvZGl2PgogICAgPHNjcmlwdCBzcmM9ImluZGV4LmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdSb2JvdG8nLCBzYW5zLXNlcmlmOwogIGJhY2tncm91bmQtY29sb3I6ICNmNGY3ZmI7CiAgbWFyZ2luOiAwOwogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIHBhZGRpbmc6IDIwcHg7CiAgY29sb3I6ICMzMzM7Cn0KCiN0YXNrLWxpc3QgewogIGxpc3Qtc3R5bGUtdHlwZTogbm9uZTsKICBwYWRkaW5nOiAwOwogIG1hcmdpbjogMjBweCAwOwogIHdpZHRoOiAzNTBweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmZmZmOwogIGJveC1zaGFkb3c6IDAgNHB4IDEycHggcmdiYSgwLCAwLCAwLCAwLjEpOwogIGJvcmRlci1yYWRpdXM6IDhweDsKfQoKLnRhc2staXRlbSB7CiAgcGFkZGluZzogMTVweDsKICBmb250LXNpemU6IDFyZW07CiAgY29sb3I6ICM1YTVhNWE7CiAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICNlMmU1ZWM7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2UsIGNvbG9yIDAuM3MgZWFzZTsKfQoKLnRhc2staXRlbTpsYXN0LWNoaWxkIHsKICBib3JkZXItYm90dG9tOiBub25lOwp9CgoudGFzay1pdGVtOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZWFmMmY4OwogIGNvbG9yOiAjMmQ3YWJmOwp9CgojY3VycmVudC10YXNrIHsKICBmb250LXdlaWdodDogYm9sZDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZDdlOGZjOwogIGNvbG9yOiAjMmQ3YWJmOwp9CgpkaXYgewogIGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7CiAgcGFkZGluZzogMjBweDsKICB3aWR0aDogMzUwcHg7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIGJveC1zaGFkb3c6IDAgNHB4IDEycHggcmdiYSgwLCAwLCAwLCAwLjEpOwogIG1hcmdpbi10b3A6IDIwcHg7CiAgY29sb3I6ICM0YTRhNGE7Cn0KCnAgewogIGZvbnQtc2l6ZTogMC45NXJlbTsKICBtYXJnaW46IDEwcHggMDsKfQoKI3BhcmVudC1ub2RlLWluZm8gewogIGNvbG9yOiAjMTdhMmI4Owp9CgojY2hpbGQtbm9kZXMtY291bnQgewogIGNvbG9yOiAjZmZjMTA3Owp9CgojZmlyc3QtY2hpbGQtaW5mbyB7CiAgY29sb3I6ICMyOGE3NDU7Cn0KCiNsYXN0LWNoaWxkLWluZm8gewogIGNvbG9yOiAjZGMzNTQ1Owp9CgojcHJldmlvdXMtc2libGluZy1pbmZvIHsKICBjb2xvcjogIzZmNDJjMTsKfQoKI25leHQtc2libGluZy1pbmZvIHsKICBjb2xvcjogI2ZkN2UxNDsKfQ==

Ly8gQWNjZXNzIHRoZSBwYXJlbnQgbm9kZQpjb25zdCBjdXJyZW50VGFzayA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjdXJyZW50LXRhc2snKTsKY29uc3QgcGFyZW50RWwgPSBjdXJyZW50VGFzay5fX19fXzsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ3BhcmVudC1ub2RlLWluZm8nCikudGV4dENvbnRlbnQgPSBgUGFyZW50IG5vZGUgdGFnOiAke3BhcmVudEVsLnRhZ05hbWV9YDsKCi8vIEFjY2VzcyBhbGwgY2hpbGQgbm9kZXMKY29uc3QgY2hpbGROb2RlcyA9IHBhcmVudEVsLl9fX19fOwpkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgKICAnY2hpbGQtbm9kZXMtY291bnQnCikudGV4dENvbnRlbnQgPSBgVG90YWwgY2hpbGQgbm9kZXM6ICR7Y2hpbGROb2Rlcy5sZW5ndGh9YDsKCi8vIEFjY2VzcyB0aGUgRmlyc3QgYW5kIExhc3QgQ2hpbGQgTm9kZXMKY29uc3QgZmlyc3RFbGVtZW50Q2hpbGQgPSBwYXJlbnRFbC5fX19fXzsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ2ZpcnN0LWNoaWxkLWluZm8nCikudGV4dENvbnRlbnQgPSBgRmlyc3QgZWxlbWVudCBjaGlsZCB0ZXh0OiAke2ZpcnN0RWxlbWVudENoaWxkLnRleHRDb250ZW50fWA7Cgpjb25zdCBsYXN0RWxlbWVudENoaWxkID0gcGFyZW50RWwuX19fX187CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKAogICdsYXN0LWNoaWxkLWluZm8nCikudGV4dENvbnRlbnQgPSBgTGFzdCBlbGVtZW50IGNoaWxkIHRleHQ6ICR7bGFzdEVsZW1lbnRDaGlsZC50ZXh0Q29udGVudH1gOwoKLy8gTmF2aWdhdGUgdG8gU2libGluZyBOb2Rlcwpjb25zdCBwcmV2aW91c0VsZW1lbnRTaWJsaW5nID0gY3VycmVudFRhc2suX19fX187CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwcmV2aW91cy1zaWJsaW5nLWluZm8nKS50ZXh0Q29udGVudCA9CiAgcHJldmlvdXNFbGVtZW50U2libGluZwogICAgPyBgUHJldmlvdXMgZWxlbWVudCBzaWJsaW5nIHRleHQ6ICR7cHJldmlvdXNFbGVtZW50U2libGluZy50ZXh0Q29udGVudH1gCiAgICA6ICdObyBwcmV2aW91cyBlbGVtZW50IHNpYmxpbmcnOwoKY29uc3QgbmV4dEVsZW1lbnRTaWJsaW5nID0gY3VycmVudFRhc2suX19fX187CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCduZXh0LXNpYmxpbmctaW5mbycpLnRleHRDb250ZW50ID0gbmV4dEVsZW1lbnRTaWJsaW5nCiAgPyBgTmV4dCBlbGVtZW50IHNpYmxpbmcgdGV4dDogJHtuZXh0RWxlbWVudFNpYmxpbmcudGV4dENvbnRlbnR9YAogIDogJ05vIG5leHQgZWxlbWVudCBzaWJsaW5nJzs=

- Utilizzare `parentNode` per accedere al suo elemento genitore `<ul>`.
- Utilizzare `childNodes` sul genitore `<ul>` per recuperare tutti i nodi figli, inclusi i nodi di testo (come gli spazi bianchi);
- Utilizzare `firstChild` sul genitore `<ul>` per accedere al primo nodo figlio;
- Utilizzare `lastChild` sul genitore `<ul>` per accedere all'ultimo nodo figlio;
- Utilizzare `previousSibling` su `current-task` per accedere al suo nodo fratello precedente;
- Utilizzare `nextSibling` su `current-task` per accedere al suo nodo fratello successivo.

Ly8gQWNjZXNzIHRoZSBwYXJlbnQgbm9kZQpjb25zdCBjdXJyZW50VGFzayA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjdXJyZW50LXRhc2snKTsKY29uc3QgcGFyZW50RWwgPSBjdXJyZW50VGFzay5wYXJlbnROb2RlOwpkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgKICAncGFyZW50LW5vZGUtaW5mbycKKS50ZXh0Q29udGVudCA9IGBQYXJlbnQgbm9kZSB0YWc6ICR7cGFyZW50RWwudGFnTmFtZX1gOwoKLy8gQWNjZXNzIGFsbCBjaGlsZCBub2Rlcwpjb25zdCBjaGlsZE5vZGVzID0gcGFyZW50RWwuY2hpbGROb2RlczsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ2NoaWxkLW5vZGVzLWNvdW50JwopLnRleHRDb250ZW50ID0gYFRvdGFsIGNoaWxkIG5vZGVzOiAke2NoaWxkTm9kZXMubGVuZ3RofWA7CgovLyBBY2Nlc3MgdGhlIEZpcnN0IGFuZCBMYXN0IENoaWxkIE5vZGVzCmNvbnN0IGZpcnN0RWxlbWVudENoaWxkID0gcGFyZW50RWwuZmlyc3RFbGVtZW50Q2hpbGQ7CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKAogICdmaXJzdC1jaGlsZC1pbmZvJwopLnRleHRDb250ZW50ID0gYEZpcnN0IGVsZW1lbnQgY2hpbGQgdGV4dDogJHtmaXJzdEVsZW1lbnRDaGlsZC50ZXh0Q29udGVudH1gOwoKY29uc3QgbGFzdEVsZW1lbnRDaGlsZCA9IHBhcmVudEVsLmxhc3RFbGVtZW50Q2hpbGQ7CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKAogICdsYXN0LWNoaWxkLWluZm8nCikudGV4dENvbnRlbnQgPSBgTGFzdCBlbGVtZW50IGNoaWxkIHRleHQ6ICR7bGFzdEVsZW1lbnRDaGlsZC50ZXh0Q29udGVudH1gOwoKLy8gTmF2aWdhdGUgdG8gU2libGluZyBOb2Rlcwpjb25zdCBwcmV2aW91c0VsZW1lbnRTaWJsaW5nID0gY3VycmVudFRhc2sucHJldmlvdXNFbGVtZW50U2libGluZzsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3ByZXZpb3VzLXNpYmxpbmctaW5mbycpLnRleHRDb250ZW50ID0KICBwcmV2aW91c0VsZW1lbnRTaWJsaW5nCiAgICA/IGBQcmV2aW91cyBlbGVtZW50IHNpYmxpbmcgdGV4dDogJHtwcmV2aW91c0VsZW1lbnRTaWJsaW5nLnRleHRDb250ZW50fWAKICAgIDogJ05vIHByZXZpb3VzIGVsZW1lbnQgc2libGluZyc7Cgpjb25zdCBuZXh0RWxlbWVudFNpYmxpbmcgPSBjdXJyZW50VGFzay5uZXh0RWxlbWVudFNpYmxpbmc7CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCduZXh0LXNpYmxpbmctaW5mbycpLnRleHRDb250ZW50ID0gbmV4dEVsZW1lbnRTaWJsaW5nCiAgPyBgTmV4dCBlbGVtZW50IHNpYmxpbmcgdGV4dDogJHtuZXh0RWxlbWVudFNpYmxpbmcudGV4dENvbnRlbnR9YAogIDogJ05vIG5leHQgZWxlbWVudCBzaWJsaW5nJzs=

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: Navigare la Gerarchia del DOM

Compito

Sfida: Navigare la Gerarchia del DOM

Compito