Tema
/
Interneto svetainių kliento dalies kūrimas JS
📖 Teorija

Namų darbas — tavo paieška

Namų darbas — tavo paieška.

  1. Pridėk paieškos laukelį į index.html (<input type="search" id="search">).
  2. Įdiek debounce į utils.js ir apvyniok juo įvesties klausytoją main.js. Pridėk searchQuery ir visiblePictures().
  3. Patikrink filtravimą. Vedi tekstą — tinklelis susitraukia; ištrini — grįžta viskas; vedi tai, ko nėra — „No pictures match…".
  4. Pamatuok debounce. Įdėk console.count('render') į render(). Su debounce, įvedus „andromeda", pamatysi ~1 „render"; be debounce — ~9. Tai debounce nauda skaičiais.
  5. Papildomai: padaryk, kad paieška ieškotų ir paaiškinime (explanation), ne tik pavadinime.

Privalomi testai:

  • Filtravimo testas: paieška susiaurina tinklelį, tuščias rezultatas rodo žinutę.
  • Debounce testas: console.count patvirtina, kad su debounce piešiama kartą, ne kas paspaudimą.

Atsiskaitymui: ekrano nuotraukos: (1) nufiltruotas tinklelis, (2) console.count su/be debounce (skirtumas skaičiais).

Toliau. Turim keturis laisvus kintamuosius ir viena vaizdą. 8 pamokoje — lūžio taškas. Kai tų pačių duomenų prireiks TRIMS vaizdams, o kintamųjų bus dešimt, „nepamiršk perpiešti visų" taps neįmanoma disciplina. Tą skausmą pajusim — ir tik tada suprasim, ką 9 pamokoje išspręs pub/sub.