Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

5. diel - Cykly v JavaScripte

V minulej lekcii, Kvíz - Úvod, konzoly a premenné v JavaScripte , sme sa naučili programovať podmienky v JavaScripte. V dnešnom tutoriále sa budeme venovať cyklom v JavaScripte.

Cykly

Cykly spolu s podmienkami tvorí základ každého programovacieho jazyka. Ako už slovo cyklus napovie, niečo sa bude opakovať. Keď chceme v programe niečo urobiť 100x, určite nebudeme písať pod seba 100x ten istý kód, ale vložíme ho do cyklu. Cyklov máme niekoľko druhov, vysvetlíme si, kedy ktorý použiť. Samozrejme si ukážeme praktické príklady.

For cyklus

Tento cyklus má stanovený pevný počet opakovaní a hlavne obsahuje tzv. Riadiace premennú (celočíselnú), v ktorej sa postupne počas behu cyklu menia hodnoty. Syntax (zápis) cyklu for je nasledovná:

for (promenna; podminka; prikaz)
  • promenna je riadiaca premenná cyklu, ktoré nastavíme počiatočnú hodnotu (najčastejšie 0, pretože v programovaní všetko začína od nuly, nie od jednotky). Napr. teda let i = 0.
  • podminka je podmienka vykonanie ďalšieho kroku cyklu. Akonáhle nebude platiť, cyklus sa ukončí. Podmienka môže byť napr. (i < 10).
  • prikaz nám hovorí, čo sa má v každom kroku s riadiacou premennou stáť. Teda či sa má zvýšiť alebo znížiť. K tomu využijeme špeciálnych príkazov ++ a --, tie samozrejme môžete používať aj úplne bežne mimo cyklus, slúži na zvýšenie alebo zníženie premenné o 1.

Poďme si urobiť jednoduchý príklad, väčšina z nás určite pozná Sheldona z The Big Bang Theory. Pre tých čo nie, budeme simulovať situáciu, kedy klope na dvere svojej susedky. Vždy 3x zaklope a potom zavolá: "Penny!". Náš kód by bez cyklov vyzeral takto:

document.write("Knock<br />");
document.write("Knock<br />");
document.write("Knock<br />");
document.write("Penny!");

My ale už nič nemusíme otrocky opisovať:

for (let i = 0; i < 3; i++) {
    document.write("Knock<br />");
}
document.write("Penny!");

výsledok:

For cyklus v JavaScripte
localhost

Cyklus prebehne 3x, spočiatku je v premennej i nula, cyklus vypíše "Knock" a zvýši premennú i o jedna. Potom beží rovnako s jednotkou a dvojkou. Akonáhle je v i trojka, už nesúhlasí podmienka i < 3 a cyklus končí. O vynechávanie zložených zátvoriek platí to isté, čo u podmienok. V tomto prípade tam nemusí byť, pretože cyklus spúšťa iba jediný príkaz. Teraz môžeme miesto trojky napísať do deklarácie cyklu desiatku. Príkaz sa vypíše 10x bez toho aby sme písali niečo navyše. Určite vidíte, že cykly sú mocným nástrojom.

Skúsme si teraz využiť to, že sa nám premenná inkrementuje. Vypíšme si čísla od jednej do desať do zoznamu.

document.write("<ul>");
for (let i = 1; i <= 10; i++)
    document.write("<li>" + i);
document.write("</ul>");

výsledok:

For cyklus v JavaScripte
localhost

Vidíme, že riadiaci premenná má naozaj v každej iterácii (priebehu) inú hodnotu. Všimnite si, že v cykle tentoraz nezačíname na 0, ale môžeme nastaviť počiatočnú hodnotu 1 a koncovú 10. V programovaní je však zvykom začínať od nuly, neskôr zistíme prečo. Medzeru za každé číslo pripájame ako text pomocou operátora +.

Teraz si vypíšeme malú násobilku (násobky čísel 1 až 10, vždy do desať). Stačí nám urobiť cyklus od 1 do 10 a premennú vždy násobiť daným číslom. K výpisu hodnôt využijeme tabuľku. Mohlo by to vyzerať asi takto:

document.write('<table border="1"><tr>');
for (let i = 1; i <= 10; i++)
    document.write("<td>" + i + "</td>");
document.write("</tr><tr>");
for (let i = 1; i <= 10; i++)
    document.write("<td>" + i * 2 + "</td>");
document.write("</tr><tr>");
for (let i = 1; i <= 10; i++)
    document.write("<td>" + i * 3 + "</td>");
document.write("</tr><tr>");
for (let i = 1; i <= 10; i++)
    document.write("<td>" + i * 4 + "</td>");
document.write("</tr><tr>");
for (let i = 1; i <= 10; i++)
    document.write("<td>" + i * 5 + "</td>");
document.write("</tr><tr>");
for (let i = 1; i <= 10; i++)
    document.write("<td>" + i * 6 + "</td>");
document.write("</tr><tr>");
for (let i = 1; i <= 10; i++)
    document.write("<td>" + i * 7 + "</td>");
document.write("</tr><tr>");
for (let i = 1; i <= 10; i++)
    document.write("<td>" + i * 8 + "</td>");
document.write("</tr><tr>");
for (let i = 1; i <= 10; i++)
    document.write("<td>" + i * 9 + "</td>");
document.write("</tr><tr>");
for (let i = 1; i <= 10; i++)
    document.write("<td>" + i * 10 + "</td>");
document.write("</tr></table>");

A výsledok v prehliadači:

For cyklus v JavaScripte
localhost

Program funguje pekne, ale stále sme toho dosť napísali. Ak vás napadlo, že v podstate robíme 10x to isté a len zvyšujeme číslo, ktorým násobíme, máte pravdu. Nič nám nebráni vložiť 2 cykly do seba:

document.write('<table border="1">');
for (let j = 1; j <= 10; j++)
{
    document.write("<tr>");
    for (let i = 1; i <= 10; i++)
        document.write("<td>" + i * j + "</td>");
    document.write("</tr>");
}
document.write("</table>");

Pomerne zásadný rozdiel, že? Pochopiteľne nemôžeme použiť u oboch cyklov i, pretože sú vložené do seba. Premenná j nadobúda vo vonkajšom cykle hodnoty 110. V každej iterácii (rozumejte priebehu) cyklu je potom spustený ďalší cyklus s premennou i. Ten je nám už známy, vypíše násobky, v tomto prípade násobíme premennú j. Každý priebeh vnútorného cyklu je potrebné vložiť do riadku tabuľky, teda do tagov <tr> a </tr>.

Urobme si ešte jeden program, na ktorom si ukážeme prácu s vonkajšou premennou. Aplikácia bude vedieť spočítať ľubovoľnú mocninu ľubovoľného čísla:

let a = 2; // Základ mocniny
let n = 3; // Exponent

let vysledek = a;
for (let i = 0; i < (n - 1); i++) {
    vysledek = vysledek * a;
}

document.write("Výsledok: " + vysledek);

Asi všetci tušíme, ako funguje mocnina. Pre istotu pripomeniem, že napríklad 2 3 = 2 * 2 * 2. Teda a n spočítame tak, že n-1 krát vynásobíme číslo a číslom a. Výsledok si samozrejme musíme ukladať do premennej. Spočiatku bude mať hodnotu a a postupne sa bude v cykle pronásobovat. Ak ste to nestihli, máme tu samozrejme článok s algoritmom výpočtu ľubovoľnej mocniny. Vidíme, že naša premenná vysledek je v tele cyklu normálne prístupná. Ak si však nejakú premennú založíme v tele cyklu, po skončení cyklu zanikne a už nebude prístupná.

výsledok:

For cyklus v JavaScripte
localhost

Už tušíme, na čo sa for cyklus využíva. Zapamätajme si, že je počet opakovaní pevne daný. Do premennej cyklu by sme nemali nijako zasahovať ani dosadzovať, program by sa mohol tzv. Zacykliť, skúsme si ešte posledný, odstrašujúci príklad:

// tento kód je zle
for (let i = 1; i <= 10; i++)
    i = 1;

Au, vidíme, že program sa zasekol. Cyklus stále inkrementuje premennú i, ale tá sa vždy zníži na 1. Nikdy teda nedosiahne hodnoty > 10, cyklus nikdy neskončí a stránka sa stále načítava. Záložku musíme zatvoriť.

While cyklus

Cyklus while funguje inak, jednoducho opakuje príkazy v bloku kým platí podmienka. Syntax cyklu je nasledovné:

while (podminka) {
    // príkazy
}

Ak vás napadá, že možno cez while cyklus urobiť aj for cyklus, máte pravdu :) Cyklus for je vlastne špeciálny prípad while cyklu. Cyklus while sa ale používa na trochu iné veci, často máme v jeho podmienke napr. Metódu vracajúci logickú hodnotu true / false. Pôvodný príklad z for cyklu by sme urobili pomocou while nasledovne:

let i = 1;
while (i <= 10) {
    document.write(i + " ");
    i++;
}

To ale nie je ideálne použitie while cyklu. K tomuto druhu cyklu sa ešte vrátime. V budúcej lekcii, Riešené úlohy k 5. lekcii JavaScriptu , nás čaká dátová štruktúra poľa.

V nasledujúcom cvičení, Riešené úlohy k 5. lekcii JavaScriptu, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.


 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 718x (2.85 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript

 

Predchádzajúci článok
Kvíz - Úvod, konzoly a premenné v JavaScripte
Všetky články v sekcii
Základné konštrukcie jazyka JavaScript
Preskočiť článok
(neodporúčame)
Riešené úlohy k 5. lekcii JavaScriptu
Článok pre vás napísal David Hartinger
Avatar
Užívateľské hodnotenie:
5 hlasov
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity