Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

5. díl - Cykly v JavaScriptu

JavaScript Základní konstrukce Cykly v JavaScriptu

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Podmínky v JavaScriptu, jsme se naučili programovat podmínky v JavaScriptu. V dnešním tutoriálu se budeme věnovat cyklům v JavaScriptu.

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ů, vysvětlíme si, kdy který použít. Samozřejmě si ukážeme praktické příklady.

FOR cyklus

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ěji 0, protože v programování vše začíná od nuly, nikoli od jedničky). Např. tedy var 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 příkazů ++ a --, ty samozřejmě můžete používat i úplně běžně mimo cyklus, slouží ke zvýšení nebo snížení proměnné o 1.

Pojďme si udělat jednoduchý příklad, 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:

for (var i=0; i < 3; i++)
{
        document.write("Knock<br />");
}
document.write("Penny!");
Ukázka for cyklu v JavaScript – Knock, knock, knock, Penny!

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 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. 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 vypíše 10x aniž bychom psali něco navíc. Určitě vidíte, že cykly jsou mocným nástrojem.

Zkusme si 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 (var i = 1; i <= 10; i++)
        document.write("<li>" + i);
document.write("</ul>");

Výsledek:

For cyklus v JavaScriptu

Vidíme, že řídící proměnná má opravdu v každé iteraci (průběhu) jinou hodnotu. Všimněte si, že v cyklu tentokrát nezačínáme na nule, ale můžeme nastavit počáteční hodnotu 1 a koncovou 10. V programování je ovšem zvykem začínat od nuly, později zjistíme proč. Mezeru za každé číslo připojujeme jako text pomocí operátoru plus.

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 (var i = 1; i <= 10; i++)
        document.write("<td>" + i + "</td>");
document.write("</tr><tr>");
for (var i = 1; i <= 10; i++)
        document.write("<td>" + i * 2 + "</td>");
document.write("</tr><tr>");
for (var i = 1; i <= 10; i++)
        document.write("<td>" + i * 3 + "</td>");
document.write("</tr><tr>");
for (var i = 1; i <= 10; i++)
        document.write("<td>" + i * 4 + "</td>");
document.write("</tr><tr>");
for (var i = 1; i <= 10; i++)
        document.write("<td>" + i * 5 + "</td>");
document.write("</tr><tr>");
for (var i = 1; i <= 10; i++)
        document.write("<td>" + i * 6 + "</td>");
document.write("</tr><tr>");
for (var i = 1; i <= 10; i++)
        document.write("<td>" + i * 7 + "</td>");
document.write("</tr><tr>");
for (var i = 1; i <= 10; i++)
        document.write("<td>" + i * 8 + "</td>");
document.write("</tr><tr>");
for (var i = 1; i <= 10; i++)
        document.write("<td>" + i * 9 + "</td>");
document.write("</tr><tr>");
for (var i = 1; i <= 10; i++)
        document.write("<td>" + i * 10 + "</td>");
document.write("</tr></table>");
Malá násobilka pomocí dvou for cyklů v JavaScriptu

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 2 cykly do sebe:

document.write('<table border="1">');
for (var j = 1; j <= 10; j++)
{
        document.write("<tr>");
        for (var 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 řádku tabulky, tedy do tagů <tr> a </ tr>.

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 libovolnou mocninu libovolného čísla:

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

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

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

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 n-1 krát vynásobíme číslo a číslem a. Výsledek si samozřejmě musíme ukládat do proměnné. Zpočátku bude mít hodnotu a a postupně se bude v cyklu pronásobovat. 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ýsledek:

Mocnina v JavaScirptu pomocí for cyklu

Už tušíme, k čemu se for cyklus využívá. Zapamatujme si, že je počet opakování pevně daný. Do proměnné cyklu bychom 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 (var 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 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.

While cyklus

While cyklus funguje jinak, jednoduše opakuje příkazy v bloku dokud platí podmínka. Syntaxe cyklu je následující:

while (podminka)
{
        // příkazy
}

Pokud vás napadá, že lze přes while cyklus udělat i FOR cyklus, máte pravdu :) FOR je vlastně speciální případ while cyklu. While se ale používá na trochu jiné věci, často máme v jeho podmínce např. metodu vracející logickou hodnotu true/false. Původní příklad z for cyklu bychom udělali následovně pomocí while:

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

To ale není ideální použití while cyklu. K tomuto druhu cyklu se ještě vrátíme. V příští lekci, Pole v JavaScriptu, nás čeká datová struktura pole.


 

Stáhnout

Staženo 131x (2.9 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
7 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Předchozí článek
Podmínky v JavaScriptu
Miniatura
Všechny články v sekci
Základní konstrukce jazyka JavaScript
Miniatura
Následující článek
Cvičení k 5. lekci JavaScriptu
Aktivity (2)

 

 

Komentáře
Zobrazit starší komentáře (3)

Avatar
asanos
Člen
Avatar
asanos:15.6.2015 22:10

ok ok :D to máš asi pravdu ;)

test forEachu jsem nenašel...

http://jsperf.com/…ray-length/4

Odpovědět 15.6.2015 22:10
Na světě je 10 typů lidí. Ti, kteří rozumí binárce a ti co nerozumí.
Avatar
ra3sk
Člen
Avatar
ra3sk:11.10.2016 20:10
document.write("<ul>");
for (var i = 1; i <= 10; i++)
        document.write("<li>" + i);
document.write("</ul>");

jak je možné, že to <li> sa samo aj zavrie... respektíve to nespôsobí error?

 
Odpovědět 11.10.2016 20:10
Avatar
Pavol Hejný
Autoredaktor
Avatar
Odpovídá na ra3sk
Pavol Hejný:12.10.2016 12:24

HTML je hrozně "tolerantní" na chyby. Není potřeba, aby bylo tak přísné, protože je často zcela zjevné, jak chybu opravit, protože každy tag v sobě nese určitý význam:

<table>
<tr>
<td>A
<td>B
<tr>
<td>C
<td>D
</table>

Zatímco v programovacím jazyce to nejde automaticky:

for(let y=0;y<2;y++){
for(let x=0;x<2;x++){

for(let x=0;x<2;x++){

}

Tohle se dá doplnit jako 2 nebo 3 for v sobě.

Ale pochopitelně neuzavírat značky v html je prasárna

Editováno 12.10.2016 12:26
Odpovědět  +1 12.10.2016 12:24
http://pavolhejny.cz/
Avatar
ra3sk
Člen
Avatar
Odpovídá na Pavol Hejný
ra3sk:17.10.2016 15:46

Díky

 
Odpovědět 17.10.2016 15:46
Avatar
Petr Vopalecký:4. března 22:51

Ahoj,
poradí mi někdo jak bych mohl udělat "správně" následující hru na hádání náhodného čísla? (Pro jednoduchost [1-3]). Vím, že to má primitivní řešení, ale nemůžu přijít na to jak udělat aby každý 2. prompt nebyl prázdný (viz kód níže). Děkuji :)

var hadaneCislo = Math.floor((Math.random() * 3) + 1);

                function tipuj(){
                var tip = prompt();
                        if (tip == hadaneCislo){
                                document.write("<br>Dobře Ty!");
                } else if (tip < hadaneCislo){
                                var tip = prompt("přidej");
                        tipuj();
                } else if (tip > hadaneCislo){
                                var tip = prompt("uber");
                        tipuj();
                }
                }
                tipuj();
 
Odpovědět 4. března 22:51
Avatar
koukald
Člen
Avatar
Odpovídá na Petr Vopalecký
koukald:21. března 0:39

Ahoj, nevím jestli tě moje odpověď potěší, ale podle mě je tvůj příklad klasický cyklus - zatímco ty se ho snažíš řešit pomoci funkce. Samozřejmě to lze, jen si myslím, že je to nešťastně zvolený příklad.

Odpověď na tvou otázku je skutečně jednoduchá - vždy když zavoláš funkci, tak se provede od shora dolů a jako první řádek ve funkci máš proměnnou tip, do které jsi vložil příkaz prompt, jenž je samozřejmě prázdný.

Já bych ho řešil hlavně pomoci cyklu a to do...while -> kód se ti vykoná minimálně jednou s tím, že pokud uhádneš hra končí, pokud ne tak je nekonečná(dokud neuhádneš).

Zabalil jsem ti to i do funkce - myslím si, že to má kapku větší logiku a nechtěl jsem ti to zase celé překopat.

Jinak jsem si všiml, že pořád dokola deklaruješ proměnnou tip - stačí jednou uvnitř funkce, nemusíš se obávat, že by jsi vytvořil glob.proměnnou - navíc si tím velmi znepřehledňuješ zdrojový kód.

var hadaneCislo = Math.floor((Math.random() * 3) + 1);

var okno = confirm("Chceš hrát hru hádej číslo?");

        if(okno) {
                tipuj();
        } else {
        document.write("Dobře");
        }

                function tipuj() {

                var tip=prompt("Hádej číslo");

                do {

                if (tip < hadaneCislo){
                                tip = prompt("přidej");
                } else if (tip > hadaneCislo){
                                tip = prompt("uber");
                }

                } while(tip!=hadaneCislo);

                document.write("Dobře ty!");

                }
Odpovědět 21. března 0:39
Kvalitní program je jako báseň, pokud do něj nevložíš um, tak se nedá číst.
Avatar
Odpovídá na koukald
Petr Vopalecký:30. března 11:10

Odpověď potěšila, děkuju za vysvětlení :-)

 
Odpovědět  +1 30. března 11:10
Avatar
Martin Fukátko:22. června 10:54

Pokud si však nějakou proměnnou založíme v těle cyklu, po skončení cyklu zanikne a již nebude přístupná.

Hmm, tak tohle neplatí. Třeba toto vypíše n=10, po té, co cyklus skončil:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <title>Testovací stránka</title>
    <style type="text/css">

    </style>

    <script type="text/javascript">
        function test() {
            document.write('<table border="1">');
            for (var j = 1; j <= 10; j++) {
                document.write("<tr>");
                for (var i = 1; i <= 10; i++) {
                    document.write("<td>" + i * j + "</td>");
                    var n = i;
                }
                document.write("</tr>");
            }
            document.write("</table>");
            document.write('n = ' + n);
        }
    </script>

</head>

<body>
    <button onclick="test();">run test</button>
</body>

</html>
 
Odpovědět 22. června 10:54
Avatar
Odpovídá na Martin Fukátko
Honza Prosecký:23. června 18:37

To by asi platilo u let, ze by n nebylo pristupny vne cyklu, ne?

 
Odpovědět 23. června 18:37
Avatar
Odpovídá na Honza Prosecký
Wal De Mar-Lad:23. června 18:45

Presne tak. Premenná definovaná kľúčovým slovom "var" bude dostupná aj po skončení cyklu, kdežto premenná definovaná pomocou kľúčového slova "let" nebude.

Odpovědět 23. června 18:45
Libraries over frameworks...
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 13. Zobrazit vše