Lekce 9 - Cyklus while v JavaScriptu

V minulé lekci, Cyklus for v JavaScriptu, jsme se naučili pracovat s for cyklem.

V dnešním tutoriálu základů JavaScriptu se naučíme používat cyklus while a použijeme jej při tvorbě jednoduché kalkulačky.

Cyklus while

Cyklus while funguje trochu jinak než cyklus for. 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 cyklus while udělat i cyklus for, máte pravdu Cyklus for je vlastně speciální případ cyklu while. Cyklus while se ale používá na trochu jiné věci. Často máme v jeho podmínce například metodu vracející logickou hodnotu true/false.

Číselná řada

Pojďme si nyní ukázat použití cyklu while na praktických příkladech. Začneme tím, že vypíšeme řadu čísel od 1 do 10. Pomocí cyklu while bychom udělali číselnou řadu následovně:

let seznam = "<ul>";

let i = 1;
while (i <= 10) {
    seznam += "<li>" + i + "</li>";
    i++;
}

seznam += "</ul>";
document.body.innerHTML += seznam;

V prohlížeči se zobrazí tento výpis:

To ale není ideální použití cyklu while, protože zápis přes cyklus for by byl v tomto případě kratší a intuitivnější.

Kalkulačka

Jako další si vezmeme naši kalkulačku z minulých lekcí a opět ji trochu vylepšíme, konkrétně o možnost zadat více příkladů. Program tedy hned neskončí, ale zeptá se uživatele, zda si přeje spočítat další příklad.

Kalkulačka bez opakovaní

Připomeňme si původní verzi kódu, kde pro výběr početní operace využíváme konstrukci switch (můžete klidně použít i verzi s else if):

let a = parseInt(prompt("Zadejte první číslo:"));
let b = parseInt(prompt("Zadejte druhé číslo:"));
let volba = parseInt(prompt("Zadejte číslo operace:\n1 : sčítání\n2 : odčítání\n3 : násobení\n4 : dělení"));

let vysledek = "";

switch (volba) {
    case 1:
        vysledek = a + b;
        break;
    case 2:
        vysledek = a - b;
        break;
    case 3:
        vysledek = a * b;
        break;
    case 4:
        vysledek = a / b;
        break;
    default:
        vysledek = "Neplatná volba";
        break;
}

document.body.innerHTML += `Výsledek: ${vysledek}`;

Číselné vstupy i operaci máme zadané od uživatele. Výběr čísla operace zpracováváme v konstrukci switch a v jednotlivých větvích ukládáme spočítaný výsledek do proměnné vysledek. Máme zde i větev default pro případ, že uživatel zadá jinou hodnotu než 1 - 4. V takovém případě uložíme jako výsledek text "Neplatná volba".

Kalkulačka s cyklem while

Nyní vložíme téměř celý kód do cyklu while. Po prvním výpočtu se uživatele zeptáme, zda chce spočítat další příklad. Na začátku si tedy vytvoříme proměnnou pokracovat a vložíme do ní text "ano". Ve while cyklu pak budeme kontrolovat obsah naší proměnné pokracovat. Cyklus se tedy bude opakovaně spouštět, dokud uživatel nezadá jinou odpověď než "ano".

Volbu uživatele budeme tedy vždy na konci cyklu znovu načítat a ukládat do proměnné pokracovat. Ve stejném dialogovém okně zároveň zobrazíme výsledek právě spočítaného příkladu. Funkce prompt() se totiž v JavaScriptu spouští přednostně a jakékoli výpisy do HTML kódu stránky se projeví až po skončení cyklu. V tom okamžiku se nám na stránce zobrazí všechny spočítané příklady:

let pokracovat = "ano";
while (pokracovat == "ano") {
    let a = parseInt(prompt("Zadejte první číslo:"));
    let b = parseInt(prompt("Zadejte druhé číslo:"));
    let volba = parseInt(prompt("Zadejte číslo operace:\n1 : sčítání\n2 : odčítání\n3 : násobení\n4 : dělení"));

    let vysledek = "";

    switch (volba) {
        case 1:
            vysledek = a + b;
            break;
        case 2:
            vysledek = a - b;
            break;
        case 3:
            vysledek = a * b;
            break;
        case 4:
            vysledek = a / b;
            break;
        default:
            vysledek = "Neplatná volba";
            break;
    }

    document.body.innerHTML += `Výsledek: ${vysledek}<br />`;

    pokracovat = prompt(`Výsledek: ${vysledek} \nPřejete si zadat další příklad? [ano/ne]`);
}

V prohlížeči se nám budou postupně zobrazovat dialogová okna a po úplném skončení se zobrazí například tento výstup:

Další dialogy v JavaScriptu

Pro zobrazení dialogového okna můžeme kromě funkce prompt() využít funkce confirm() a alert(). Obě přijímají pouze jeden parametr obsahující text dialogového okna.

Funkce confirm()

Funkce confirm() zobrazí okno s tlačítky OK a Zrušit:

Pokud klikneme na OK, vrátí funkce true, kliknutí na tlačítko Zrušit vrací false.

Funkce alert()

Funkce alert() pak zobrazí dialogové okno, které má pouze tlačítko OK, jímž okno zavřeme:

Tato funkce nevrací žádnou hodnotu.

Úprava kalkulačky

V naší kalkulačce nyní využijeme funkci confirm(), aby uživatel mohl rozhodnout, zda pokračovat, pouhým kliknutím. Kód upravíme následovně:

let pokracovat = true; // Změnili jsme "ano" na true
while (pokracovat) { // Proměnná pokracovat je nyní typu boolean, v podmínce ji již nemusíme s ničím porovnávat
    let a = parseInt(prompt("Zadejte první číslo:"));
    let b = parseInt(prompt("Zadejte druhé číslo:"));
    let volba = parseInt(prompt("Zadejte číslo operace:\n1 : sčítání\n2 : odčítání\n3 : násobení\n4 : dělení"));

    let vysledek = "";

    switch (volba) {
        case 1:
            vysledek = a + b;
            break;
        case 2:
            vysledek = a - b;
            break;
        case 3:
            vysledek = a * b;
            break;
        case 4:
            vysledek = a / b;
            break;
        default:
            vysledek = "Neplatná volba";
            break;
    }

    document.body.innerHTML += `Výsledek: ${vysledek}<br />`;

    pokracovat = confirm(`Výsledek: ${vysledek}\nPřejete si zadat další příklad?`); // Místo prompt() jsme použili confirm()
}

Po ukončení while cyklu získáme například takový výstup:

Naši aplikaci lze nyní jednoduše používat vícekrát a je téměř hotová. Již toho umíme docela dost, začíná to být zábava, že? 🙂

V následujícím cvičení, Řešené úlohy k 8.-9. lekci JavaScriptu, si procvičíme nabyté zkušenosti z předchozích lekcí.

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