Lekce 21 - Podmínky v JavaScriptu potřetí
V minulé lekci, Striktní operátory a přetypování v JavaScriptu, jsme se podrobně věnovali přetypování v JavaScriptu, naučili se zkrácený zápis podmínek a umíme se vyvarovat mnoha úskalím pomocí striktních operátorů.
V dnešním tutoriálu základů JavaScriptu si
představíme další dvě konstrukce, které souvisejí s
podmínkami. Jedná se o ternární operátor
a konstrukci switch
s propadáváním.
Ternární operátor
Často se nám stává, že někde potřebujeme nastavit pouze dvě různé hodnoty podle toho, zda platí nějaká podmínka.
Výpis pohlaví pomocí podmínky
Představme si, že máme například pohlaví uživatele uložené jako
boolean
(muž by byl true
) a my bychom ho chtěli
převést do textu. S dosavadními znalostmi bychom napsali asi takovýto
kód:
let muz = true; // nějaká proměnná udávající pohlaví let nazevPohlavi; if (muz) nazevPohlavi = 'muž'; else nazevPohlavi = 'žena'; document.write(nazevPohlavi);
Výstup programu je samozřejmě následující:
Kód je poměrně upovídaný na to, že jen přepíná mezi dvěma hodnotami. Proto programovací jazyky často podporují tzv. ternární výraz.
Syntaxe ternárního výrazu
Získat hodnotu podle platnosti logického výrazu můžeme s využitím tzv. ternárního výrazu. Jeho syntaxe je následující:
(podminka) ? plati : neplati
Podmínku vložíme většinou do závorky ()
, poté následuje
otazník ?
a dvě hodnoty, které se mají vrátit. Hodnoty jsou
oddělené dvojtečkou :
. První hodnota plati
se
vrátí, když podmínka platí. Druhá hodnota neplati
, když
podmínka neplatí. Jak snadné! Název operátoru je odvozený od toho, že má tři části
(podmínka, první hodnota a druhá hodnota), proto ternární.
Výpis pohlaví pomocí ternárního výrazu
Pojďme si ternární operátor vyzkoušet na příkladu s pohlavím:
let muz = true; // nějaká proměnná udávající pohlaví let nazevPohlavi = (muz) ? 'muž' : 'žena'; document.write(nazevPohlavi);
V prohlížeči získáme stejný výstup jako u příkladu výše:
Místo proměnné typu boolean
bychom mohli do
závorky samozřejmě napsat jakoukoli jinou podmínku, například
(vek >= 18) ? 'zletilý' : 'nezletilý'
. V
případě jednoduchých výrazů můžeme závorku i vynechat.
Vnořování ternárních operátorů
Ternární operátory lze teoreticky zanořovat do sebe a tím reagovat i na tři a více hodnot. Nicméně ve většině případů zanořování spíše kód znepřehlední, vznikají totiž dlouhé nebo podivně zalomené řádky a není na první pohled vidět, jaká část se kdy spustí. Ukažme si, jak by se pomocí vnořování ternárních výrazů vyřešil výpis tří smajlíků:
let smajlik = ":("; // nějaká proměnná udávající smajlíka let nalada = (smajlik === ":)") ? "veselý" : (smajlik === ":(") ? "smutný" : "neznámý"; document.write(nalada);
Výstup:
Přepínání hodnoty
boolean
proměnné
Ukažme si poslední příklad. V lekci Podmínky
podruhé: Konstrukce switch v JavaScriptu jsme si ukazovali, jak zkrátit
kód pro změnu boolean
hodnoty. Výsledkem byl zápis:
let svetloSviti = false; svetloSviti = !svetloSviti; // přepínáme stav lampičky if (svetloSviti) document.write("Světlo bylo zhasnuté, rozsvítili jsme."); else document.write("Světlo bylo rozsvícené, zhasli jsme.");
Ternární operátor nám umožňuje stávající kód ještě zkrátit:
let svetloSviti = false; svetloSviti = !svetloSviti; document.write(svetloSviti ? "Světlo bylo zhasnuté, rozsvítili jsme." : "Světlo bylo rozsvícené, zhasli jsme.");
Konstrukce switch
s
propadáváním
S konstrukcí switch
jsme se již setkali. Zde si ukážeme
její další použití. Na rozdíl od ternárního operátoru jde ale spíše o
historickou funkčnost, pro kterou dnes není moc rozumných využití. Stále
je ale součástí JavaScriptu a můžeme na ni narazit v cizích zdrojových
kódech.
Výpis čtvrtletí
Předpokládejme, že chceme podle měsíce v roce zjistit jaké je
čtvrtletí. Pomocí if
a else
by příklad vypadal
následovně:
if (mesic >= 1 && mesic <= 3) document.write('Je první čtvrtletí.'); else if (mesic >= 4 && mesic <= 6) document.write('Je druhé čtvrtletí.'); else if (mesic >= 7 && mesic <= 9) document.write('Je třetí čtvrtletí.'); else if (mesic >= 10 && mesic <= 12) document. Write('Je čtvrté čtvrtletí.');
Jak ale použít switch
pro tento příklad? Mohlo by nás
napadnout následující řešení:
let mesic = 11; switch (mesic) { case 1: document.write('Je první čtvrtletí.'); break; case 2: document.write('Je první čtvrtletí.'); break; case 3: document.write('Je první čtvrtletí.'); break; case 4: document.write('Je druhé čtvrtletí.'); break; case 5: document.write('Je druhé čtvrtletí.'); break; case 6: document.write('Je druhé čtvrtletí.'); break; case 7: document.write('Je třetí čtvrtletí.'); break; case 8: document.write('Je třetí čtvrtletí.'); break; case 9: document.write('Je třetí čtvrtletí.'); break; case 10: document.write('Je čtvrté čtvrtletí.'); break; case 11: document.write('Je čtvrté čtvrtletí.'); break; case 12: document.write('Je čtvrté čtvrtletí.'); break; }
Příklad funguje spolehlivě, problém však je, že jsme si tímto zápisem moc nepomohli. Podobnému repetitivnímu kódu bychom se vždy měli vyhýbat.
Propadávání
Zkusme to ještě jednou a využijme tzv. propadávání.
Pokud potřebujeme ve více blocích case
provádět stejný kód,
stačí tyto bloky vložit pod sebe a neukončovat každý blok pomocí
příkazu break
, ale celou skupinu bloku jedním příkazem
break
. Neukončené bloky tak propadnou a vykoná se kód
společný pro více bloků:
let mesic = 11; switch (mesic) { case 1: case 2: case 3: document.write('Je první čtvrtletí.'); break; case 4: case 5: case 6: document.write('Je druhé čtvrtletí.'); break; case 7: case 8: case 9: document.write('Je třetí čtvrtletí.'); break; case 10: case 11: case 12: document.write('Je čtvrté čtvrtletí.'); break; }
Ukázka aplikace v prohlížeči:
Tento zápis je již mnohem přehlednější. Konstrukce switch
má ovšem přidanou hodnotu spíše v případě, kdy nemůžeme hodnoty
porovnat v podmínce pomocí operátoru větší nebo menší a jde o
výčet hodnot. Zde je to spíše redundantní kód plný
prázdných case
.
JavaScript podporuje propadávání jak prázdných
case
, tak na rozdíl od jiných jazyků i case
s
dalším kódem. To je častá příčina nechtěných chyb (zapomenutých
break
) a velmi těžko se hledají.
Co toto varování znamená si ukážeme na dalším příkladu. Pokud se
vyhodnotí jedno case
jako pravdivé, provedou se instrukce pro
toto case
a poté se pokračuje provádění kódu i dalších
case
bez ohledu na to, zda jsou splněny. Takto program pokračuje,
dokud nenarazí na příkaz break
:
let znamka = 1; switch (znamka) { case 1: document.write("Hurá, dostal jsem jedničku!"); // Propadne do dalšího case (není použito break) case 2: document.write("Dvojka ještě ujde."); break; case 3: document.write("Trojka je taky dobrá."); break; // další case }
Protože v prvním case
chybí příkaz break
, v
prohlížeči se nám vypíše i text druhého case
:
Propadávání používejte v konstrukci switch
jen pokud k
němu máte dobrý důvod, nicméně je důležité, abyste jej uměli číst,
když na něj někde narazíte.
Stejně jako k podmínkám je v JavaScriptu i ještě pár dalších drobností k cyklům, o nich si povíme ale jindy
V další lekci, Cykly v JavaScriptu potřetí, se naučíme používat klíčová slova
break
, continue
, návěstí a cyklus
do
-while
.
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š.
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 37x (1.92 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript