Lekce 7 - Cyklus for v JavaScriptu
V předešlém cvičení, Řešené úlohy k 5.-6. lekci JavaScriptu, jsme si procvičili nabyté zkušenosti z předchozích lekcí.
V dnešním JavaScript tutoriálu se budeme věnovat
cyklům, představíme si cyklus for
a ukážeme si několik
příkladů jeho využití.
Cykly
Cykly spolu s podmínkami tvoří základ každého programovacího jazyka.
Jak již slovo cyklus napoví, něco se bude opakovat. Když chceme v programu
něco udělat 100x, jistě nebudeme psát pod sebe 100x ten samý kód, ale
vložíme ho do cyklu. Cyklů máme několik druhů, dnes se zaměříme na
cyklus for
. Samozřejmě si ukážeme praktické příklady.
Cyklus for
Tento cyklus má stanovený pevný počet opakování a
hlavně obsahuje tzv. řídící proměnnou (celočíselnou),
ve které se postupně během běhu cyklu mění hodnoty. Syntaxe (zápis) cyklu
for
je následující:
for (promenna; podminka; prikaz)
promenna
je řídící proměnná cyklu, které nastavíme počáteční hodnotu (nejčastěji0
, protože v programování vše začíná od nuly, nikoli od jedničky). Např. tedylet i = 0
.podminka
je podmínka vykonání dalšího kroku cyklu. Jakmile nebude platit, cyklus se ukončí. Podmínka může být např.(i < 10)
.prikaz
nám říká, co se má v každém kroku s řídící proměnnou stát. Tedy zda se má zvýšit nebo snížit. K tomu využijeme speciálních operátorů++
a--
, ty samozřejmě můžeme používat i úplně běžně mimo cyklus, slouží ke zvýšení nebo snížení proměnné o1
.
Příklady užití cyklu
Pojďme si udělat několik jednoduchých příkladů na procvičení
for
cyklu.
Klepání na dveře
Většina z nás jistě zná Sheldona z The Big Bang Theory. Pro ty, co ne, budeme simulovat situaci, kdy klepe na dveře své sousedky. Vždy 3x zaklepe a poté zavolá: "Penny!". Náš kód by bez cyklů vypadal takto:
document.write("Knock<br />"); document.write("Knock<br />"); document.write("Knock<br />"); document.write("Penny!");
My ale už nic nemusíme otrocky opisovat a použijeme cyklus
for
:
for (let i = 0; i < 3; i++) { document.write("Knock<br />"); } document.write("Penny!");
Výsledek:
Cyklus proběhne 3x, zpočátku je v proměnné i
nula, cyklus
vypíše Knock
a zvýší proměnnou i
o jedna. Poté
běží stejně s jedničkou a dvojkou. Jakmile je v proměnné i
trojka, již nesouhlasí podmínka i < 3
a cyklus končí. O
vynechávání složených závorek platí to samé, co u podmínek, kterým
jsme se věnovali v lekci Podmínky
v JavaScriptu. V tomto případě tam nemusí být, protože cyklus
spouští pouze jediný příkaz. Nyní můžeme místo trojky napsat do
deklarace cyklu desítku. Příkaz se spustí 10x, aniž bychom psali něco
navíc. Určitě vidíte, že cykly jsou mocným nástrojem.
Číselná řada
Zkusme nyní využít toho, že se nám proměnná inkrementuje. Vypišme si čísla od jedné do deseti do seznamu:
document.write("<ul>"); for (let i = 1; i <= 10; i++) { document.write("<li>" + i); } document.write("</ul>");
Výsledek:
Vidíme, že řídící proměnná má opravdu v každé iteraci (průběhu) jinou hodnotu.
Všimněme si, že v cyklu tentokrát nezačínáme na
0
, ale můžeme nastavit počáteční hodnotu 1
a
koncovou 10
.
Malá násobilka
Nyní si vypíšeme malou násobilku (násobky čísel 1
až
10
, vždy do deseti). Stačí nám udělat cyklus od 1
do 10
a proměnnou vždy násobit daným číslem. K výpisu hodnot
využijeme tabulku. Mohlo by to vypadat 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ýsledek v prohlížeči:
Program funguje hezky, ale pořád jsme toho dost napsali. Pokud vás napadlo, že v podstatě děláme 10x to samé a pouze zvyšujeme číslo, kterým násobíme, máte pravdu. Nic nám nebrání vložit dva cykly do sebe:
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>");
Poměrně zásadní rozdíl, že? Pochopitelně nemůžeme
použít u obou cyklů i
, protože jsou vložené do sebe.
Proměnná j
nabývá ve vnějším cyklu hodnoty 1
až 10
. V každé iteraci (rozumějte průběhu) cyklu je poté
spuštěn další cyklus s proměnnou i
. Ten je nám již známý,
vypíše násobky, v tomto případě násobíme proměnnou j
.
Každý průběh vnitřního cyklu je třeba vložit do nového řádku tabulky,
tedy do tagů <tr>
a </tr>
.
Mocnina čísla
Udělejme si ještě jeden program, na kterém si ukážeme práci s vnější proměnnou. Aplikace bude umět spočítat mocninu s přirozeným exponentem:
document.write("<h1>Mocninátor</h1>"); let zaklad = parseInt(prompt("Zadejte základ mocniny: ")); let exponent = parseInt(prompt("Zadejte exponent: ")); let vysledek = 1; for (let i = 0; i < exponent; i++) { vysledek *= zaklad; } document.write("Výsledek: " + vysledek + "<br>"); document.write("Děkuji za použití mocninátoru");
Když v prohlížeči zadáme jako základ číslo 4
a jako
exponent číslo 3
, získáme tento výstup:
Asi všichni tušíme, jak funguje mocnina. Pro jistotu připomenu, že
například 23 = 2 * 2 * 2. Tedy
an spočítáme tak, že si vytvoříme proměnnou s
hodnotou 1. To je výsledek, který bychom dostali při nulovém exponentu
20 = 1. Pokud bude exponent 0
, cyklus
se nespustí. V opačném případě budeme naši proměnnou postupně v cyklu
násobit n
krát a
a výsledek si budeme postupně
ukládat.
Pokud jste to nestihli, máme tu samozřejmě článek s
algoritmem výpočtu libovolné mocniny. Vidíme, že naše proměnná
vysledek
je v těle cyklu normálně přístupná. Pokud si však
nějakou proměnnou založíme v těle cyklu, po skončení
cyklu zanikne a již nebude přístupná.
V ukázce jsme použili zápis vysledek *= zaklad;
,
jde o ekvivalent zápisu vysledek = vysledek * zaklad;
.
Ukázka zacyklení
Cyklus for
použijeme pro pevně daný počet
opakování. Do proměnné cyklu bychom tedy neměli nijak zasahovat
ani dosazovat, program by se mohl tzv. zacyklit, zkusme si
ještě poslední, odstrašující příklad:
// tento kód je špatně for (let i = 1; i <= 10; i++) i = 1;
Au, vidíme, že program se zasekl. Cyklus stále inkrementuje proměnnou
i
, ale ta se vždy sníží na hodnotu 1
. Nikdy tedy
nedosáhne hodnoty > 10
, cyklus nikdy neskončí a stránka se
stále načítá. Záložku musíme zavřít.
V příští lekci, Cyklus while v JavaScriptu, se budeme ještě věnovat cyklům. Naučíme se
používat while
cyklus a upravíme jednoduchou kalkulačku, aby
uměla spočítat libovolný počet příkladů.
Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 829x (2.85 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript