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

Ringjoone parameetriline vƵrrand

Roolitav liikur ringrajal Ringi arvutused

Ringjoone parameetriline vƵrrand