Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
BF extended 2022

Lekce 4 - Podmínky v JavaScriptu

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ě :)

Složené závorky slouží, mimo výpis proměnné v textovém řetězci, 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é.

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:

Your page
localhost

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 bude 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:

AND a OR

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

Pozdrav v JavaScriptu
localhost

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 obdobou 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:

Prompt dialog v JavaScriptu
Plnoletost v JavaScriptu
localhost

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í.


 

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 829x (2.7 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

Předchozí článek
Kvíz - Textové řetězce v JavaScriptu
Všechny články v sekci
Základní konstrukce jazyka JavaScript
Přeskočit článek
(nedoporučujeme)
Řešené úlohy k 4. lekci JavaScriptu
Článek pro vás napsal David Čápka
Avatar
Uživatelské hodnocení:
355 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity

 

 

Komentáře
Zobrazit starší komentáře (43)

Avatar
Jindřich Pšeničný:5.7.2020 6:32

Omlouvám se je. Pomocí vstupu prompt to potřeba je. Zbrklý komentář.

Odpovědět
5.7.2020 6:32
tak trochu jiný svět...
Avatar
Jiří Staniš:26.8.2021 19:54

Ahoj, v článku je uvedena tabulka operátorů a jejich význam. Pro operátor !== je zde uvedeno "Nerovnost hodnotou i typem". Předpokládám že přesnější by bylo "Nerovnost hodnotou nebo typem". Jinými slovy pokud budou typy odlišné, tak bude výsledek false.
V každém případě díky za kvalitní a přehledné zpracování tématu.

 
Odpovědět
26.8.2021 19:54
Avatar
Lubomír Berky:20.10.2021 9:21

Ahoj, mě by zajímalo
let d = new Date();
výzman toho "new"
Diky

 
Odpovědět
20.10.2021 9:21
Avatar
Jurajs
Člen
Avatar
Odpovídá na Lubomír Berky
Jurajs:22.10.2021 15:07

Cau, jestli se nepletu, tak to znamena - vyvtoreni noveho objektu Date ....

 
Odpovědět
22.10.2021 15:07
Avatar
Jaroslav Drobek:26. dubna 6:42

Hodnocení:

  • "Níže si uvedeme kód s využitím logického operátoru AND:" ...AND tam nikde není vidět.
  • Řetězec "Test plnoletosti" v posledním výstupu je mega, ale spadl odněkud z vesmíru, takže je trochu zneklidňující..
 
Odpovědět
26. dubna 6:42
Avatar
Odpovídá na Jaroslav Drobek
Lukáš Bartošek :16. května 13:10

"Níže si uvedeme kód s využitím logického operátoru AND:" ...AND tam nikde není vidět.

Pravda není tam doslova řešeno že AND = &&
Ale lze si odvodit.

Řetězec "Test plnoletosti" v posledním výstupu je mega, ale spadl odněkud z vesmíru, takže je trochu zneklidňující..

Na začátku kurzu je jasně psáno že tento kurz vyžaduje absolvování kurzu HTML/CSS.
>>

Rovnou na začátku říkám, že když chcete pracovat s JavaScriptem, musíte umět alespoň základy HTML.

Takže autorovy přijde zbytečné vysvětlovat zapsání tagu jako je H1.

Odpovědět
16. května 13:10
Nachystejte uzenáče, na snídani jsem zpátky!
Avatar
Werner Yuyong:25. května 16:17

Supr clanek, diky

 
Odpovědět
25. května 16:17
Avatar
Tomáš Fric
Člen
Avatar
Tomáš Fric:22. června 20:51

V calnku je jen cast pro lajka jak psat ty kody je problem

 
Odpovědět
22. června 20:51
Avatar
Stanislav Krajči:29. června 11:54

Fajn tempo a obsah. Akorát u té poslední podmínky - prompt, je již nutné pracovat v souboru JS a propojit ho v souboru HTML. Myslím, že je dobré to tam zmínit, nebo alespoň dodat, že se tomu budeme brzy věnovat. Já a další tomu již rozumějí, ale čerstvé ryby moc neví co si s tím počít :)

 
Odpovědět
29. června 11:54
Avatar
Odpovídá na Stanislav Krajči
Martin Gottwald:15. října 11:24

Zdravím Vás, podmínka prompt funguje i v samostatném HTML souboru bez načtení JS. :-)

 
Odpovědět
15. října 11:24
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

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