Kodu Game Lab

Juhendid: http://koduproge.blogspot.com/

MIT AppInventor - Kivi, paber, käärid

Kivi, paber, käärid juhend

juhend: http://www.progetiiger.ee/

MIT AppInventor - astendamise äpp

Juhend: http://viimsiproge.blogspot.com/2015/05/32-tund-astendamise-app.html

MIT App Inventor - konnamängu äpp

Proovime Progetiigri töölehe järgi teha mängu, kus tuleb tabada hüppavaid konni. Punast konna tuleb vältida, selle puudutamine nullib kõik kogutud punktid!

Tööleht asub siin, lumehelveste asemel on siis konnad:
http://www.progetiiger.ee/sites/default/files/AppInventor2.pdf


Konnapildid saate alla laadida siit:

MIT App Inventor - kooliäpi tegemine

Täna proovime MIT App Inventoriga teha äpi, mis koondaks kokku meid huvitavad leheküljed ja lingid.

Näiteks midagi sellist:

Idee siit: http://www.progetiiger.ee/content/2-tutvume-app-inventoriga

MIT App Inventor - sissejuhatus

MIT App Inventor on keskkond, kus on võimalik teha nutiseadmetele äppe ning neid samas ka testida.

http://appinventor.mit.edu/explore/

Keskkonda saab kasutada Google kontoga (Viimsi Kooli õpilaste e-post või gmail.com lõpuga meiliaadress). NB! Kellel ei ole Google kontot, siis küsige selle tegemiseks abi õpetajalt!

Keskonna tutvustus ja tööleht: http://www.progetiiger.ee/content/1-sissejuhatus

Ülesanne 1
Loo äpp, mis vastamise nupule vajutades kuvaks kasutajale erinevaid vastuseid (vt Progetiigri materjali linki ülalpool).
Täiusta oma äppi nii, et nupule vajutamisel mängitakse helinat ja vastus kuvatakse telefoni raputamise peale.

NB! Äppi saad katsetada oma nutiseadmes. Selleks klõpsa menüüribal sõna "Build" ja vali loetelust "App (provide QR code for .apk)".

Nüüd kuvatakse mõne aja pärast arvuti ekraanile QR kood, mida telefoniga lugedes saate käivitada rakenduse allalaadimise.

Oma seadmes pead selle rakenduse installimiseks lubama installimise tundmatutest allikatest pärit rakendustele - selle võite nutiseadme seadete alt korraks sisse lülitada ja siis tunni lõpus panna peale jälle piirangu, et see poleks lubatud (telefoni turvalisuse huvides).

Objektid ja meetodid Javascriptis

Codecombati mängu mängides puutusid kokku sellega, et tegelase liigutamiseks pidid kasutama süntaksit this.moveRight(); või this.attack(enemy); selles mängus on tegelased kirjeldatud objektidena ning neile saab mängu käigus lisada uusi omadusi ja funktsioone.

Objekte kasutataksegi Javascriptis selleks, et andmeid organiseerida. Objektiks sisuks olevad omadused võivad muutuda (nii nagu mängus saab tegelane järjest tugevamaks). 

Objekti defineerimisel on üheks võimaluseks panna objekti omadused loogeliste sulgude vahele

var objektinimi = {};

var mina = {
  nimi: "Minu Nimi",
  vanus: 10
};

Teine võimalus on kõigepealt defineerida tühi objekt (new Object();) ja siis täida see sisuga.

var mina = new Object();
mina.nimi = "Minu Nimi";
mina.vanus = 10;


Meetodid

Meetodid on objektiga seotud funktsioonid. Neid saab kasutada objekti omaduste väärtuste muutmiseks (näiteks uus vanus) ja objekti omaduste põhjal arvutuste tegemiseks.

Meetod muudab ära kasutaja vanuse:

mina.muudaVanus = function (uusVanus){

  mina.vanus = uusVanus;

};

Meetod arvutab vanuse järgi inimese sünniaasta:

mina.leiaSynniAasta = function () {

  return 2014 - mina.vanus;

};

console.log(mina.leiaSynniAasta());

Võtmesõna this 

toimib kohatäitjana ja viitab meetodi kasutamisel meetodi välja kutsunud objektile.

Taimer (MobileNations)

Juhend MobileNations keskkonnas taimeri äppi loomiseks.

Näiteks midagi sellist:

Analoogse äpi loomiseks tuleb alustada MobileNations keskkonnas uut projekti (Blank Phone App).

Kõigepealt loome äpi, mis alustaks allapoole loendamist arvust 20.

Selleks:

• lohistame tööriistakastist mobiilile ühe "label" sildi.
  
• lisame mobiilile ka nupu, mis taimerit käivitaks. 
  
• nüüd lisame javascripti, mis nupule vajutades hakkaks arvust 20 allapoole loendama ning lõpetaks, kui väärtuseks saab 0 

Javascripti sisestatav kood võiks olla selline:

"taimer":function(){
    if (window.theCount == null)
    {window.theCount = 20}
  if (window.theCount >=0) {
     MN.find("Default View/label").text = window.theCount;
     window.theCount--;
   }

• Edasi tuleb äpp töökorda seada. Selleks lisame veel valmis programmi numbrite mahaloendamiseks (Timer). Selleks leia "Tools palette" valikust "Timer" ja lohista see mobiilile.
• Taimeri seadistamine 
  
• Javascripti sidumine taimeriga 
  
• klõpsa nupul "Preview" ja vaata, kas äpp töötab!

Täiendus - kasutaja saab sisestada arvu, millest hakatakse numbreid allapoole loendama!

• Kasutaja käest andmete küsimiseks on vaja sisestada vastav tekstikast 

• Asenda javascripti koodis arv 20 järgmise kirjega: MN.find("Default View/arv").text;
• Kustuta ära ka sildi väärtus (20), sest muidu kuvatakse äppi laadides endiselt seda arvu.
• Kirjuta arvu sisestamiseks ka kasutajat juhendav tekst.

Keskkond Appide loomiseks (javascripti baasil) - MobileNations

http://www.mobilenationhq.com/

Keskkonda tuleb esmalt kasutajakonto luua. Tasuta kontoga saab 25 MB salvestusruumi ning võimaluse teha 10 appi. Harjutamiseks sellest piisab.

Valmis appe saab testida kohe oma nutiseadmes, selleks on vajalik QR koodi lugeja olemasolu. QR koodiga saab oma appi ka teistele jagada.

Proovime täna valmis teha ühe lihtsa arvutamise äppi, mis teeks sisestatud arvudega mõned arvutamistehted (näiteks liidaks, lahutaks ja korrutaks).

Peale sisselogimist saate valida, millist projekti soovite luua. Tänase projekti jaoks vali "Blank Phone App".

Edasi tuleb menüüst sobivad vidinad lihtsalt virtuaalse nutiseadme ekraanile lohistada ning neile tegevusi määrata.

Komponentide lisamise kohta vaadake allolevat videot

Kui kompnendid on lisatud, tuleb nad Javascripti abil ka tööle panna. Selleks lohistame komponentide paneelist telefonipildile Javascripti.

Skript, mille lisame peab olema selline:

"arvuta":function(x,y) {

var X = parseFloat(x); //teisendab väljale x sisestatu arvuks

var Y = parseFloat(y); //teisendab väljale y sisestatu arvuks

MN.find("Default View/liitmise välja nimetus").text = X + Y;

MN.find("Default Vier/lahutamise välja nimetus").text = X - Y;

}

Edasi tuleb nupule lisada tegevus (vt videot, kuidas seda teha!).

Javaskript kodulehel - joonistamine

Täna proovime teha lehekülje, millele saab joonistada (esialgu küll ainult kindlat kujundit).
Joonistamise jaoks tuleb esmalt luua koht, kuhu joonistada. HTML-is on selleks olemas element nimega <canvas>.
Element tuleb paigutada HTML lehe <body> elementide vahele ning selleks, et Javascript teda kasutada saaks, tuleb talle anda ka nimi (id), antud juhul on nimeks tahvel.

<!DOCTYPE html>
<html>
<head>
    <title>Joonistamine</title>
  
</head>
  <body>
      <h1>Joonistamine</h1>
      <canvas id="tahvel" width="300" height="200"  style="background-color:#FFF8DC"></canvas>
 <br>

    
  </body>
</html>

Avage Notepad ning kopeerige sinna ülalolev kood. Salvesta fail ning anna talle nimeks joonistamine.html
Ava fail veebilehitsejaga (soovitavalt Firefox) ning sul peaks ekraanile tekkima kollakas kast.

Värvikoodi (#FFF8DC) võid endale meeldivamaks muuta, näiteid vaata siit: värvikoodid

Lisame koodi nüüd Javascript-funktsiooni, mis joonistaks värvilisse kastikesse ristküliku.

Selleks tuleb HTLM lehe päisesse <head> ... </head> vahele kirjutada

<script type="text/javascript">

</script>

Skripti tagide vahele lisame funktsiooni "joonista"


function joonista(){

var g=document.getElementById("tahvel").getContext("2d");

g.fillRect(20, 20, 50, 50);

}

Selleks, et lehekülje avanedes kohe ka kastike joonistataks, tuleb HTML koodi <body> osasse lisada

<body onload="joonista()">

Salvesta oma lehekülg ja katseta!

Proovi muuta javaskriptis g.fillRect(20, 20, 50, 50) numbreid. Salvesta ja ava fail veebilehitsejas. Mida märkad?
Esimesed numbrid määravad ära ruudukese kauguse "tahvli" ülemisest vasakust nurgast (mõlemast 20). Järgmised numbrid näitavad kastikese laiust ja kõrgust.

Täiendame oma skripti sellega, et kasutaja saab ise vastavad väärtused lehele lisada ning joonistatakse just selline ruut või ristkülik, nagu kasutaja soovib.

Selleks lisame esmalt HTML koodi <canvas> elemendi alla teksti:

    Sisesta laius x kõrgus<br>    
    <input type="text" id="laius"  value=" " /> x
    <input type="text" id="korgus" value=" " />
    <input type="button" value="Joonista" onclick="joonista()" /> 

body onload="joonista()" kustutame nüüd ära, sest edaspidi hakkab joonistamisfunktsiooni käivitama nupp "joonista".

Salvesta ning testi nupu töötamist!

Nupuvajutuse peale joonistatakse olenemata sisestatud arvudest kujund, mis on määratud HTML lehe päises olevas skriptis!
Selleks, et joonistamisel aluseks võtta kasutaja sisestatud arvud, tuleb skripti veidi muuta.

Esmalt tuleb defineerida muutujad laius ja korgus ehk siis need väärtused, mis sisestab kasutaja
        var laius=parseInt(document.getElementById("laius").value);
        var korgus=parseInt(document.getElementById("korgus").value);         

parseInt käsklus teisendab tekstikasti sisestatud numbrid javascripti jaoks arvudeks.

Edasi tuleb anda käsklus ristküliku/ ruudu joonistamiseks
         g.fillRect(20, 20, laius, korgus);

Funktsioon "joonista" peaks nüüd välja nägema selline:

function joonista(){
var g=document.getElementById("tahvel").getContext("2d");
        var laius=parseInt(document.getElementById("laius").value);
        var korgus=parseInt(document.getElementById("korgus").value);           
        g.fillRect(20, 20, laius, korgus); 
         };

Salvesta oma fail ja katseta!

Ilmselt märkasid, et uute arvude sisestamisel joonistatakse kujund nö vana kujundi peale (suuremaid saab joonistada, aga väiksemaid ei ole näha). Selleks, et enne joonistamist plats puhtaks tehtaks, tuleb lisada joonista funktsiooni sisse ka vastav käsklus

g.clearRect(0, 0, 300, 200);

Puhastamist alustatakse "tahvli" vasakust ülanurgast (0, 0) ning mõõtudeks on "tahvli" mõõtmed (need on kirjeldatud <canvas> elemendi sees).

Kui soovid, et joonistatav ruut oleks mõnda muud värvi, kui must, siis lisa joonistamise funktsiooni veel järgmine rida:

g.fillStyle = "red";

Valmis lehekülg võiks välja näha ja toimida selliselt: http://www.hot.ee/vroosioks/joonistamine.html

Väike Javascripti rakendus kodulehele

Täna proovime teha veebilehekülge, kuhu kasutaja saaks sisestada oma nime ning veebileht tervitaks teda nimepidi.
Esmalt on meil vaja vahendit, et veebilehele saaks midagi sisestada. Selleks on HTML-is olemas kood <input type="sisestatavate väärtuste tüüp, näiteks text teksti puhul või number numbrite puhul" id="viide" />

<div> ... </div> märgendeid kasutame selleks, et määrata lehel erinevate elementide asukoht.

Lehekülje tegemiseks ava arvutis programm Notepad ning võid siit kopeerida ning sinna kleepida alloleva koodi.

<!DOCTYPE html>
<html>
  <head>
     <title>Nimeküsimine</title>
     <script>
    
     </script>
  </head>
  <body>
     <h1>Nimi</h1>
   <div>
  Kirjuta siia oma eesnimi:
      <input type="text" id="eesnimi" />
      <input type="button" value="OK"  />
   </div>
   <div id="vastus">
     Vastuse koht.
   </div>
  </body>
</html>

NB! Salvestamisel vali failitüübiks "All files"  ning anna failile nimeks nimi.html

Edasi tuleb programmile teada anda, et me tahaksime "Vastuse kohale" kirjutada tervituse.
Lisa oma Notepadi programmi <script> ... </script> vahele järgmised read:

function tervita(){ document.getElementById("vastus").innerHTML="Tere"; }

Nüüd on vaja kusagil see funktsioon ka nö välja kutsuda. Selleks lisage <input type="button" value="OK" /> sisse onclick="tervita();"

<input type="button" value="OK" onclick="tervita();" /> 

Salvesta oma programm ning ava see veebilehitsejaga. Sisesta oma nimi ning klõpsa nupul OK.

Hetkel kuvab programm ainult tervituse.
Kui soovime sellele lisada veel ka nime, mille kasutaja sisestas, siis tuleb funktsiooni tervita() täiendada ning lisada sellele "eesnimi" välja väärtus (value).

document.getElementById("eesnimi").value 

 Funktsioon tervita() võiks nüüd välja näha selline:

document.getElementById("vastus").innerHTML= "Tere, "+document.getElementById("eesnimi").value;

Ülesanne

* Loo ekraanile kaks tekstivälja: üks eesnime, teine perekonnanime jaoks. Tervita kasutajat mõlemat nime pidi.

* Muuda oma valmis programmi nii, et nime asemel saaksid sisestada näiteks pikkuse sentimeetrites ning see arvutatakse ümber meetriteks.

Töölehe koostamisel on aluseks võetud Jaagup Kippar'i õppematerjal: http://minitorn.tlu.ee/~jaagup/oma/too/13/kliendirakendused/juht.html

CodeCombat - mäng Javascripti õppimiseks!

http://codecombat.com/

Mänguga tutvumiseks ei ole vaja kasutajat teha, aga kui soovid siiski mängu kaudu Javascripti õppida, siis oleks kasutajakonto loomine vajalik - muidu tuleb iga kord algusest alustada ning kõik saavutatud oskused uuesti oma tegelasele kätte "võidelda". Kontot saab luua töötavad meiliaadressiga, aga ka Google ning Facebooki konto kaudu (sisselogimisel kasuta siis neid kontosid).

Mäng on üsna sarnana tavalistele arvutimängudele, kus tuleb koguda varandust (siin teemante) ja võidelda vaenlastega (siin on ka mingid kollid), tegelasele saab kogutud varanduse eest abivahendeid osta, mis muudavad ta tugevamaks, aga annavad juurde ka uusi oskuseid.
Erinev on see, et tegelase tegevus (liikumine, rünnakud jms) tuleb kasutajal endal programmeerida.

Mängu alguses on võimalus valida, millises keeles soovid programmi kirjutada. Meie kursusega haakub valik "javascript".

Tegelase valimisel saad kasutada neid, mis ei ole lukus. 

Edasi näed mänguvälja, kus punased nupud tähistavad ülesandeid, mida välja läbimiseks täitma pead. (Sinisega nupud on tasulise versiooni ülesandeid ja neid tasuta mängida ei saa). Nuppe ilmub järjest juurde, vastavalt tegelase edenemisele (ehk siis ülesanded tuleb järjest läbida).

Mängu alustamiseks tuleb teha punasel nupul topeltklõps.

Edasi saab oma tegelasele lisada abivahendeid. Osa on nö kohustuslikud, ehk need tuleb edasi mängimiseks kindlasti tegelasele lisada. Nendele viitab ka tavaliselt kollane nool. 

Teised abivahendid on need, mida saab kogutud teemantite eest osta.

Abivahendid annavad tegelasele juurde oskusi või tugevust. Näiteks saapad lubavad tegelasel liikuda, vastavad liikumiskäsud kuvatakse ka mänguväljal "Help" kastis.

Mänguväljal tuleb programmikasti kirjutada käskluseid. Üleval vasakus nurgas on näha ülesanne, paremale kasti tuleb kirjutada tegelase liikumiseks vajalik kood. Kui kood on valmis, siis tuleb klõpsata nupul "Run". Kui kõik õnnestub, siis kuvatakse "Run" nupu kõrval nupp kirjaga "Done" ja sellel klõpsates saad preemia kogutud teemantite eest ning punkte programmi läbimise eest. Juhul kui programm on vale, siis edasi ei pääse.

Kui tegelane "surma saab", siis on alati võimalus otsast peale alustada ning uuesti teha seni, kuni saab taseme läbitud.

Kiiret täitmist nõudvate ülesannete puhul ("kollid" ründavad vms) saab mängu peatada.

While tsükkel

While tsükkel sobib kasutamiseks siis, kui tsükli täitmine sõltub mingist muust tingimusest. Näiteks tuleb nii kaua täringut veeretada, kuni tulemuseks on 6.

while(tingimus kehtib)
{
// Tee kirjeldatud tegevust!
}

While-tsükli puhul on aga üks oht! Nimelt kui tingimus ongi kogu aeg kehtiv, siis tekib nn lõputu tsükkel ja programm jookseb kinni.
Selleks tuleb alati jälgida, et while-tsükli sulgudes olevat tingimust oleks võimalik muuta!

Do - while tsükkel

Juhul, kui tsüklit on vaja vähemalt 1 kord täita, siis saab kasutada Do - while kombinatsiooni.

Näiteks allolev tsükkel töötab seni, kuni k väärtus on väiksem kui 12 - antud juhul prindib konsoolile arvud 8, 9, 10, 11, 12

var k=8;
do {
         console.log(k);
         k=k+1;
     }
while(k<12);

Massiivid

Kui programmile on vaja ette anda või lasta töödelda mitte ainult ühte muutujat (nagu praeguseni oleme teinud) vaid korraga rohkem (näiteks on vaja otsida klassi õpilaste nimekirjast kindla nimega õpilast või sorteerida klassipäevikust välja kõik 5-lised), siis kasutatakse massiive.

Massiivid on muutujate loendid, mida kasutatakse samatüübiliste andmekogumite säilitamiseks.

Igal massiivil on kindel nimi (identifikaator). Massiiv koosneb elementidest ja igal elemendil on massiivis oma kindel koht ehk järjekorranumber.

Massiividesse:

• saab salvestada andmete jadasid
• võib salvestada üheaegselt eri tüüpi andmeid
• salvestatakse andmed jadas, nii et igal andmel on oma kindel positsioon

Javascriptis näeb massiivi kirjeldamine välja nii:

var massiiviNimi = ["tekst", "järgmine tekst", 3, 2];  

Massiivi nimi on massiiviNimi. 
Massiivi elemendid kirjutatakse nurksulgude [] sisse ja eraldatakse üksteisest komaga, stringid (tekstielemendid) pannakse jutumärkidesse. Massiivi kirjeldamise lõpetab semikoolon.

Elementide järjestamine algab massiivis 0-st ehk siis kui tahame massiivist kätte saada esimese elemendi, siis tuleb tema väljakutsumiseks kirjutada massiiviNimi[0], teise elemendi kättesaamiseks tuleb kirjutada massiiviNimi[1] jne.

massiivi pikkuse (selle, kui palju elemente temas on) saame kätte, kui kirjutame massiiviNimi.length

Allolev for-tsükkel prindib konsoolile kõik massiiviNimi massiivis olevad kirjed.

for (var i = 0; i < massiiviNimi.length; i++) {
    console.log(massiiviNimi[i]);
}

Massiivist mingi kindla väärtuse välja otsimiseks on otstarbekas panna for-tsükli sisse veel ka tingimus (if-lause).
Näiteks allolev skript otsib massiivist välja suurima arvu. Suurima arvu otsimiseks, tuleb teda teiste arvudega võrrelda. Selleks tuleb defineerida uus muutuja (näites muutuja suurus), mille väärtus on esialgu 0. Edasi vaadatakse massiivis olevad arvud ükshaaval läbi (for-tsükkel) ning võrreldakse suurimaga (if-lause, alguses suurim = 0). Kui arv on suurem kui suurim, siis saab suurim uueks väärtuseks selle arvu ning tsükkel läheb massiivi järgmise arvu juurde. Kui järgmine arv on väiksem, siis suurima väärtust ei muudeta (seda muudetakse ainult siis, kui võrreldav arv on suurem). Selliselt saabki üles leida suurima.

var massiiv = [56, 16, 1, 114, 132, 15, 89, 32];
var suurim= 0;

for (i=0; i<massiiv.length;i++)
    {
        if (massiiv[i]>suurim)
           {suurim=massiiv[i];}        
    }
alert(suurim);



 

HTML kood ja javascript HTML-is

Täna vaatame võimalust, kuidas javascript koodi veebilehel kuvada.

Tuletame meelde HTML keele reeglid:

• Enamasti on HTML märgendid ehk tag'id paaris. <tag> ja </tag>. Esimene alustab mõnda HTML plokki ning / algav lõpetab.
• Kõik, mis HTML lehel kuvatakse, tuleb panna tag'ide <html> ja </html> vahele.
• Lehekülje päisesse minev info kirjutatakse <head> ja </head> märgendite vahele. Päisesse kirjutatakse lehe pealkiri <title> ja </title> vahele, seda kuvatakse lehe avades lehe nimena. Päisesse kirjutatakse tihti ka javascripti kasutavad skriptid <script> ja </script> tag'ide vahele.
• <body> ... </body> vahele kirjutatakse kõik see, mis veebilehel nö nähtav peab olema.

HTML-i tekst (ava programm Notepad ja kopeeri allolev tekst alates <HTML> kuni </HTML> ning kleebi Notepad'i).

<HTML> 
               <HEAD> 
                        <TITLE>Esimene katse</TITLE> 
               </HEAD> 

     <BODY> 
               <H1>See on minu esimene kodulehekülg</H1> 
     </BODY> 
</HTML>

Salvesta dokument nii, et valid File -> Save as ning failitüübiks vali Save as type alt All files (vt pilti).

Nüüd kirjuta faili nimeks näiteks algus.html (html on faili laiend, mis näitab, et tegemist on html keeles kirjutatud dokumendiga ja seda saab veebilehitsejaga avada) ja salvesta see oma nimelisele võrgukettale kooli arvutivõrgus.
Ava oma võrguketas ning klõpsa salvestatud failil. See peaks nüüd avanema veebilehitsejas.
Proovi muuta <h1> ... </h1> vahel olevat teksti Notepadi failis, salvesta ning värskenda siis veebilehitsejas lahti olevat faili.

Javascripti lisamiseks HTML-i tuleb esmalt näidata, et tegemist on programmiga, mis on kirjutatud javascriptis. Selleks tuleb lisada lehele <body> .. ja </body> vahele
<script language=javascript type="text/javascript"> ... siia tuleb javascripti kood ... </script>


Teeme esmalt ühe lihtsa skripti 5-ga korrutamise kohta.
Selleks kirjutame <script> ... </script> tagide vahele:

document.writeln("5-ga korrutamine");
var arv=5;
for(i=1;i<=12;i++)
{document.writeln(i+" korda 5 = "+i*arv);} 

document.writeln on käsklus, mis kuvab sulgudes oleva teksti (tekst peab olema jutumärkides) või muutuja ühe reana HTML lehel.

Kui kõik õnnestus, siis kuvati veebilehel ühes reast tekst: 5-ga korrutamine 1 korda 5 = 5 2 korda 5 = 10 3 korda 5 = 15 4 korda 5 = 20 5 korda 5 = 25 6 korda 5 = 30 7 korda 5 = 35 8 korda 5 = 40 9 korda 5 = 45 10 korda 5 = 50 11 korda 5 = 55 12 korda 5 = 60

Selleks, et iga kirje oleks eraldi real, täiendame skripti HTML koodiga <br> - see on reavahetuse kood ning sellel ei ole lõpukoodi.
Kood võiks peale täiendamist välja näha nii:

    document.writeln("5-ga korrutamine <br>");
    var arv=5;
    for(i=1;i<=12;i++)
    {document.writeln(i+" korda 5 = "+i*arv + "<br>");}

 Salvesta dokument ning värskenda veebilehitseja vaadet!

Täiendame oma skripti nii, et see küsiks kasutajalt, mis arvuga ta korrutamist teha tahab ning kuvaks siis selle arvuga korrutamise 1-12-ni.
Kasutajalt andmete küsimiseks on javascriptis käsklus prompt.

Muutujale saab anda kohe väärtuseks selle arvu, mida kasutaja sisestab

var arv = prompt("Sisesta arv, millega tahad korrutada!");

Muuda programmi nii, et ta kuvaks ka tekstis arvu, mille kasutaja sisestab!

Lisaülesanne edasijõudnutele:
Täienda programmi nii, et see küsiks lisaks arvule, millega soovid korrutada ka arvu, milleni soovid korrutada (näiteks mitte 1-st 12-ni vaid 1-st kasutaja poolt sisestatud arvuni).

Teksti kaunistamine (tuletame meelde HTML-i). NB! Need HTML tagid tuleb kirjutada jutumärkide sisse koos tekstiga!:
<H1>.... </H1> (suur pealkiri)
<H1 style="color:red"> .... </H1> (värviline pealkirja tekst)

HTML stiilide kohta leiad lisainfot: http://www.w3schools.com/html/html_styles.asp
HTML tekstivormingute kohta leiad lisainfot: http://www.w3schools.com/html/html_formatting.asp

Appide loomise keskkonnad

http://www.infinitemonkeys.mobi/

Sisselogimiseks saab kasutada Google, Facebooki kontot

Edasi klõpsake nupul "Create a new app".

Appile tuleb anda nimi ja kirjutada siis ka oma ees- ja perekonnanimi ning meiliaadress, mida konto registreerimisel kasutasid.

Järgmisel lehel saab mobiiliekraanile lohistada ikoone ning all paremas nurgas nende väljanägemist (icon) ja funktsiooni muuta.

Valmis tehtud Appe saab alla laadida ja installida sellelt aadressilt: http://apps.appmakr.com/

For-tsüklid

Vahel peab programm tegema mingeid tegevusi teatud arv kordi järjest. Sellisel juhul on hea kasutada for-tsüklit - programm teeb seda tegevust seni, kuni tingimus täidetud saab.

for (var i = 1; i < 11; i = i + 1)
{ tegevus, mida tehakse; }

i - loendurmuutuja (võib olla ka mõni muu täht). Muutuja täidab mitut rolli.
Esimene for-tsükli osa annab arvutile käsu alustada i-le väärtuste omistamist numbrist 1. Seda nii, et deklareerib muutuja i ja omistab sellele väärtuse 1 (var i = 1). Kui tsükkel käivitab koodibloki { } ehk loogeliste sulgude vahele jääva osa, siis hakkab ta seda rakendama seal, kus i = 1.

Näiteks:
for (var i = 1; i < 11; i = i + 1){
    console.log(i);
}

Prindib välja numbrid 1-10

Mõned olulised reeglid!

• Muutujat suurendavad 1 võrra nii i = i + 1 kui i++
• Muutujat vähendavad 1 võrra nii i = i - 1 kui i--
• Kui soovime muutujat kasvatada mistahes suuruse võrra, siis tuleb kirjutada i+=x, kus x tähistab suurust, mille võrra soovime muutujat kasvatada või siis kahandamiseks i-=x (näiteks i+=5 muudab muutujat 5 sammu võrra ja i-=5 kahandab muutujat 5 sammu võrra).

Funktsioonid

Funktsioone kasutatakse korduvate tegevuste kirjeldamiseks. Kui me näiteks tahame, et programm korrutaks meie poolt ette antud numbri 10-ga (ja see number, mis me programmile anname, võib olla iga kord erinev), siis on mõistlik teha funktsioon, mis korrutab 10-ga

var arvuta = function (number) {
    var vastus = number * 10;
    alert(vastus);
};
arvuta(2);

Ülaltoodud näites on arvuta funktsiooni nimi, number parameeter, millega funktsioon peab midagi tegema. {} sulgudesse pannakse funktsiooni tegevus.

var arvuta = function (number) {
      return number;
};
arvuta(2);

return tagastab funktsiooni väärtuse ja seda saab näiteks edasi kasutada. Ülaltoodud näites annab return tulemuseks numbri 2.

var veerand = function(number) {
    return number/4;
    };
 alert(veerand(20));


Neli viisi võtmesõna return kasutamiseks

1. tagastab muutuja väärtuse, kui muutuja on deklareeritud funktsiooni sees 
2. tagastab parameetri 
3. kui parameetriks on number, siis arvutab selle parameetriga ja võimaldab kätte saada tagastusväärtuse 
4. kui parameetriks on string, siis võtmesõnade .length või .substring() abil võimaldab saada kätte tagastusväärtuse

Javascript - muutujad

Keerulisemate programmide puhul on vajalik juba sisestatud või programmi poolt välja arvutatud tulemuse salvestamine hilisemaks kasutamiseks.

Selleks tuleb kasutusele võtta muutuja mõiste.

Muutuja luuakse ehk deklareeritakse käsusõnaga var

var minuNimi = "Vilve"; tähendab, et muutuja minuNimi saab väärtuseks Vilve

NB! Muutujale väärtuse omistamiseks kasutatakse ühte = märki (võrduses kasutatakse 3 = märki 6/2 === 3 tähendab, et 6 jagatud 2-ga võrdub 3).

Edasi saab programmis kasutada juba muutuja nime (antud näite puhul siis minuNimi).

Muutuja väärtuse sisestamine programmi kasutaja poolt

var vanus = prompt("Kui vana sa oled?");

Prompt käsklus kuvas aknakese, millesse programmi kasutaja sai midagi kirjutada. Ülaloleva näite puhul tuleks sinna kirjutada vanus. Edasi saab panna programmi vastavalt sisestatud arvule käituma erineval moel (näiteks teatud vanusest nooremaid ei lubata edasi vms).