Užduotis – ToDo List’as

todo list

Su kiekviena nauja mokinių grupe vis pasižadu sau, kad šios užduoties daugiau neskirsiu ir prie jos negrįšiu, nes jos pavyzdžių pilnas internetas ir kyla pagunda nusirašyti taip ir nesupratus pagrindinių JS DOM manipuliacijos metodų.

Vis dėlto, tai puikus iššūkis, norint atlikti visas pagrindines operacijas:

  • Reikšmės paėmimas iš vartotojo užpildytos formos;
  • Formos užpildymo pirminis tikrinimas: ar leidžiama pateikti tuščią?
  • Elementų sukūrimas, pridėjimas į HTML, šalinimas, stilizavimas:
    • Kokį metodą naudojame sukurti HTML elementus su JS?
    • Kam naudojami innerText ir textContent? Koks skirtumas tarp jų?
    • Kuo skiriasi append nuo appendChild?
    • Kuo naudingas innerHTML?
    • Kaip keisti elementų stilių su JavaScript?
    • Kaip pašalinti konkretų elementą?

Naują informaciją sunku įsisavinti greitai, todėl “pyragą pjaustau mažais gabalėliais”. Pirmos dienos kodas apima tik formos sukūrimą ir pirmųjų reikšmių iš jos “iškonsolinimą”. Pagalvokite, kaip patobulinti, kad vartotojas negalėtų patvirtinti kol neįvesta užduotis? Koks minimalus užduoties simbolių skaičius turėtų būti?

Antra pamoka skirta paimtų reikšmių išvedimui į HTML. Smagiausia dalis, kaip pagal prioriteto reikšmę: “Svarbi”, “Paprasta”, “Nesvarbi”, arba pagal užduoties įvykdymo procentą sukurti dinamišką atvaizdavimą. Be sąlygos sakinio niekaip. Kodas iki trynimo mygtuko sukūrimo ir funkcionalumo aprašymo.

Trečiam kartui reikėtų gilintis į HTLM Dokumento objektų modelį, suprasti struktūrą: kuris elementas yra tėvinis kitiems, kurie elementai yra “child”. Norėdami ištrinti visą užduoties eilutę, juk spaudžiame tik vieną mygtuką – elementą – taikinį, esantį joje.

Formos išvalymas, kada tai galima atlikti? Kurioje kodo vietoje jau turime mums reikalingas reikšmes iš įvedimo laukų?

VISADA naudoti console.log, kad suprasti, ką JS gali pasižymėti, kokią reikšmę paima, koks jos duomenų tipas, kokius metodus galime taikyti.

Galutinis atliktos užduoties variantas turėtų būti bent jau toks, o gal gali dar geriau? Vieno iš mokinukų kūrinys


Pamokų rezultatas