## Tehtävä
Sinulla on yksinkertainen tehtävälista HTML-muodossa. Tavoitteena on navigoida DOM-hierarkiassa käyttämällä ominaisuuksia kuten `parentNode`, `childNodes`, `firstChild`, `lastChild`, `previousSibling` ja `nextSibling` ymmärtääksesi niiden toimintaa ja miten ne hakevat eri solmuja.
1. **Pääsolmun hakeminen**: Valitse `<li>`-elementti, jonka ID on `current-task`. Hae sen ylätason `<ul>`-elementti;
2. **Kaikkien lapsisolmujen hakeminen**: Hae kaikki lapsisolmut, mukaan lukien tekstisolmut (esim. välilyönnit);
3. **Ensimmäisen ja viimeisen lapsisolmun hakeminen**:
   - Hae ensimmäinen lapsisolmu ylätason `<ul>`-elementistä;
   - Hae viimeinen lapsisolmu ylätason `<ul>`-elementistä.
4. **Siirtyminen sisarelementteihin**:
   - Hae edellinen sisarsolmu `current-task`-elementistä;
   - Hae seuraava sisarsolmu `current-task`-elementistä.

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

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdSb2JvdG8nLCBzYW5zLXNlcmlmOwogIGJhY2tncm91bmQtY29sb3I6ICNmNGY3ZmI7CiAgbWFyZ2luOiAwOwogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIHBhZGRpbmc6IDIwcHg7CiAgY29sb3I6ICMzMzM7Cn0KCiN0YXNrLWxpc3QgewogIGxpc3Qtc3R5bGUtdHlwZTogbm9uZTsKICBwYWRkaW5nOiAwOwogIG1hcmdpbjogMjBweCAwOwogIHdpZHRoOiAzNTBweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmZmZmOwogIGJveC1zaGFkb3c6IDAgNHB4IDEycHggcmdiYSgwLCAwLCAwLCAwLjEpOwogIGJvcmRlci1yYWRpdXM6IDhweDsKfQoKLnRhc2staXRlbSB7CiAgcGFkZGluZzogMTVweDsKICBmb250LXNpemU6IDFyZW07CiAgY29sb3I6ICM1YTVhNWE7CiAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICNlMmU1ZWM7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2UsIGNvbG9yIDAuM3MgZWFzZTsKfQoKLnRhc2staXRlbTpsYXN0LWNoaWxkIHsKICBib3JkZXItYm90dG9tOiBub25lOwp9CgoudGFzay1pdGVtOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZWFmMmY4OwogIGNvbG9yOiAjMmQ3YWJmOwp9CgojY3VycmVudC10YXNrIHsKICBmb250LXdlaWdodDogYm9sZDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZDdlOGZjOwogIGNvbG9yOiAjMmQ3YWJmOwp9CgpkaXYgewogIGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7CiAgcGFkZGluZzogMjBweDsKICB3aWR0aDogMzUwcHg7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIGJveC1zaGFkb3c6IDAgNHB4IDEycHggcmdiYSgwLCAwLCAwLCAwLjEpOwogIG1hcmdpbi10b3A6IDIwcHg7CiAgY29sb3I6ICM0YTRhNGE7Cn0KCnAgewogIGZvbnQtc2l6ZTogMC45NXJlbTsKICBtYXJnaW46IDEwcHggMDsKfQoKI3BhcmVudC1ub2RlLWluZm8gewogIGNvbG9yOiAjMTdhMmI4Owp9CgojY2hpbGQtbm9kZXMtY291bnQgewogIGNvbG9yOiAjZmZjMTA3Owp9CgojZmlyc3QtY2hpbGQtaW5mbyB7CiAgY29sb3I6ICMyOGE3NDU7Cn0KCiNsYXN0LWNoaWxkLWluZm8gewogIGNvbG9yOiAjZGMzNTQ1Owp9CgojcHJldmlvdXMtc2libGluZy1pbmZvIHsKICBjb2xvcjogIzZmNDJjMTsKfQoKI25leHQtc2libGluZy1pbmZvIHsKICBjb2xvcjogI2ZkN2UxNDsKfQ==

Ly8gQWNjZXNzIHRoZSBwYXJlbnQgbm9kZQpjb25zdCBjdXJyZW50VGFzayA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjdXJyZW50LXRhc2snKTsKY29uc3QgcGFyZW50RWwgPSBjdXJyZW50VGFzay5fX19fXzsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ3BhcmVudC1ub2RlLWluZm8nCikudGV4dENvbnRlbnQgPSBgUGFyZW50IG5vZGUgdGFnOiAke3BhcmVudEVsLnRhZ05hbWV9YDsKCi8vIEFjY2VzcyBhbGwgY2hpbGQgbm9kZXMKY29uc3QgY2hpbGROb2RlcyA9IHBhcmVudEVsLl9fX19fOwpkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgKICAnY2hpbGQtbm9kZXMtY291bnQnCikudGV4dENvbnRlbnQgPSBgVG90YWwgY2hpbGQgbm9kZXM6ICR7Y2hpbGROb2Rlcy5sZW5ndGh9YDsKCi8vIEFjY2VzcyB0aGUgRmlyc3QgYW5kIExhc3QgQ2hpbGQgTm9kZXMKY29uc3QgZmlyc3RFbGVtZW50Q2hpbGQgPSBwYXJlbnRFbC5fX19fXzsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ2ZpcnN0LWNoaWxkLWluZm8nCikudGV4dENvbnRlbnQgPSBgRmlyc3QgZWxlbWVudCBjaGlsZCB0ZXh0OiAke2ZpcnN0RWxlbWVudENoaWxkLnRleHRDb250ZW50fWA7Cgpjb25zdCBsYXN0RWxlbWVudENoaWxkID0gcGFyZW50RWwuX19fX187CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKAogICdsYXN0LWNoaWxkLWluZm8nCikudGV4dENvbnRlbnQgPSBgTGFzdCBlbGVtZW50IGNoaWxkIHRleHQ6ICR7bGFzdEVsZW1lbnRDaGlsZC50ZXh0Q29udGVudH1gOwoKLy8gTmF2aWdhdGUgdG8gU2libGluZyBOb2Rlcwpjb25zdCBwcmV2aW91c0VsZW1lbnRTaWJsaW5nID0gY3VycmVudFRhc2suX19fX187CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwcmV2aW91cy1zaWJsaW5nLWluZm8nKS50ZXh0Q29udGVudCA9CiAgcHJldmlvdXNFbGVtZW50U2libGluZwogICAgPyBgUHJldmlvdXMgZWxlbWVudCBzaWJsaW5nIHRleHQ6ICR7cHJldmlvdXNFbGVtZW50U2libGluZy50ZXh0Q29udGVudH1gCiAgICA6ICdObyBwcmV2aW91cyBlbGVtZW50IHNpYmxpbmcnOwoKY29uc3QgbmV4dEVsZW1lbnRTaWJsaW5nID0gY3VycmVudFRhc2suX19fX187CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCduZXh0LXNpYmxpbmctaW5mbycpLnRleHRDb250ZW50ID0gbmV4dEVsZW1lbnRTaWJsaW5nCiAgPyBgTmV4dCBlbGVtZW50IHNpYmxpbmcgdGV4dDogJHtuZXh0RWxlbWVudFNpYmxpbmcudGV4dENvbnRlbnR9YAogIDogJ05vIG5leHQgZWxlbWVudCBzaWJsaW5nJzs=

- Käytä `parentNode` hakeaksesi ylätason `<ul>`-elementin.
- Käytä `childNodes` ylätason `<ul>`-elementissä hakeaksesi kaikki lapsisolmut, mukaan lukien tekstisolmut (esim. välilyönnit);
- Käytä `firstChild` ylätason `<ul>`-elementissä hakeaksesi ensimmäisen lapsisolmun;
- Käytä `lastChild` ylätason `<ul>`-elementissä hakeaksesi viimeisen lapsisolmun;
- Käytä `previousSibling` `current-task`-elementissä hakeaksesi edellisen sisarsolmun;
- Käytä `nextSibling` `current-task`-elementissä hakeaksesi seuraavan sisarsolmun.

Ly8gQWNjZXNzIHRoZSBwYXJlbnQgbm9kZQpjb25zdCBjdXJyZW50VGFzayA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjdXJyZW50LXRhc2snKTsKY29uc3QgcGFyZW50RWwgPSBjdXJyZW50VGFzay5wYXJlbnROb2RlOwpkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgKICAncGFyZW50LW5vZGUtaW5mbycKKS50ZXh0Q29udGVudCA9IGBQYXJlbnQgbm9kZSB0YWc6ICR7cGFyZW50RWwudGFnTmFtZX1gOwoKLy8gQWNjZXNzIGFsbCBjaGlsZCBub2Rlcwpjb25zdCBjaGlsZE5vZGVzID0gcGFyZW50RWwuY2hpbGROb2RlczsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ2NoaWxkLW5vZGVzLWNvdW50JwopLnRleHRDb250ZW50ID0gYFRvdGFsIGNoaWxkIG5vZGVzOiAke2NoaWxkTm9kZXMubGVuZ3RofWA7CgovLyBBY2Nlc3MgdGhlIEZpcnN0IGFuZCBMYXN0IENoaWxkIE5vZGVzCmNvbnN0IGZpcnN0RWxlbWVudENoaWxkID0gcGFyZW50RWwuZmlyc3RFbGVtZW50Q2hpbGQ7CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKAogICdmaXJzdC1jaGlsZC1pbmZvJwopLnRleHRDb250ZW50ID0gYEZpcnN0IGVsZW1lbnQgY2hpbGQgdGV4dDogJHtmaXJzdEVsZW1lbnRDaGlsZC50ZXh0Q29udGVudH1gOwoKY29uc3QgbGFzdEVsZW1lbnRDaGlsZCA9IHBhcmVudEVsLmxhc3RFbGVtZW50Q2hpbGQ7CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKAogICdsYXN0LWNoaWxkLWluZm8nCikudGV4dENvbnRlbnQgPSBgTGFzdCBlbGVtZW50IGNoaWxkIHRleHQ6ICR7bGFzdEVsZW1lbnRDaGlsZC50ZXh0Q29udGVudH1gOwoKLy8gTmF2aWdhdGUgdG8gU2libGluZyBOb2Rlcwpjb25zdCBwcmV2aW91c0VsZW1lbnRTaWJsaW5nID0gY3VycmVudFRhc2sucHJldmlvdXNFbGVtZW50U2libGluZzsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3ByZXZpb3VzLXNpYmxpbmctaW5mbycpLnRleHRDb250ZW50ID0KICBwcmV2aW91c0VsZW1lbnRTaWJsaW5nCiAgICA/IGBQcmV2aW91cyBlbGVtZW50IHNpYmxpbmcgdGV4dDogJHtwcmV2aW91c0VsZW1lbnRTaWJsaW5nLnRleHRDb250ZW50fWAKICAgIDogJ05vIHByZXZpb3VzIGVsZW1lbnQgc2libGluZyc7Cgpjb25zdCBuZXh0RWxlbWVudFNpYmxpbmcgPSBjdXJyZW50VGFzay5uZXh0RWxlbWVudFNpYmxpbmc7CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCduZXh0LXNpYmxpbmctaW5mbycpLnRleHRDb250ZW50ID0gbmV4dEVsZW1lbnRTaWJsaW5nCiAgPyBgTmV4dCBlbGVtZW50IHNpYmxpbmcgdGV4dDogJHtuZXh0RWxlbWVudFNpYmxpbmcudGV4dENvbnRlbnR9YAogIDogJ05vIG5leHQgZWxlbWVudCBzaWJsaW5nJzs=

Hallitse keskeiset JavaScript-konseptit, kuten luokat, DOM-manipulointi, tapahtumien käsittely ja asynkroninen ohjelmointi. Opiskele dynaamisten ja interaktiivisten verkkosovellusten rakentamista hallitsemalla käyttäjävuorovaikutuksia, tietojen hakua ja näyttämistä sekä asynkronisten toimintojen tehokasta käsittelyä. Teorian, käytännön haasteiden ja reaalimaailman esimerkkien yhdistelmällä tämä kurssi antaa käytännön taidot moderniin web-kehitykseen.

Opi JavaScript-luokkien perusteet, luokkien määrittelystä toimintaa laajentavien metodien luomiseen. Tutustu parametriesineiden tehokkaaseen käyttöön, yksityisten ominaisuuksien hallintaan sekä pääsyn rajoittamiseen gettereillä ja settereillä. Hallitse staattiset ominaisuudet ja staattiset metodit sekä hyödynnä luokkaperintää "extends"- ja "super()"-avainsanoilla skaalautuvan ja uudelleenkäytettävän koodin rakentamiseksi.

Hallitse DOM-manipulointi dynaamisten ja interaktiivisten web-sovellusten luomiseksi. Selaa ja muokkaa DOM:n rakennetta, päivitä sisältöä dynaamisesti sekä toteuta parhaat käytännöt turvallisuuden ja suorituskyvyn varmistamiseksi. Erota ominaisuudet ja attribuutit koodin optimointia varten.

Avaa verkkosovellustesi vuorovaikutteisuus hallitsemalla JavaScript-tapahtumat. Ymmärrä tapahtumien eteneminen, hallitse tapahtumien käyttäytymistä ja toteuta tehokas tapahtumien käsittely käyttäjävuorovaikutuksia varten. Optimoi suorituskyky edistyneillä tekniikoilla, kuten tapahtumien delegoinnilla.

Syvenny asynkroniseen JavaScriptiin, mukaan lukien callbackit, Promiset ja async/await. Opi hakemaan dataa API-rajapinnoista, integroimaan kolmannen osapuolen kirjastoja sekä käsittelemään useita pyyntöjä tehokkaasti, kehittäen taitoja datavetoisten sovellusten rakentamiseen.

Haaste: Navigoi DOM-hierarkiassa

Tehtävä

Awesome!

Haaste: Navigoi DOM-hierarkiassa

Tehtävä