Lekce 7 - 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 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 teoreticky fungoval stejně i bez prvních dvou else, ale nač se dále ptát, pokud jsme již našli odpovídající hodnotu. Navíc kdyby podmínky nebyly takto zřetězené, museli bychom složitě napodmínkovat poslední možnost.

Řešení pomocí konstrukce switch

Nyní si zkusíme napsat ten samý kód pomocí konstrukce switch:

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

Syntaxe switch vychází z jazyka C. Jednotlivé případy proměnné označujeme klíčovým slovem case. Příkazy těchto větví se nepíší do složených závorek, ale 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.

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:

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 i početní operaci necháme zadat uživatele. Pomocí sekvence else if by kód kalkulačky vypadal takto:

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

let vysledek = "";

if (volba == 1) {
    vysledek = a + b;
} else if (volba == 2) {
    vysledek = a - b;
} else if (volba == 3) {
    vysledek = a * b;
} else if (volba == 4) {
    vysledek = a / b;
} else {
    vysledek = "Neplatná volba";
}

document.write(`Výsledek: ${vysledek}`);

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. Pokud byste chtěli, aby kalkulačka uměla zpracovávat i desetinná čísla, stačí vyměnit první dvě funkce parseInt() za parseFloat().

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

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

let vysledek = "";

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

document.write(`Výsledek: ${vysledek}`);

Kód je podobný jako s else if. Pokud neplatí žádný z předchozích case, spustí se default.

Výstup kalkulačky pak vypadá při zadání např. 10, 20 a 3 (násobení) takto:

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