6. diel - Podmienky druhýkrát - Konštrukcia switch v JavaScripte

V minulej lekcii, Podmienky v JavaScripte, sme sa naučili programovať podmienky v JavaScripte.

V dnešnom tutoriále základov JavaScriptu sa naučíme skladať podmienky za pomoci logických operátorov. Následne sa pozrieme na konštrukciu switch a vytvoríme sa jednoduchú kalkulačku.

Skladanie podmienok

Podmienky je možné skladať, a to pomocou dvoch základných logických operátorov:

Znak & alebo ampersand napíšeme pomocou klávesy pravý Alt a C. Uvedieme si rovno aj znak | (tzv. pipe alebo rúrka), ktorý sa napíše pomocou pravého Alt a písmena W:

Ukážme si jednoduchý príklad:

let currentTime = new Date();
if ((currentTime.getHours() > 5) && (currentTime.getHours() < 18)) {
    document.write("Good day");
} else {
    document.write("Good evening");
}

Uvedený kód vypíše Good day pokiaľ je aktuálna hodina väčšia ako 5 ráno a zároveň menšia ako 18 (6 večer):

S tým si zatiaľ vystačíme, operátormi sa pomocou zátvoriek samozrejme dajú kombinovať:

let number = parseInt(prompt("Enter a number between 10-20 or 30-40:"));
if (((number >= 10) && (number <= 20)) || ((number >= 30) && (number <= 40))) {
    document.write("Correct input");
} else {
    document.write("Incorrect input");
}

Pokiaľ zadáme číslo v uvedenom rozmedzí, dostaneme tento výstup:

V opačnom prípade sa nám v prehliadači vypíše:

Pozdrav na web

Vráťme sa ale k nášmu pozdravu na webe. Skúsme sa s podmienkami pohrať tak, aby skript vedel pozdraviť návštevníka stránok podľa dennej doby. Budeme teda vypisovať pozdravy Good morning, Good afternoon, Good evening a Good night. Iste to zvládneme, stačí vložiť viac podmienok za seba a vhodne nastaviť časy. Nesmieme zabudnúť na použitie operátorov s rovná sa (teda >=, <=):

let currentTime = new Date();
let currentHour = currentTime.getHours();

if ((currentHour >= 5) && (currentHour <= 11)) {
    document.write("Good morning");
} else if ((currentHour >= 12) && (currentHour <= 17)) {
    document.write("Good afternoon");
} else if ((currentHour >= 18) && (currentHour <= 21)) {
    document.write("Good evening");
} else {
    document.write("Good night");
}

Všimnime si, že u posledného else už nie je žiadne if. Akonáhle sa program dostane až sem, nezostáva iná možnosť, než že je noc a je zbytočné to overovať.

V prehliadači potom uvidíme výstup:

Konštrukcia switch

Pokiaľ v podmienkach reagujeme na rôzne hodnoty jednej premennej, môžeme namiesto sekvencie if - else if použiť konštrukciu switch. Konštrukcia switch je optimálna pre situácie, keď máme jednu premennú nadobúdajúcu mnoho možných hodnôt a chceme na základe tejto hodnoty vykonať rôzne akcie. Sekvencia if a else je oproti tomu flexibilnejšia v tom zmysle, že umožňuje kombinovať viacero rôznych podmienok a logických operátorov.

Príklad s else if

Konštrukcia switch nám v niektorých prípadoch umožňuje (relatívne) zjednodušiť zápis viacerých podmienok pod sebou. Ukážme si príklad, kedy chceme prepísať číslo slovami. Bez konštrukcie switch by sme napísali kód podobný tomuto:

let value = parseInt(prompt("Enter a number:"));
let inWords;

if (value == 1) {
    inWords = "one";
} else if (value == 2) {
    inWords = "two";
} else if (value == 3) {
    inWords = "three";
} else {
    inWords = "I don't know";
}
document.write(inWords);

Všimnime si, že sme premennou inWords deklarovali na začiatku, len tak do nej môžeme potom priraďovať. Keby sme ju deklarovali pri každom priradení, kód by vyhodil chybu. Premenná môže byť deklarovaná (založená v pamäti) vždy len raz.

Program by v tomto prípade fungoval rovnako aj bez tých else, ale načo sa ďalej pýtať, ak sme už našli zodpovedajúcu hodnotu.

Riešenie pomocou konštrukcie switch

Teraz si skúsime napísať ten istý kód pomocou konštrukcie switch. Pretože funkcia prompt() vracia užívateľský vstup ako textový reťazec, využijeme funkciu parseInt(), ktorá nám vráti celé číslo. Na získanie desatinného čísla by sme použili funkciu parseFloat():

let value = parseInt(prompt("Enter a number:"));
let inWords;

switch (value) {
    case 1:
        inWords = "one";
        break;
    case 2:
        inWords = "two";
        break;
    case 3:
        inWords = "three";
        break;
    default:
        inWords = "I don't know";
}
document.write(inWords);

Ak zadáme napríklad číslo 3, bude výstupom v prehliadači:

Ak nezadáme žiadne z troch uvedených čísel, v prehliadači sa vypíše:

Syntax vychádza z jazyka C a príkazy jednotlivých vetiev sa nepíšu do zložených zátvoriek. Oddeľujú sa príkazom break, ktorý spôsobí vyskočenie z celej konštrukcie switch. To môže byť pre začiatočníkov neprirodzené a dá sa na to ľahko zabudnúť. Pokiaľ sa nevykoná ani jeden prípad, spustí sa vetva default, čo je obdobou posledného else.

Je len na vás, či budete konštrukciu switch používať, všeobecne sa oplatí len pri väčšom množstve príkazov a vždy ide nahradiť sekvenciou if a else.

Jednoduchá kalkulačka

Poďme si ešte vytvoriť jednoduchú kalkulačku. Číselné vstupy nastavíme priamo v kóde a používateľa necháme vybrať iba početnú operáciu. Bez konštrukcie switch by kód kalkulačky vyzeral takto:

let a = 9;
let b = 3;

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

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

if (choice == 1) {
    example = `${a} + ${b} = ${a + b}`;
} else if (choice == 2) {
    example = `${a} - ${b} = ${a - b}`;
} else if (choice == 3) {
    example = `${a} * ${b} = ${a * b}`;
} else if (choice == 4) {
    example = `${a} / ${b} = ${a / b}`;
}

if (choice > 0 && choice < 5) {
    document.write("Result: " + example + "<br />");
} else {
    document.write("Invalid input <br />");
}

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

A teraz v kalkulačke použime konštrukciu switch:

let a = 9;
let b = 3;

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

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.");

Vidíme, že kód je trošku prehľadnejší. Nemusíme ďalšou podmienkou overovať, či používateľ zvolil jednu zo štyroch možností. O neplatnej voľbe ho informujeme priamo vo vetve default.

Výstup kalkulačky potom vyzerá napríklad takto:

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