Programmeerimise ring edasijõudnutele: 2014

Sunday, December 7, 2014

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);

Sunday, November 30, 2014

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

Monday, November 24, 2014

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/

Monday, November 17, 2014

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).

Sunday, November 2, 2014

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

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

Monday, October 13, 2014

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).

Javascript - tingimuslaused

1. Kui tingimus on täidetud, siis programm teeb "midagi", kui ei ole täidetud, ei tee midagi või jätkab oma eelmist tegevust.

if (sulgudesse tuleb tingimus)
{
loogelistesse sulgudesse tuleb see, mida siis tehakse, kui tingimus on täidetud;
}

2. Kui tingimus on täidetud, siis programm "teeb midagi", kui ei ole täidetud (else), siis teeb midagi muud

if (sulgudesse tuleb tingimus)
{
loogelistesse sulgudesse tuleb see, mida tehakse, kui tingimus on täidetud;
}
else
{
loogelistesse sulgudesse tuleb see, mida tehakse siis, kui tingimus ei ole täidetud;
}

3. Kui esimene tingimus ei ole täidetud (else if), siis programm kontrollib järgmist tingimust (järgnev if-lause) või ka järgmise tingimuse mittetäitumisel kolmandat (else)
if (sulgudesse tuleb tingimus)
{
loogelistesse sulgudesse tuleb see, mida tehakse, kui tingimus on täidetud;
}
else if (sulgudesse tuleb tingimus, mida kontrollitakse juhul, kui esimene tingimus pole täidetud)
{
loogelistesse sulgudesse saab kirjutada uue if - else tsükli;
}

NB! Javascriptis lõpetab käsurea semikoolon ;

Sunday, October 12, 2014

Javascript - andmetüübid, prompt ja confirm

Esimesest Codecademy Javascripti tunnist peaksid sul selged olema järgmised asjad:

Andmetüübid:

Märgijadad ehk stringid - tekst, tekst koos numbritega, laused jms
"Tekst kirjutatakse jutumärkidesse"
Programm väljastab teksti käsklusega console.log("Tekst, mida saad lugeda")

Numbrid
Numbritega saab teha matemaatikatehteid nii, et kirjutatakse numbrite vahele tehtemärk
+ liitmine
- lahutamine
* korrutamine
/ jagamine

Loogikaväärtused ehk booleanid - tõene (true) - väär (false) vastusetüüp
Numbrite omavaheliseks võrdlemiseks on järgmised võimalused
> Suurem kui
< Väiksem kui
<= Väiksem-võrdne kui
>= Suurem-võrdne kui
=== Võrdne
!== mittevõrdne

Kommentaarid
// kaks kaldkriipsu tähistavad kommentaare. Kõik mida kirjutad skripti kahe kaldkriipsu järele on nähtavad sulle, aga programm neid ridu ei arvesta

Interaktiivsed vahendid
prompt("tekst") - avaneb tekstikast, milles on sulgudesse kirjutatud küsimus. Tekstikast ootab kasutajalt vastuse sisestamist
confirm("tekst") - avaneb tekstikast, milles kuvatakse sulgudesse kirjutatud lause ning oodatakse kasutaja kinnitust (OK, sulge vms)

Saturday, October 4, 2014

Programmeerimisring edasijõudnutele

Paljud teist on eelmisel aastal teinud tutvust Scratch programmeerimiskeskkonnaga ja aasta lõpus uurinud veidi HTML-i.
Selle aasta programmeerimise ring on veidi rohkem suunatud veebiprogrammeerimisele ehk siis õpime veidi rohkem tundma Javascripti ning seda HTML keelega siduma.

Õppimiseks kasutame eesti keelde tõlgitud Codecademy.com keskkonda.

1. ülesanne - selleks, et õppimine oleks pidev ning saaksid oma edasijõudmisele ka tagasisidet, registreerige endale konto Codecademy keskkonda
http://www.codecademy.com/tracks/javascript-et

klõps nupul SIGN UP
Edasi valige, kes soovite konto luua oma FB kontot või Google+ (enamasti gmail.com meiliga seotud) kontot kasutades. Kui ei, siis kirjutage kõrvaltulpa oma e-postiaadress, mõelge välja kasutajanimi (username) ja parool (password).

Kui oled kasutajakonto loonud, pääsed edasi Javascripti õppematerjalide juurde.

Vali sealt "Programmeerimise algtõed" ning alusta kursust (mängude loomise juurde jõuad siis, kui põhitõed koodi kirjutamiseks on selged!).

Programmeerimise ring edasijõudnutele

Leheküljed