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 (variable; condition; command)

• variable 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.
• condition je podmienka vykonania ďalšieho kroku cyklu. Akonáhle nebude platiť, cyklus sa ukončí. Podmienka môže byť napr. (i < 10).
• command 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>Empowerer</h1>");

let base = parseInt(prompt("Enter the base of the power: "));
let exponent = parseInt(prompt("Enter the exponent: "));

let result = 1;
for (let i = 0; i < exponent; i++) {
    result *= base ;
}

document.write("Result: " + result + "<br>");
document.write("Thank you for using the empowerer");

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³ = 2 * 2 * 2. Teda aⁿ spočítame tak, že si vytvoríme premennú s hodnotou 1. To je výsledok, ktorý by sme dostali pri nulovom exponente 2⁰ = 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á result 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 result *= base;, ide o ekvivalent zápisu result = result * base;.

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:

// This code is wrong
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ť.

V budúcej lekcii, Cyklus while v JavaScripte, sa budeme ešte venovať cyklom. Naučíme sa používať while cyklus a upravíme jednoduchú kalkulačku, aby vedela spočítať ľubovoľný počet príkladov.

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