7. diel - Cyklus for v JavaScripte

V predchádzajúcom cvičení, Riešené úlohy k 5.-6. lekciu JavaScriptu, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

V dnešnom JavaScript tutoriále sa budeme venovať cyklom, predstavíme si cyklus for a ukážeme si niekoľko príkladov jeho využitia.

Cykly

Cykly spolu s podmienkami tvoria 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, dnes sa zameriame na cyklus for. Samozrejme si ukážeme praktické príklady.

Cyklus for

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

for (premenná; podmienka; príkaz)

• premenná 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.
• podmienka je podmienka vykonania ďalšieho kroku cyklu. Akonáhle nebude platiť, cyklus sa ukončí. Podmienka môže byť napr. (i < 10).
• príkaz nám hovorí, čo sa má v každom kroku s riadiacou premennou štát. Teda či sa má zvýšiť alebo znížiť. K tomu využijeme špeciálnych operátorov ++ a --, tie samozrejme môžeme používať aj úplne bežne mimo cyklus, slúžia na zvýšenie alebo zníženie premennej o 1.

Príklady použitia cyklu

Poďme si urobiť niekoľko jednoduchých príkladov na precvičenie for cyklu.

Klepanie na dvere

Väčšina z nás určite pozná Sheldona z The Big Bang Theory. Pre tých, čo nie, budeme simulovať situáciu, keď 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ť a použijeme cyklus for:

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

Výsledok:

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 premennej i trojka, už nesúhlasí podmienka i < 3 a cyklus končí. O vynechávaní zložených zátvoriek platí to isté, čo pri podmienkach, ktorým sme sa venovali v lekcii Podmienky v JavaScripte. V tomto prípade tam nemusí byť, pretože cyklus spúšťa iba jediný príkaz. Teraz môžeme namiesto trojky napísať do deklarácie cyklu desiatku. Príkaz sa spustí 10x bez toho, aby sme písali niečo navyše. Určite vidíte, že cykly sú mocným nástrojom.

Číselný rad

Skúsme 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:

Vidíme, že riadiaca premenná má naozaj v každej iterácii (priebehu) inú hodnotu.

Všimnime si, že v cykle tentoraz nezačíname na 0, ale môžeme nastaviť počiatočnú hodnotu 1 a koncovú 10.

Malá násobilka

Teraz si vypíšeme malú násobilku (násobky čísel 1 až 10, vždy do desiatich). Stačí nám urobiť cyklus od 1 do 10 a premennú vždy násobiť daným číslom. Na výpis 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:

Program funguje pekne, ale stále sme toho dosť napísali. Pokiaľ vás napadlo, že v podstate robíme 10x to isté a iba zvyšujeme číslo, ktorým násobíme, máte pravdu. Nič nám nebráni vložiť dva 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ť pri oboch cykloch i, pretože sú vložené do seba. Premenná j nadobúda vo vonkajšom cykle hodnoty 1 až 10. V každej iterácii (rozumajte 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 nového riadku tabuľky, teda do tagov <tr> a </tr>.

Mocnina čísla

Urobme si ešte jeden program, na ktorom si ukážeme prácu s vonkajšou premennou. Aplikácia bude vedieť spočítať mocninu s prirodzeným exponentom:

document.write("<h1>Mocninátor</h1>");

let zaklad = parseInt(prompt("Zadajte základ mocniny: "));
let exponent = parseInt(prompt("Zadajte exponent: "));

let vysledek = 1;
for (let i = 0; i < exponent; i++) {
    vysledek *= zaklad;
}

document.write("Výsledok: " + vysledek + "<br>");
document.write("Ďakujem za použitie mocninátora");

Keď v prehliadači zadáme ako základ číslo 4 a ako exponent číslo 3, získame tento výstup:

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 si vytvoríme premennú s hodnotou 1. To je výsledok, ktorý by sme dostali pri nulovom exponente 2 0 = 1. Pokiaľ bude exponent 0, cyklus sa nespustí. V opačnom prípade budeme našu premennú postupne v cykle násobiť n krát a výsledok si budeme postupne ukladať.

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á. Pokiaľ si však nejakú premennú založíme v tele cyklu, po skončení cyklu zanikne a už nebude prístupná.

V ukážke sme použili zápis vysledek *= zaklad;, ide o ekvivalent zápisu vysledek = vysledek * zaklad;.

Ukážka zacyklenia

Cyklus for použijeme pre pevne daný počet opakovaní. Do premennej cyklu by sme teda 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 hodnotu 1. Nikdy teda nedosiahne hodnotu > 10, cyklus nikdy neskončí a stránka sa stále načíta. Záložku musíme zavrieť.

 

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