Tento článok je súčasťou môjho online kurzu programovania v JavaScripte. Každý sa ho môže zúčastniť, kurz je zdarma. Kto sa ešte nezaregistroval, môže tak spraviť tu: http://eepurl.com/UzefH. Kurz obsahuje teoretickú časť (články na tomto blogu) a praktickú čast (domáce úlohy zadávané emailom).

Máme za sebou prvú lekciu o premenných, druhú lekciu o podmienkach a dnes nás čakajú cykly (loops).

Cykly slúžia vykonanie určitého kódu viackrát a na prechádzanie prvkov v poli. Máme viacero druhov cyklov:

For:

for (var i = 1; i <= 10; i++) {
  console.log(i); //vypíše do konzoly čísla od 1 po 10
}

Poďme si rozobrať jednotlivé časti for cyklu. “var i = 1;” definuje premennú “i” s hodnotou 1. Podmienka “i <= 10;” znamená, že cyklus bude bežať dovtedy, kým táto podmienka platí. Tj. kým “i” je menšie, alebo rovné 10. “i++” znamená, že “i” sa po každej iterácii cyklu zväčší o 1. V cykloch je zvykom pomenovávať iteračnú premennú písmenom “i”.

Využitie cyklu for pre prechádzanie prvkov v poli:

var fruits = ['apple', 'pear', 'citron'];
for (var i = 0; i < fruits.length; i++) {
  console.log(fruits[i] + ' '); //vypíše 'apple pear citron '
}

Máme definované pole fruits. Definujeme “var i = 0;” pretože polia sú indexované od 0. Cyklus prebieha dovtedy, kým “i” je menšie ako počet prvkov v poli, v tomto prípade 3. Tj. hodnota “i” je v prvej iterácii 0, v druhej 1, v tretej 2 a keď “i” je 3, tak cyklus končí, pretože 3 nie je menšie ako 3 (počet prvkov v poli).

While:

var i = 0;
while (i <= 10) {
  console.log(i); //vypíše čísla od 0 po 10
  i++;
}

Cyklus while môžeme použiť podobne ako cyklus for. Môžete si všimnúť, že tento príklad je podobný ako prvý príklad pre for. Načo je teda cyklus while, keď máme for? Cyklus while sa používa ak vopred nevieme koľkokrát cyklus prebehne.

//cyklus while pobeží dovtedy, kým nezadáte číslo 7 do promptu
while (prompt('3 + 4 = ') != 7) {
  console.log('zle');
}

console.log('ok');

Príklad vyššie si môžete vyskúšať na http://jsfiddle.net/elfoslav/m7x4z3o9/

Do…While

“Do” znamená “rob”, “while” znamená “kým”. V preklade to znamená “rob niečo, kým…”

var i = 0;

do {
  console.log(i); //Vypíše raz "0"
  i++;
} while (i > 5); //cyklus tu končí, pretože 0 nie je väčšia ako 5

Zhrnutie

Najpoužívanejší cyklus je for. Mali by ste si s ním vystačiť v 98% prípadoch. Je dobré vedieť, že existuje while a do…while a kedy ich použiť.

While použijete ak vopred neviete kedy cyklus skončí.

Do…while použijete ak potrebujete aby cyklus aspoň raz prebehol a potom už závisí na podmienke while či cyklus prebehne 2 a viackrát.

Cvičenie

http://jsfiddle.net/elfoslav/0chmvb2d/

Ako odovzdávať cvičenia? Keď sa ti zobrazí stránka s cvičením, klikni v hornom menu na “Fork”. To vytvorí tvoju kópiu cvičenia. Keď budeš chcieť spustiť kód, klikni v hornom menu na “Run”. Keď budeš mať cvičenie hotové, klikni na “Update”, to uloží tvoje cvičenie. Potom už len skopíruješ link cvičenia a odošleš mi ho do mailu. Ja ti cvičenie skontrolujem a oznámkujem.

Alebo jednoduchšie: Zaregistruj sa na http://www.codermania.com a prejdi si cvičenia tam. Cvičenia sa vyhodnocujú automaticky. Ak si nebudeš dať vedieť rady, je tam tlačidlo “Ask for help”. Ak nevieš po anglicky, môžeš použiť Google translator. Veľa šťastia.

Tento článok je súčasťou môjho online kurzu programovania v JavaScripte. Každý sa ho môže zúčastniť, kurz je zdarma. Kto sa ešte nezaregistroval, môže tak spraviť tu: http://eepurl.com/UzefH. Kurz obsahuje teoretickú časť (články na tomto blogu) a praktickú čast (domáce úlohy zadávané emailom).

V prvej lekcii som vysvetľoval prvé základné stavebné kamene každého programu/aplikácie. Dnes si ukážeme ďalšie stavebné kamene a to podmienky.

Podmienky určujú, ktorá časť kódu sa vykoná. Z prvej lekcie budeme potrebovať vedieť čo sú boolean premenné (true, false).

var isRaining = true;
if (isRaining) {
  //prší, vykoná sa táto časť kódu
}

Ak by sme definovali “isRaining” false, blok kódu obalený if-om by sa nevykonal. Keďže je “isRaining” true, “prší” sa vykoná.

var isRaining = false;
if (isRaining) {
  //prší, vykoná sa táto časť kódu
} else {
  //neprší, vykoná sa táto časť kódu
}

V ukážke vyššie definujeme boolean premennú “isRaining” s hodnotou false (nepravda). Ktorá časť kódu sa vykoná? Vykoná sa “neprší” (vetva else), pretože “isRaining” je nepravda. Ak by sme definovali “isRaining” ako true, vykoná sa “prší”. Všimnite si medzeru za “if” a medzeru pred a za “else”. Takisto odsadenie 2 medzerami alebo tabulátorom vo vnútri “if”. Je to “coding standard“, ktorý by mali dodržiavať všetci programátori.

Skoro by som zabudol na “else if”:

var age = 18;
if (age === 18) {
  //si dospelý, už môžeš piť alkohol legálne
} else if (age < 18) {
  //si ešte dieťa, môžeš piť nelegálne alkohol
} else {
  //máš viac ako 18 rokov. Si už stará raketa.
}

“else if” použijeme ak chceme overiť viacero podmienok. “else if” môže byť za sebou ľubovoľne veľakrát. Po “else if” môže a nemusí nasledovať “else”.

Ešte je tu pár vecí, ktoré by sme mali vedieť pri podmienkach a boolean hodnotách. A to:

Operátory a vyhodnocovanie podmienok:

Operátor is equal ==

var name = 'Josh';
//operátor is equal (==) porovná 2 hodnoty a vyhodnotí podmienku na true (ak sa rovnajú) alebo false (ak sa nerovnajú)
var isJosh = (name == 'Josh'); //isJosh sa vyhodnotí na true. Zátvorky sú ľubovoľné, slúžia pre prehľadnosť kódu
var isPeter = (name == 'Peter'); //isPeter sa vyhodnotí na false pretože 'Josh' != 'Peter'

if (name == 'Josh') {
  //som Josh
}

Existuje aj operátor “===”, ktorý porovnáva rovnosť hodnôt ako aj “==” ale líšia sa tým, že operátor “===” porovnáva aj rovnosť typov premenných:

var zero = 0;

if (zero == "0") {
  //podmienka sa vyhodnotí na true. V JavaScripte môžeme porovnávať čísla so stringami s operátorom ==
}

if (zero === "0") {
  //podmienka sa vyhodnotí na false, pretože zero je typ Number a "0" je String
}

Operátor nerovná sa (is not equal) !=

var zero = 0;

if (zero != "0") {
  //tento blok sa nevykoná, vyhodnotenie podmienky je false
}

//operátor !== porovnáva hodnotu aj typ premenných
if (1 !== "1") {
  //true, 1 je typ Number, "1" je typ string.
}

Porovnávajúce operátory <, >, <=, >=

if (3 > 4) {
  //3 nie je väčšie ako 4...
}

if (5 <= 5) {
  //5 je menšie, alebo rovné 5
}

Operátor && (and) a || (or)

var isRaining = true;
var isStorm = false;
var isRainingAndStorm = isRaining && isStorm; //operátor && je logický AND (a zároveň). Porovnáva 2 hodnoty. Ak sú obe hodnoty true, podmienku vyhodnotí na true. Ak je jedna, alebo obe hodnoty false, podmienku vyhodnotí na false

isRainingAndStorm = isRaining || isStorm //operátor || je logický OR (alebo). Stačí ak je jedna hodnota true a celý výraz sa vyhodnotí na true

Viac o porovnávacích operátoroch sa dozviete tu.

Zhrnutie

Mali by ste chápať načo slúžia podmienky “if”, “else if”, “else”
Mali by ste chápať operátorom “&&”, “||”, “==”, “===”, “!=”, “!==”, “<“, “>”, “<=”, “>=”

Cvičenie/Domáca úloha

http://jsfiddle.net/elfoslav/fyC3L

Ako odovzdávať cvičenia? Keď sa ti zobrazí stránka s cvičením, klikni v hornom menu na “Fork”. To vytvorí tvoju kópiu cvičenia. Keď budeš chcieť spustiť kód, klikni v hornom menu na “Run”. Keď budeš mať cvičenie hotové, klikni na “Update”, to uloží tvoje cvičenie. Potom už len skopíruješ link cvičenia a odošleš mi ho do mailu. Ja ti cvičenie skontrolujem a oznámkujem.

Alebo jednoduchšie: Zaregistruj sa na http://www.codermania.com a prejdi si cvičenia tam. Cvičenia sa vyhodnocujú automaticky. Ak si nebudeš dať vedieť rady, je tam tlačidlo “Ask for help”. Ak nevieš po anglicky, môžeš použiť Google translator. Veľa šťastia.

Tento článok je súčasťou môjho online kurzu programovania v JavaScripte. Každý sa ho môže zúčastniť, kurz je zdarma. Kto sa ešte nezaregistroval, môže tak spraviť tu: http://eepurl.com/UzefH. Kurz obsahuje teoretickú časť (články na tomto blogu) a praktickú čast (domáce úlohy zadávané emailom).

V úvodnom článku o programovaní som sľúbil, že v ďalšom článku si ukážeme kusy kódu.

Tak poďme na to. Dnes sa naučíme pojmy ako

• variable (čítaj veriebl)
• array (čítaj erej)
• string (čitaj ako vidíš)
• integer (čítaj intidžer)
• float (čítaj flout)
• boolean (čítaj búlín)

Tieto pojmy využijete takmer vo všetkých programovacích jazykoch.

Premenné (variables)

Premenné si môžete predstaviť ako úložisko dát. Do premennej môžeme uložiť text (dátový typ string), čislo (dátové typy integer, float, double), zoznam položiek (pole), funkcie, objekty a ďalšie. Premenné sa píšu anglickým názvom. Vlastne všetky programy sa píšu anglicky, aby im rozumeli programátori z celého sveta. V JavaScripte začína definícia premennej kľúčovým slovom “var” (skratka variable).

Ukážka premennej dátového typu string s názvom “name” a hodnotou ‘Peter’:

var name = 'Peter';

Ukážka premenných s názvom “carName” a “pigName”:

//string môže začínať a končiť jednoduchými uvodzovkami ' '
var carName = 'Škoda';
//alebo dvojitými uvodzovkami " "
var pigName = "Miško";

Všimnite si ako sú názvy napísané. Viacslovné názvy začínajú malým písmenom, nové slovo začína veľkým. Toto sa nazýva CamelCase a je to programátorský štandard vo väčšine programovacích jazykoch. Všimnime si tiež, že deklarácia premennej končí znakom “;” nazývaný stredník (semicolon). Stredník slúži k ukončeniu príkazu.

Premenné typu string môžeme spájať s operátorom +:

var firstname = 'Peter';
var lastname = 'Pan';
var fullName = firstname + ' ' + lastname; //medzi firstname a lastname musíme pridať medzeru. fullName má hodnotu 'Peter Pan'

Premenné typu integer/float:

//integer je celé číslo
var a = 6;
var b = 2;
var c = a + b; //8
var d = a / b; //3
var e = a * b; //12
var f = a - b; //4

//float je desatinné číslo
var x = 1.5;
var y = 2.23;
var z = x + y; //3.73

Desatinné čísla sa píšu s bodkou, nie čiarkou ako sme zvyknutí.

Premenné typu boolean:

var isDay = true; //je deň
var isNight = false; //nie je noc
var hasDog = false; //nemá psíka

Premenné typu boolean majú len 2 hodnoty – “true” a “false”. Používajú sa na zistenie či je niečo pravda alebo nepravda. Všimnite si prefixu “is/has”. Je zvykom tento prefix mať v názve premennej typu boolean.

Viac o premenných sa dočítate tu.

Komentáre (comments)

V programoch sa píšu komentáre pre objasnenie, čo daný kus kódu robí. Programátor naprogramuje niečo zložité, nenapíše si k tomu komentár, lebo v danej chvíli je mu jasné čo daný kód robí. Keď sa však po pol roku k tomu kódu vráti, bude márne rozmýšľať čo tým kusom kódu pred pol rokom myslel. Preto dobrí programátori píšu komentáre. Komentáre sa tiež píšu po anglicky, len v tomto článku ich budem písať po slovensky.

Ukážka komentárov:

//toto je jednoriadkový komentár
//každý riadok musí začínať s dvoma lomítkami

/** toto je viacriadkový komentár
začína lomítkom a dvoma hviezdičkami
končí jednou hviezdičkou a jedným lomítkom
*/

//môžeme zakomentovať aj kusy kódu. Zakomentovaný kód bude program ignorovať.
//var a = 'blabla';

Kľúčové slová (keywords)

Každý programovací jazyk má kľúčové slová. V JavaScripte je to napr “var”, “break”, “delete”,…  Kľúčové slová nemôžu byť použité ako názvy premenných pretože majú definovaný svôj speciálny význam. Všetky kľúčové slová nájdete tu.

Polia (arrays)

Ak ste si predstavili pole ako rolu, tak to nie je ono. Polia slúžia v programoch na uloženie zoznamu dát. Pole je vlastne typ premennej, tak ako sme si predstavili typy string, integer, float a boolean.

Ukážka poľa v JavaScripte:

/** pole people obsahuje mená ľudí. K položkám v poli pristupujeme pomocou indexu. Polia sa indexujú od 0. */
var people = ['Jully', 'John', 'Josh', 'Marry'];

var jully = people[0]; //people[0] vráti položku s indexom 0, teda 'Jully'
var josh = people[2]; //people[2] vráti 'Josh'

//položku v poli môžeme zmeniť
people[1] = 'Joe'; //John zmeníme na Joe

//prázdne pole
var people2 = [];

people2[0] //vráti undefined, pretože v poli na indexe 0 nič nie je.

//položky do poľa pridáme pomocou funkcie push
people2.push(jully, 'Julian', people[3]); // ['Jully', 'Julian', 'Marry']

//počet položiek v poli zistíme pomocou length
var peopleCount = people.length; //4

S poľami sa toho dá robiť veľa. Viac sa dočítate na w3schools. Polia si precvičíme v cvičení, na konci článku.

Zaujímavosti

var name = 'Peter'; //definujeme premennú kľúčovým slovom var
name = 'Jay'; //hodnotu premennej môžeme zmeniť. Premenná už existuje, píšeme ju bez var.
name = []; //hodnotu premennej môžeme predefinovať

Všetky prebrané veci v tomto článku sú základné stavebné kamene každého programu.

Pôvodne som chcel prebrať viac, ale zdá sa, že už je toho v tejto lekcii dosť. V druhej lekcii si predstavíme cykly a nejaké tie ify – ďalšie základné stavebné kamene každého programu. Ak ste sa ešte nezaregistrovali do kurzu a chcete sa naučiť základy programovania, môžte sa ešte stále zaregistrovať.

Komu by nestačil tento článok, tu je pár zdrojov o JavaScripte:

• http://devel.cz/otazka/kde-se-naucit-programovat-v-javascriptu
• http://www.jakpsatweb.cz/javascript/
• http://www.w3schools.com/js/DEFAULT.asp

Cvičenia

1. úloha: http://jsfiddle.net/elfoslav/9G3xa/
2. úloha: http://jsfiddle.net/elfoslav/He9z4/

Ako odovzdávať cvičenia? Keď sa ti zobrazí stránka s cvičením, klikni v hornom menu na “Fork”. To vytvorí tvoju kópiu cvičenia. Keď budeš chcieť spustiť kód, klikni v hornom menu na “Run”. Keď budeš mať cvičenie hotové, klikni na “Update”, to uloží tvoje cvičenie. Potom už len skopíruješ link cvičenia a odošleš mi ho do mailu. Ja ti cvičenie skontrolujem a oznámkujem.

Alebo jednoduchšie: Zaregistruj sa na http://www.codermania.com a prejdi si cvičenia tam. Cvičenia sa vyhodnocujú automaticky. Ak si nebudeš dať vedieť rady, je tam tlačidlo “Ask for help”. Ak nevieš po anglicky, môžeš použiť Google translator. Veľa šťastia.