ProgeTiigri õppematerjal Kliendipoolsed veebirakendused Jaagup Kippar 2013 Sisukord Algus 5 Tekstilehekülg 5 Ülesandeid 8 Kasutajat tervitav leht 8 Ülesanne 11 Tollid sentimeetriteks 11 Ülesandeid 12 Joonistamine 13 Ruut ekraanil 13 Ülesandeid 15 Mõõtude järgi ristkülik 15 Ülesandeid 17 Joon 17 Ülesandeid 18 Joone värv ja paksus 18 Ringid 19 Ülesandeid 20 Hiir 21 Hiire koordinaatide püüdmine 21 Ülesandeid 22 Ristkülik hiire kohale 22 Ülesandeid 23 Juhuarv 23 Ülesandeid 25 Hiirega kujundi suuruse määramine 25 Ülesandeid 26 Asukoha meelespidamine 27 Ülesandeid 29 Liikumine 29 Korduvalt käivituv käsk 29 Ülesandeid 30 Liikumise suuna määramine 31 Ülesandeid 32 Seiskumine vasakus servas 32 Ülesandeid 33 Seespüsimise kontroll 33 Ülesandeid 35 Ruudu kutsumine hiirega 36 Ülesandeid 37 Liikumiskiiruse määramine hiirega 37 Ülesandeid 38 Kukkumine 39 Ring ekraanil 39 Ühtlane kukkumine 40 Ülesandeid 41 Kiirenev kukkumine 41 Ülesandeid 42 Kukkumiskoha määramine hiirega 42 Ülesandeid 44 Peatumine servas 44 Ülesandeid 46 Palli loopimine 46 Ülesandeid 48 Andmed ja otsing 48 Massiiv 48 Elementide arv 49 Ülesandeid 49 Juhusliku järjekorranumbriga element 50 Ülesandeid 51 Kordused 51 Ülesandeid 52 Tsükkel ja massiiv 52 Ülesandeid 54 Teksti otsimise käsk 55 Suur- ja väiketähed 58 Ülesandeid 59 Otsing kirjetest 59 Ülesandeid 61 Pallide mäng 61 Ülesandeid 64 Põrkavad pallid 64 Ülesandeid 66 Raskuskiirendus ja põrkamine 66 Ülesandeid 68 Hiirevajutus ühel pallidest 69 Ülesandeid 71 Liikumine ja hiirevajutus üheskoos 71 Ülesandeid 73 Kellaaeg 74 Ajavahemik 74 Ülesandeid 75 Liikumine, hiir ja aeg 75 Ülesandeid 77 Tulemuste loetelu 78 Loetellu lisamine 78 Ülesandeid 80 Tulemuste järjestamine 80 Lahendusi ja täiendusi 86 Algus 86 Tervitamine ees- ja perekonnanimega 86 Toodete hindade summa 87 Kolme arvu aritmeetiline keskmine 88 Kalkulaatorite ideid: 89 Joonistamine 89 Ristküliku asukoha ja suuruse määramine koodis 89 Kaks ristkülikut 90 Torn 91 Ristküliku asukoha ja suuruse sisestamine kasutajalt 92 Kaks muudetava laiusega ristkülikut 93 Muudetava kõrgusega ristkülikud 94 Alt üles kasvavad ristkülikud 95 Hiir 96 Hiire liikumise järgi ruutude joonistamine 96 Hiirega kaasa liikuv ruut. 97 Ringi joonistamine tahvlile hiire järgi 98 Liikumine 99 Nupuvajutusel samm paremale 99 Nuppudega iga ilmakaare suunas 100 Ise liikuvalt paremale 101 Massiiv 102 Juhusliku seose kuvamine 102 Kasutaja valitud seos 103 Juhusliku tantsupaari leidmine 103 Arvude ruudud ühest kahekümneni 104 Kasutaja soovitud arv ruute 104 Eesnimi kaks korda kõrvuti 105 Tagurpidi loetelu 106 Nummerdatud loetelu 106 Sõna alguse otsing. Väiketähtedega tekst 107 Elementide vahetatud järjekord 107 Algus Veebilehestikke on loodud 1990ndatest alates. Peale andmete näitamise/vaatamise on veebis ka üsna algusest peale nendega midagi ka teha saanud. Siinses õppematerjalis püüamegi veebilehti elama panna, võimaldades kasutajal nende taga toimetada. Keskendume kliendi arvutis töötavatele Javaskripti lahendustele, mida saab kohe looma hakata - pole vaja käivitusõigust serveris ega ligipääsu andmebaasile kui keerukamaid ja riskiohtlikumaid võimalusi. Küllalt palju kasulikku ja rõõmsat saab ka kasutaja arvutis tööle panna. Tekstilehekülg Internetis saab vaadata kõike, mida sinna sisse pannakse ja mida vaataja lugeda suudab. Olgu see üksik pilt, helilõik või ka lihtsalt tekst. Teksti veebis kättesaadavaks tegemiseks tuleb see paigutada kausta, kus teksti lugeda saab. Lihtsamaks katsetamiseks piisab ka kohaliku masina kataloogist, kust siis hiljem sobiv fail avada. Näites loodi fail nimega tervitus.txt sisuga tere Veebilehitsejas kausta vaadates võib näha, et fail on olemas. Faili avamisel tuleb sisu nähtavale Ongi esimene tervitav teave edasi antud. Millega tekstifaile luua - see sõltub juba kasutatavast arvutist ja operatsioonisüsteemist. Linuxi all kirjutajatel on arvatavasti tuttavad redaktorid nimedega vi, joe või pico. Windowsi-masinates kuulub standardkomplekti tarvikute all olev Notepad. Mõnevõrra koodikirjutamist hõlbustab ning treppida aitab eraldi lisatav Notepad++. Aga eks vastavalt maitsele leiab kirjutusprogramme piisavalt. Peab lihtsalt vaatama, et tulemuseks oleks puhtalt salvestatav tekst - sellisena ka edaspidiseid veebilehti kindlam teha. HTML-leht Palja tekstiga saab edasi anda jutu sisu. Tühjade ridade ning taandridadega saab väljanägemist parasjagu sättida. Kirjutusmasina-ajastul nendest moodustest täiesti piisas. Nüüd aga on inimesed harjunud vaatama mitmekülgsemat lehekülge nii väljanägemise kui võimaluste poole pealt. Aastaid on veebiga koos käinud HTMLi-nimeline keel, mis koos oma tõusude ja mõõnadega on tänapäevalgi valitsevaks jäänud jõudes nüüd oma viienda versioonini. Järgnevalt üks koodinäide, kus HTMLi abil leht kokku pandud. Mõned seletused sinna juurde. Esimene rida annab veebilehitsejale teada, et millist tüüpi dokumenti oodatakse. Leht ise jaguneb kaheks suureks osaks: head ning body. Esimeses neist on andmed lehe kohta - hiljem samuti ettevalmistatud koodilõigud. Teise tuleb lehe sisu ise. Andmeks lehe kohta on ka title ehk pealkiri. Edasi soovitavalt kasutatav kooditabel. Täpitähtedega murede vältimiseks oleks see hea sättida utf-8 peale (ning ühtlasi hoolitseda, et ka oma redaktor selles kodeeringus tähed väljastaks). Notepad++ juures kohe eraldi selle jaoks menüü olemas. Teksti kujundamise jaoks on loodud omaette astmeliste laadilehtede keel nimega CSS. Siin näites antakse teada, et kõik ülemise/esimese taseme pealkirjad joondatakse keskele (text-align: center). Kel aga on põhjust kujundusega rohkem tegelda, võib lisateavet hankida veebist nt. http://www.w3schools.com/ õpetuste hulgast. Või siis Tiigrihüppe abil eraldi valmivast veebikujunduse õppematerjalist. Kujunduse katsetus Sisupoole andmed on lehel üldiselt näha. Kõigepealt siis pealkiri, mis viisakasti

ja

märgendite vahele pandud. Märgend h1 tähendab esimese taseme ehk suurimat pealkirja (heading 1). Näitamise mõttes loodud loetelu (. Et HTML on tavaline tekstivorming, siis tuleb kõik lisaandmed seal sees tavalise tekstina edasi anda. Nii ka viide teisele lehele on lihtsalt käsklus nimega a (anchor), millel atribuudina küljes href (hyperlink reference) koos aadressiga, kuhu veebilehitseja siis vastava teksti vajutamisel suunatakse.

Katsetuste leht

Ning selgema pildi saamiseks lehe kood tervikuna. Kujunduse katsetus

Katsetuste leht

Välja näeb viisakalt ja lihtsalt vormindatud lehena. Viimane validaatori viide on siia juurde täiesti mõttega pandud. Kel lehele esimene pilt ette saadud, võiks kontrollida, et leht ikka igapidi viisakalt kokku pandud on ning vajalikud märgendid oma kohtadel. Muidu võib tulemusena ootamatuid üllatusi juhtuma hakata. Kontroll küllaltki lihtne. Kui enamik korras, näidatakse rohelist vastuslehte. Kui aga märgatavaid muresid süntaksi poole pealt, siis tuleb vastus punane ning tasub hakata ridade kaupa veateateid ja soovitusi lugema. Mõnigikord ei pruugi viga olla sama mis näidatakse, kuid enamjaolt on osutataval real või paar rida kõrgemal midagi viltu läinud, mida tasub siis kohendada. Ülesandeid Tee näited läbi, veendu nende avanemises veebilehitsejas. Koosta veebileht enese tutvustamiseks - kus ja millal sündinud, kus koolis käinud, millistest keeltest (kasvõi natuke) aru saad, mis oskustega saad sõpradele kasulik olla. Usinamatele: Tee failid võimaluse korral kättesaadavaks mõnes avalikus veebiserveris (nt. zone.ee). Vaata neid ise ning lase oma sõbral vaadata. Muuda sisu natuke ning vaata uuesti tulemust. Kasutajat tervitav leht Eelnev leht näeb välja ikka samasugune. Kui tahta lehe sisu muuta, siis tuleb lehe loojal sinna uus jutt kirjutada ning serverisse vaatajatele üles panna. Lehele kirjutatud programmikood võimaldab aga kasutajale reageerida, lihtsaimal juhul ta nime küsida ning selle järgi tervitada. Selline suhtlus vajab natuke sättimist ette. Levinud sisestuselemendiks on HTMLi märgend nimega input. Teksti jaoks on ta tüübiks text. Programmikoodi abil elemndi poole pöördumiseks tasub temale määrata ka id. Nõnda siis sobib veebilehe koodi sisse rida HTML-fail kokku näeks välja siis järgmine: Andmete sisestus

Katsetuste leht

Palun eesnimi: ja lehele tekib sisestuskast. Tahtes lehel midagi juhtuma panna, tuleb arvutile teada anda, mille peale midagi toimuma hakkab. Toimetust saab mugavalt käivitada nupu abil, selle jaoks ka sobiv rida lehele. Kuvamiseks sobib lehele div-kiht id-ga vastus.
Vastuse koht.
Kõige tähtsamas lõigus tuleb veebilehitsejale seletada, et mida nupuvajutuse peale tuleb tegema hakata. Veebilehele programmikoodi lisamiseks sobib head-ossa skriptiplokk Sinna sisse saab siis hakata arvuti jaoks käsklusi kirjutama. Käsklusi ootava lehe blankett näeb välja järgmine: Andmete sisestus

Katsetuste leht

Palun eesnimi:
Vastuse koht.
Soovime, et tervitataks inimest, kelle nimi tekstivälja sisse kirjutatakse. Selleks tuleb eesnimi tekstiväljast välja võtta, juurde lisada tervitussõna ning kogu lugu kasutajale kuvada. Veebilehe elemendile, millel on id-atribuut, saab ligipääsu küsida Javaskripti käsklusega document.getElementById Elementide sisu küsimiseks ja muutmiseks on neil omadus innerHTML. Kui soovin vastusplokki kirjutada lihtsalt Tere, siis see näeb välja document.getElementById("vastus").innerHTML="Tere"; Paljas käsklus aga niisama iseenesest ei tea käivituda. Selleks tuleb käsklus panna nimega funktsiooni sisse ning nupuvajutuse peale see funktsioon tööle panna. function tervita(){ document.getElementById("vastus").innerHTML="Tere"; } Näites siis tervita on funktsiooni nimi. Ümarsulud kuuluvad funktsiooni nime juurde. Ning järgnevate loogeliste sulgude vahele pannakse käsud, mis funktsiooni käivitamisel tööle pannakse. Nupuvajutuse peale funktsiooni käivitamiseks tuleb nupu onclick-atribuudis öelda, et milline funktsioon käima läheb. Sedakorda siis ainuke mis meil on ehk funktsioon nimega tervita. Pärast täiendusi näeb kool välja järgmine Programmikoodi katsetus

Katsetuste leht

Palun eesnimi:
Vastuse koht
Enne nupuvajutust paistab vastuse kihil olema "Vastuse koht", pärast programmikoodi abil pandud "Tere". Nõnda siis document.getElementById("vastus").innerHTML= "Tere, "+document.getElementById("eesnimi").value; tulemuseks on, et kihi "vastus" sisuks (innerHTML) saab tervitus inimesele, kelle eesnimi tekstivälja sisestati. Programmikoodi katsetus

Katsetuste leht

Palun sisesta oma eesnimi:
Vastuse koht.
Katsetuse tulemus näha ka ekraanil. Ülesanne * Loo ekraanile kaks tekstivälja: üks eesnime, teine perekonnanime jaoks. Tervita kasutajat mõlemat nime pidi. Tollid sentimeetriteks Arvuti nimigi räägib, et masin võiks mõista arvutada. Tänapäeva programmeerimiskeelte puhul tuleb vahel enne otsida kohta, kuidas masin arvutama panna, aga üldjuhul on see täiesti võimalik. Järgnev lihtne näide arvutab tolle sentimeetriteks. Kordajaks 2,54 - ühele tollile vastab nõnda palju sentimeetreid. See tähendab, et toll on pikem ning sama pikkuse peale on tolle vähem. Programmeerimiskeeltes kasutatakse koma asemel punkti - see tava Inglise/Ameerika poolt tulnud. Kui kasutajaliideses mõnikord säetakse väljanägemine kasutaja asukohale vastavaks, siis programmeerimiskeele sees on ta ikka ühtmoodi. Andmeid saab kasutajalt ikka samuti kätte. Tema sisestab numbrid tekstivälja. Tekstivälja küljes on id, mille järgi saab välja ja selle sees oleva väärtuse küsida. ning edasi võib teha juba sobivaid tehteid. Avaldis document.getElementById("tollidearv").value*2.54+" cm"; teatab, et võetakse tekstikasti nimega "tollidearv" väärtus ja korrutatakse see 2.45-ga. Juurde liidetakse veel tühik ja cm, mis tähtedena kolmekesi jutumärkide vahel. Nõnda kasutajal pärast ekraanilt parem lugeda, et mida väljastatud vastus tähendab. Arvutamine

Arvutamine

Mitu tolli:
Tulemus ekraanil: Ülesandeid * Loo leht, millega arvutatakse sentimeetreid tollideks. Tolle on sentimeetritest 2.54 korda vähem. * Koosta uuele lehele kalkulaator, kus poehinna puhul näidatakse, kui palju sellest moodustab käibemaks (20%). Vihje: kui hind letil on 1 euro ja 20 senti, siis 1 euro saab kaupmees ning käibemaksuks läheb 20 senti (20% suuruse maksu puhul). * Paiguta lehele kaks tekstivälja. Ühte kirjutatakse toote hind, teise ostetav kogus. Väljastatakse vajalik summa. * Tutvu lisade juurest aritmeetilise keskmise leidmise näitega. Koosta omaloodud kalkulaator, kasutades vajadusel kalkulaatorite loomiseks pakutud ideid. Joonistamine Pilte näitasid veebilehed üsna veebi algusaegadest peale (1990ndatel) Kasutaja soovidest sõltuvate jooniste või animatsioonide loomiseks on aga tulnud mitmesuguseid lisavidinaid kasutada. Varakult tekkisid Java rakendid, siis Flashi abivahendid ning seejärel Silverlighti lisandprogramm.Samuti sai Javaskripti raamistikega nurgataguseid kasutades luua ekraanile mulje joonise tekkimisest - ehkki joone tõmbamiseks näiteks mõnikord tekitati suurel hulgal ruudukujulisi väikesi tekstilõike, värviti lõigukeste taustad ära ning paigutati nõnda, et see kasutajale joonena paistab. Arvestades aga, et veebi loetakse väga mitmesuguste tehniliste võimaluste ja seadistustega masinatega, siis nõnda paljude ja küllalt tugevat riistvara nõudvate tarkvaralahenduste korraga kättesaadavana hoidmine ei kipu õnnestuma. Ikka tuleb teateid, kuidas üks või teine brauser või operatsioonisüsteem jälle mõne lahendusega hakkama ei saa. HTML-i viiendat versiooni kavandades otsustati siia vahenditesse sisse panna võimalikult palju hädatarvilikku, mille abil saaks enamiku veebilehtede loomisel tekkivaid soove ära rahuldada. Nõnda on HTML5 igakülgne näitamine seadmele küll veidi keerulisem kui mõne varasema versiooni korral, samas tootjatel on siisk tunduvalt lihtsam teha seadmeid ja tarkvara HTML5 näitamiseks, kui et arvestada laia komplekti mitmesuguste lisandprogrammidega. Ruut ekraanil Joonistamiseks ja liigutamiseks lisati HTML5 vahendite hulka element nimega canvas (lõuend). Selle peale on võimalik Javaskripti abil joonistada. Samuti korduva joonistamise/kustutamise abil liikumine tekitada. Lehele saab ta tekitada sarnase käsuga. Suurus ja taust talle määratud selleks, et lehel selgemalt näha oleks, kus lõuend paistab. Ning id järgi saab hiljem programmikoodiga lõuendi poole pöörduda, et sinna miskit joonistama hakata. Joonistamise tarbeks siin väike alamprogramm. Tahvlile joonistamise tarbeks tuleb talle kõigepealt ligipääs küsida. var g=document.getElementById("tahvel").getContext("2d"); Edasi võib siis juba joonistuskäskude abil pilti ekraanile kuvama asuda. Lihtsaimaks näiteks siin ristküliku loomine g.fillRect(20, 20, 50, 50); //x, y, laius, kõrgus Arvutil programmi abil joonistades tuleb kõik asjad koordinaatide järgi kätte anda, nii ka ristküliku puhul. Programmeerimisgraafika omapäraks on, et koordinaatide nullpunkt asub vasakul ülanurgas. Sealt liigub x-telg paremale ning y-telg alla. Nõnda kokkupandud koodinäite puhul peaks nupule vajutades ekraanile ruut tekkima. Joonis

Joonis


Ülesandeid * Tutvu ristküliku joonistamise näitega * Muuda ristküliku suurust ja asukohta * Tee ekraanile kaks ristkülikut * Lao ekraanile ristkülikutest koosnev alt laiem torn. Mõõtude järgi ristkülik Niisama pildi kuvamiseks pole enamasti vaja programmi kirjutada. Saab valmis pilti näidata või siis seda sobival hetkel vahetada. Kui tahta aga, et kasutaja saaks joonise mõõtmeid muuta, siis võib mõnest koodireast sealjuures kasu tulla. Lihtsamatel juhtudel on küll võimalik sobivad pildid enne valmis teha ning siis vastavalt sisestatud andmetele kasutajale näidata. Kui aga võimalusi palju, siis tuleb ikka vaadata, et mida ja kuidas joonistada. Andmete sisestamise puhul sobivad samasugused tekstiväljad kui aruvutamise osa juures. Nõnda luuakse tekstiväli. Pöördumise jaoks on tal id nimega laiuskast ning algväärtuseks pannakse sisse talle 40. Kuna arvuti jaoks on tähed ja arvud erinevad, siis tuleb andmetüüp sisselugemisel sobivaks sättida. var laius=parseInt(document.getElementById("laiuskast").value); tähendab lahtiseletatult, et küsitakse documendi seest laiuskasti-idga element ja sealt tema tekstiline väärtus. Käsklus parseInt muundab teksti arvuks - see tähendab, et 40 pole enam mitte tähed neli ja null, vaid arv nelikümmend, millega soovi korral liita/lahutada saab ning mida võib võtta ja joonise sisendväärtusena. Võrdusmärgi ees olev var laius ütleb, et väljaarvutatud väärtus jäetakse meelde märksõna laius alla ning sealtkaudu on seda võimalik hiljem pruukida. Joonistamise juures lähebki neid kohe tarvis. g.fillRect(30, 30, laius, korgus); //x, y, laius, kõrgus joonistab etteantud laiuse ja kõrgusega ristküliku. Esimesed 30 ja 30 tähistavad vastavalt kujundi kaugust tahvli vasakust ning ülemisest servast. Allpool on näidatud ka, kuidas teksti ekraanile kuvada. g.fillText(korgus, 50, 20); kuvab välja märksõnas ehk muutujas "korgus" oleva väärtuse, paigutades selle alguse tahvli vasakust servast 50 ning ülemisest 20 punkti kaugusele. Käivitav kood tervikuna Joonis

Joonis


x Ning selle järgi valminud joonis. Ülesandeid * Tutvu ristküliku mõõtmete määramise näitega. * Võimalda lisaks mõõtmetele määrata ka ristküliku asukoht ekraanil. (Eraldi tekstikastid vasaku ülanurga x- ja y-koordinaadi määramiseks, kogu joonistamine jääb ühe funktsiooni sisse.) * Joonista lehele kaks ristkülikut, kusjuures kummalgi saab määrata vaid laiust. Ristkülikud asuvad üksteise all, ning nende vasakud servad kohakuti. * Joonista lehele kaks ristkülikut, kusjuures kummalgi saab määrata vaid kõrgust. Ristkülikute ülaservad on kohakuti. * Säti arvutused nõnda, et ristkülikute alaservad on samal kõrgusel, pikem ristkülik ulatub ülevalt kõrgemale. Joon Joon paistab olema joonistamisele nime andnud. Joone ekraanile kuvamiseks paistab vaja olema veidi rohkem toimetusi kui ristküliku korral, kuid ei midagi võimatut. Joon on tema jaoks joonistustee (Path) osa, kus tuleb üksikuid punkte märkida. Programmikoodiga tuleb käituda, nagu juhitaks pliiatsiotsa. Käsk moveTo ütleb, kuhu koordinaatidele (x ja y) pliiats tõsta, edasine lineTo teatab kuhuni joon tõmmata. Lõpus olev stroke() palub tulemuse ekraanile kuvada. g.beginPath(); g.moveTo(30, 40); g.lineTo(80, 90); g.stroke(); Et siin näites tehakse alati sama joon ning kasutaja joone andmeid muuta ei saa, pole talle ka joonistamiseks nuppu vaja. Joonistuskäsk pannakse käima kohe, kui leht on kohale jõudnud ja veebilehitsejas ette kuvatud. Ehk siis lehe sisuosa body sündmuse onload peale. Muus osas võib jälle rahulikult jälgida, kuidas kood kokku pandud Joonis

Joonis


Edasi koodi põhjal tekkinud joont imetleda ning selle pealt juba edasisi arendusmõtteid mõlgutada. Ülesandeid * Tutvu joone tõmbamise näitega * Tõmba joon ülalt alla * Tõmba joon vasakult paremale * Tõmba kolm kõrvuti asetsevat joon * Joonista kuubikust maja, millel oleks joone abil tõmmatud viilkatus peal. Joone värv ja paksus Lihtsalt tõmmatud joon on ühe punkti laiune ning musta värvi. Arvutisse aga tahame vahel ka mitmekesisemaid pilte. Iga Path-i abil tõmmatud joon on oma pikkuses samasuguste omadustega. Eri joonistusteedeks jagatud jooned aga saavad olla igaüks omamoodi. Joone paksuse määrab tunnus lineWidth, joone värvi strokeStyle. Nii on tehtud all olevas näites. Joonis

Joonis


Tulemus näha ka joonisel. Ringid Ümaramate kujundite juures aitavad meid ringid - nii seest täidetud kujul kui ringjoonena. Üllatusena küll Javaskriptil lihtsalt ringi loomise käsklust ei ole. Küll aga on universaalne käsklus kaare loomiseks. Kui aga kaare pikkuseks on täisring ehk 360 kraadi ehk 2Pi radiaani, siis näemegi tulemust ringina. Programmeerimise juures tuleb mitmel puhul vajalikke tulemusi kombineerida kättesaadavate võimaluste abil, nii ka siin. Joonis

Joonis


Nõnda on põhiliste kujundite joonistamise oskus olemas. Edasine sõltub suurelt jaolt juba oma fantaasiast ja ekraanipunktide lugemise jaksust. Nõnda saab mitmesuguseid jooniseid luua, kus kasutajalt tulevad andmed sisse ning nende põhjal tehakse tema soovidele vastav joonis. Ülesandeid * Pane ringi joonistamise näide käima * Joonista valgusfoor * Kasutaja saab nupule vajutamisega määrata, milline tuli fooris põleb * Joonista automudel, mille pikkust ja kõrgust saab kasutaja määrata Hiir Arvuti ilma hiireta on nagu kevad ilma kuldnokkadeta - selline on ühe arvutigraafika õpetaja ütlus ning mitut pidi paistab tal õigus olema. Midagi vähegi liikuvamat ette võttes aitab hiir elu märgatavalt mugavamaks teha. Hiire koordinaatide püüdmine Lihtsaim näide hiire toimimise kohta võiks olla järgmine: Tahvli külge kinnitatakse sündmus onmousedown, mille peale palutakse käivitada funktsioon nimega vajutus. Parameetriks antud muutuja event on kasutada veebilehe elementide juures ning sealtkaudu saab lugeda välja hiire asukoha ekraanil. Y-koordinaadiks siis e.clientY. Vastuskihil on algul lihtsalt kihi asukohta tähistav v-täht, kuid pärast hiirevajutust kuvatakse sinna hiire Y-koordinaat. Joonis

Joonis

v
Siin korral vajutati nõnda, et y-i koordinaadiks tuli 169. Ülesandeid * Tutvu hiire abil y-koordinaadi näitamise võimalusega * Lisa ekraanile nähtavaks ka x-koordinaat * Asenda onmousedown-sündmus onmousemove'ga, nii et koordinaatide muutumine oleks reaalajas näha. Ristkülik hiire kohale Järgmise näitena püütakse saada hiire vajutuse kohale ristkülik. Selleks on vaja teada hiire koordinaate tahvli suhtes - kättesaadav clientX/clientY annab need aga akna suhtes. Päästjaks on tahvli asukohta küsiv funktsioon getBoundingClientRect(). Suurema lehe puhul lisanduks siia veel arvutus lehe enese kerimise kohta. Kui aga leht nõnda väike et seda kerima ei hakata, siis saab veidi lihtsamalt läbi. Arvutus var hx=e.clientX-tahvlikoht.left; annab hiire asukoha tahvli suhtes. Selle järgi saab hiljem ristküliku või muu kujundi ka soovitud kohta joonistada. Joonis

Joonis

Pärast vajutusi võib imetleda nende kohtadele tekkinud ristkülikuid. Ülesandeid * Muuda ruudu joonistamise näidet nõnda, et ruut tekib onmousemove-sündmuse puhul, st. koos hiire liikumisega tekivad ekraanile ruudud. Otsi varasematest näidetest tahvli puhastamise näide g.clearRect(0, 0, 300, 200); * Hoolitse, et ruut liiguks ekraanil hiirega kaasa. St. iga liikumissündmuse peale puhastatakse tahvel ning joonistatakse ruut uues kohas. Juhuarv Arvutite eeliseks peetakse võimet korduvalt samade lähteandmete juures samadele tulemustele jõuda. Tavaolukorras see äratab usaldust ning ka näiteks vigu on parem leida, kui on teada, et alati samal moel valesti arvutatakse. Mõnikord aga tuleb vaheldus kasuks. Olgu siis enese treenimiseks uute ülesannetega, mängule uue algseisu välja mõtlemisel või lihtsalt ekraanisäästjal uute kujundite välja mõtlemiseks. Kõik need vaheldused saab programmikoodi luua juhuarvude abiga. Javaskriptis saavad nad alguse käsust Math.random() mis loob arvu nulli ja ühe vahelt, kuid mis on alati väiksem kui 1. Järgmine väike näide tekitab sellise arvu ekraanile. Joonis
v
Tulemuseks sai sel korral imetleda arvu 0.282310351980924 Hulgaliselt komakohti võib küll olla ilus vaadata, aga kujundeid ekraanile paigutades või loetelust sobivat anektdooti otsides läheb vaja arve enamasti suuremas vahemikus kui nulli ja ühe vahel ning mõnigikord võiksid nad olla täisarvud. Siin näites siis korrutatakse random-funktsioonist tulnud arv kümnega ning käsu parseInt abil võetakse sellest täisosa. Tulemuseks on kümnest väiksem täisarv Joonis
v
Praegusel korral juhtus siis tulema neli: 4 Loodud arve võib edasi juba igal pool omal valikul kasutada. Siin näites arvutatakse juhuarvud selliselt, et nende järgi paigutatud ruut leiab omale koha tahvli peal. Varemgi tuttavaks saanud getBoundingClientRect()-funktsioon annab tagasi objekti, mille käest võimalik küsida tahvli servade koordinaadid - vastavalt siis tahvlikoht.left, tahvlikoht.right, tahvlikoht.top, tahvlikoht.down. Arvutus tahvlikoht.right-tahvlikoht.left annab tahvli laiuse ning tahvlikoht.bottom-tahvlikoht.top tahvli kõrguse. Nende järgi saab siis paigutatavale ruudule sobiva asukoha leida. Joonis

Joonis

Igal lehe avamisel võiks ruut tahvlil siis uude kohta tekkida. Ülesandeid * Pane tahvlil päike tekkima ülaservas juhuslikku kohta * Lisa joontest pargipink. Pingi pikkus sõltub juhuslikust arvust. Hiirega kujundi suuruse määramine Vaid allavajutustele reageerides võib küll määrata joonistamise või muu jaoks asukohti, kuid puudu jäävad suurus ja/või suund. Eks mitme vajutuse peale neid andmeid kokku korjates ole võimalik ka nii tulemust sättida, aga üheks mugavaks lahenduseks on hiire alla- ja ülesliikumise andmed mõlemad kokku koguda ning siis kokku kahe punkti koordinaatide abil arvutama asuda. Et allavajutuspunkti koordinaadid meeles püsiksid, selleks sobib nad väjaspool funktsioone deklareerida ehk nende olemasolust teada anda. Funktsioonis hiirAlla arvutatakse nende väärtused ja jäetakse meelde. Hiljem hiirYles juures on need kaks arvu juba mälust võtta. Tuleb lihtsalt edasi mõelda, mida kokku käepärast oleva nelja arvuga ette võtta. Joonis

Joonis

Siin näites tõmmatakse nende põhjal ekraanile ristkülik - hiirega vedades saab neid kergelt ka mitu tükki luua. Ülesandeid * Tutvu hiire abil ristküliku loomise näitega * Võimalda sarnaselt paigutada ning suurust määrata kolmest ristkülikust koosnevalt tornil. * Hiirega saab ekraanile joonistada ringist ja joonest koosnevaid puid. Asukoha meelespidamine Siiani võtsime joonistamisel koordinaadid otse hiire käest või lahtritesse kirjutatud väärtustest. Vähegi suurema süsteemi puhul aga on igasugu kujundite kohad ja andmed pigem programmi sees meeles. Nende andmete järgi arvutatakse objektide asendeid ja kokkupuutumisi. Ning samuti joonistatakse nende põhjal pärast ekraanile pilt. Siin näites tehakse selle suhtes algust ühe lihtsa ruuduga. Üleval rida var x=20, samm=5; teatab, et hoitakse meeles ruudu asukohta x-koordinaat, algväärtuseks tal 20. Ning et ruut liigub iga sammu puhul viie ekraanipunkti jagu soovitud suunas. Edasi juba eraldi funktsioonid ehk alamprogrammid liikumiste tarbeks, kus siis kõigepealt arvutatakse välja uus asukoht ning edasi palutakse tulemus ekraanile joonistada. function vasakule(){ x=x-samm; joonista(); } Joonistamiseks omaette funktsioon. Kõigepealt küsitakse juurdepääs joonistustahvlile ja sealtkaudu sinna joonistamiseks vajalikule graafilisele kontekstile. function joonista(){ var t=document.getElementById("tahvel"); var g=t.getContext("2d"); g.clearRect(0, 0, t.width, t.height); g.fillRect(x, 20, 50, 50); //x, y, laius, kõrgus } Muutujas nimega t seetõttu andmed tahvli kohta: t.width näitab tahvli laiust ning t.height tahvli kõrgust. g.clearRect(0, 0, t.width, t.height); tühjendab tahvli taustavärviga kogu ulatuses. Alates siis vasakust ülanurgast (0,0) kuni parema alanurgani (t.width, t.height). Edasi joonistatakse ristkülik juba soovitud kohta g.fillRect(x, 20, 50, 50); //x, y, laius, kõrgus Y-koordinaat ja mõõtmed esiotsa koodi sisse otse kirjutatud, x-i asukoht loetakse vastavast muutujast, mille väärtust siis vasakule/paremale käskude abil muudetakse. Skripti lõpuosas olev window.onload=joonista; tähendab sama, kui ennist kirjutasime HTMLi sisse Ehk siis antakse teada, et pärast lehe täielikku laadimist pannakse joonistuskäsklus käima. Joonis

Joonis


Ülesandeid * Lisa nupud ruudu liigutamiseks üles ja alla * Lisa nupud ruudu suuruse muutmiseks * Jäta ära lehe vahepealse tühjendamise käsklus. Nii saab nuppude abil liigutatava ristküliku abil joonistada. * Paiguta uuele lehele kaks ristkülikut. Kumbagi saab nuppudega liigutada. Liikumine Eelnevas näites liigutasime nupuvajutusel ühe sammu kaupa. Samuti sai varem panna kujundi hiire järgi liikuma. Kui aga panna sammud iseenesest ja piisava sagedusega korduma, siis kasutajale jääb mulje liikumisest ilma, et selle jaoks peaks ta midagi ise pidevalt tegema. Korduvalt käivituv käsk Tehniliselt saab käsu korduvalt käivitumise panna kirja kujul window.onload=setInterval("paremale()", 500); Lahtiseletatult pannakse funktsioon paremale() tööle iga viiesaja millisekundi tagant ehk praegusel juhul kaks korda sekundis. Nõnda siis liigubki ruut me silmade ees vaiksete hüpetega edasi. Ooteaega vähendades või sammu pikkust suurendades saab liikumist sujuvamaks või kiiremaks muuta. Samas seab masina tehniline võimsus piltide joonistamise sagedusele piirid. Enamasti ei tasu veidigi suurema joonistustahvli korral loota ülejoonistusajale alla 100 millisekundi. Joonis

Joonis


Ülesandeid * Ruut liigub vasakult paremale, klahvidega saab ruutu samal ajal liigutada alla ja üles * Korraga liigub kaks ruutu - üks paremale, teine vasakule * Vasakule liikuva ruudu suurus liikumise ajal väheneb * Sammu pikkus ja sellega koos liikumise kiirus valitakse juhuslikult Liikumise suuna määramine Siiani liikus ruut ühes suunas, suuna määras muutuja nimega samm. Kui sellele sammule anda negatiivne väärtus, siis liigub ruut vasakule. Liikumissuuna muutmiseks rakenduse töö ajal tuleb ka sammu väärtust muuta. Eraldi lisati muutuja nimega kiirus, mille abil võimalik määrata, kui ruttu ruut liigub. Suuna määramiseks tuleb kiiruse väärtus lihtsalt sammule üle kanda - olgu siis pluss- või miinusmärgiga. Ja kui tahta ruut seisma jätta, piisab, kui sammu pikkuseks sättida null.Alla siis vastavad nupud, et kasutaja võiks vastavaid käsklusi käivitada. Nuppude väärtuseks olevad <- ja -> võivad tunduda raskelt mõistetavad. Tegelikult aga tegemist erisümbolitega, mille abil saab sinna noole kujutise kuvada. < tähendab "less than" ehk "väiksem kui" ehk siis sümbol "<". Teistpidine > on "greater than" ehk "suurem kui" ehk ">". Kuna need märgid niisamuti kirjutatuna tähistavad HTML koodis erisümboleid, siis ei või neid otse nuputeksti kohale kirjutada, et saada noole kuju <- tekitada. Asenduse abil aga õnnestub ning nupu silt täiesti loetav. Liikumine
Ülesandeid * Pane näide käima, uuri. Muuda liikumise kiirust * Võimalda ruudul liikuda vasakule-paremale suuna asemel üles-alla * Loo nupud, et saaks määrata liikumise kõigi nelja ilmakaare suunas. Seiskumine vasakus servas Nõnda järjest liikudes on ruut küllalt varsti ekraanilt läinud. Ise pidevalt juhtides saab usinasti liikumist sättida. Kui aga tegemist hiljem rakendusega, kus korraga enam kujundeid liikumas, siis ei saa kõigil pidevalt käsitsi silma peal pidada ja kontrollida, et kuidas keegi käitub. Kontrollimiseks sobib tingimuslause nimega if. Praegusel juhul, kui ruut liigub liiga vasakule ehk x läheb negatiivseks, siis paras aeg öelda, et ta seisma jääks. Ning kasulik on ruudule märkida ka, et ta serva juurde tagasi tuleks (x-i väärtuseks arv 0). if(x<0){seis(); x=0;} Siis pääseb ruut näiteks paremale suunava nupu vajutamisel taas liikuma. Muidu tekiks imelik olukord, kus pole võimalik ka üle ääre sattununa sealt tagasi minna, sest nullist väiksema iksi puhul antakse kohe seiskumiskäsklus. Liikumine
Ülesandeid * Tee näide läbi * Pane ruut liikuma alt üles. Ruut seiskub ülesse serva jõudmisel * Ruutu saab liigutada iga ilmakaare suunas. Seiskub nii vasakusse kui ka ülemisse serva jõudmise puhul. Seespüsimise kontroll Vasaku ja ülemise serva tabamise kontroll on suhteliselt lihtne vähemasti ruudu puhul. Kuna ruut joonistatakse vasaku ülemise nurga koordinaatide järgi, siis juhul, kui need on nullist väiksemad, siis järelikult ollakse servast üle läinud. Parema ja alumise poolega on veidi rohkem arvutamist. Parema serva koordinaadi saab kätte liites vasaku serva koordinaadile ruudu laiuse. Kui nüüd selle parema serva koordinaadi väärtus ületab tahvli laiust ehk tahvli parema serva koordinaadi väärtust, sellisel juhul on ruut sealtpoolt üle läinud. Iseenesest on võimalik nõnda tingimusi sättides ruudu seiskamist täiesti kontrollida. Arvestades aga tulevikku ning võimalust, et kontrollitavaid kujundeid tuleb rohkem, siis mitmekülgsema kontrolli tarbeks on hea teha omaette funktsioon. Näiteks selline: function kasSees(uusX){ if(uusX<0){return false;} if(uusX+laius>t.width){return false;} return true; } Funktsiooni nimeks on kasSees - nagu nimest aimata võib, siis sealt vastatakse kas jah või ei. Ehk siis true või false. Selle järgi siis võimalik hiljem otsustada kuidas käituda - kui ruudu uuritav asukoht on tahvli sees, võib sinna julgelt asuda. Kui mitte, ei tasu sinna ronida. Funktsiooni ümarsulgude sees olev uusX tähendab, et funktsioonile etteantav väärtus nimetatakse funktsiooni sees kasutamiseks uusX-i nime alla ning sealtkaudu saab tema sisu pruukida. Edasi juba järgnevad kontrollid ja vastused. if(uusX<0){return false;} teatab, et kui etteantud parameetri (uusX) väärtus on väiksem kui null, siis funktsioon tagastab (return) false, ehk siis ruut pole tervikuna tahvli sees. Sama lugu parema serva kontrolliga. Muutujas t meil eelnevalt tahvli andmed olemas. Seega siis avaldis uusX+laius>t.width kontrollib, et kas ruudu parema serva koordinaadi väärtus (uusX+laius) ületab tahvli laiust (t.width). Kui mõlemad kontrollid edukalt läbitud, siis järelikult ruut x-telge pidi alas sees ning funktsioon võib tagastada väärtuse, et on sees küll (return true). Liikumisfunktsioonis saab eelneva kontrolli tulemust kasutada. if(kasSees(x+samm)){ x=x+samm; } else { seis(); } Esimene lause siis vaatab, et kui ruudu eeldatav uus asukoht (x+samm) on tahvli sees, siis minnakse sinna uude kohta kohale (x=x+samm). Muul juhul jäädakse seima (seis()). Liikumine
Ülesandeid * Pane näide tööle. Muuda ruudu suurust ning veendu, et näide töötab endiselt. * Pane ruut liikuma ülalt alla ning selles suunas mõlemast servast seisma * Ruutu saab liigutada iga ilmakaare suhtes. Ruut seiskub, kui jõuab serva. Ruudu kutsumine hiirega Nuppudega saab lehel toimetada küll. Mõnikord aga animatsioonide ja mängude juures mõistlik, kui õnnestub otse lehel olles kujundeid juhatada. Siinjuures aitavad samamoodi hiirevajutused nagu õpikus eespool kirjeldatud. Väike hoiatus: kui lehte vaadata mobiiliekraanil, siis seal tavalised hiiresündmused ei toimi, sest mobiil püüab korraga mitut näppu jälgida ning selle tarbeks on loodud touch-event. Aga sellest edasipidi. Tahvli küljes olevale onmousedown-sündmuse külge sidusime funktsiooni hiirAlla, mille parameetrina tulnud e-ks nimetatud väärtuse kaudu saab kätte hiire andmed. Arvutus e.clientX-tahvlikoht.left annab hiire x-koordinaadi väärtuse tahvli asukoha suhtes. See püüti praegu muutujasse nimega hx (hiire x). Praegusel juhul otsustatakse hiire järgi, et kas ruut peaks liikuma vasakule või paremale. Kui hiire x-koordinaadi väärtus on suurem, kui ruudu x-koordinaadi väärtus, siis asub hiir ruudust paremal ning järelikult peaks ruut liikuma paremale, kui soovime, et ta hiire poole tuleks. Ehk siis ruudu liikumise sammuks saab koodi algul märgitud kiirus (mis hetkel positiivse väärtusega). Kui hiir sattus ruudust vasakule, siis sammuks saab kiiruse vastandarv, ehk siis ruut hakkab liikuma vasakule. function hiirAlla(e){ var tahvlikoht=t.getBoundingClientRect(); var hx=e.clientX-tahvlikoht.left; if(hx>x){samm=kiirus;} else{samm=-kiirus;} } Edasi kood tervikuna. Liikumine
Ülesandeid * Pane näide käima. * Pane ruut liikuma ülalt-alla suunas (vertikaalselt). Võimalda selles sihis ruutu enese poole kutsuda. * Muuda koodi nõnda, et hiirevajutus lükkaks ruutu pigem hiirest eemale. * Ruut saab liikuda kõigi nelja ilmakaare suhtes. Võimalda igal pool ruutu hiirest eemale liikuma lükata (puhuda). Liikumiskiiruse määramine hiirega Eelmises näites lihtsalt vaadati, kuidas ruutu hiire poole meelitada. Arvestades aga kaugust hiirest, saab nõnda määrata ruudu liikumise kiiruse. Olgu siis nii, et lähemale vajutus tõmbab/lükkab tugevamini, või kehtib sama kaugema vajutuse kohta. Üheks mooduseks oleks öelda, et uueks ruudu liikumise sammuks saab kaugus hiire ja ruudu vahel (samm=hx-x). Sellisel puhul aga oleks ruut esimese sammuga juba hiire juures, teise sammuga sama palju möödas. Ning vähegi suurema sammude tiheduse ehk kaadrisageduse ja pikema sammu korral juba ekraanilt väljas. Sammu võib veidi väiksemas võtta seda nulli ja ühe vahel oleva kiiruskoefitsiendiga korrutades. Näiteks, kui see kordaja on 0,1 (arvutikoodis vaja koma asemel punkt kirjutada), siis kui hiir vajutatakse ruudust 30 punkti kaugusele, saab tegelikuks sammu pikkuseks kolm punkti, mida on silmaga juba suhteliselt sujuv vaadata. samm=(hx-x)*kiiruskoef; Muu jääb üllatuslikult samaks, aga kiiruse muutmise paindlikkus on märgatavalt suurem. Liikumine
Ülesandeid * Võimalda liikumise kiirust määrata ülalt-alla liikuva ruudu puhul. * Ruut saab liikuda iga ilmakaare suunas. Samuti saab hiire abil määrata liikumise kiirusi. * Pane ristkülik ekraanil laiustpidi suurenema * Pane ristkülik ekraanil suurenema hiirevajutuse peale * Üks hiirevajutus paneb ristküliku suurenema, teine vähenema * Vähenemisel jääb ristküliku parem külg paigale. Nõnda on võimalik kordamööda hiirevajutuste abil jäljendada ussikese liikumist edasi. * Ussikene pole enam ristkülik, vaid on ovaal * Ussikene koosneb mitmest üksteise sappa ühendatud ovaalist. Kukkumine Tegelikus elus toimuvaid liikumisi jäljendades tuleb mõnigikord ka kukkumist ehk vaba langemist järgi teha. Järgnevalt mõned näited, seletused ja soovitused selle kohta. Ring ekraanil Kukkumine kipub millegipärast vahel kergesti palliga seostuma. Pall aga teadaolevalt enamasti ringikujuline. Seetõttu tuletame meelde, kuidas sai ringi joonistada ekraanile. Ristküliku puhul piisas joonistamiseks ühest käsust. Ringi ja muude kujundite puhul aga tuleb joonistamist alustada käsuga beginPath(). Seejärel luua vajalikud kujundid. Ning lõpuks öelda stroke() või fill() vastavalt sellele, kas soovitakse näha vaid piirjooni või siis kogu kujund seest ära täita. Ning ringi joonistamiseks sobib kaare tegemise käsklus (arc). Määratakse, keskpunkt, raadius, kaare algnurk ja kaarepikkus radiaanides ning joonistamise suund. Ringi puhul võib alustada algusest (ehk nullkraadist), täisringiks on 2 piid ehk 2*Math.PI ning joonistamise suund pole tähtis, siin näites jätsime selle true-ks. Kukkumine
Ühtlane kukkumine Ülalt alla liikumine toimub sarnaste arvutuste tulemusena nagu ennist vaadatud vasakult paremale liikumine - vaid muuta tuleb y-koordinaati. Algusfunktsioonis küsitakse ligipääs tahvlile ja temale joonistamiseks vajalikule graafilisele kontekstile (muutujad t ja g). Käsklus setInterval('liigu()', 100); teatab, et funktsioon liigu() tuleb käivitada iga 100 millisekundi tagant, ehk siis 10 korda sekundis. Seda ooteaega saab katsetada ja muuta, aga 100 on osutunud suhteliselt kuldseks keskteeks. Pikem ooteaeg näib juba silmale viivitusena. Lühema aja puhul aga ei pruugi seade suuta enne pilti korralikult valmis joonistada. Kukkumine
Ülesandeid * Tee näide läbi. Muuda ringi suurust ja kukkumise kiirust * Pane kukkuma mitme joonistuskäsuga loodud kujund - nt pall, millele paar täppi peale joonistatud. * Kujundi suurust ja kukkumise kiirust saab all olevas tekstiväljas muuta. Kiirenev kukkumine Tavaelu jälgides saab kõrgemalt kukkudes kätte suurema kiiruse. Ehk siis kiirus kukkumise ajal kasvab. Mingist suurusest hakkab kiirust piirama õhutakistus, aga lihtsamate arvutuste juures ka füüsikaõpikus jäetakse õhutakistus välja. Väliolukorda üsna täpselt saaks jäljendada, kui arvestada, mitu ekraanipunkti vastab ühele meetrile looduses ning siis vastavalt esemed ja raskuskiirendus paika ajada. Lihtsamal juhul aga võib kukkumissammule igal ringil veidi otsa liita, et sammu pikkus suureneks. Ning sobivat tulemust saab juba silma järgi hinnata. Siin näites said kõigepealt üles muutujad sammu ja kiirenduse kohta var ysamm=1, ykiirendus=0.4; Liikumisfunktsioonis kõigepealt suurendatakse sammu kiirenduse jagu ning siis liigutakse igrekiga sammu jagu allapoole. ysamm=ysamm+ykiirendus; y=y+ysamm; Kood tervikuna Kukkumine
Ülesandeid * Pane näide käima, katseta erinevaid algseid sammu pikkusi ja kiirenduse väärtusi * Katseta liikumist negatiivse sammu korral * Määra algul kiirendus ja samm nulliks. Käivita kukkumine nupuvajutuse peale. * Kiirendust ning palli suurust saab tekstiväljas määrata. Kukkumiskoha määramine hiirega Liikumist jällegi mugavam ekraanil juhatada hiirega. Siin näites leitakse kõigepealt hiire asukoht tahvli suhtes (muutujad hx ja hy) ning pärast paigutatakse ring vastavale kohale. Vajalik on samuti ysamm'u ehk allakukkumiskiiruse määramine nulliks, sest muul juhul jätkaks pall hiirevajutuse kohast endise kiirusega kukkumist ning varsti poleks teda ekraanil võimalik enam kuigivõrd jälgida. function hiirAlla(e){ var tahvlikoht=t.getBoundingClientRect(); var hx=e.clientX-tahvlikoht.left; var hy=e.clientY-tahvlikoht.top; x=hx; y=hy; ysamm=0; } Kui nüüd nõndamoodi toimetada, siis igal hiire vajutamise korral hüppab sinna pall ja asub sealt vaikselt alla kukkuma. Kood tervikuna. Kukkumine
Ülesandeid * Pane näide tööle, muuda palli värvi ja suurust. * Iga järgmise hiirevajutuse peale läheb pall veidi väiksemaks. * Joonista tahvli alumine pool siniseks. Kui pall on jõudnud allapoole veepiiri, siis hakkab ta vaikselt väiksemaks minema. * Veepiirist allpool jaguneb pall kaheks ning kumbki tükk hakkab kukkudes vaikselt vähenema. * Vee all palli kiirus on aeglasem ja ei muutu. Peatumine servas Nagu niisama liikumise juures, nii ka kukkumise puhul on vahel hea, kui kokkupandud kujundid meie tahtmata silmapiirilt ei kao. Taas tuleb kontrollida, et soovitav järgmine asukoht oleks lubatud ala sees, vaid siis liigutakse edasi. Ning tulevikule mõeldes on lisatud muutuja ka x-suunalise liikumise tarbeks. Lihtsalt kuna xsamm on parajasti 0, siis kukutakse otse alla. Kui juhtub, et uus leitud asukoht satuks tahvlilt välja, siis pannakse x ja y-sammud nulliks. function liigu(){ ysamm=ysamm+ykiirendus; if(kasSees(x+xsamm, y+ysamm)){ x=x+xsamm; y=y+ysamm; } else { xsamm=0; ysamm=0; } joonista(); } Ringi peatamise võimega kood tervikuna: Kukkumine
Ülesandeid * Katseta näidet, muuda palli värvi, joonista seest täis. * Tõmba ekraanile maapinda tähistav joon, jäta pall selle juures seisma. * Maapinnani jõudnud pall hakkab uuesti ülevalt kukkuma. * Ülevalt uue kukkumise asukoht valitakse juhuslikult. Palli loopimine Nüüdseks on juba piisavalt oskusi kogunenud, et midagi täiesti elavat ja usutavat kokku panna. Näitena palli heitmise rakendus, kus pall hakkab liikuma hiire poole. Mida kaugemal hiir on, seda kiiremini. Servade juures kontrollitakse, et pall sealt välja ei läheks. Kui serv ette tuleb, siis võetakse hoog maha. Kui võimalust, hakkab ta sellest kohast uuesti allapoole kukkuma. Kui alla jõudnud, siis peab lihtsalt jääma ootama, kuni hiirega uuesti vajutatakse ja pall liikuma meelitatakse. Tehniliselt midagi väga eripärast võrreldes eelnenuga polegi. Mõlema koordinaadi puhul pannakse pall sammuma hiire suunas. Sammu pikkus võrdeline kaugusega hiirest. xsamm=(hx-x)*kiiruskoef; ysamm=(hy-y)*kiiruskoef; Tulemusena aga valmib täiesti mitmekülgne palli heitmise rakendus, mida saab edaspidi mitmesuguste liikuvate mudelite juures kasutada. Kukkumine
Nagu piltidelt näha, saab nõnda panna palli oma asukohta muutma. Ülesandeid * Pane näide tööle. Muuda muuda kiiruskoefitsienti, jälgi, kuidas see mõjutab palli liikumist. * Muuda y-suunalist kiirendust ja jälgi, kuidas see mõjutab palli kukkumist. Täpsusviskamine * Võta aluseks palli loopimise näide. Paiguta pall tahvli ühele poolele ning kast tahvli teisele poolele maha * Kui pall õnnestub kasti sisse visata, siis muudab kast värvi * Eraldi arvuga näidatakse, mitu korda on kasti tabatud. Pärast tabamist hüppab pall algkohta tagasi * Kasutajad viskavad palli kordamööda. Loetakse, mitu korda on kummalgi pall kasti pihta läinud. Hiirt jälitav pall * Tutvu palli loopimise näitega. Eemalda raskuskiirendus * Sammu arvutamine käivitatakse mitte hiire vajutamise, vaid hiire liigutamise peale (sündmus onmousemove). Pall võiks hakata hiire poole liikuma. * Lisa süsteemi teine pall teiste algkoordinaatidega. Mõlemad pallid püüavad sarnase valemiga liikuda hiire poole. * Teine pall ei püüa liikuda mitte hiire, vaid esimese palli poole. Nii võiks hiire liigutamise tulemusena tekkida hiire järgi pallidest ahel. Andmed ja otsing Massiiv Tavalises muutujas saame hoida ühte väärtust. Kui aga lehel on sarnaseid andmeid palju, siis igaüht omaette muutujas hoida on tülikas. Neid tuleb palju ning sobiva leidmine sealt ikkagi keerukas. Sarnaseid andmeid aitab koos hoida massiiv. Eesnimede loetelu saab näiteks teha nõnda: var eesnimed=new Array("Juku", "Kati", "Katrin", "Madis"); Selle peale luuakse loetelu, kus Juku poole saab pöörduda kujul eesnimed[0] ning Madise poole eesnimed[3]. Ehk siis lugemist alustatakse nullist ning viimase järjekorranumbriks on elementide arvust ühe jagu väiksem arv. Katsetamiseks juurde ka töötav koodinäide. Otsing
Näite tulemuseks: Loetelu alguses on Juku ja Kati Elementide arv Javaskript annab õnneks mugavasti kätte massiivi elementide arvu - selleks omadus .length massiivimuutuja nime küljes. Sealtkaudu võimalik siis kohe arvutuse teel kätte saada massiivi viimane element. Eesnimede massiivis siis eesnimed[eesnimed.length-1] Näide tervikuna Otsing
Ja tulemus Eesnimesid kokku on 4. Viimane neist Madis. Ülesandeid * Koosta massiiv inimeste pikkustega. Trüki välja esimene ja viimane pikkus. * Trüki välja teine ja eelviimane pikkus. Järjekorranumbri järgi küsimine massiivist Nagu kõiksugu muid väärtusi, nii ka massiivi elementide järjekorranumbreid saab küsida kasutaja käest. Siin siis võetakse eesnime number sisestuskastist ning kuvatakse vastav eesnimi. Otsing Mitmes eesnimi:
Juhusliku järjekorranumbriga element Ka juhuarv toimib massiivi elemendi järjekorranumbri leidmise juures. Lihtsalt on kasulik hoolitseda, et järjekorranumbriks tuleks täisarv - parseInt pakub sellise võimaluse. Otsing
Ülesandeid * Koosta massiiv ütlustega. Lehe avanemisel ilmub ekraanile neist üks juhuslik ütlus. * Erinevalt eelmisest teatatakse kasutajale, mitme ütluse vahel tal on valida. Kasutaja sisestab soovitud ütluse järjekorranumbri ning näeb vastaval kohal olevat ütlust. * Koosta üks massiiv poiste eesnimedega ja teine tüdrukute eesnimedega. Lehe avanemisel valitakse juhuslik poiss ja juhuslik tüdruk ning teatatakse, et nemad lähevad esimestena tantsima. Kordused Massiivi andmete otsimiseks, muutmiseks ja töötlemiseks on kasulikuks abiliseks kordused. Kõigepealt väike näide korduse töötamise kohta for(var i=0; i<3; i++){ document.getElementById("vastus").innerHTML+=i+" "; } Tuumikuks siis for-tsükkel, kus iga sammuga liidetakse vastuse sisule (innerHTML) juurde tsükliloenduri i väärtus ning sinna lisatakse tühik, et arvud üksteisega kokku ei kasvaks. Tehtemärk += tähendab olemasolevale väärtusele millegi juurde lisamist, ilma, et peaks seda kohta korduvalt välja trükkima. Otsing
Väljund 0 1 2 Ülesandeid * Tutvu tsükli näitega. Trüki arvude ruudud ühest kahekümneni (suurimaks siis 20*20 ehk 400). * Luba kasutajal sisestada, mitmeni arvude ruute soovitakse Tsükkel ja massiiv Sarnaselt tsükli abil saab välja trükkida või muul moel ette võtta ka kõik samas massiivis olevad eesnimed. Lihtsalt väljatrüki või muul moel kasutuse koha peal pole enam tsükliringi loendur, vaid küsitakse massiivist vastava järjekorranumbriga element. Praegusel juhul siis eesnimed[i]. Otsing
Väljundiks: Juku Kati Katrin Madis Eelmises näites olid eesnimede vahel tühikud. Nõnda tekstina saab aga ka kõiki HTMLi korraldusi anda ja nendega funktsiooni töö tulemust mõjutada. Kui eesnimede vahele kirjutada reavahetusmärgend
, siis kasutaja näeb iga nime omaette real. Otsing
Kasutaja näeb tulemust nõnda: Juku Kati Katrin Madis Tegelikult on kokkupandud HTML-kood selline: Juku
Kati
Katrin
Madis
Veebilehitseja aga teab, et
käskluse peale tuleb teksti edasi näitama hakata järgmiselt realt ning nõnda näemegi ilusti üksteise all olevaid eesnimesid. Veidi põhjalikumaks loetelu looomiseks on HTMLis nummerdamata loetelu (unordered list), mille loomise käsuks märgend . Nimede loetelu nummerdamata loetelus HTMLis näeb välja Programmikoodiga sellist loetelu tekitades tuleb üksikud lõigud kokku koguda. Siinses näiteks on selleks muutuja t (nagu tulemus). Algul antakse t-le väärtus "; Sellisena saabki tulemuse lehel kuvamiskõlblikuks. Otsing
Ülesandeid * Tutvu massiivi andmete trükkimise näidetega, tee näited läbi. * Kirjuta iga eesnime välja kaks korda * Trüki eesnimed ekraanile tagurpidises järjekorras * Asenda