Lekce 8 - 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ě:

document.write("<ul>");

let i = 1;
while (i <= 10) {
    document.write("<li>" + i);
    i++;
}
document.write("</ul>");

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

To ale není ideální použití cyklu while.

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:

document.write("Vítejte v kalkulačce <br />");

let a = 9;
let b = 3;

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

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

document.write("Výsledek: " + priklad + "<br />");

document.write("<br />Děkuji za použití kalkulačky.");

Číselné vstupy máme zadané přímo v kódu a uživatele necháváme vybrat pouze početní operaci. Kód si můžete následně upravit a nechat si zadat číselné hodnoty také pomocí funkce prompt(). Protože by kalkulačka měla umět pracovat i s desetinnými čísly, číselné vstupy od uživatele bychom poté parsovali pomocí funkce parseFloat().

Pro odřádkování jednotlivých operací jsme použili escape sekvenci \n, kterou jsme si uváděli v lekci Textové řetězce v JavaScriptu.

Výběr čísla operace zpracováváme v konstrukci switch a v jednotlivých větvích ukládáme spočítaný příklad do proměnné priklad. 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 pomocí metody document.write() se zobrazí 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 = 9;
    let b = 3;
    let priklad = "";

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

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

    pokracovat = prompt(priklad + "\nPřejete si zadat další příklad? [ano/ne]");
    document.write(priklad + "<br>");

}
document.write("Děkuji za použití kalkulačky.");

Úvodní výpis Vítejte v kalkulačce ještě nahradíme nadpisem Spočítané příklady:. V prohlížeči se nám nakonec zobrazí například tento výstup:

Funkce confirm() a alert()

Pro zobrazení dialogového okna můžeme kromě funkce prompt() využít funkci confirm() a alert(). Obě přijímají pouze jeden parametr obsahující text dialogového okna. Funkce confirm() pak 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() pak zobrazí dialogové okno, které má pouze tlačítko OK, jímž okno zavřeme:

Tato funkce nevrací žádnou hodnotu.

V naší kalkulačce nyní využijeme funkci confirm(), aby uživatel mohl rozhodnou, 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 = 9;
   let b = 3;
   let priklad = "";

   let volba = parseInt(prompt("Zvolte si operaci:\n1 - sčítání\n2 - odčítání\n3 - násobení\n4 - dělení"));

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

    pokracovat = confirm(priklad + "\nPřejete si zadat další příklad?"); // Místo prompt() jsme použili confirm()
    document.write(priklad + "<br>");
}

document.write("Děkuji za použití kalkulačky.");

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