5. diel - Cykly v JavaScripte
V predchádzajúcom kvíze, Kvíz - Úvod, konzoly a premenné v JavaScripte, sme si overili nadobudnuté skúsenosti z predchádzajúcich lekcií.
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šie0
, pretože v programovaní všetko začína od nuly, nie od jednotky). Napr. tedalet 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:
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:
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:
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 1
až 10
. 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:
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é 727x (2.85 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript