8. diel - Cyklus while v JavaScripte

V minulej lekcii, Cyklus for v JavaScripte, sme sa naučili pracovať s for cyklom.

V dnešnom tutoriále základov JavaScriptu sa naučíme používať cyklus while a použijeme ho pri tvorbe jednoduchej kalkulačky.

Cyklus while

Cyklus while funguje trochu inak ako cyklus for. Jednoducho opakuje príkazy v bloku, kým platí podmienka. Syntax cyklu je nasledovná:

while (condition) {
    // commands
}

Pokiaľ vás napadá, že je možné cez cyklus while urobiť aj cyklus for, máte pravdu Cyklus for je vlastne špeciálny prípad cyklu while. Cyklus while sa ale používa na trochu iné veci. Často máme v jeho podmienke napríklad metódu vracajúcu logickú hodnotu true / false.

Číselný rad

Poďme si teraz ukázať použitie cyklu while na praktických príkladoch. Začneme tým, že vypíšeme rad čísel od 1 do 10. Pomocou cyklu while by sme urobili číselný rad nasledovne:

document.write("<ul>");

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

V prehliadači sa zobrazí tento výpis:

To ale nie je ideálne použitie cyklu while.

Kalkulačka

Ako ďalšiu si vezmeme našu kalkulačku z minulých lekcií a opäť ju trochu vylepšíme, konkrétne o možnosť zadať viac príkladov. Program teda hneď neskončí, ale spýta sa používateľa, či si praje spočítať ďalší príklad.

Kalkulačka bez opakovania

Pripomeňme si pôvodnú verziu kódu, kde pre výber početnej operácie využívame konštrukciu switch:

document.write("Welcome to the calculator <br />");

let a = 9;
let b = 3;

let choice = parseInt(prompt("Choose an operation:\n1 - addition\n2 - subtraction\n3 - multiplication\n4 - division"));
let example = "";

switch (choice) {
    case 1:
        example = `${a} + ${b} = ${a + b}`;
        break;
    case 2:
        example = `${a} - ${b} = ${a - b}`;
        break;
    case 3:
        example = `${a} * ${b} = ${a * b}`;
        break;
    case 4:
        example = `${a} / ${b} = ${a / b}`;
        break;
    default:
        example = "Invalid input";
}

document.write("Result: " + example + "<br />");

document.write("<br />Thank you for using the calculator.");

Číselné vstupy máme zadané priamo v kóde a používateľa nechávame vybrať iba početnú operáciu. Kód si môžete následne upraviť a nechať si zadať číselné hodnoty aj pomocou funkcie prompt(). Pretože by kalkulačka mala vedieť pracovať aj s desatinnými číslami, číselné vstupy od užívateľa by sme potom parsovali pomocou funkcie parseFloat().

Na odriadkovanie jednotlivých operácií sme použili escape sekvenciu \n, ktorú sme si uvádzali v lekcii Textové reťazce v JavaScripte.

Výber čísla operácie spracovávame v konštrukcii switch av jednotlivých vetvách ukladáme spočítaný príklad do premennej example. Máme tu aj vetvu default pre prípad, že používateľ zadá inú hodnotu ako 1 - 4. V takom prípade uložíme ako výsledok text Invalid input.

Kalkulačka s cyklom while

Teraz vložíme takmer celý kód do cyklu while. Po prvom výpočte sa používateľa spýtame, či chce spočítať ďalší príklad. Na začiatku si teda vytvoríme premennú proceed a vložíme do nej text yes. Vo while cykle potom budeme kontrolovať obsah našej premennej proceed. Cyklus sa teda bude opakovane spúšťať, pokiaľ užívateľ nezadá inú odpoveď ako yes.

Voľbu užívateľa budeme teda vždy na konci cyklu znovu načítať a ukladať do premennej proceed. V rovnakom dialógovom okne zároveň zobrazíme výsledok práve spočítaného príkladu. Funkcia prompt() sa totiž v JavaScripte spúšťa prednostne a akékoľvek výpisy do HTML pomocou metódy document.write() sa zobrazia až po skončení cyklu. V tom okamihu sa nám na stránke zobrazia všetky spočítané príklady:

let proceed = "yes";
while (proceed == "yes") {
    let a = 9;
    let b = 3;
    let example = "";

    let choice = parseInt(prompt("Choose an operation:\n1 - addition\n2 - subtraction\n3 - multiplication\n4 - division"));

    switch (choice) {
        case 1:
            example = `${a} + ${b} = ${a + b}`;
            break;
        case 2:
            example = `${a} - ${b} = ${a - b}`;
            break;
        case 3:
            example = `${a} * ${b} = ${a * b}`;
            break;
        case 4:
            example = `${a} / ${b} = ${a / b}`;
            break;
        default:
            example = "Invalid input";
    }

    proceed = prompt(example + "\nDo you wish to continue? [yes/no]");
    document.write(example + "<br>");

}
document.write("Thank you for using the calculator.");

Úvodný výpis Welcome to the calculator ešte nahradíme nadpisom Calculated examples:. V prehliadači sa nám nakoniec zobrazí napríklad tento výstup:

Funkcia confirm() a alert()

Na zobrazenie dialógového okna môžeme okrem funkcie prompt() využiť funkciu confirm() a alert(). Obe prijímajú iba jeden parameter obsahujúci text dialógového okna. Funkcia confirm() potom zobrazí okno s tlačidlami OK a Cancel:

Pokiaľ klikneme na OK, vráti funkcia true, kliknutie na tlačidlo Cancel vracia false.

Funkcia alert() potom zobrazí dialógové okno, ktoré má iba tlačidlo OK, ktorým okno zatvoríme:

Táto funkcia nevracia žiadnu hodnotu.

V našej kalkulačke teraz využijeme funkciu confirm(), aby používateľ mohol rozhodnúť, či pokračovať jednoduchým kliknutím. Kód upravíme nasledovne:

let proceed = true; // We changed the "yes" to true
while (proceed) { // The proceed variable is now a boolean, that means we no longer have to compare it with anything in the condition
   let a = 9;
   let b = 3;
   let example = "";

   let choice = parseInt(prompt("Choose an operation:\n1 - addition\n2 - subtraction\n3 - multiplication\n4 - division"));

   switch (choice) {
        case 1:
            example = `${a} + ${b} = ${a + b}`;
            break;
        case 2:
            example = `${a} - ${b} = ${a - b}`;
            break;
        case 3:
            example = `${a} * ${b} = ${a * b}`;
            break;
        case 4:
            example = `${a} / ${b} = ${a / b}`;
            break;
        default:
            example = "Invalid input";
    }

    proceed = confirm(example + "\nDo you wish to continue?"); // Instead of prompt() we used confirm()
    document.write(example + "<br>");
}

document.write("Thank you for using the calculator.");

Po ukončení while cyklu získame napríklad taký výstup:

Našu aplikáciu je možné teraz jednoducho používať viackrát a je takmer hotová. Už toho vieme celkom dosť, začína to byť zábava, však?

V nasledujúcom cvičení, Riešené úlohy k 7.-8. lekciu 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š.