Harjutusväljak

Panen siia kokku harjutus- või proovikastid eelmisest kirjutisest, s.t. saab ise katsetada oma programmijupikestega ning joonistada midagi kanvaale.

UUS!

Alustasin täna, 29.08.2014 harjutuste loomist. Harjutuste algtingimused: selles blogis on olemas 3 tekstikasti ning üks kanvaakast (tekstikast - textarea tüüpi element, kanvaakast - canvas tüüpi element).
Programmikast sisaldab programmi ( elemendi id on "programm"). Logikasti saab kasutada programmi väljundina, selle tekstikasti id on "logi". Kanvaakasti ehk lõuendit id-ga "louend" saab kasutada graafiliseks joonestamiseks, siin "joonista lõuendile" teeb ära kanvaakasti "avamise", nii et "kontekst" nimelise objektile käske andes saate kohe joonestama hakata, kui kasutada joonestusprogrammiks kanvaaprogrammi nimelist kausta.
Saate kasutada "sisseehitatud" funktsiooni "logi(lisaLogiKasti)", mis lisab logikasti muutuja lisaLogiKasti sisu, tehes enne reavahetuse.
Võib ka kasutada funktsiooni alert(teade), mis toob ekraanile teate Windows uues aknas ning kõike muud kräppi, mis on olemas JavaScripti standardvarustuses.
Pakette, nagu "Jquery" tänase päeva seisuga (28.08.2014) ma veel lisanud ei ole ja ei tea, mis juhtub nendega blogimise keskkonnas.
Tekstikastide all on praegu 3 nuppu. Esimene käivitab programmi, teine puhastab tekstikasti, kolmas nimega "Harjutus: Kaks nuppu" avab minu esimese prooviharjutuse. Hommikuse seisuga seal midagi ei ole, lõunaks peab lindilt tulema esimene näidis! See ei takista teil oma oskusi näitamast, näiteks töötab väga hästi kuulus Gaussi ülesanne 100 arvu liitmiseks
var sum=0;for(var i=1;i<=100;i++) sum+=i;logi(sum);
Selle ülesande lahendas Gauss oma matemaatikaõpetaja meelehärmiks peaaegu momentaalselt, õpetaja nimelt tahtis oma lastele tööd anda, et tegelda oma asjadega...
Et teha aga täitsa oma HTML lehekülje elementide loomine võimalikuks selle blogi kontekstis ilma blogikirjutist väga ära rikkumata, tekitasin nendele tekstikastidele ja nuppudele esivanema id-ga "isa".
Selle alla saate luua "lapsi", näiteks nuppusid, oma tekstikaste, oma paragrahve, päiseid, ühesõnaga, mida iganes.
Võite seda rahulikult teha, sest pärast minu lehekülje uuestiavamis on minu õnneks teie looming "haihtunud".

Ülesanne: luua siia lisaks "Käivita ..." nuppudele 2 päris oma nuppu, mis nendele vajutades midagi teevad, näiteks alert("Hallo, hallo"); või siis alert("Helgi Sallo"); Malli leiate programmikastist koos üllatusega. olemasolevate nuppude esivanema id on "isa" (see on muideks vajalik!) Natuke selgitusi ka: // document.createElement(...) See tegelikult ei tekita elementi kohe ekraanile ning kõik omadused elemendile on ka vaja veel öelda. Kõik meetodid, mis HTML asjadega opereerivad, pöörduvad document objekti poole ja selle järel, "." järel kirjutatuna, tuleb vastav meetod e. funktsioon. createElement vajab loomisaktiks elemendi tüüpi, praegu on see "button". Järgnevalt tuleb anda elemendi omadustele (attribuutitele) kindlad väärtused. nupp.id annab sellele elemendile id väärtuse, see oleks edaspidi mugav, et elemendiga edasi opereerida. .innerHTML on selle nupu SISU opereerimiseks väga vajalik "omadus". Siia pange selle nupu peale kirjutatav tekst. .onclick järel tuleb Teil kirjutada korralik funktsiooniavaldis kujul xxx.onclick = function() { käsud;...}; Ärge kasutage samasugust meetodit, nagu on lubatud HTML lehekülje sees. Näiteks ei tööta onclick="alert('Hallo')", mingit hallot ei tule, võite kohe proovida. Kui aga kohe button elemendi juurde kirjutada attribuudiks "alert('hallo');", siis see töötab. See on nüüd selle harjutuse tekkepõhjus, mis keeras mul möödunud nädalal vussi plaani avaldada TTT II variant. Lihtsad komavea tüüpi arusaamatused ongi need kõige vastikumad ja võivad võtta päevi taipamiseks, sest enamasti vilunud koodinikerdajad on need asjad kas kergel või raskel kujul üle elanud ja enam selle peale ei tule, et nii lihtsalt võib astuda ämbrisse. et aga element TÕESTI LUUA, on peab välja valima vanema, kelle kasulapseks seda elementi sokutada. Praeguseks vanemelemendiks on element id-ga isa. isa.appendChild(viide loodud objektile) lõpuks loob selle objekti koos omadustega. Kui teie koodis on aga kala sees, ei tehta midagi. Ja ülletuseelement location.replace() läheb jutjuubi videole ... var nupp1 = document.createElement("button"); var nupp2 = document.createElement("button"); nupp1.innerHTML ="Hallo, hallo"; nupp2.innerHTML ="Helgi Sallo"; nupp1.id ="nupp1"; nupp2.id ="nupp2"; nupp1.onclick = function() { alert("Hallo,hallo!"); }; nupp2.onclick = function() { alert("Helgi Sallo!"); location.replace("https://www.youtube.com/watch?v=HsbET0OTaqA"); }; var isa =document.getElementById("isa"); isa.appendChild(nupp1); isa.appendChild(nupp2); Ülesanne: Kirjutada 2 funktsiooni - tavalise tsükli abil arvutatud faktoriaal ning rekursiivselt arvutatud faktoriaal. Arvutage välja 10! mõlematpidi. Uurige, mis juhtub, kui "*" märk asendada "+" märgiga ning kutsuge välja teisendatud faktoriaal 100000 puhul. Minu arvutis programm ignoreeris teist haru, sest rekursioon jõudis liiga sügavale. Millise n maksimaalse väärtuse puhul on faktoriaal veel arvutatav? var faktoriaalTavaline = function(n) { var f=1; for(var i=1;i<=n;i++) f*=i; return f; } var faktoriaalRekursiivne = function(n) { return (n===1) ? 1 : n*faktoriaalRekursiivne(n-1);} logi("Tavaline faktoriaalimeetod:" + faktoriaalTavaline(10)); logi("Rekursiivne faktoriaalimeetod:" + faktoriaalRekursiivne(10)); Ülesanne: Kirjutada 2 funktsiooni - tavalise tsükli abil arvutatud Fibanocci n-s arv ning sama asi rekursiooni kasutades. Arvutage välja F(20) mõlematpidi. var fibanocciTavaline = function(n) { if (n<=2) return 1; var fa=1,fb=1,f; for(var i=1;i<=n-2;i++) { f=fa+fb; fa=fb; fb=f; } return f; } var fibanocciRekursiivne = function(n) { return (n===1 || n===2) ? 1 : fibanocciRekursiivne(n-1)+fibanocciRekursiivne(n-2);} logi(fibanocciRekursiivne(20)); logi(fibanocciTavaline(20)); Ülesanne: Kirjutage Ackermanni funktsiooni ack(m,n) arvutav rekursiivne funktsiooniavaldis ja katsetage A. f-ni arvutamist erinevatel m,n väärtustel. Miks ack(4,1) ei taha "välja tulla" ? Tingimused: ack(0,n) = n+1 ack(m-1,0) = 1 ack(m,n) = ack(m-1,ack(m,n-1)) function ack(m, n) { return m === 0 ? n + 1 : ack(m - 1, n === 0 ? 1 : ack(m, n - 1)); } logi(ack(3,6));

Logikast nimega logi

Programmikast nimega programm

Kanvaa nimega louend

Siin peaks olema kanvaa, kui seda siin ei ole, on teie sirvik pärit Noa aegadest!

Kanvaaprogramm

kontekst.beginPath(); kontekst.arc(125,125,120,0,Math.PI*2,true); kontekst.stroke();