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

Namų darbas — įvykiai be spąstų

Namų darbas — įvykiai be spąstų.

  1. Padaryk kortelę interaktyvią. Pridėk createFavButton su e.stopPropagation() ir kortelės paspaudimą. Kol nėra navigate/toggleFavorite, pakeisk juos laikinu console.log('open', pic.date) ir console.log('fav', pic.date).
  2. Atkurk 1 spąstą. Užkomentuok e.stopPropagation() ir spusteli ♡ — konsolėje pamatysi ir „fav", ir „open". Grąžink — liks tik „fav". Tai burbuliavimas savo akimis.
  3. Atkurk 2 spąstą. Padaryk mažą formą su vienu lauku ir mygtuku. Pridėk submit klausytoją BE preventDefault — pateikus puslapis persikraus (URL atsiras ?). Pridėk e.preventDefault() — perkrovimo nebėra.
  4. Klaviatūra. Susikurk shortcuts.js, užregistruok g (log „gallery") ir / (fokusuok paieškos laukelį). Patikrink: / laukelyje įrašo brūkšnį, o ne perima veiksmą.

Privalomi testai:

  • Burbuliavimo testas: ♡ su stopPropagation neatidaro kortelės; be jo — atidaro.
  • preventDefault testas: forma su preventDefault neperkrauna puslapio.
  • „Rašymo" testas: spartusis klavišas nesuveikia, kai fokusas įvesties laukelyje.

Atsiskaitymui: ekrano nuotraukos arba video: (1) ♡ be perėjimo į detalų vaizdą, (2) forma be perkrovimo, (3) konsolė, rodanti burbuliavimą (su/be stopPropagation).

Toliau. Sąsaja gyva, bet duomenys vis dar išgalvoti. 4 pamokoje su fetch atsisiųsim tikras NASA nuotraukas — ir susidursim su tinklo realybe: API raktais, ribotomis kvotomis ir klaidomis, kurios neatrodo kaip klaidos.