TODO¶
Tässä harjoituksessa rakennat yksinkertaisen TODO-luettelosovelluksen.
Lataa malli¶
Ohjeet¶
Yllä olevat kuvat havainnollistavat tavoitetta, jonka yritämme saavuttaa. Ensimmäinen kuva näyttää kuinka sovellus käyttäytyy, kun lisäät kohteita luetteloon ja toinen kuva näyttää mitä tapahtuu, kun napsautat luettelon yksittäisiä kohteita. Uudet kohteet liitetään luettelon loppuun lomakkeen lähettämisen jälkeen. Samaan aikaan, kun uusi kohde lisätään luetteloon, syöttökenttä tyhjennetään. Kohteen napsauttaminen merkitsee sen valmiiksi ja lisää CSS-luokan “done”, joka muuttaa kohteen tyyliä vastaavasti. Jos samaa kohdetta napsautetaan kahdesti, se poistetaan luettelosta.
HUOM: Kaikki alla olevat vaiheet eivät ole pakollisia, ja lopputulos ratkaisee. Kokeneemmille JavaScript-koodareilla jotkin vaiheet saattavat tuntua tarpeettomilta, mutta toisille niiden pitäisi osoittautua hyödyllisiksi kun välissä on muutamia tarkistuspisteitä ja joitain toimintoja rakennetaan asteittain.
1. Aloita ensin lataamalla mallitiedostot. HTML-malli huolehtii JavaScript-tiedoston
lataamisesta ja sinun ei tarvitse muuttaa muuta kuin todo.js-tiedostoa. Kaikki koodisi menee
todo.js tiedoston sisään, ja tämä on ainoa tiedosto, jonka palautat tässä harjoituksessa.
2. HTML-tiedostossa on kolme tärkeää elementtiä: lomakesyöttö, jonka id on “type-input”,
kohdeluettelon ul-elementti, jonka id on “todo” ja itse lomake, jonka id on “form”. Sinun
Ensimmäinen tehtävä on saada käsiisi kaikki nämä elementit koodisi sisällä. Jälleen, voit käyttää
document.getElementById() tai document.querySelector().
3. Seuraavaksi sinun tulee ottaa käyttöön addListItem(text)-funktio. Se vastaa uusien luettelokohteiden luomisesta
(li-elementit) ja lisää ne sitten luetteloon. Kuten näet, se saa argumentiksi text. Tämä on teksti
jonka käyttäjä on kirjoittanut syöttökenttään. Tämän funktion pitäisi ensin luoda uusi li-elementti ja sitten laittaa
teksti elementin sisään. Lopuksi funktio lisää li-elementin listan loppuun. Hyödyllisiä toimintoja
tässä ovat document.createElement() ja Element.append() sekä ominaisuus textContent, jota olet
käyttänyt jo edellisessä harjoituksessa. Katso: Asiakirjan muokkaaminen
4. Seuraavaksi sinun tulee toteuttaa submitHandler(e)-funktio. Tiedät jo, että tämä funktio on vastuullinen
lomakkeen lähetystapahtuman keskeyttämisestä ja peruuttamisesta. Mutta tämä funktio on myös vastuussa
syöttökentän arvon lukemisesta aivan kuten aiemmassa harjoituksessa. Ja jälleen tämä funktio tarkistaa, onko arvo
tyhjä tai sisältää vain välilyöntejä, jolloin ei tehdä mitään. Toisaalta, jos syöttöarvo ei ole tyhjä,
tämän funktion pitäisi kutsua addListItem(text)-funktiota ja välittää syötearvo argumenttina.
Voit tietysti yksinkertaisesti luoda ja lisätä luettelokohteen submitHandler(e) sisään, mutta se on yleensä parempi idea
erottaa kunkin funktion vastuut, jotta koodisi on helpompi ymmärtää ja ylläpitää tulevaisuudessa, jos
sinun täytyy muuttaa sitä. Samasta syystä olemme nimenneet funktiot pitkillä ja kuvaavilla nimillä niin, että kuka tahansa
voi koodia lukemalla heti ymmärtää, mistä kukin funktio on vastuussa. Lopuksi submitHandler(e)
tulisi palauttaa syöttökentän arvo takaisin tyhjäksi merkkijonoksi.
5. Liitä submitHandler(e)-funktio lomakkeen lähetystapahtumaan. Sinun pitäisi jo tietää kuinka
tämä tehdään edellisen harjoituksen perusteella.
6. Lataa sivusi uudelleen varmistaaksesi, että JavaScript-tiedostoon tekemäsi muutokset on ladattu, ja testaa ohjelmasi.
Yritä lähettää tekstiä ja katso, lisätäänkö teksti oikein TODO-luetteloon ja tyhjeneekö syöttökenttä.
Kokeile tätä muutaman kerran. Jos kaikki toimii, voit siirtyä seuraavaan vaiheeseen. Jos ei, sinun pitäisi
nähdä joitakin virheilmoituksia selainkonsolissa. Viestistä riippuen sinun tulee yrittää paikantaa viestin lähde
ja korjata se. Tässä vaiheessa todennäköisin virhelähde on addListItem(text)-funktio, mutta myös
submitHandler(e) -kohdassa saattaa olla virheitä. Joka tapauksessa virheilmoitus sisältää rivin numeron,
jossa virhe esiintyy. Katso: Debugging in Chrome
7. Seuraavaksi sinun tulee toteuttaa funktio listClickHandler(e), joka on tapahtumakäsittelijä ja käsittelee
kaikki napsautukset luettelon kohteissa. Funktio antaa valmiiksi merkityille kohdille luokan done ja toisen napsautuksen jälkeen
luettelokohteen poistetaan asiakirjasta. Tällä kertaa sinun ei tarvitse peruuttaa mitään oletustapahtumaa luettelon napsautuksen jälkeen,
sillä li-elementillä ei ole oletustoimintoa, mutta siitä ei ole haittaa, jos peruutat sen joka tapauksessa. Tällä kertaa e-argumentti
viittaa napsautustapahtumaan ja sinun on päästävä käsiksi varsinaiseen napsautettuun li-elementtiin.
Onneksi tapahtuma tietää sen ja tarjoaa sen target-ominaisuudessaan. Tämä tarkoittaa, että luettelon kohteeseen, jota klikataan,
voidaan päästä käsiksi käyttämällä e.target. Meidän tapauksessamme tämän pitäisi aina olla luettelokohde, mutta se on mahdollista, että
jotenkin käyttäjä on napsauttanut toista elementtiä ja on yleensä hyvä idea tarkistaa, että olet todella tekemisissä
oikean elementin kanssa. Siksi heti seuraava asia on kysyä elementiltä itseltään, onko se
li-elementti vai ei. Tämä voidaan tehdä Element.tagName-ominaisuuden avulla tai meidän tapauksessamme e.target.tagName ja sen
tulee palauttaa arvo “LI”. Jos elementti ei ole luettelokohde, sinun ei pidä tehdä mitään, koska emme halua muuttaa
mitään muuta asiakirjassa. Nyt poistetaan kohde luettelosta. Elementin poistaminen
voidaan tehdä komennolla node.remove(). Katso: Node removal
8. Liitä listClickHandler(e)-funktio TODO-luettelon ul-elementin click-tapahtumaan. Sinun pitäisi jo tietää
miten tämä tehdään. HUOM: Liitämme kuuntelijan ul-elementtiin, ei jokaiseen yksittäiseen li-elementtiin.
Tämä on mahdollista tapahtumien kuplimisen (bubbling) vuoksi. Katso: Bubbling and capturing
ja Event delegation
9. Lataa sivusi uudelleen ja testaa ohjelmasi. Lisää ensin muutama kohde luetteloon. Yritä sitten napsauttaa jotakin luettelon
kohdista ja varmista sen katoavan. Napsauta myös kaikkia muita elementtejä ja katso, voitko tyhjentää luettelon.
Jos jokin meni pieleen, näet virheet konsolissa tavalliseen tapaan. Tällä kertaa kaikkien virheiden pitäisi olla
listClickHandler(e)-funktiossa. Korjaa virheet ja yritä uudelleen.
10. Nyt on aika lisätä luokan “done” tarkistus ja lisätä luokka, jos se puuttuu. Pääset kaikkiin
elementin luokkiin käsiksi classList-ominaisuuden avulla. Voit lisätä elementtiin uuden luokan, poistaa
olemassa olevan luokan ja joko lisätä tai poistaa luokan riippuen siitä, onko se liitetty elementtiin vai ei.
Tässä tapauksessa voit lisätä luokan elementtiin komennolla e.target.classList.add("done") ja voit kysyä, onko
elementillä jo kyseinen luokka e.target.classList.contains("done"). Muista, että jos li-elementtissä ei ole
“done”-luokkaa, sinun tulee lisätä elementti, ei poistaa sitä luettelosta. Ja vain kun elementin
luokka on “done”, sinun tulee poistaa elementti.
Katso: CSS-luokkien muokkaaminen JavaScriptissä
11. Lataa sivusi uudelleen ja testaa sovelluksesi. Lisää ensin muutama kohde luetteloon. Tämän pitäisi toimia
hyvin, koska olet jo suorittanut kyseisen vaiheen. Yritä sitten napsauttaa jotakin luettelon kohdista. Jos kohde
muuttaa ulkoasuaan, yritä napsauttaa toista elementtiä nähdäksesi myös sen muuttuvan. HUOM! Tässä vaiheessa sinun on myös
tullut liittää CSS stylesheet tai luokka “done” ei muuta mitään etkä näe muutosta luettelossa.
Jos kaikki toimi toistaiseksi, napsauta jotakin kohteista toisen kerran ja näet sen toivottavasti
katoavan. Jos näin tapahtuu, napsauta myös kaikkia muita elementtejä ja katso, voitko tyjentää luettelon.
Jos jokin meni pieleen, näet virheet konsolissa tavalliseen tapaan. Tällä kertaa kaikki virheet
pitäisi liittyä listClickHandler(e). Korjaa virheet ja yritä uudelleen.
12. Ennen kuin palautat harjoituksen, tee viimeinen tarkistus, jotta kaikki toimii ja lopuksi palauta todo.js -tiedosto. Onnittelut!