Lekce 6 - Podmínky podruhé: Konstrukce switch v JavaScriptu

V minulé lekci, Podmínky v JavaScriptu, jsme se naučili programovat podmínky v JavaScriptu.

V dnešním tutoriálu základů JavaScriptu se naučíme skládat podmínky za pomoci logických operátorů. Následně se podíváme na konstrukci switch a vytvoříme se jednoduchou kalkulačku.

Skládání podmínek

Podmínky je možné skládat, a to pomocí dvou základních logických operátorů:

Znak & neboli ampersand napíšeme pomocí klávesy pravý Alt a C. Uvedeme si rovnou také znak | (tzv. pipe neboli trubka), který se napíše pomocí pravého Alt a písmene W:

Ukažme si jednoduchý příklad:

let aktualniCas = new Date();
if ((aktualniCas.getHours() > 5) && (aktualniCas.getHours() < 18)) {
    document.write("Dobrý den");
} else {
    document.write("Dobrý večer");
}

Uvedený kód vypíše Dobrý den pokud je aktuální hodina větší než 5 ráno a zároveň menší než 18 (6 večer):

S tím si zatím vystačíme, operátory se pomocí závorek samozřejmě dají kombinovat:

let cislo = parseInt(prompt("Zadejte číslo v rozmezí 10-20 nebo 30-40:"));
if (((cislo >= 10) && (cislo <= 20)) || ((cislo >= 30) && (cislo <= 40))) {
    document.write("Zadal jsi správně");
} else {
    document.write("Zadal jsi špatně");
}

Pokud zadáme číslo v uvedeném rozmezí, dostaneme tento výstup:

V opačném případě se nám v prohlížeči vypíše:

Pozdrav na web

Vraťme se ale k našemu pozdravu na webu. Zkusme si s podmínkami pohrát tak, aby skript uměl pozdravit návštěvníka stránek podle denní doby. Budeme tedy vypisovat pozdravy Dobré ráno, Dobré dopoledne, Dobré poledne, Dobré odpoledne, Dobrý večer a Dobrou noc. Jistě to zvládneme, stačí vložit více podmínek za sebe a vhodně nastavit časy. Nesmíme zapomenout na použití operátorů s rovná se (tedy >=, <=):

let aktualniCas = new Date();
let aktualniHodina = aktualniCas.getHours();

if ((aktualniHodina >= 5) && (aktualniHodina <= 9)) {
    document.write("Dobré ráno");
} else if ((aktualniHodina >= 10) && (aktualniHodina <= 11)) {
    document.write("Dobré dopoledne");
} else if (aktualniHodina == 12) {
    document.write("Dobré poledne");
} else if ((aktualniHodina >= 13) && (aktualniHodina <= 17)) {
    document.write("Dobré odpoledne");
} else if ((aktualniHodina >= 18) && (aktualniHodina <= 21)) {
    document.write("Dobrý večer");
} else {
    document.write("Dobrou noc");
}

Všimněme si, že u posledního else již není žádné if. Jakmile se program dostane až sem, nezbývá jiná možnost, než že je noc a je zbytečné to ověřovat.

V prohlížeči pak uvidíme výstup:

Konstrukce switch

Pokud v podmínkách reagujeme na různé hodnoty jedné proměnné, můžeme místo sekvence if-else if použít konstrukci switch. Konstrukce switch je optimální pro situace, kdy máme jednu proměnnou nabývající mnoha možných hodnot a chceme na základě této hodnoty provést různé akce. Sekvence if a else je oproti tomu flexibilnější v tom smyslu, že umožňuje kombinovat více různých podmínek a logických operátorů.

Příklad s else if

Konstrukce switch nám v některých případech umožňuje (relativně) zjednodušit zápis více podmínek pod sebou. Ukažme si příklad, kdy chceme přepsat číslo slovy. Bez konstrukce switch bychom napsali kód podobný tomuto:

let hodnota = parseInt(prompt("Zadej číslo:"));
let slovy;

if (hodnota == 1) {
    slovy = "jedna";
} else if (hodnota == 2) {
    slovy = "dva";
} else if (hodnota == 3) {
    slovy = "tři";
} else {
    slovy = "nevím";
}

document.write(slovy);

Všimněme si, že jsme proměnnou slovy deklarovali na začátku, jen tak do ni můžeme potom přiřazovat. Kdybychom ji deklarovali u každého přiřazení, kód by vyhodil chybu. Proměnná může být deklarována (založena v paměti) vždy jen jednou.

Program by v tomto případě fungoval stejně i bez těch else, ale nač se dále ptát, pokud jsme již našli odpovídající hodnotu.

Řešení pomocí konstrukce switch

Nyní si zkusíme napsat ten samý kód pomocí konstrukce switch. Protože funkce prompt() vrací uživatelský vstup jako textový řetězec, využijeme funkci parseInt(), která nám vrátí celé číslo. Pro získání desetinného čísla bychom použili funkci parseFloat():

let hodnota = parseInt(prompt("Zadej číslo:"));
let slovy;

switch (hodnota) {
    case 1:
        slovy = "jedna";
        break;
    case 2:
        slovy = "dva";
        break;
    case 3:
        slovy = "tři";
        break;
    default:
        slovy = "nevím";
}
document.write(slovy);

Pokud zadáme například číslo 3, bude výstupem v prohlížeči:

Jestliže nezadáme žádné ze tří uvedených čísel, v prohlížeči se vypíše:

Syntaxe vychází z jazyka C a příkazy jednotlivých větví se nepíší do složených závorek. Oddělují se příkazem break, který způsobí vyskočení z celé konstrukce switch. To může být pro začátečníky nepřirozené a dá se na to lehce zapomenout. Pokud se nevykoná ani jeden případ, spustí se větev default, což je obdobou posledního else.

Je jen na vás, jestli budete konstrukci switch používat, obecně se vyplatí jen při větším množství příkazů a vždy jde nahradit sekvencí if a else.

Jednoduchá kalkulačka

Pojďme si ještě vytvořit jednoduchou kalkulačku. Číselné vstupy nastavíme přímo v kódu a uživatele necháme vybrat pouze početní operaci. Bez konstrukce switch by kód kalkulačky vypadal takto:

let a = 9;
let b = 3;

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

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

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

if (volba > 0 && volba < 5) {
    document.write("Výsledek: " + priklad + "<br />");
} else {
    document.write("Neplatná volba <br />");
}

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

A nyní v kalkulačce použijme konstrukci switch:

let a = 9;
let b = 3;

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

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

Vidíme, že kód je trošku přehlednější. Nemusíme další podmínkou ověřovat, zda uživatel zvolil jednu ze čtyř možností. O neplatné volbě jej informujeme přímo ve větvi default.

Výstup kalkulačky pak vypadá například takto:

V následujícím cvičení, Řešené úlohy k 5.-6. 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š.