9. diel - Cyklus while v JavaScripte

V predchádzajúcom kvíze, Kvíz - Podmienky, cykly a polia v JavaScripte, sme si overili nadobudnuté skúsenosti z predchádzajúcich lekcií.

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á:

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:

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

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

Kalkulačka

Ako ďalší si vytvoríme jednoduchú kalkulačku. Užívateľ bude mať možnosť zadať viac príkladov. Program teda hneď neskončí, ale spýta sa ho, či si praje spočítať ďalší príklad. Pre výber početnej operácie využijeme konštrukciu switch.

Kalkulačka bez opakovania

Ukážme si najskôr kód kalkulačky, ktorá spočíta len jeden príklad:

Na začiatku načítavame pomocou funkcie prompt() užívateľský vstup od pre obe čísla. Pretože chceme pracovať s desatinnými číslami, použijeme aj funkciu parseFloat(). Potom v ďalšom dialógovom okne vypíšeme početné operácie a necháme používateľov, aby si jednu z nich vybral.

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 ako textový reťazec av jednotlivých vetvách ukladáme výpočet do premennej vysledek. 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 Neplatná volba.

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ú pokracovat a vložíme do nej text ano. Vo while cykle potom budeme kontrolovať obsah našej premennej pokracovat. Cyklus sa teda bude opakovane spúšťať, pokiaľ užívateľ nezadá inú odpoveď ako ano.

Voľbu užívateľa budeme teda vždy na konci cyklu znovu načítať a ukladať do premennej pokracovat. 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:

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 Zrušiť. Pokiaľ klikneme na OK, vráti funkcia true, kliknutie na tlačidlo Zrušiť 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:

Do HTML si doplníme ešte nadpis s textom Spočítané příklady a programu spustíme. 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?:)

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