Načrtovanje in razvoj spletnih aplikacij

18. vaja: Tipkanje

Spoznali bomo
  • Lastnosti in metode za delo s števili v JavaScriptu
  • Lastnosti in metode, ki so v pomoč pri računanju v JavaScriptu
  • Kako v JavaScriptu uporabimo štoparico za beleženje pretečenega časa

Sestavi spletno stran, ki bo naključno generirala male znake angleške abecede in vsakega posebaj izpisala na zaslon. Hkrati se sproži tudi štoparica, ki beleži pretečen čas. Po izpisanem znaku uporabnik izpisan znak vnese v tekstovno polje obrazca. Funkcija JavaScripta preveri, če je uporabnik natipkal pravi znak. V primeru napačno natipkanega znaka se pojavi opozorilno okno, če pa je vnešen znak pravi, pa se izpiše nov znak. Po 10 natipkanih znakih se izvajanje programa in beleženje časa ustavi, na zaslon pa se izpiše besedilo o porabljenem času.

Stran prikazujejo spodnje slike in video. Stran poimenuj 18vaja-JS-priimek-ime.html, izdelana pa naj bo v HTML5 in s CSS.

Koda JavaScript
  • Klik na gumb Začni s tipkanjem naključno prikaže mali znak angleške abecede in hkrati sproži štetje časa v milisekundah
    Pomoč:
    - generiranje znaka: String.fromCharCode(96 + nakljucno(26)), pri tem je nakljucno() funkcija, ki generira naključno celo število
    - štetje časa: new Date().valueOf()
  • funkcija preveri enakost vnosa v tekstovno polje z generirano vrednostjo in v primeru različnosti zažene opozorilno okno z napisom Napačno! Natipkal si x. pri čemer x predstavlja napačno vnešen znak, če pa je vnos pravilen, pa se samodejno izpiše nov znak
  • V HTML odstavek izpiše stavek Za tipkanje si porabil y sekund!, pri čemer y predstavlja čas v sekundah na tisočinko natančno

Slika spletne strani, ko se stran naloži v brskalniku:

Slika spletne strani:
Slika 18.vaje: Tipkanje znakov

Slika spletne strani po kliku gumba Začni s tipkanjem:

Slika spletne strani:
Slika 18.vaje: Tipkanje znakov - po kliku na gumb 'Začni s tipkanjem'

Slika spletne strani če vnesemo napačni znak:

Slika spletne strani:
Slika 18.vaje: Tipkanje znakov - po napačno natipakanem znaku

Slika spletne strani po 10 vnesenih znakih:

Slika spletne strani:
Slika 18.vaje: Tipkanje znakov - izpis časa po tipkanju znakov

Video spletne strani prikazuje tipkanje malih znakov:

Video spletne strani v brskalniku