Tallinna Ülikool
Veebirakenduste jätkukursus
Jaagup Kippar
2014
Sisukord
Sissejuhatus 5
Meeldetuletus 6
Kalkulaator 6
Ülesandeid 7
Ristkülik ekraanil 7
Foor, seisundid 8
Ülesandeid 9
Objektid 10
Tollikalkulaator objektina 10
Ülesandeid 12
Mitu kalkulaatorit lehel 12
Ülesandeid 14
Kalkulaatorite parameetrid 14
Ülesandeid 15
Andmete talletamine objektis 15
Ülesandeid 16
Objekti graafiline väljund 16
Ülesandeid 18
Foor 18
Mitu foori 19
Ülesandeid 20
Kujundite lisamine platsile 20
Ülesandeid 21
Mitmesugused kujundid 21
Ülesandeid 23
Liikuvad kujundid 23
Ülesandeid 25
Hiirele reageeerivad liikuvad kujundid 25
Ülesandeid 27
Objektitüübi laiendamine, prototüüp 28
Käskluse lisamine 28
Massiivi viimane element 28
Ülesandeid 29
Asukoha põhjal ring 29
Ülesandeid 30
Ülemklassi väljakutse 30
Ülesandeid 31
Käskluse asendamine 31
Ülesandeid 33
Klassi prototüübid andmehalduses 33
Tabelina näitav laiendus 34
Ülesandeid 35
Joonisena näitav laiendus 35
Ülesandeid 37
Ringjoonega seotud arvutused 37
Ringjoone parameetriline võrrand 37
Ülesandeid 38
Ruudud ringjoonel 38
Ülesandeid 39
Hulknurk 39
Ülesandeid 41
Keerlev hulknurk 41
Ülesandeid 42
Nurga määramine 42
Ülesandeid 43
Rool 43
Ülesandeid 45
Liikur 45
Ülesandeid 46
Keerav liikur 46
Ülesandeid 47
Rool ja liikur 48
Ülesandeid 50
Ringrajasõit 50
3D 51
Kaugemal väiksemaks 51
Ülesandeid 52
Kasutaja asukoha muutmine 53
Ülesandeid 55
Kolmemõõtmeliste andmete objekt 55
Vektor 55
Ülesandeid 56
Kahest punktist joon 56
Ülesandeid 59
Joonte kogum 59
Ülesandeid 62
Reaalse mõõtkava arvestamine 62
Andmehaldus 64
Eesnimede loetelu 64
Funktsiooni lisaargumendid 65
Punktide haldus 66
Sortimine 67
Ülesandeid 68
Salvestamine 68
Ülesandeid 70
Veebiühenduseta rakendus 70
Ülesandeid 73
XMLHttpRequest 73
Kohene päring 73
Ülesandeid 74
Asünkroonne päring 74
Tervitamine serverist 75
Post-meetodiga saatmine 76
Mitu parameetrit päringus 77
Ülesandeid 78
JSON 78
Väljund Javaskripti 78
Ülesandeid 79
Andmed SQL-tabelis 79
Ülesandeid 81
Ajaxi abil lugemine 81
Ülesandeid 83
AJAX ka salvestamiseks 83
Ülesandeid 85
Üldisi ülesandeid 85
Kordamisküsimused 85
Kolme tasemega ülesanded 85
Pallide tüübid 85
Hulknurgad 86
Jalgratas 86
Lift 86
Mängukaardid 86
Automaatsalvestus veebilehel 86
Kolmnurga joonistamine 87
Graafika salvestus 87
Tähemärkidega kujundus 87
Asukohtadega jututuba 87
Kujundid 87
Hammasrattad 88
Valdade valimine 88
Tähtede püüdmine 88
Lahendusi ja täiendusi 88
Objektid 88
Ringi pindala arvutaja objektina 88
Kaks pindala arvutajat 89
Seadistatav kalkulaator 90
Ladu 91
Pallid platsil 95
Kahemõõtmelised kujundid 96
Prototüübid 100
String 100
Vektor 101
Ring 102
Ringide massiiv 103
Nurgaarvutused 104
Kella numbrilaud 104
Keeratav nupp 105
Nupp objektina 106
Keeratavad nupud objektina 107
Maa ja Kuu 109
Roolitav liikur ringrajal 109
Sissejuhatus
HTML5 ja Javaskripti valis veebi arengut suunav W3C põhilisteks
tehnoloogiateks, mille peal võiksid veebirakendused lähemate aastate jooksul
töötada. Aegade jooksul oli tarvilikke lisapluginaid juba nõnda palju saanud,
et uue viisaka ja enamvähem vajalike omadustega veebilehitseja kokkupanek
hakkas liialt keeruliseks minema. Selle peale tehti HTMLile põhjalik
uuenduskuur ning vaikselt püüab ka Javaskript ühtseid standardeid järgida.
Tulemuseks on loodetavasti veeb, mida mitmesugused seadmed taas viisakalt
näidata suudavad ning mille kuvamiseks ei pea muuhulgas ka väiksemad seadmed
enesesse mitmesuguseid mitmekümne megabaidiseid pluginate käivituskeskkondi
laadima.
Javaskript on suhteliselt sarnasena olemas olnud juba 1990ndate keskelt. Samas
keerukamaid ja objektorienteeritud lahendusi pole sellega varem kuigi palju
kokku pandud. Viimastel aastatel on sedasorti lahendusi hulgem lisandunud ning
seetõttu ka vastavad õppematerjalid tarvilikud, et jaguks oskusi ja julgust
Javaskripti abil ka keerukamaid veebilahendusi kokku panna.
Meeldetuletus
Alustuseks mõned lihtsad näited Javaskripti abil töötavatest veebirakendustest.
Et kelle jaoks
tegemist uue keelega või pole lihtsalt kaua kokku puutunud, siis saaks
mõningase tunde kätte.
Kalkulaator
Arvutamise jaoks peab ikka olema koht andmete sisse panekuks ning koht tulemuse
nägemiseks. Tekstiväli ning div-kiht sobivad selliseks komplektiks küll.
Nupuvajutuse peale saab käima panna funktsiooni. Funktsioonid hea defineerida
lehe päiseosas, siis nad hilisema kasutuse tarbeks olemas. Elementide poole
pöördumiseks sobib käsklus document.getElementById - mida Javaskripti-põhiste
lahenduste puhul tuleb päris sageli välja kutsuda. Mõned raamistikud teevad
selle käsu küll lühemaks, praegu kasutame pikka kuju.
Näite juures arvutatakse poes oleva letihinna põhjal selles sisalduv käibemaksu
osa.
Käibemaksu arvutus
Katsetuste leht
Palun sisesta letihind:
Vastuse koht.
Ülesandeid
Pane näide käima
Koosta kalkulaator valuutavahetusel kättesaadava summa arvutamiseks sisseantud
summa, kursi ja komisjonitasu järgi.
Ristkülik ekraanil
HTML5ga koos tuli veebilehele joonistamiseks lõuend ehk canvas. Loojate
plaanide järgi saab sellest lähiaastate veebigraafika valitseja. Eks aeg
näitab, mis tulevik toob. Aga otseste joonistuskäskudega on küll mugavam jooni
ja ringe tekitada, kui selleks kavalalt kombineeritud värvitud taustaga kihte
veebilehele võluda. Järgneva joonistuskäsu juures küsitakse lõuend-tahvlilt
graafiline kontekst (nagu sulepea) ning tekstikastidest ette antud andmete
järgi kuvatakse ekraanile ristkülik.
Joonis
Joonis
x
Foor, seisundid
Märgatav osa siinsetest materjalidest tutvustab objektidega majandamist
veebilehel. Objekti omapäraks on tema juurde kuuluvad andmed ning samuti
käsklused, mis oma tööks andmeid kasutada saavad. Lihtsamatel juhtudel võib
sarnase tulemuse saada aga ka tavalisel veebilehel toimetades. Lehtki on
suhteliselt eraldiseisev üksus, kus globaalmuutujatena võimalik hoida lehe
piires kättesaadavaid andmeid ning neid siis oma käskude juures kasutada.
Näitena toodud valgusfoor, kus seisundimuutujas parajasti kirjas põlev värv.
Muutuja järgi otstustades joonistatakse sobivasse kohta seda värvi ring.
Allpool nuppudega valides saab määrata seisundiks sobiva värvi ning selle peale
pannakse pildi uuendamiseks tööle joonistuskäsk.
Joonis
Joonis
Ülesandeid
Pane näide käima
Koosta taksohinna kalkulaator. Näha on sisseistumistasu ja kilomeetrihind.
Väljastatakse sõiduhind vastavalt sisestatud kilomeetrite arvule.
Lisa kalkulaatorile seisundid öö ja päev. Vastavalt muutub kalkulaatori juures
olev pilt. Öösel on hinnad kõrgemad.
Objektid
Tollikalkulaator objektina
Kõigepealt meeldetuletuseks tavaline lihtne kalkulaator.
Kalkulaator
Arvutamine
Tollid:
Järgmisena tehakse sisestuskastidest ning arvuta-käsklusest komplekt nimega
Arvutaja. Nii on arvuta-käsklusel võimalik this-muutuja kaudu tekstiväljade
poole pöörduda ning ei pea keerulisemal lehel enam pikemalt muretsema, et kust
andmed kätte saab. Siin näites küll on veel kastide nimed otse koodi sisse
kirjutatud, kuid ka selle saab tulevikus paindlikumaks muuta. Lehe sisumärgendi
body atribuut onload teatab, et lehe avanemisel tuleb käivitada funktsioon
lehealgus(). Selle tulemusena luuakse muutujasse a1 Arvutaja-tüüpi objekt ehk
eksemplar. All sentimeetriarvutuse nupu juures sobib tulemuse saamiseks käima
panna juba käsklus a1.arvuta(), mis juba teab, millised andmed kust võtta ja
kuhu vastus panna.
Kalkulaator
Arvutamine
Tollid:
Kalkulaator töötab nii nagu ennegi, lihtsalt koodi sees on nüüd koht
Arvutaja-objekt oskuste kirjeldamiseks.
Järgmise sammuga muudame arvutaja iseseisvamaks - lisame ka oskuse ennast
ekraanile kuvada. Ehk siis väljastada näitamiseks vajaliku HTMLi. Kõigepealt
luuakse Arvutaja sisse funktsioonid nimega algus ning arvuta. Loomise lõpul
käivitatakse funktsioon algus(). Võtmesõna this alguse juures näitab, et
tegemist pole lihtsalt alguse-nimelise funktsiooniga (mis võiks ka kusagil
mujal loodud olla), vaid Arvutaja objekti külge kuuluva funktsiooniga algus().
Hilisema pöördumise lihtsustamiseks luuakse Arvutaja külge muutuja this.kiht
ning järgmise käsuga määratakse kihi sisse HTML-kood. Samuti lisanduvad
Arvutaja külge muutujad kast ja vastusekiht. Arvutamisfunktsiooniks arvuta,
mille juures siis tollidest sentimeetrid tehakse.
Lehe avamisele body-elemendi atribuut onload ütleb, et tuleb käivitada
funktsioon lehealgus(). Seal antakse väärtus eelnevalt loodud muutujale nimega
a1. Väärtuseks saab Arvutaja tüüpi objekt, kellele kihi nimeks antakse ette
kiht1. Esialgu kannatab sellisena panna vaid ühe arvutaja lehele, sest muutuja
nimi a1 on Arvutaja this.algus-funktsioonis a1.arvuta() juures sisse kirjutatud.
Kalkulaator
Arvutamine
Ülesandeid
Pane näited käima
Loo sarnaselt näitele kalkulaator ringi pindala leidmiseks raadiuse järgi.
Mitu kalkulaatorit lehel
Üksiku kalkulaatori saab ka niisama veebilehele kirjutada. Kui neid aga vaja
panna hulgem ning mitmesuguste parameetritega, siis on objektide loomisest
rohkem kasu. Järgmises näites antakse Arvutajale ette kihi id, kuhu end
paigutada ja töökorda sättida. Käsklus
window[kihinimi+"_kalkulaator"]=this;
loob akna ehk lehe peaobjekti külge muutuja, mille nime sees on kihi nimi ja
sõna "kalkulaator", ehk siis esimese Arvutaja loomisel
new Arvutaja("kiht1");
saab objekti nimeks nõnda kiht1_kalkulaator. Nupu loomisel öeldakse nupule, et
tuleb sellenimelise objekti juures välja kutsuda käsklus arvuta()
" "
Selle järgi teatakse just õigest kohast sisestatud arv võtta, sest
this.kast=document.getElementById(kihinimi+"_kast1");
paneb arvutaja külge muutuja nimega kast. Pärast arvutuse juures võetakse sealt
this.vastusekiht.innerHTML=parseFloat(this.kast.value)*2.54;
Kalkulaator
Arvutamine
Ülesandeid
Pane näide käima
Loo sarnaselt lehele ka mitu kalkulaatorit ringi pindala leidmiseks raadiuse
järgi
Kalkulaatorite parameetrid
Eelnevates näidetes vaadatud kalkulaatorid suutsid hakkama saada vaid ühe
operatsiooniga. Kujundus ning arvutuskäik oli juba koodi sisse kirjutatud ning
valida sai vaid loodud kalkulaatori asukoha ja nende loomise koguse järgi.
Arvutaja saab kirjutada ka paindlikumalt - lisaks kihi nimele antakse
järgmises näites ette ka sissestuskasti juurde tulev selgitav tekst,
vajutusnupule kuvatav tekst ning arvutuskoefitsient kahe suuruse vahel.
Kalkulaator
Arvutamine
Tulemusena võib edasi luua juba igasugu kalkulaatoreid, mille puhul arvutus
piirdub ühe suhtega ehk korrutus/jagamistehtega.
Ülesandeid
Pane näide käima
Loo sama näite põhjal kalkulaator käibemaksu arvutamiseks letihinna järgi
Koosta sarnaselt kihile pandav kalkulaator, kus näidatakse soovitud arv
tekstikaste ning nupuvajutuse peale väljastatakse neisse sisestatud arvude
aritmeetiline keskmine.
Andmete talletamine objektis
Eelnevate arvutuste juures anti sisestuse põhjal koheselt vastus ning midagi
eraldi säilitada pole vaja. Objekti üheks kasulikuks omaduseks on aga tema
olek, ehk siis võime väärtusi oma eluea jooksul säilitada. Siin lihtsama
näitena arvuline meelespeetav kogus ning nupud selle koguse suurendamiseks ja
vähendamiseks. Tulemuse näitamisks funktsioon kuva() ning nuppude külge
kinnitatud funktsioonid suuremaks() ja väiksemaks() soovitud muutuse tarbeks.
Kalkulaator
Arvutamine
Ülesandeid
Pane näide käima
Lisa objekti kujundusse teine tekstiväli, kus saab määrata, millise koguse
võrra olemasolevat väärtust kasvatatakse või kahandatakse
Tekstivälja asemel saab muudetava suuruse valida rippmenüüst
Lisa nupp laoseisu nullimiseks
Objekti graafiline väljund
HTML5 juurde kuuluvat Canvast saab sarnaselt sisestuse ja väljundi juures
kasutada nagu teisigi veebilehe elemente. Lihtsalt siitkaudu on võimalik
väljundit märgatavalt värvilisemaks muuta. Kuvamise funktsioonile lisatakse
täiendus: lisaks arvu näitamisele tekstiväljas tehakse lõuendile ka vastava
pikkusega kast.
Kalkulaator
Arvutamine
Ülesandeid
Pane näide käima
Lisa tekstiväli näitamaks, mitme ühiku jagu objektis olevat kogust suurendada
või vähendada.
Foor
Objektidega harjumine paistab mõnelegi keeruline olema. Järgnevalt harjumiseks
näide, kuidas valgusfoori tööd veebilehel objektina jäljendada. Esmalt lihtsaim
variant, kus fooril on üks muutuja ehk väli, mis peab meeles põleva tule värvi.
Käsklustega saab seda värvi küsida ning muuta.
Foor
Käsklus console.log trükib tulemuse testimiseks mõeldud konsooliaknasse
(enamasti saab lahti veebilehisejas klahvivajutusega F12)
Lehel kihis näidatud vastus on lihtsalt tekstina seal:
kollane
Mitu foori
Objektitüüp ning objekt ise on eri asjad. Ehk siis ühte tüüpi võib korraga olla
mitu objekti. Ning vahel võib mõne tüübi juures töötav objekt ka sootuks
puududa. Siin näites siis korraga kaks töötavat foori. Sündides mõlemad rohelis
tulega. Edasi muudetakse üks kollaseks ja teine punaseks. Ning taas saab
tulemused seest välja küsida:
Foor
esimene: kollane, teine: punane
Ülesandeid
Pane näited tööle
Koosta tüüp Lamp, väljaks "seisund" väärtusega true. Koosta käsklus kasSees(),
mis siis väljastab seisundi väärtuse, testi.
Lisa käsklus uusSeisund(asend), mille juures siis vastavalt määratakse seisundi
uus väärtus. Testi.
Lisa käsklus seisundTekstina(), kus siis vastavalt seisundi väärtusena
väljastatakse tekstina "põleb" või "ei põle".
Lisa käsklus vahetaSeisund(), mis siis muutuja "seisund" väärtuse muudab
vastupidiseks. Katseta.
Loo korraga mitu lampi, igaühel oma seisund. Vaheta lampide seisundeid ning
veendu, et igaüks näitab õigesti.
Tee seisundi vahetamiseks ning küsimiseks igale lambile eraldi nupupaar.
Katseta ning veendu, et lülitamine töötab õigesti.
Lisa lambile graafiline liides. Sisselülitatud lambi puhul on näha seest täis
ring, väljalülitatud lambi puhul tühi ringjoon.
Kujundite lisamine platsile
Objektitüüpe võib lehel olla mitu. Järgmises näiteks on tüüpideks Pall ja
Plats. Pall mõistab oma asukoha meeles pidada ning etteantud graafilise
konteksti kaudu joonistada. Plats kuvab end kollase ristkülikuna, tema küljes
kujundite massiivis on pallid ning ta suudab nad välja joonistada. Algusnäide
koostab platsi kahe palliga ning kuvab nad ekraanile.
Kujundid
Ülesandeid
Pane näide käima
Katseta mitmesuguste suurustega pallidega
Koosta tsükkel platsile pallide lisamiseks
Lisa platsile parameetrid loodava platsi suuruse kohta pikslites
Lisa platsile äärejoon ja määra selle kaugus servast
Lisa platsile käsklus soovitud arvu pallide tekitamiseks juhuslikesse
kohtadesse äärejoone sisse
Mitmesugused kujundid
Siin näites lisandub Platsile Palli kõrvale kujundiks Ruut. Et Javaskript
massiividesse andmete lisamisel piiranguid ei sea, siis saab siin samasse
kujundite massiivi panna läbisegi mõlemaid kujundeid. Ning et neil on mõlemal
ühine meetod nimega joonista(), siis saab kujundite massiivi nõnda ka välja
kuvada. Selleks kutsutakse Platsi joonista-funktsioonis järgemööda tsükli abil
välja kõikide kujundite joonista-funktsioonid.
Kujundid
Ülesandeid
Pane näide käima
Paiguta ruute ja palle mitmesugustesse kohtadesse
Lisa kujundina Puu, mis koosneb võrast ja tüvest. Ette saab anda võra keskkoha,
võra raadiuse, tüve paksuse ning pikkuse
Liikuvad kujundid
Liikumise jaoks lisati mõlemale objektitüübile funktsioon liigu. Ruut suurendab
selle peale oma x-koordinaadi väärtust ühe võrra, Pall aga kahendab raadiust
90% peale. Igatahes mõlemad muutuvad liikumise peale nähtavalt. Platsi
liikumisfunktsioon käivitab järgemööda kõigi kujundite liikumisfunktsioonid
ning edasi Platsi joonistusfunktsiooni, mis omakorda kõik kujundid välja
joonistab.
Kujundid
Ülesandeid
Pane näide käima
Pane ruut liikuma vasakule
Lisa kujundina alla kukkuv tühi ring
Hiirele reageeerivad liikuvad kujundid
Kui kujundid jälgivad ühist käskude struktuuri, siis saab sellise
"hulgikaubanduse" abil neile mitmesuguseid oskusi külge pookida. Siin näites
kipuvad ruudud aegamisi paremale ekraanilt välja nihkuma ning ringid väga
väikeseks minema. Näitena lisati aga oskused, kus saab hiire abil ruudu jälle
lähemale kutsuda ning ringi suuremaks tagasi muuta. Ruut kontrollib, et kui
hiire asukoha x-koordinaat on ruudust vasakul, siis leitakse x-i suunaline
kaugus hiirest ning peegeldatakse ruut sama kaugele vasakule. Palli puhul aga
antakse hiirega palli tabamise puhul lihtsalt taas raadiuseks 20 pikslit. Et
hiire jälgimine töötaks, selleks taas püüab plats kõigepealt ise hiiresündmuse
kinni.
Kujundid
Ülesandeid
Pane näide käima
Lisa kujundiks alla kukkuv seest tühi ring. Ringi tabamisel hakkab ta taas
tahvli ülaservast kukkuma
Lisa kujunditele funktsioon kasPihtas(hiireX, hiireY), mis vastab true või
false vastavalt sellele, kas etteantud hiire koordinaadid asuvad kujundi
seesl. Tee Platsi hiirAlla ümber nõnda, et iga kujundi juures kontrollitakse
kõigepealt, et kas hiirega saadi kujundile pihta. Edasi alles hiirega tabamuse
puhul kutsutakse välja vastava kujundi kasPihtas. See võimaldab kujundi
hiirAlla funktsiooni juurest tabamuse kontrolli välja võtta.
Objektitüübi laiendamine, prototüüp
Küllalt palju saab oma koodi korrastada, kui suhteliselt iseseisvalt toimivad
üksused objektitüüpideks ja nende juurde kuuluvateks objektideks kokku
koondada. Nii nagu tavalise järjest kirjutatud koodi kokku grupeerimisel
funktsioonidesse on võimalik saada mõistlik ülevaade vähemasti kümme korda
suuremast lahendusest, nii funktsioonide ja andmete koondamisel
objektitüüpidesse ja objektidesse annab see omakorda vähemalt sama suure võidu
programmide keerukusega hakkama saamisel. Kuni loodud uusi tüüpe on vaid mõni
ning nendest loodud objektid igaüks suhteliselt erisuguste omaduste ja
kasutuskohtadega, siis võivad tüübid ise rahumeeli üksteisest erinevad ja
sõltumatud olla. Kui aga hakkab tekkima kohti, kus objektid peaksid käituma
mõne omaduse suhtes sarnaselt, mõne omas mitte, siis võib koodi ülesehitust
otstarbekamaks muuta aidata objektitüübi laiendamine.
Käskluse lisamine
Järgnevas näites luuakse kõigepealt vektori tüüp. Isendimuutujateks x ja y ning
meetodiks pikkus. Hiljem lisatakse Vektorile prototüübi kaudu käsklus
tekstina(), mis siis selle vektori andmed viisakal kujul tekstina tagastab.
Vastuskihil näeb funktsiooni töö tulemust.
Laiendamine
Tekstina: (3, 4) kogukiirus 5
Massiivi viimane element
Tavapärasem on käskluse lisamine juba võõrastele tüüpidele, mida ise muuta ei
saa. Näitena lisatakse viimase elemendi küsimise käsklus Javaskripti
süsteemsele klassile Array. Kui muidu on võimalik massiivist eesnimed küsida
elementide arvu käsuga eesnimed.length ning viimast eesnime kujul
eesnimed[eesnimed.length-1] (sest elementide lugemine algab nullist), siis
funktsioonis objekti enese poole pöördumiseks on sõna this. Ehk siis viimase
elemendi väärtuse annab this[this.length-1].
Laiendamine
Väljund:
Mati
Ülesandeid
Lisa Vektorile prototüübi kaudu käsklus korruta(arv). Selle tulemusena
korrutatakse vektori mõlemad koordinaadid (this.x ja this.y) vastava arvuga.
Midagi ei tagastata return-käsuga. Katseta, andes vektorile algväärtused,
paludes neid kahega korrutada ning siis küsides tekstina, et mis väärtused
vektori sees nüüd on.
Lisa käsklus korrutaUueks(arv). Korrutusarvutus käib samuti kummagi koordinaadi
kohta. Nüüd aga ei muudeta väljakutsuva vektori andmeid, vaid luuakse käsu töö
käigus uus vektor oma koordinaatidega - return new Vektor(this.x*arv,
this.y*arv); Katseta.
Uuri Javaskripti standardtüüpi String. Lisa sellele prototüübi abil teatamaks,
mitmest sõnast koosneb selles stringis olev lause. Vihje: käsklus split() jagab
lause sõnade massiiviks ning siis saab massiivilt pikkust küsida.
Asukoha põhjal ring
Järgnevas näites pannakse Ringi prototüübiks Asukoha eksemplar. Ehk siis siin
näites tehakse Asukohast muutuja a, mille sees koordinaadid 3 ja 5. Ning käsuga
var a=new Asukoht(3, 5);
Ring.prototype=a;
määratakse, et kõik loodavad ringid saavad oma aluseks Asukoha eksemplari,
millest siis ringi loomisel koopia tehakse. Tulemusena saavad kõik ringid
kasutada konkreetse asukoha koordinaate ning samuti töötab käsklus tekstina(),
mis koordinaadid viisakasti sulgude vahel välja kuvab.
Laiendamine
Ringi asukoht: (3, 5), pindala 314
Ülesandeid
Pane näide tööle.
Lisa Asukohale käsklus paremale(), mis suurendab x-i väärtust ühe võrra.
Veendu, et Ringi on võimalik ka selle käskluse abil paremale nihutada, trüki
ringi asukoht enne ja pärast nihutamist.
Ülemklassi väljakutse
Eelmises näites oli ringi aluseks alati asukoht koordinaatidega 3 ja 5. Sinna
saab küll käsud panna x-i ja y-i asukoha muutmiseks, aga see mõnevõrra tüütu.
Hea, kui saab kohe määrata ringi sinna kus ta mõeldud on. Üheks mooduseks on
ringi loomise käsu seest välja kutsuda tema aluseks oleva asukoha loomise käsk.
Ehk siis luuakse kõigepealt algandmetega asukoht ja määratakse see Ringi
protüübiks. Edasi Ringi loomisel antakse x ja y edasi Asukoha konstruktorile,
mis hoolitseb uute koordinaatide salvestamise eest.
var a=new Asukoht(0, 0);
Ring.prototype=a;
function Ring(x, y, r){
Asukoht.call(this, x, y);
Näide tervikuna:
Laiendamine
Ringi asukoht: (2, 4), pindala 153.86
Ülesandeid
Pane näide tööle
Lisage ringile käsklus kasPuutub(teineRing), mis väljastab, et kas üks ring
puutub teisega kokku. Katseta toimimist.
Koosta massiiv viie ringiga. Väljasta, millised ringid puutuvad esimese ringiga
kokku.
Käskluse asendamine
Objektidega majandamine võimaldab uue objekti aluseks võtta ka objekti, mille
mõned omadused sobivad, teised aga mitte. Siin näites luuakse kõigepealt
AlusRuut, kel olemas asukoha koordinaadid ning kiirusesamm mõlema koordinaadi
suunas. Liikumisfunktsiooni käivitusega liigutakse ühe sammu jagu edasi.
Joonistuskäsu tulemusena kuvatakse etteantud graafilise konteksti sihtkohale
ruut, mille asukohaks alusruudu koordinaadid ning külje pikkuseks viis ühikut.
Kui nüüd soovida ringi ehk palli ekraanile joonistada ja seal liigutada, siis
alusruudust sobivad kasutada asukoha koordinaadid ja liikumisearvutus, aga
joonistamise tulemusena peaks midagi kandilisest ruudust ümaramat ekraanile
ilmuma. Nii siin teha saabki. Kukkuva palli juures luuakse joonistuskäsklus
uuesti koos ümmarguse ringiga, see asendab ruudu juurest kaasa tulnud kandilise
joonistusfunktsiooni.
Platsi peale pannakse AlusRuut ja Pall mõlemad. Neil olemas nüüd nii joonistus-
kui liikumisoskus. Pall määrab oma liikumissammuks iga kaadriga kaks ühikut
allapoole, alusruudul antakse loomisel paremale liikumise andmed.
Kujundid
Ülesandeid
Pane näide tööle
Lisa mitu ruutu erisuguste kiirustega
Kukkuva palli juures määra kukkumiskiirus juhuslikult vahemikus 1-5 ühikut
kaadri kohta
Lisa katsetamiseks mitu palli.
Klassi prototüübid andmehalduses
Järgnevalt pikem näide, kus eri tegevused eri objektide vahel jaotatud ning
võimaldavad kummalgi tüübil selle jaoks mõeldud tegevusele keskenduda ning
sellega koodi paremini loetavana hoida. Alustuseks luuakse AndmeHalduse tüüp,
kus talletatakse teksti ja arvu paarid ning kust saab hiljem arvud eraldi
funktsiooniga välja küsida.
Kujundid
Näite väljundiks siis kaks arvu:
175,165
Tabelina näitav laiendus
Andmete hoidjale saab vajadust mööda mitmesuguseid andmete kuvajaid peale
ehitada. AndmeTabeli objektis jäetakse meelde teksti ja arvu komplektid. Eraldi
käsuga saab välja küsida ka ainult arvud. Olemasolevale objektile saab peale
ehitada teise.
AndmeTabel.prototype=new AndmeHaldus();
ütleb, et igale uuele AndmeTabelile võetakse aluseks AndmeHalduse eksemplar.
Ehk siis AndmeTabeli objekt oskab samuti enese sisse teksti ja arvu komplekte
koguda ja sealt arve eraldada. Lisaks on tal juures oskus tulemuste kuvamiseks
tabelina.
Kujundid
Tabelit võib lehel vaadata
Ülesandeid
Pane näide tööle
Lisa AndmeTabeli juurde käsk arvude loetelu näitamiseks (unordered list)
Joonisena näitav laiendus
Samale AndmeHalduse tüübile võimalik peale ehitada teine lahendus, sedakorda
joonistusoskusega. Siin kasutatakse arvudena välja küsimise oskust.
Joonistustahvel lisatakse funktsioonis etteantud nimega kihile sedakorda
Javaskripti DOM-funktsioonide abil.
var tahvel=document.createElement("canvas");
tahvel.setAttribute("width", "300");
tahvel.setAttribute("height", "200");
tahvel.style.backgroundColor="yellow";
document.getElementById(kihinimi).appendChild(tahvel);
Üheks mooduseks elementide veebilehele lisamisel on lehe elementide omadus
innerHTML, kuhu kirjutatud väärtused teisendatakse brauseri mälus seal
olevateks objektideks. Samas on aga võimalik ka objektipuud mööda liikuda ja
seal andmeid elemente luua ja ümber paigutada, mis mõnel juhul on mugavam või
kiirem. Sõltumata loomismoodusest saab tahvlit ikka ühtemoodi kasutada.
Kujundid
Tulemusena võibki imetleda andmete graafilist väljundit.
Ülesandeid
Pane näited tööle
Kuva AndmeJoonise tulpade juurde ka nimetused ja arvud
Ringjoonega seotud arvutused
Ring kipub vähegi graafilisemate lahenduste juures ikka ette tulema. Olgu siis
tegemist elementide paigutamise, liikumise või vaatesuundade arvutamisega.
Ringjoone parameetriline võrrand
Lisaks mehhaanikas asukoha leidmiseks tarvilikule x=x0+v0t+at2/2 ning
kaugusearvutusearvutusele on kolmandaks tähtsaks ettetulevaks arvutustehteks
ringjoone parameetriline võrrand: x=x0+r*cos(a), y=y0+r*sin(a). Selle abil saab
lihtsamal juhul panna näiteks täpi mööda ekraani ringikujuliselt liikuma.
Ringi arvutused
Ringjoone parameetriline võrrand
Ülesandeid
Käivita näide
Muuda liikumise keskkohta ja raadiust
Pane ekraanil korraga ringikujuliselt liikuma kaks täppi
Ruudud ringjoonel
Kui ühekorraga ruudud valmis joonistada ja mitte andmeid muuta ja ekraani
tühjendada, siis saab soovitud kujundid ilusti ringi peale paigutada.
Ringi arvutused
Ruudud ringjoonel
Ülesandeid
Käivita näide
Koosta kella numbrilaud - ringikujuliselt arvud 1-st 12ni.
Pane iga numbri juurde ka keskkoha poole suunduv joon.
Eelpool olevat ringjoonel liikumise näidet arvestades püüa tööle panna
osutitega kell.
Hulknurk
Järgnevalt veidi pikem näide, kus üheaegselt tegeldakse mitme punkti
keeramisega. Korrapärase hulknurga puhul tuleb teada nurkade arvu ning nende
kaugust keskpunktist. Edasi saab selle põhjal juba jooned tõmmata. Esimesse
punkti tasub minna moveTo-ga, edasi igasse järgmisse nurka saab lineTo abil
joone tõmmata kui tahta ühtlaselt ühendatud hulknurka saada. Ning viimasest
punktist sammu võrra edasi minnes jõutakse jälle algusesse tagasi.
Ringi arvutused
Ruudud ringjoonel
Ülesandeid
Käivita näide
Muuda nurkade arvu ja raadiust
Loo lehele slaiderid raadiuse ja nurkade arvu sujuvaks muutmiseks
Keerlev hulknurk
Hulknurga ühtlaselt keerlema panekuks tuleb esimese punkti algusnurka sujuvalt
muutma hakata. Kui teised esimese järgi arvutada, siis hakkabki nõnda kogu
hulknurk keerlema.
Ringi arvutused
Ruudud ringjoonel
Ülesandeid
Pane näide käima
Võimalda hulknurga pöörlemiskiirust slaideri abil muuta.
Võimalda ta ka teistpidi pöörlema panna
Nurga määramine
Ümmarguste asjade joonistamisel ning ringi ja kaart pidi liigutamisel on hea
ringjoone parameetrilise võrrandi abil nurga, keskpunkti ja raadiuse järgi
koordinaate leida. Hiirega rakendust juhtides aga tuleb mõnikord kasuks
vastupidine - tuleb leida hiire asukohale vastav nurk mõne punkti suhtes, et
saaks ekraanil kujundeid sobivalt pöörata ja liikuma panna. Õnneks on
Javaskriptis selle tarbeks kohandatud arkustanensi funktsioon Math.atan2(x, y),
mis annab etteantud koordinaatidega punkti paiknemise nurga nullpunkti suhtes.
Nõnda on asimuudi leidmine lihtsaks tehtud, tuleb vaid rakendusele sobivad
andmed ette sööta. Järgnevas näites näeb ekraani peal kahte punkti. Üks püsib
paigal, teise paiknemise suunda selle keskpunkti suhtes saab aga hiirega
määrata. Hiire asukoha ja keskpunkti kauguse põhjal leitakse keskpunktist hiire
poole suunduv nurk. Sinnapoole püsiva raadiuse kaugusele joonistatakse
ringjoone parameetrilise võrrandi abil täpp. Nii saabki hiire abil praegu ühte
täppi, aga soovi korral ka tunduvalt keerukamat kujundit ümber keskpunkti
pöörata.
Nurga leidmine
Ruudud ringjoonel
Ülesandeid
Pane näide käima
Kujunda ekraanile nupp, mida on võimalik koos sellel oleva kriipsuga hiire abil
pöörata
Pane selliseid nuppe ekraanile kaks. Kummagi nupu piires saab just selle nupu
pöördenurka sättida.
Rool
Täpi keeramise edasiarenduseks on lihtsa rooli keeramine. Hiire asukohast
leitud nurga järgi joonistatakse kaar punktist mõlemale poole. Ringjoone
parameetrilise võrrandi abil saab ümmarguse täpi kaare keskele soovitud suunda.
Teksti pööramiseks rooli keskosas sobib aga reeperi /koordinaatteljestiku
nihutus ja pööre. Salvestuskäsklusega talletatakse algne olek, et selle juurde
saaks tagasi minna. Edasi translate nihutab nullpunkti rooli keskkoha juurde.
Siis on võimlik tekst selle koha juures sobiva nurga alla keerata ja ekraanile
joonistada. Ning lõpuks restore-käsklus taastab endise olukorra, et muud
joonistuskäsud jälle arusaadavatesse kohtadesse läheksid.
g.save();
g.translate(keskx, kesky);
g.rotate(nurk+(Math.PI/2));
g.fillText("Rool", 0, 0);
g.restore();
Edasi juba töötav kood tervikuna.
Nurga leidmine
Ruudud ringjoonel
Ülesandeid
Pane näide käima
Asenda rooliratta suunda tähistav ringike sobiva nurga alla keeratud R-tähega
Liikur
Tavapäraselt kipume arvutigraafikas eraldi x- ja y-suunda arvestama ja meeles
pidama. Samas nurga all liikumise ja pööramiste puhul on mõnigikord mugavam
meeles pidada pigem asukohta ning liikumissuuna nurka. Edasised arvutused saab
juba nende andmete põhjal teha. Praegusel juhul arvutatakse iga sammu puhul
siinus ka koosiinus uuesti, mis üsnagi töömahukad arvutile. Koodi kiirust
võimalik siitkaudu kasvatada, aga ka nii paistab liikume täiesti õnnestuma.
Ringi arvutused
Ringjoone parameetriline võrrand
Ülesandeid
Pane näide käima
Lisa ekraanile nupud liikuri keeramiseks päri- ja vastupäeva
Pane korraga liikuma mitu liikurit
Joonista joone liikumissuunda näitavasse otsa väike ringike
Keerav liikur
Auto juhtmist jäljendades rooli pööramine ei tähenda mitte korraks sihi
muutust, vaid pööratud rool paneb edasisõidu ajal auto pidevalt vastavas suunas
pöörama. Sarnast tulemust püütakse ka siin saavutada. Ehk siis kui liikur
sõitma pannakse, siis määratakse talle lisaks asukohale, kiirusele ja
algnurgale ka nurgamuutus, et kui palju iga sammuga liikur uuesti pöörab.
Selliselt tehtud liikur sõidab siis vähegi otsesihist kõrvale kallutatuna
mitmesuguse suurusega ringe vastavalt etteantud nurgamuutusele.
Pööramissuuna ja -ulatuse paremaks jälgimiseks on sihtjoone otsas kümne
ekraanipunkti suurune juhtlõik, mis selgema nägemise huvides kolmekordse
võimendusega annab teada, et kui palju ja millises suunas pööratakse.
Pööramisjoone arvutamiseks võetakse liikumisjoone ots ning sealt edasi siis
arvutatakse vajaliku nurga ja pööramisjoone pikkuse järgi uued koordinaadid.
Ringi arvutused
Ringjoone parameetriline võrrand
Ülesandeid
Pane näide tööle
Lisa pööramisnurga suurendamiseks ja vähendamiseks nupud
Rool ja liikur
Autosõidu puhul saab pidevalt sõiduki pööramist muuta. Nii ka siin püütakse
nüüd kaks eraldi loodud lahendust kokku ühendada. Rooli juurest saab küsida, et
kui palju peaks keerama ning liikuri ülesandeks on siis need andmed vastu võtta
ning nende põhjal sujuvalt mööda ekraani liikuda. Suuremalt jaolt saab Rooli ja
Liikuri tüübid kokku kopeerida. Ning lihtsalt liikumise juures siis iga sammu
puhul küsida rooli käest selle pööratuse nurk ning määrata see autole uueks
rooli asendiks ehk nurgamuutuseks iga sammu juures.
auto1.uusRooliAsend(rool1.kysiNurk()/10);
Katseliselt selgus, et suhteliselt mugav oli autot juhtida praeguste
parameetrite järgi siis, kui keeramine sammu juures oli kümnendik rooli
tegelikust pöördenurgast. Aga eks selliste suhete paika sättimine olegi
rakenduse loomise juures mugavuse tekitamise ja katsetamise küsimus.
Ringi arvutused
Ringjoone parameetriline võrrand
Jooniselt võib näha, kuidas siis saab rooli abil liikurit mitut moodi sättida.
Ülesandeid
Pane näide käima
Muuda pööramise suurust vastavalt rooli asendile.
Ringrajasõit
Pane auto sõitma ümber täpi, loe mitu ringi on läbitud
Ringi kraadide järgi saab määrata "väravad", kui kaugelt mingi nurk tuleb
läbida. Väravad on näha joonisel ning nende õiget läbimist kontrollitakse
ringide kohta punktide arvutamisel.
3D
Kolmemõõtmeliste lahenduste loomiseks on mitmeid raamistikke loodud, kus
kasutajal võimalus kujundid ja kaamera sobivasse kohta sättida ning sealtkaudu
meeldivat ruumilist pilti vaadata. Veebigraafika üks abiline näiteks three.js
nime all. Samas lihtsamat ruumilisuse efekti kannatab täiesti ka harilike
kahemõõtmeliste joonistusvahendite abil tekitada
Kaugemal väiksemaks
Arvutijooniste puhul tuleb ikka eristada ekraani- ja maailmakoordinaate. Päris
lihtsate jooniste korral võib ette kujutada, et üks piksel ekraanil on üks
meeter looduses. Või siis üks piksel vastab inimese pikkuse ühele
sentimeetrile. Kõiksugu muude suurenduste puhul aga peab väärtused sobiva
koefitsiendiga läbi korrutama. Samuti ei pruugi me tahta arve lugeda
joonistusala vasakust ülanurgast, vaid mugavam võib olla arvutada mõnest rohkem
joonise keskel olevast punktist - selle väärtuse saab arvutuste juures juurde
liita. Matemaatikaõpikus oleme harjunud, et y-telg suundub üles, arvutiekraanil
suundub see esmalt alla. Ka selle saab märgimuutusega paika sättida. Kolmanda
mõõtme juures tuleb maailmakoordinaatidest ekraanikoordinaatideks arvutades
lihtsalt üks tehe juurde - x ja y tuleb kaugusega (z) läbi jagada. Ehk siis
sama suur asi kaks korda kaugemal näeb kaks korda väiksem välja. Sobivaks
nägemiseks tulevad arvud suurenduskordajaga läbi korrutada. Siin puhul selleks
valitud kümme. Muutujad keskx ja kesky tähistavad koordinaatide alguspunkti
joonisel. Funktsioone ex ja ey kasutatakse ekraani x-i ja y-i arvutamiseks
vastavalt maailmakoordinaatides punkti kolme mõõtme väärtustele.
var keskx=200;
var kesky=150;
var suurendus=10;
function ex(px, py, pz){ //x ekraanil
return keskx+suurendus*px/pz;
}
function ey(px, py, pz){
return kesky-suurendus*py/pz;
}
Joonistamise puhul tuleb siis iga kord sobivas kohas lihtsalt vastavad
funktsioonid välja kutsuda
g.lineTo(ex(x, y, z), ey(x, y, z));
Ehk siis leitakse kolmemõõtmelistele algandmetele vastavad kahemõõtmelised
punktid ekraanil. Joonisele tehakse tsükli abil postirida. Posti alumise otsa y
on 0, ülemise oma 40 ühikut. Kaugused viiest viiekümne ühikuni.
3D
Väikese ettekujutuse tulemusena võib lehel täiesti viisakat postirida näha.
Ülesandeid
Pane näide tööle
Katseta postide mitmesuguste kõrguste ja vahedega
Loo sarnane postirida ka vaatajast paremale
Paiguta postide otsa väikesed ringid nagu tänavalaternad
Kasutaja asukoha muutmine
Kolmemõõtmelises graafikas võivad liikuda kujundid, võib liikuda ka aga kaamera
ehk vaataja ise. Kui vaatesuund jääb otse ette, siis polegi arvutamisel muud
muret, kui tuleb ainult kasutaja asukoht kujundite asukohast maha lahutada.
Ekraani x-koordinaadi arvutamine siis:
function ex(px, py, pz){ //x ekraanil
return keskx+suurendus*(px-vaatajax)/(pz-vaatajaz);
}
Ehk siis nii x- kui z- koordinaadi puhul on vastav tehe tehtud. Mida ettepoole
ise liikuda, seda lähemale tulevad kujundid. Mida ülespoole minna, seda enam
paistavad kujundid allpool. Vaataja sammu muutuja näitab, kui pikkade hüpetega
ta liigub. Juurde nupuriba vaataja andmete muutmiseks ning tekibki juba julgem
ruumilise vaatamise tunne.
3D
Vaade eest
ning vaade pärast mõningast üles- ja vasakule poole liikumist.
Ülesandeid
Pane näide tööle
Koosta kujundiks nelinurkse varjualuse sõrestik - postid ja katusepüramiid.
Vaata seda mitmest asukohast
Koosta kujundiks kuuenurkse varjualuse sõrestik, vaata
Koosta kujundiks kasutaja määratud nurkade arvuga varjualuse sõrestik
Kolmemõõtmeliste andmete objekt
Üksikuid punkte ja jooni arvutada ja kuvada saab täiesti tavaliste muutujatega.
Kui aga vaja koos hakata liigutama hulgast punktidest koosnevaid kujundeid,
siis tekib üksikuid punkte tülikalt suurel hulgal. Objektitüüpide ja objektide
abil aga on võimalik neid mugavamalt hallata, neile ühekorraga käsklusi jagada.
Samuti saab niimoodi mitmemõõtmelised arvutustehted nõnda koodi sisse ära
peita, et hilisema töö juures ei pea nii palju arvutusvigade pärast muretsema,
kui kood algul korralikult üle kontrollitud sai.
Vektor
Punkt ja vektor mõnevõrra sarnased nähtused. Esimesega küll oleme ehk enam
harjunud tähistama asukohta ning teisega liikumist. Aga iseenesest mõlemal on
vajalik arv mõõtmeid ning saab külge panna arvutusteks vajalikud käsud, nii et
otsest põhjust eraldi tüüpide loomiseks ei ole. Mõistet asukohavektor ka
täiesti kasutatakse, nii et las siis siingi piirdutakse ühe tüübiga kolme
koordinaadiga määratud suuruse tähistamiseks. Juurde levinud funktsioonid
liitmise ja lahutamise kohta. Samuti sisu tekstina väljastamiseks. Kusjuures
tähele tasub panna, et praeguse kahe vektori liitmisel tekib uus, kolmas
vektor, esialsete vektorite koordinaadid ei muutu.
Objektidest andmete tekstina välja küsimiseks on Javaskriptil olemas mugav JSON
(JavaScript Object Notation) - vorming. Andmed paigutatakse looksulgude vahele.
Sinna sisse järgemööda tunnuse nimi(võti) ning kooloni taga järgnev väärtus.
Nagu näiteks siin algandmed
{"x":2,"y":4,"z":6}
Käsklus JSON.stringify() teeb objektist sarnase andmetega stringi. Kui mõnikord
on vaja andmeid tekstist tagasi terviklikuks objektiks muuta, siis selleks
sobib käsklus JSON.parse().
Nüüd aga kolmemõõtmelise vektori kood
3D
Töö tulemus kihil:
{"x":2,"y":5,"z":6}
Ülesandeid
Pane näide tööle
Lisa vektorile käsklus korruta(arv), mis väljastab uue vektori, kus kõik
esialgse vektori koordinaadid on selle arvuga korrutatud. Veendu, et tulemus
toimib.
Kahest punktist joon
Vektor hoiab ühe punkti kolm koordinaati ilusti koos. Kui tahta, et joone
andmeid saaks ühe tervikuna käsitleda, siis tuleb omakorda joone kaks otspunkti
üheks tervikuks siduda. Siin seda ka tehakse. Joonele luuakse punktide jaoks
massiiv, kus kohal 0 on üks otspunkt ning kohal 1 teine.
Arvestades varasemat näidet vaataja asukoha liigutamise kohta, lisatakse eraldi
tüüp ja objekt ka vaataja asukoha meelespidamiseks ning vastavalt sellele Joone
joonistuskäskluses ekraanikoordinaatide arvutamiseks. Valemid sarnased kui
enne, lihtsalt nüüd on need funktsioonide sisse pandud ja funktsioonid omakorda
objektiks kapseldatud, et juhtkoodis tekkida võivat segadust vähemaks saada.
Kui tükid olemas, siis nende ühendamine võiks juba üsna lihtsalt minna. Praegu
luuakse kõigepealt uus Joon, mille otspunktide koordinaatideks saavad kaks
Vektor3D-d oma väärtustega. Muud toimetused pandi alusta-funktsiooni sisse,
sest tahvlile pole võimalik lehe päises avanemise ajal ligi saada. Küll aga on
tahvel kättesaadav pärast lehe laadimist body onload-sündmuse peale käivitatava
funktsiooni alusta() sees. Vaatajale määratakse asukoht (hetkel nullpunkt),
joonistamise graafiline kontekst ning koordinaatide nullkoha asukoht ekraanil
(hetkel tahvli keskkoht). Pärast joonistuskäsklust võikski joon ekraanil näha
olla.
var j1=new Joon(new Vektor3D(-20, 0, 5), new Vektor3D(-20, 40, 5));
var vaataja;
function alusta(){
var tahvel=document.getElementById("tahvel1");
vaataja=new Vaataja(new Vektor3D(0, 0, 0),
tahvel.getContext("2d"), tahvel.width/2, tahvel.height/2);
j1.joonista(vaataja);
}
Edasi töötav kood tervikuna.
3D
Ülesandeid
Pane näide tööle
Joonista nõnda ekraanile kaks Joont
Lisa Joonele värvi omadus
Joonista ekraanile kaks eri värvi joont
Muuda Vaataja asukohta
Joonte kogum
Üksikut joont on tõenäoliselt lihtsam ilma igasuguste objektideta joonistada.
Kui mitu joont aga moodustavad uue terviku, siis on see mõistlik uude kesta
panna - nii on võimalik seda hiljem korraga joonistada, liigutada või värvida.
Kogumi juurde tuleb massiiv millesse andmeid lisada. Kogumile antud
joonistuskäsklus käib läbi kõik kogumis olevad jooned ning kutsub välja neist
igaühe joonistuskäskluse. Praegu siin juures ka käsklus vaataja tahvli
puhastamiseks, aga selle saab mujale panna, kui tekib soov mitu kujundit
järjestikku samale tahvlile joonistada.
function KujundiKogum(){
this.kujundid=new Array();
this.lisaKujund=function(k){this.kujundid.push(k);}
this.joonista=function(vaataja){
vaataja.g.clearRect(0, 0, 400, 300);
for(var i=0; i
Edasi juba kood tervikuna.
3D
Lehel saab nõnda vaatajaga ringi liikuda.
Ülesandeid
Pane näide tööle
Koosta joontest kaks kogumit: kahest joonest T-täht ning kuuest joonest
tetraeeder (kolmnurkne püstprisma). Kuva mõlemad ekraanile. Vaata neid kaamera
liigutamise abil mitmelt poolt.
Lisa kogumile omaduseks toon. Kuva kumbki kogum vastava värviga ekraanile.
Lisa kogumile käsklus teeSamm, mis siis kogumis olevaid kujundeid etteantud
vektori jagu edasi liigutab. Lisa lehele nupp ühe ekraanil oleva kogumi
liigutamiseks.
Lisa kogumile muutuja liikumissammu vektorina hoidmiseks. Pane kumbki kujund
ühtlase kiirusega tema küljes olevas suunas liikuma.
Reaalse mõõtkava arvestamine
Siiani tehtud näidetes jagati kaugustunnetuse saamiseks x ja y-koordinaat
lihtsalt kaugusega läbi ning vajadusel korrutati suurenduskordajaga, et pilt
enamvähem sobivas suuruses oleks. Tõsielulise olukorra järele tegemisel aga
saab andmed ka täpsemalt näiteks meetrites välja arvestada ning siis vaateaval
mõttelisel kaugusel olevale kilele projitseerida. Ning edasi otsustada, millise
suurendusega projektsioonikile punktid arvutiekraani piksliteks ümber arvutada.
Kolmnurga valemite järgi on vaadeldava punkti ühe (nt. x) mõõtme koordinaadi ja
silmast kauguse suhe sama kui selle punktini viiva joone lõikekoha kilel ja
kile kauguse suhe. Sellise arvutuse järgi õnnestub leida koht kilel
(px-vaatajax)*kilekaugus/(pz-vaatajaz)
Kuna vaataja ei pruugi olla koordinaatide nullpunktis ning tavajuhul on
vaatekile mõõtmed pigem võrreldav ekraanipikslite arvuga sentimeetrites, siis
saab kolmemõõtmelised koordinaadid kahemõõtmelisteks arvutada järgnevalt.
var suurendus=100; //sentimeetrit meetri kohta
function ex(px, py, pz){ //x ekraanil
return keskx+suurendus*(px-vaatajax)*kilekaugus/(pz-vaatajaz);
}
Edasi juba programmikood tervikuna
3D
Samuti kaheksanurkse telgi vaated mitmest asukohast.
Andmehaldus
Eesnimede loetelu
Alustuseks näide, kuidas massiivis lehel andmeid hoida ning nad sobivalt välja
kuvada. Nimehalduse objekt nagu varasemateski näidetes seotud lehel oleva
kihiga. Lisamisfunktsiooni abil saab objekti massiivile eesnimesid juurde
lisada, kuvamiskäskluse peale kuvatakse nad ekraanile. Objekti sees
hoolitsetakse, et iga muutuse puhul (praegusel juhul andmete lisamisel)
uuendataks ka väljundit.
Eesnimede haldus
Nimeharjutused
Funktsiooni lisaargumendid
Javaskripti funktsiooni omapära on, et sinna sisestatavate argumentide arv
pole piiratud. Olemasolevatele võib käivitamisel alati soovitud väärtusi juurde
lisada, need saadakse funktsiooni sees kätte muutuja arguments kaudu. Nii
siinses näites Nimehalduse loomisel eeldatakse, et antakse ette vähemasti kihi
nimi. Edasised parameetrid lisatakse tsükli abil eesnimedena nimeloetellu.
Seetõttu hakkab loendur nimega abi ühest, kuna arguments[0] on esimene
parameeter ehk kihi nimi.
Eesnimede haldus
Nimeharjutused
Punktide haldus
Esialgu peeti meeles vaid üksikuid väärtusi ehk eesnimesid. Nüüd aga väärtused
meeles kirjetena - iga kasutaja juures kirjas ka, et kui palju talle punkte
antud on. Andmed ikka massiivis, aga väljastuskujundus loetelu asemel tabelis.
Samuti tulemus lisatakse objekti ehk kirjena , väljadeks kasutajanimi ning
punkte.
Haldus
Nimeharjutused
Sortimine
Kui tegemist võistlustulemustega, siis on tähtsus punktide järgi järjestusel.
Kuna kirjes mitu välja, siis arvuti omast tarkusest ei tea mille järgi andmed
ritta panna. Massiivi elemendis oleva ühe väärtuse korral piisab käsust sort()
ning andmed on vastava tunnuse vaikimisi väärtuste järgi ritta pandud - arvud
suuruse ning tekstid tähestiku järgi kasvavalt. Mitme tulba puhul tuleb aga
öelda, mille järgi järjestada. "Ütlemiseks" on eraldi funktsioon, millele
hakatakse sorditavaid andmeridu kahekaupa ette andma. Kui esimene neist peaks
olema järjekorras eespool, siis tagastatakse negatiivne arv, kui tagumine
eespool, siis positiivne. Kui järjestatava tunnuse järgi pole järjekord tähtis,
siis tuleb tagasi anda 0. Kogu selle töö suudab ära teha käsklus
this.andmed.sort(function(k1, k2){return k1.punkte-k2.punkte});
Edasi juba kood tervikuna.
Haldus
Nimeharjutused
Ülesandeid
Pane näited käima
Koosta lehele üks kiht poiste nimede jaoks, teine tüdrukute nimede jaoks,
mõlemad sorditakse lisamisel tähestiku järgi
Lisaks nimedele on inimeste juures kirjas ka pikkused. Andmed sorditakse
kõigepealt pikkuste järgi, sama pikkusega inimesed pannakse ritta tähestiku
järjekorras
Loo eraldi objekt, milles võimalik hoida tantsupaaride andmeid. Väljadena
kirjas mõlema tantsija nimed ja pikkused. Loo lehele nupp, millele vajutades
võetakse nii poiste kui tüdrukute loetelust esimene inimene ning lisatakse
tekkinud paar tantsupaaride loetellu, paariks läinud inimesed eemaldatakse
üksinda ootajate loetelust.
Salvestamine
Veebilehe kliendirakendustega kipub enamasti olema, et kui aken kinni pannakse,
siis on andmed läinud. Või tuleb eraldi serveri poole mõni kaval tükk
kirjutada, et tehtu alles jääks. Mõningaid andmeid sai vanasti salvestada
küpsistega, kuid enamasti pidi sealjuures piirduma mõne üksiku arvu või
tekstiga, et brauseri mahulimiiti ei ületaks. Alates HTML5st kasutada aga
muutujad sessionStorage ning localStorage, mille sees ligi viie megabaidi jagu
andmeid hoida saab ning seetõttu ei pea salvestamisega liialt kokkuhoidlik
olema. Nagu nimigi ütleb, siis sessionStorage's püsivad andmed sessiooni
vältel, ehk senikaua kuni brauser lahti on. Muutuja localStorage aga püüab neid
pikemat aega säilitada. Neisse muutujatesse saab parameetrite kaudu omi
väärtusi tekstina talletada. Lihtsamal juhul saab lehe avamisel kontrollida,
kas on talletatud väärtus võtmega punktiseis. Kui jah,siis saab seda küsida.
Nagu näha, siis getItem andmete küsimiseks, sarnaselt hiljem setItem andmete
salvestamiseks.
Javaskriptil andmete tekstina hoidmiseks on mugav kuju nimega JSON ehk
JavaScript Object Notation. Nelja kasutaja nimed ja punktid näevad välja
näiteks järgnevalt:
[{"kasutajanimi":"Sass","punkte":8},{"kasutajanimi":"Ants","punkte":9},{"kasutaj
animi":"Mari","punkte":9},{"kasutajanimi":"Juku","punkte":10}]
Andmete tekstiks ja tagasi muutmiseks sai tehtud kaks abistavat funktsiooni:
this.andmedTekstina=function(){
return JSON.stringify(this.andmed);
}
this.andmedTekstist=function(tekst){
this.andmed=JSON.parse(tekst);
this.kuva();
}
Sealjuures saab mugavasti kasutada brauserisse sisse ehitatud objekti JSON
käsklusi parse ning stringify. Edasi saab juba punktid talletada ja vajadusel
välja küsida.
function salvestaPunktid(){
localStorage.setItem("punktiseis", h1.andmedTekstina());
}
function loePunktid(){
if(localStorage.getItem("punktiseis")){
h1.andmedTekstist(localStorage.getItem("punktiseis"));
}
}
Ning edasi juba kood tervikuna
Haldus
Nimeharjutused!
Ülesandeid
Pane näide käima.
Lisa kolmandaks salvestatavaks tulbaks sugu
Lisa lehele valik, millega saab näha ainult poiste andmeid, ainult tüdrukute
andmeid või mõlemaid koos.
Veebiühenduseta rakendus
Veebilehel töötavat rakendust on mugav brauseris ja veebilehelt avada, kuid
sugugi pidevalt ei pruugi ühendus olemas olla. Selle mure leevendamiseks on
loodud appcache, mis kord avatud lehe andmed brauserisse meelde jätab, nii et
lehte saab kasutada ka ühenduse puudumisel. Koos localStorage-ga moodustavad
nad hea komplekti, millega teha täiesti töölauarakendustega võrreldavaid
lahendusi. Selliseks hoidmiseks tuleb apache-serveri puhul luua eraldi
kirjeldusfail, kus CACHE MANIFEST-sektsioonis on failide loetelu, mis palutakse
veebilehitsejal meelde jätta. Soovitatavalt on failis ka trellidega välja
kommenteeritud real faili muutmisaeg - lahendus töötab nõnda, et html-fail
laetakse uuesti alles siis, kui manifesti faili on muudetud.
punktid.appcache
CACHE MANIFEST
# 11:32
punktihaldus5.html
Et server teaks appcache-failidele eraldi tähelepanu pöörata, tuleb vastav rida
lisada lehtede kuvamise ja tüüpide jagamise eest hoolitsevase faili .htaccess
.htaccess
AddType text/cache-manifest .appcache
Esmasel avamisel küsitakse üle, et kas kasutaja ikka tahab lehte oma lehitseja
puhvrisse salvestada. Kui jah, siis edasi saab juba ilma ühenduseta toimetada
ning lahenduse lahti ka siis, kui parajasti pole võimalik välismaailmaga sidet
pidada.
Brauseri poolt peab samuti märkima, et lehte puhverdatakse. Selleks piisab
html-märgendi juures faili määramisest kus kirjas puhverdatavate lehtede loetelu
Väike läbimäng ka
Avatud leht
Andmete lisamine
Salvestusnupule vajutus
salvesta
Uue kasutaja lisamine
Kasutaja olemas
Seis pärast lugemisnupule vajutamist. Kuna Antsu ei salvestatud, siis taastati
eelmise salvestuse aegne seis.
Ülesandeid
Pane näide tööle.
Hoia appcache abil salvestatavana lehte, kus lisaks kasutajanimele ja
punktidele on salvestatud ka sugu.
Koosta veebileht, kus kasutaja saab ekraanile tekitada ringe. Ringide
koordinaadid talletatakse localStoragesse. Leht puhverdatakse appcache abil
XMLHttpRequest
Javaskripti juures on võime veebilehele taustalt andmeid laadida või neid
kasutajale nähtamatult serverisse salvestada. Esialgu kasutati seda üksikute
muutuvate uudiste näitamiseks, kuid selle abil luuakse mõnikord ka terveid
lehestikke, kus põhilehte vahetamata saab kasutaja palju tarvlikku tehtud. Et
andmeid serverist kätte saada, peavad nad kusagil olemas olema. Selleks
praeguses näites tekstifail teade.text vajaliku sisuga.
teade.txt
Järgmisel nädalal on koolivaheaeg!!
Kohene päring
Lühim moodus on paluda andmed failist küsida ning nad omale sobivasse kohta
pista. Ühenduse jaoks luuaks muutuja tüübist XMLHttpRequest. Käsuga open
määratakse, et millise meetodiga, kust ja millisel moel andmed küsida.
GET-päring annab serverile vajadusel aadressireal andmed kaasa, siin aga
kasutame seda vaid teksti lugemiseks. Teiseks parameetriks on failinimi. Kolmas
parameeter false ütleb, et ühendus ei ole asünkroonne. Ehk siis praegusel juhul
kui andmeid küsitakse, siis oodatakse ilusti vastus ära ja vahepeal midagi muud
ei tehta. Käsklus send() paneb andmeliikluse tööle, tekstifaili sisu saab kätte
loodud objekti muutujast nimega responseText. Ning praegusel juhul see
kuvatakse lihtsalt lehele.
Veebiühendus
Kiire ühenduse ja väikeste andmete puhul on selline lähenemine mugav.
Probleemiks aga, et kogu leht hangub andmete laadimise ajaks. Ning kui ühendus
aeglane või muul puhul andmete lugemine rohkem aega võtab, siis see tekitab
tüütu seisaku.
Ülesandeid
Pane näide tööle
Pane lehele kaks nuppu. Igale vajutades saab kätte vastavas failis oleva uudise
Lisa kolmas nupp. See küsib andmeid PHP lehelt, mis näitab kellaaega
Asünkroonne päring
Hangumise vältimiseks soovitatakse väärtuste küsimiseks üldjuhul asünkroonset
päringut. See tähendab, et käsu käivitamisel antakse XMLHttpRequestile
sooviavaldus. Ning alles siis, kui andmestik kohale saabunud, käivitub koos
sellega funktsioon, kus nendega midagi tegema hakata. Loodud objekti välja
onreadystatechange väärtuseks antakse funktsioon mil nimeks praegu
andmedSaabusid ning mille ülesandeks saabuvad andmed samuti välja näidata.
Välja readyState järgi saab kindlaks teha, milline teade saabus - kas ühenduse
loomise, ebaõnnestumise või andmete kohale jõudmise kohta. Viimase koodiks on
neli ning seejärel võib saabunud andmetega toimetama hakata.
Veebiühendus
Tulemus:
Tervitamine serverist
Järgmises näites käivitatakse serveris PHP-fail, mis tervitab
eesnime-parameetriga kaasa saadetud nimega tegelast. Andmete saatmiseks
GET-meetodiga tuleb vajalikud parameetrid ja väärtused kirjutada avatava
failinime lõpu pandud küsimärgi järgi. Et täpi- ja muude salapäraste tähtedega
nimed samuti edukalt serverisse kohale jõuaksid, selleks aitab teksti sobivaks
sättida javaskripti käsklus encodeURI.
Veebiühendus
Palun eesnimi:
tervitus.php
Veebiühendus
Palun eesnimi:
Mitu parameetrit päringus
Eesnime ja perekonnanime mõlema saatmiseks tuleb nad aadressireal &-märgiga
eraldada. Mõlemad ilusti ära kodeerida ning jõuavadki kohale. PHP peab muidugi
ka mõlema vastuvõtuks valmis olema, et neile reageerida.
Veebiühendus
Eesnimi:
Perekonnanimi:
tervitus2.php
kasutajanimi="juku";
$k->punkte=7;
$kasutajad[0]=$k;
$k=new stdClass();
$k->kasutajanimi="kati";
$k->punkte=8;
$kasutajad[1]=$k;
echo json_encode($kasutajad);
Väljund
Väljaspool kõige ümber siis kandilised massiivisulud, edasi iga kirje ümber
loogelised sulud.
[{"kasutajanimi":"juku","punkte":7},{"kasutajanimi":"kati","punkte":8}]
Väljund Javaskripti
JavaScript Object Notationi nimi sellest tulebki, et tulemusi saab vabalt
javaskripti muutujaks panna. Sellega saab hakkama rida
var kd=;
Ehk siis eelnevalt nähtud kasutajate loetelu jõuab ühe käsu abil
kliendipoolsesse muutujasse. Edasi näitekood tervikuna
kasutajanimi="juku";
$k->punkte=7;
$kasutajad[0]=$k;
$k=new stdClass();
$k->kasutajanimi="kati";
$k->punkte=8;
$kasutajad[1]=$k;
?>
Andmete lugemine
Tulemuseks javaskripti ja HTMLi abil kujundatud tabel
Ülesandeid
Pane näited tööle
Koosta PHPs massiiv kataloogis olevate failinimedega (käsklus scandir).
Moodusta neist failinimedest JSON-kujul tekst.
Loe failinimed javaskriptis sisse, moodusta nendest veebilehel loetelu.
Failinimele vajutamisel küsitakse faili sisu XMLHttpRequesti abil ning
näidatakse lehel.
Andmed SQL-tabelis
Järgnevalt veidi pikem näide, kuidas mängurakenduse punkte ja kasutajanimesid
serveris asuvas andmetabelis hallata.
Andmete hoidmiseks kahe tulbaga tabel - üks kasutajanime, teine punktide jaoks
CREATE TABLE punktihaldus(
knimi VARCHAR(30) PRIMARY KEY,
punktidearv INT
);
Mõned andmed ka sisse.
INSERT INTO punktihaldus VALUES ('malle', 13);
INSERT INTO punktihaldus VALUES ('kalle', 15);
PHP-fail andmete küsimiseks andmetabelist ning väljastmiseks JSONina
prepare(
"SELECT knimi, punktidearv FROM punktihaldus ORDER BY punktidearv");
$kask->bind_result($knimi, $punktidearv);
$kask->execute();
$hoidla=array();
while($kask->fetch()){
$k=new stdClass();
$k->kasutajanimi=$knimi;
$k->punkte=$punktidearv;
array_push($hoidla, $k);
}
return $hoidla;
}
echo json_encode(kysiKasutajad());
Tulemus:
[{"kasutajanimi":"malle","punkte":13},{"kasutajanimi":"kalle","punkte":15}]
Testimise tulemuse järgi saab kontrollida, et andmed tulevad baasist välja.
Edasi näite edasiarendus. Juurde funktsioon uuendaKasutaja, millele antakse
kasutajanimi ning uus punktide arv. Kui kasutaja puudub baasist, siis
temanimeline rida lisatakse. Kui kasutaja olemas, siis juhul kui uus punktide
arv on tal eelmisest suurem, siis tulemus asendatatakse, muul juhul ei tehta
midagi. Kasutajate uuendamiseks antakse ette JSON-vormingus tekst
kasutajanimede ja punktide kohta. Käsu json_decode abil eraldatakse sealt
üksikute kasutajate andmed ning siis igaühega pannakse uuenduskäsklus eraldi
käima.
prepare(
"SELECT knimi, punktidearv FROM punktihaldus ORDER BY punktidearv");
$kask->bind_result($knimi, $punktidearv);
$kask->execute();
$hoidla=array();
while($kask->fetch()){
$k=new stdClass();
$k->kasutajanimi=$knimi;
$k->punkte=$punktidearv;
array_push($hoidla, $k);
}
return $hoidla;
}
function uuendaKasutaja($knimi, $punktidearv){
global $yhendus;
$kask=$yhendus->prepare(
"SELECT punktidearv FROM punktihaldus WHERE knimi=?");
$kask->bind_param("s", $knimi);
$kask->bind_result($p);
$kask->execute();
if($kask->fetch()){
$kask->close();
if($punktidearv>$p){
$kask=$yhendus->prepare(
"UPDATE punktihaldus SET punktidearv=? WHERE knimi=?");
$kask->bind_param("is", $punktidearv, $knimi);
$kask->execute();
}
} else {
$kask=$yhendus->prepare("INSERT INTO punktihaldus VALUES(?, ?)");
$kask->bind_param("ss", $knimi, $punktidearv);
$kask->execute();
}
}
function uuendaKasutajad($jsonstr){
$m=json_decode($jsonstr);
foreach($m as $k){
uuendaKasutaja($k->kasutajanimi, $k->punkte);
}
}
uuendaKasutajad(
'[{"kasutajanimi":"palle","punkte":14},
{"kasutajanimi":"kalle","punkte":15}]');
echo json_encode(kysiKasutajad());
Nõnda saab pärast andmete uuenduskäsklust serveris olevat uut tulemust vaadata.
Ülesandeid
Pane näide tööle
Katseta mitmesuguste kasutajate ja punktiarvudega, jälgi tulemust
Koosta veebileht, kust saab tarvliku JSON-stringi sisestada, hoolitse, et
server selle kätt saaks ja tulemusi arvestaks.
Ajaxi abil lugemine
Punktide haldamiseks nüüd eraldi kliendipoolne rakendus koos eraldiseisva
objektiga. Kui andmed leiab localStoragest, kasutab neid, eraldi võimalik ka
serverist tulemusi küsida.
Haldus
Nimeharjutused
Ülesandeid
Pane näide tööle
Pane lehele samaaegselt tööle kaks punktiarvestusobjekti - üks poiste, teine
tüdrukute tarbeks
Koosta ka andmebaasipool nõnda, et kummagi andmeid arvestatakse eraldi
AJAX ka salvestamiseks
PHP poolde juurde täiendus, et kui saabuvad ühe kasutaja andmed, siis vastav
kasutaja kas lisatakse baasitabelisse või uuendatakse ta punktiseisu juhul, kui
uusi punkte piisavalt palju oli.
edetabel4.php
prepare("SELECT knimi, punktidearv FROM punktihaldus
ORDER BY punktidearv");
$kask->bind_result($knimi, $punktidearv);
$kask->execute();
$hoidla=array();
while($kask->fetch()){
$k=new stdClass();
$k->kasutajanimi=$knimi;
$k->punkte=$punktidearv;
array_push($hoidla, $k);
}
return $hoidla;
}
function uuendaKasutaja($knimi, $punktidearv){
global $yhendus;
$kask=$yhendus->prepare(
"SELECT punktidearv FROM punktihaldus WHERE knimi=?");
$kask->bind_param("s", $knimi);
$kask->bind_result($p); //vana punktide arv
$kask->execute();
if($kask->fetch()){
$kask->close();
if($punktidearv>$p){
$kask=$yhendus->prepare(
"UPDATE punktihaldus SET punktidearv=? WHERE knimi=?");
$kask->bind_param("is", $punktidearv, $knimi);
$kask->execute();
}
} else {
$kask=$yhendus->prepare("INSERT INTO punktihaldus VALUES(?, ?)");
$kask->bind_param("si", $knimi, $punktidearv);
$kask->execute();
}
}
if(isSet($_REQUEST["knimi"])){
uuendaKasutaja($_REQUEST["knimi"], $_REQUEST["punktidearv"]);
}
echo json_encode(kysiKasutajad());
Javaskriptile juurde täiendus, kus sisestatud andmed saadetakse taustal
serverisse, nii et need saab PHP lisada andmebaasi. Samas käivitatakse
setInterval'i abil loeVeebist käsklust viie sekundi tagant, et kui peaks mõne
teise kliendi kaudu serveris andmeid uuendatama, siis on varsti ka siin uus
tulemus näha.
kuvamine4.html
Andmete kuvamine
Kasutajanimi:
Punkte:
Ülesandeid
Pane näited käima
Vaata toimimist mitmest aknast ning veendu, et ühes tehtud uuendused kajastuvad
ka teises.
Koosta rakendus kasutaja reageerimisaja mõõtmiseks. Mida kiirem tulemus, seda
parem. Lehele sisenedes sisestab kasutaja oma kasutajanime. Ta peab vajutama
lehele ilmunud kujundile. Aeg salvestatakse baasi. Samaaegselt on näha ka
teiste kasutajate parimad ajad. Serveri poolt lisa võimalus tabeli
tühjendamiseks uue võistluse tarbeks.
Üldisi ülesandeid
Kordamisküsimused
Käsklused, funktsioonid ja objektid. Programmi abstraktsioonitaseme tõstmise
head küljed ning puudused.
Objektide kasutusnäiteid veebilehel töötavate komponentide juures.
Seosed objektide vahel, objektistruktuuri näiteid: kujundid lehel, jalgpall
arvutis, kaardimängurakendus
Objekti prototüüp. Sarnaste oskuste kasutamine mitme objekti juures
Arvutused nurkade ja ringjoone juures. Liikumine mööda ringjoont, pööramine.
Kolmemõõtmeline graafika arvutiekraanil. Asukohtade projitseerimine ekraanil,
vastavad arvutused
AJAXi võimalused veebilehtede loomisel. Sünkroonne ja asünkroonne päring.
Tegevuste tulemuste salvestamine serveris.
Andmete salvestamine kliendi arvutis, localStorage, sessionStorage ning
appcache. Nende võimaluste kasutamine näitrakenduste juures.
Kolme tasemega ülesanded
Pallide tüübid
* Loo palli tüüp, mil on raadius, asukoht ja liikumissuund ning
liikumisarvutuste käsklus. Tekita paar palli ekraanile, lase neil oma andmete
järgi liikuda.
* Loo pallile prototüübi abil alamtüüp, mis liikudes kukub raskusjõu abil
allapoole. Pane mõlemat tüüpi pallid läbisegi liikuma.
* Pallidel on alaserv, millest allapoole ei kukuta. Kui üks pall satub kokku
teise palliga, siis teine neist hävib ning esimene muutub suuremaks.
Hulknurgad
* Koosta tüüp ruudu jaoks, parameetrina saab ette anda tippude kauguse
keskkohast. Joonistamiseks võib kasutada tavalise ristküliku käsklust. Katseta.
* Loo alamtüüp sümmeetrilise hulknurga loomiseks. Ette saab anda nurkade arvu
ning kauguse keskkohast. Katseta eksemplare läbisegi.
* Võrreldes eelmisega ei pruugi hulknurk olla sümmeetriline. Tippude nurgad
ning kaugused keskkohast antakse loomisel ette. Kujundi nurkade kaugusi
keskusest on võimalik muuta. Samuti saab hulknurki kloonida ja ekraanil
nihutada.
Jalgratas
* Koosta komponent pöörleva ratta tarbeks, katseta.
* Sama komponendi abil loo kaks suurt ratast ning suur hammasratas.
* Võimalda hiirega suurt hammasratast pöörata. Ühes sellega pöörlevad ka suured
rattad, ainult et kaks ja pool korda kiiremini.
Lift
· Lift sõidab üheksakorruselises majas ülevalt alla.
· Liftil on numbrid ühest üheksani ning igal korrusel on kutsenupp. Lift
sõidab vajutatud korrusele.
· Lisaks eelmisele on trepikojas lifte kaks. Kutse peale sõidab kohale
lähim vaba lift.
Mängukaardid
· Osaliselt üksteise peale joonistatakse kolm juhuslikku mängukaarti.
· Kaarte saab üksteise peale hiirega vedada.
· Kaardid on segatuna laiali laua peal. Sealt saab välja lohistada kaks
kaarti ning need ringi pöörata. Kui numbrid on ühesugused, võetakse see paar
välja ning leidjale lisatakse punkt.
Automaatsalvestus veebilehel
* Trükitav tekst salvestatakse automaatselt localStorage abil ning näidatakse
uuel sisenemisel.
* localStorages salvestatud tekst salvestatakse iga paarikümne sekundi tagant
ka serverisse. Uues kohas lehte avades näidatakse serverist tulnud sisu.
* Kui lehe avamisel erinevad serveris olev sisu ning localStorages olev sisu,
siis näidatakse kasutajale mõlemat ning küsitakse, et kummaga edasi töötada.
Kolmnurga joonistamine
* Veebilehele joonistatakse kolmnurk. Kolmnurga ühe külje pikkust saab kasutaja
muuta.
* Kolmnurga kõigi kolme külje pikkust saab kasutaja eraldi muuta.
* Selliseid muudetava küljepikkusega kolmnurki on lehel kasutaja soovitud arv.
Graafika salvestus
* Loo vahend veebilehel ruutude joonistamiseks ja paigutamiseks.
* Joonistatud andmed saab salvestada serverisse.
* Olemasolevate andmete põhjal saab pildi ekraanil taastada ning seda muuta ja
täiendada.
Tähemärkidega kujundus
* Koosta Javaskripti abil klass, mille eksemplarile saab anda ette tähemärgi
ning siis selle eksemplari käest soovitud pikkusega selle tähemärgiga jadasid
küsida.
* Lisa klassile käsklus, kus käsklusele etteantud tekst ümbritsetakse klassile
etteantud tähemärkidest moodustatud ristkülikuga.
* Statistikana peetakse klassis eraldi meeles, millist käsklust ja millal
käivitati. Andmeid saab välja küsida.
Asukohtadega jututuba
* Kasutajad saavad jututoas vestelda. Hiirega ekraanile vajutamisel saadetakse
edasi ka kasutaja koordinaadid.
* Pildil on näha vestlejate asukohad. Igaüks saab enese nime asukohta hiirega
muuta.
* Võrreldes eelmisega kostavad vaid nende kasutajate teated, kes on kuulajast
pildil vähem kui 200 ekraanipunkti kaugusel.
Kujundid
* Koosta objekt asukoha (x, y) andmete hoidmiseks. Koosta asukohtadest massiiv.
Trüki massiivi andmed ekraanile.
* Koosta objekt, mille sees üheks väljaks on asukohtade massiiv. Lisa objektile
käsklus nende andmete järgi joonistamiseks. Vastavalt objekti küljes olevale
parameetrile joonistatakse tulemus kas täppidena, ühendatud joontena või seest
täidetud alana.
* Koosta objekt, mille sees üheks väljaks on eelnevas punktis kirjeldatud
kujundite massiiv. Lisa käsklused kujundite ükshaaval lisamiseks, eemaldamiseks
ning komplekti tervikuna ekraanile joonistamiseks.
Hammasrattad
• Joonistatakse kasutaja määratud hammaste arvuga hammasratas.
• Selliseid hammasrattaid joonistatakse kaks ning pannakse üksteisesse
hambunult pöörlema.
• Kasutaja annab ette mõlema hambunult pöörleva ratta hammaste arvu.
Valdade valimine
* Koosta massiiv maakondade nimedega. Loo selle massiivi põhjal lehele
rippmenüü.
* Lisa lehele andmed igas maakonnas olevate valdade nimedega. Vastavalt
maakonna valimisele kuvatakse teises rippmenüüs selle maakonna vallad.
* Maakondade ja valdade tabelid on andmebaasis. Loo vorm ettevõtmisel osalejate
andmete sisestamiseks. Igaüks sisestab oma ees- ja perekonnanime,
elektronpostiaadressi ning valib maakonnavaliku järgi Javaskripti abil ette
tulevast vallast omale sobiva. Osalejate andmed talletatakse serverisse.
Tähtede püüdmine
* Pane ühe sõna tähed ükshaaval ülevalt alla kukkuma.
* Sõnade loetelu on serveris andmebaasis. Sealt valitakse juhuslik sõna ning
pannakse lehel tähtede kaupa kukkuma. Kasutaja saab tähti hiirega püüda. Kui
kõik tähed käes, näidatakse, et sõna püütud.
* Võrreldes eelmisega kukub tähtede vahel tärne, mida ei tohi püüda. Serveris
peetakse arvestust, et millist sõna mitu korda pakutud ning mitu korda kätte
saadud.
Lahendusi ja täiendusi
Objektid
Ringi pindala arvutaja objektina
Kalkulaator
Arvutamine
Kaks pindala arvutajat
Kalkulaator
Arvutamine
Seadistatav kalkulaator
Kalkulaator
Arvutamine
Ladu
Lisa objekti kujundusse teine tekstiväli, kus saab määrata, millise koguse
võrra olemasolevat väärtust kasvatatakse või kahandatakse
Kalkulaator
Arvutamine
Tekstivälja asemel saab muudetava suuruse valida rippmenüüst
Kalkulaator
Arvutamine
Lisa nupp laoseisu nullimiseks
ladu5.html
Kalkulaator
Arvutamine
ladu5.js
function Laohaldus(kihinimi, kogus, muutused){
this.algus=function(){
this.kiht=document.getElementById(kihinimi);
this.kogus=kogus;
this.muutused=muutused;
window[kihinimi+"_ladu"]=this;
var rippmenyy="";
this.kiht.innerHTML=
" "+
""+
rippmenyy+
" "+
" ";
this.vastusekiht=document.getElementById(kihinimi+"_vastus");
this.muutusevalik=document.getElementById(kihinimi+"_valik");
this.kuva();
}
this.kuva=function(){
this.vastusekiht.value=this.kogus;
}
this.v2iksemaks=function(){
this.kogus-=this.muutused[this.muutusevalik.selectedIndex];
this.kuva();
}
this.suuremaks=function(){
this.kogus+=this.muutused[this.muutusevalik.selectedIndex];
this.kuva();
}
this.nulli=function(){
this.kogus=0;
this.kuva();
}
this.algus();
}
Pallid platsil
Koosta tsükkel platsile pallide lisamiseks
Lisa platsile parameetrid suuruse kohta pikslites.
Lisa platsile äärejoon ja määra selle kaugus servast
Kujundid
Kahemõõtmelised kujundid
Vektor asukoha ja nihke jaoks. Kahest vektorist Joon ning Joontest Kujundid,
mida eraldi liigutada saab. All näites hakkab kumbki kolmnurk omasoodu liikuma.
Graafika
Kaks postirida
3D
Prototüübid
String
Laiendamine
15 tähte, 3 sõna.
Vektor
Käsklus muudaVektoritKorrutades, jätab objekti samaks, lihtsalt muudab selle x-
ja y-koordinaati kordaja jagu. Käsklus uusVektorKorrutades jätab vana vektori
muutumatuks, käsust tagastatakse uus vektor, mille võimalik hilisem muutmine
enam esialgset vektorit ei sega.
Laiendamine
(1.2, 1.6)
(6, 8)
Ring
Ringile antakse funktsiooni parameetrina kaasa ligipääs teisele ringile.
Funktsiooni sees otsustatakse, kas ringid puutuvad omavahel kokku.
Laiendamine
(2, 4)(2, 80) puutub: false
Ringide massiiv
Ringe on rohkem. Kõik algul oleva ringiga kokku puutuvad ringide muutujad
kopeeritakse eraldi massiivi ning sealt trükitakse välja.
Laiendamine
Tabatud: (2, 8)(20, 4)(10, 10)
Nurgaarvutused
Kella numbrilaud
Ringi arvutused
Ruudud ringjoonel
Keeratav nupp
Nurga leidmine
Ruudud ringjoonel
Nupp objektina
Nurga leidmine
Ruudud ringjoonel
Keeratavad nupud objektina
Nurga leidmine
Ruudud ringjoonel
Maa ja Kuu
Planeet tiirleb ringjoonel, kaaslane ümber planeedi.
Ringi arvutused