Lekce 4 - Podmínky v JavaScriptu
V minulé lekci, Základní datové typy v JavaScriptu a jejich funkce, byla řeč o datových typech a jejich funkcích.
Dnes se v JavaScript tutoriálu budeme věnovat podmínkám.
Abychom si něco naprogramovali, potřebujeme nějak reagovat na vstupy. Ty
mohou být buď od uživatele nebo od systému a podle nich budeme měnit
průběh programu. Říká se tomu větvení a používají se k tomu podmínky.
V JavaScriptu se podmínky píší úplně stejně, jako ve všech CLike
jazycích, pro začátečníky si vše samozřejmě vysvětlíme.
Pokročilejší se asi budou ze začátku nudit, ale věřím, že ke konci to
začne být zajímavé i pro ně
Kód níže bude obsahovat složené závorky {}
. Složené
závorky slouží k označení začátku a konce bloku (například blok pro
podmínku if
). Pokud je v podmínce pouze jeden příkaz na jednom
řádku, složené závorky nejsou nutné.
Tyto složené závorky se na české klávesnici napíši pomocí klávesy pravého ALT a písmene B či N:

Následující kód vypíše text "Je po šesté hodině", pokud je 18:00 a
více. Bude fungovat až do půlnoci, kdy se hodiny dostanou na 0
a
to začne být menší než 18
.
let d = new Date(); if (d.getHours() >= 18) { document.write("Je po šesté hodině."); }
Podmínka začíná příkazem if
, samotný výraz v podmínce
píšeme do závorky a tak, jak jsme zvyklí z matematiky. Je tu však menší
změna v zápisu (syntaxi) operátorů, viz tabulka níže. Pokud výraz platí,
spustí se první příkaz za podmínkou. Pokud ne, příkaz se přeskočí a
program pokračuje dále až pod ním. Pokud potřebujeme spustit více
příkazů, píšeme je do složených závorek. Kvůli přehlednosti se někdy
do závorek píše i jen jeden příkaz, víz příklad výše.
Operátory
Ve výrazech můžeme využívat následujících operátorů:
Operátor | C-like Zápis |
---|---|
Rovnost hodnotou | == |
Rovnost hodnotou i typem | === |
Je ostře větší | > |
Je ostře menší | < |
Je větší nebo rovno | >= |
Je menší nebo rovno | <= |
Nerovnost hodnotou | != |
Nerovnost hodnotou i typem | !== |
Obecná negace | ! |
Rovnost zapisujeme dvěma ==
proto, aby se to nepletlo s
běžným přiřazením do proměnné, které se dělá jen jedním
=
. Pokud chceme nějaký výraz znegovat, napíšeme ho do závorky
a před něj vykřičník !
.
Striktní operátory
Jistě vás zaujaly operátory pro rovnost a nerovnost hodnotou i typem.
Někdy se totiž potřebujeme zeptat, zda je v proměnné např. opravdu číslo
10
a ne text "10"
. Klasická dvě rovná se
(==
) berou tyto 2 hodnoty jako shodné. Naopak operátor
===
je vyhodnotí jako různé. Zkusme si to:
if (10 == "10") document.write('10 == "10" platí'); if (10 === "10") document.write('10 === "10" platí');
Výsledek:
S porovnáváním různých datových typů je v JavaScriptu spojeno spoustu dalších úskalí, ale s tím si teď nebudeme lámat hlavu.
Skládání podmínek
Nyní si zkusme udělat něco lepšího, co již reálně k něčemu bude.
Zatím neumíme zpracovávat moc vstupů, zůstaňme tedy u času. Napíšeme si
skript na rozpoznání dne a noci. To se může hodit pro pozdrav na webu
("Dobrý večer"/"Dobrý den") nebo dokonce pro přepínání skinu webu na
denní/noční. V následujícím kódu budé nový speciální znak
&
neboli ampersand.
Ten napíšeme pomocí klávesy pravý ALT a znaku
C. Uvedeme si rovnou také znak |
(tzv.
pipe
neboli trubka), ten se napíše pomocí
pravého ALT a písmene W:

Níže si uvedeme kód s využitím logického operátoru
AND
:
let d = new Date(); if ((d.getHours() > 5) && (d.getHours() < 18)) document.write("Dobrý den"); else document.write("Dobrý večer");
Uveďme si ještě jednu tabulku operátorů pro skládání podmínek:
Operátor | C-like Zápis |
---|---|
A zároveň | && |
Nebo | || |
S tím si zatím vystačíme, operátory se pomocí závorek samozřejmě
dají kombinovat. Kód výše tedy vypíše "Dobrý den" pokud je aktuální
hodina větší než 5
ráno a zároveň menší
než 18
(6 večer).
Novinkou oproti minule je příkaz else
, který vykoná
následující příkaz v případě, že podmínka neplatila. To se jistě
hodí, jinak bychom museli psát tu samou podmínku opačně i pro noc.
Příkaz else
se také využívá v případě, kdy potřebujeme
manipulovat s proměnnou z podmínky a nemůžeme se na ni tedy ptát potom
znovu. Program si sám pamatuje, že se podmínka nesplnila a přejde do větve
else
. Ukažme si to na příkladu: Mějme číslo a
,
kde bude hodnota 0
nebo 1
a po nás se bude chtít,
abychom hodnotu prohodili (pokud tam je 0
, dáme tam
1
, pokud 1
, dáme tam 0
). Naivně bychom
mohli kód napsat takto:
let a = 0; // do a si přiřadíme na začátku 0 if (a == 0) // pokud je a 0, dáme do něj jedničku a = 1; if (a == 1) // pokud je a 1, dáme do něj nulu a = 0; document.write(a);
Nefunguje to, že? Pojďme si projet, co bude program dělat. Na začátku
máme v proměnné a
hodnotu 0
, první podmínka se
jistě splní a dosadí do proměnné a
hodnotu 1
. No
ale rázem se splní i ta druhá. Co s tím? Když podmínky otočíme, budeme
mít ten samý problém s jedničkou. Jak z toho ven? Ano, použijeme
else
.
let a = 0; // do a si přiřadíme na začátku 0 if (a == 0) // pokud je a 0, dáme do něj jedničku a = 1; else // pokud je a 1, dáme do něj nulu a = 0; document.write(a);
Zkusme si s podmínkami pohrát tak, aby skript uměl pozdravit
návštěvníka stránek podle denní doby, tedy "Dobré ráno", "Dobré
dopoledne", "Dobré poledne", "Dobré odpoledne", "Dobrý večer"... Jistě to
zvládnete, stačí vložit více podmínek za sebe a vhodně nastavit časy.
Nesmíte zapomenout na použití operátorů s rovná se (tedy
>=
, <=
). Pro ty, kteří stejně potřebují
popostrčit, dám malou nápovědu, jak za sebe podmínky spojovat:
let d = new Date(); if ((d.getHours() >= 5) && (d.getHours() <= 9)) document.write("Dobré ráno"); else if ((d.getHours() >= 10) && (d.getHours() <= 11)) document.write("Dobré dopoledne"); else if ((d.getHours() == 12)) document.write("Dobré poledne"); else if ((d.getHours() >= 13) && (d.getHours() <= 17)) document.write("Dobré odpoledne"); else if ((d.getHours() >= 18 && (d.getHours() <= 21))) document.write("Dobrý večer"); else document.write("Dobrou noc");
Všimněte 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.
switch
Pokud reagujeme na různé hodnoty jedné proměnné, můžeme místo
sekvence if
-else if
použít konstrukci
switch
. Teoreticky může někdy kód zpřehlednit, i když bychom
se podobnému větvení měli spíše vyhýbat a snažit se ho řešit např.
pomocí polí (viz dále v JavaScript kurzu).
let hodnota = 2; 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 vychází z céčka a příkazy
jednotlivých větví se nepíší do složených závorek, ale oddělují
příkazem break
, což je poměrně nepřirozené a dá se na něj
lehce zapomenout. Pokud se nevykoná ani jeden případ, spustí se větev
default:
, což je období posledního else
. Každý
switch
lze zapsat pomocí sekvence
if
-else if
a kromě jiného zápisu nám nepřináší
žádnou výhodu, zmiňuji ho jen kdybyste ho někde viděli nebo se vám nějak
extra zalíbil.
Boolean
S podmínkami úzce souvisí datový typ boolean
, který v sobě
dokáže uchovávat pouze 2 hodnoty - true
(pravda) nebo
false
(nepravda). Vytvořme si nějakou takovou proměnnou:
let mameRohliky = false; let mameChleba = true;
Na hodnotu true
/false
se ve finále převede
jakákoli podmínka, můžeme tedy do proměnné uložit její výslednou
hodnotu:
let vek = 26; let zletily = (vek >= 18); document.write(zletily);
Pokud proměnnou typu boolean
použijeme dále v podmínce, je
již zbytečné ptát se zda se hodnota rovná true
:
if (zletily == true) // ...
a místo toho se můžeme ptát jen na proměnnou, jelikož konstrukce
if
očekává logický výraz, který nabývá hodnoty
true
nebo false
:
if (zletily) // ...
prompt()
Protože nyní umíte podmínky, jistě by bylo příjemné vyzkoušet si reagovat na co nejvíce vstupů. Bohužel zatím známe pouze datum a čas a na načítání textu z formulářů ještě nejsme dost zkušení.
JavaScript nám ovšem poskytuje funkci prompt()
, která vyvolá
zobrazení dialogu k zadání textu. Funkce bere 2 vstupní parametry, prvním
je otázka, která se uživateli položí a druhým parametrem je výchozí
text, který je v poli zadaný. Druhý parametr můžeme vynechat. Zkusme si
napsat aplikaci, která zjistí zda je uživatel plnoletý:
let vek = prompt("Zadej svůj věk"); if (vek >= 18) document.write("Jsi plnoletý"); else document.write("Nejsi plnoletý");
Výsledek:

K podmínkám se v našem kurzu ještě jednou vrátíme a představíme si
několik dalších konstrukcí. Nyní myslím, že základ podmínek již umíme
a odnesli jsme si užitečný script pro pozdravení návštěvníků Navíc umíte používat
prompt()
a můžete tak psát aplikace, které komunikují s
uživatelem.
V následujícím cvičení, Řešené úlohy k 4. lekci JavaScriptu, si procvičíme nabyté zkušenosti z předchozích lekcí.
Stáhnout
Staženo 576x (2.7 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript
Komentáře


Zobrazeno 10 zpráv z 44. Zobrazit vše