4. díl - Podmínky v JavaScriptu

JavaScript Základní konstrukce Podmínky v JavaScriptu

V minulém dílu byla řeč o datových typech a jejich funkcích. Dnes se 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 samozřejmě vysvětlím. Pokročilejší se dnes asi budou ze začátku nudit, ale věřím, že ke konci to začne být zajímavé i pro ně :)

Následující kód vypíše text "Je po šesté hodině", pokud je 18:00 a více, bude to fungovat až do půlnoci, kdy se hodiny dostanou na 0 a to začne být menší než 18.

var 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 ==
Je ostře větší >
Je ostře menší <
Je větší nebo rovno >=
Je menší nebo rovno <=
Nerovnost !=
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.

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

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

Jistě i říkáte, co jsou to ty 2 ampersandy (&&), uveďme si proto 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ž 6 večer.

Pozdrav podle denní doby v JavaScriptu

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.

Else se také využívá v případě, kdy potřebujeme v příkazu 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 sekce 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:

var 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 a nulu, první podmínka se jistě splní a dosadí do a jedničku. 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.

var 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 script 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:

var 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é odpoledne");
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 seriálu).

var hodnota = 2;
var 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) a false (nepravda). Vytvořme si nějakou takovou proměnnou:

var mameRohliky = false;
var mameChleba = true;

Na hodnotu true/false se ve finále převede jakákoli podmínka, můžeme ji tedy do proměnné uložit:

var vek = 26;
var 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)
...

Ternární operátor

Často se nám stává, že někde potřebujeme různé hodnoty podle toho, zda platí nějaká podmínka. Představme si, že máme např. pohlaví uživatele uložené jako boolean (muz = true) a my bychom ho chtěli převést do textu. S dosavadními znalostmi bychom napsali asi takovýto kód:

var muz = true; // nějaká proměnná udávající pohlaví
var nazevPohlavi;
if (muz)
        nazevPohlavi = "muž";
else
        nazevPohlavi = "žena";
document.write(nazevPohlavi);

Získat hodnotu podle platnosti logického výrazu můžeme s využitím tzv. ternárního výrazu:

var muz = true; // nějaká proměnná udávající pohlaví
var nazevPohlavi = (muz) ? "muž" : "žena";
document.write(nazevPohlavi);

Podmínku vložíme většinou do závorky, poté následuje otazník a 2 hodnoty, které se mají vrátit. Hodnoty jsou oddělené dvojtečkou, první se vrátí když podmínka platí a druhá když neplatí. Místo booleanu bychom mohli do závorky samozřejmě napsat jakoukoli jinou podmínku, např. (vek >= 18) ? "zletilý" : "nezletilý".

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

var vek = prompt("Zadej svůj věk");
document.write((vek >= 18) ? "Jsi plnoletý" : "Nejsi plnoletý");

Výsledek:

Prompt dialog v JavaScriptu
Podmínka plnoletosti v JavaScriptu

Myslím, že podmínky 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. Příště bude řeč o cyklech v JavaScriptu.


 

Stáhnout

Staženo 159x (2.46 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (6 hlasů) :
55555


 



 

 

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

Avatar
Ondřej Langr (andysekcze):

Jo sorry :D já si toho všiml a zapoměl :D

Odpovědět 21.6.2015 10:34
I have a charger. I have Note 7. Umh I haven't Note7.
Avatar
Ondřej Langr (andysekcze):

Jo sorry :D já si toho všiml a zapoměl :D

Odpovědět 21.6.2015 10:34
I have a charger. I have Note 7. Umh I haven't Note7.
Avatar
vojtanosek
Člen
Avatar
vojtanosek:

Jo, už se v tom orientuji :D .

 
Odpovědět 21.6.2015 10:59
Avatar
Odpovídá na vojtanosek
Ondřej Langr (andysekcze):

Kdybys ještě něco potřeboval. Napiš mi PMko :D

Odpovědět 21.6.2015 13:17
I have a charger. I have Note 7. Umh I haven't Note7.
Avatar
Odpovědět 21.6.2015 13:27
I have a charger. I have Note 7. Umh I haven't Note7.
Avatar
Paulo
Člen
Avatar
Paulo:

Zkouším kód na skládání podmínek modifikovat na roční období. Pokud je v kódu pouze měsíc, pak kód funguje. Ale když přidám podmínku den v měsíci, pak je výsledek pouze "Zima"

var d = new Date();
        if ((d.getMonth() >= 2 && d.getDate()>=21) && (d.getMonth() <= 5) && d.getDate()<=20)
        document.write("Jaro");
        else if ((d.getMonth() >= 5 && d.getDate()>=21) && (d.getMonth() <= 8) && d.getDate()<=22)
        document.write("Léto");
        else if ((d.getMonth() >= 8 && d.getDate()>=23) && (d.getMonth() <= 11) && d.getDate()<=20)
        document.write("Podzim");
        else
        document.write("Zima");

Můžete mi někdo poradit, jak kód napsat správně.

 
Odpovědět 18.10.2015 15:01
Avatar
zalaby
Člen
Avatar
Odpovídá na Paulo
zalaby:

Pokud jsi to ještě nevymyslel, tak tě zkusím postrčit. Podívej se znovu na ty podmínky. Máš v jednom čtyřvstupovém "ANDu" protichůdné podmínky. Příklad (1. if() ) - číslo dne má být větší než 21 a zároveň menší než 20 ?? Podmínky budou trochu složitější nebo zvol jiný přístup. Pokud o to budeš stát, můžu zkusit vypotit nějaký příklad. Nejsem žádný "guru", tak to nechci vymýšlet hned, pokud o to nestojíš nebo už jsi to vyřešil. :)

 
Odpovědět 28. ledna 9:16
Avatar
Cyborg
Člen
Avatar
Odpovídá na Paulo
Cyborg:

Zdravím :) Tvoje myšlenka mě přišla zajímavá a proto jsem tedy zkusil napsat program pomocí podmínek. Jedná se tedy o program na zjištění ročního období v roce 2016. Jestli máš o to ještě zájem, přikládám zdrojový kod.

var d = new Date();
        document.write("<br> <H1>Momentalne je rocni obdobi :</H1>");
    mesic = j.getMonth() +1; //mesic se pocita od nuly, proto +1
    den = j.getDate();
        if ((mesic >= 3) && (mesic <=6))
        {
                if (mesic == 3)
                {
                                if (den <=19)
                                        document.write("Zima");
                                else
                                        document.write("Jaro");
                }
                else if (mesic == 6)
                {
                                if (den <= 20)
                                        document.write("Jaro");
                                else
                                        document.write("Leto");
                }
                else if (mesic == 4 || mesic == 5)
                                        document.write("Jaro");
        }
        if ((mesic >= 7) && (mesic <= 9))
        {
                if (mesic == 9)
                {
                        if (den <=21)
                                document.write("Leto");
                        else
                                document.write("Podzim");
                }
                else
                        document.write("Leto");
        }
        if ((mesic >= 10) && (mesic <= 12))
        {
                if (mesic == 12)
                {
                        if (den <=21)
                                document.write("Podzim");
                        else
                                document.write("Zima");
                }
                else
                        document.write("Podzim");
        }
  if (( mesic == 1) || (mesic ==2))
        document.write("Zima");

PS: Dnes dělám poprvé v javascriptu, takže pokuď by šlo něco udělat lépe , nebo je něco špatně, tak mi neváhejte napsat :)

 
Odpovědět 25. února 14:30
Avatar
Paulo
Člen
Avatar
Odpovídá na Cyborg
Paulo:

Ahoj, jen jsem musel změnit

mesic = j.getMonth() +1;
den = j.getDate();

na

mesic = d.getMonth() +1;
den = d.getDate();

Já jsem začal s Javascriptem vloni v říjnu a bohužel jsem se z časových důvodů k vyřešení nedostal, takže dík za zaslání kódu.

 
Odpovědět 27. února 10:30
Avatar
Cyborg
Člen
Avatar
Odpovídá na Paulo
Cyborg:

Čau, v první řadě není za co děkovat :) Rád jsem pomohl :) Za druhé nechápu, jak se mi tam dostalo to

var d = new Date();

Díval jsem se do zdrojáku a mám tam

var j = new Date();

Docela záhada no :D

 
Odpovědět 27. února 11:58
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 18. Zobrazit vše