Lekce 6 - Podmínky v JavaScriptu

V předchozím kvízu, Kvíz - Textové řetězce v JavaScriptu, jsme si ověřili nabyté zkušenosti z předchozích lekcí.

V dnešním tutoriálu základů JavaScriptu se budeme věnovat podmínkám. Díky nim můžeme reagovat na různé situace a řídit, jak se naše aplikace chová. Může to být například hodnota zadaná uživatelem, podle které budeme chtít měnit další běh programu. Říkáme, že se program větví a k větvení používáme podmínky.

Podmínky v JavaScriptu

Podmínky umožňují rozhodovat, jaký kód se vykoná v závislosti na splnění určitých vstupů. Ty mohou být buď od uživatele, nebo od systému. Nejprve si tedy ukážeme, jak získat vstup od uživatele a poté s ním budeme dále pracovat.

Funkce prompt()

Pro získání uživatelského vstupu nám JavaScript poskytuje funkci prompt(), která vyvolá zobrazení dialogového okna k zadání textu. Funkce bere dva vstupní parametry. Prvním je otázka, která se uživateli položí. Druhý parametr není povinný, můžeme v něm uvést výchozí text, který bude v poli zadaný.

V následujícím příkladu požádáme uživatele, aby zadal nějaký text, který uložíme do proměnné vstup. Získaný text pak vypíšeme na webovou stránku:

let vstup = prompt("Zadejte nějaký text:");
document.write("Zadaný text: " + vstup);

Dialogové okno zobrazené pomocí funkce prompt() pak vypadá takto:

Pokud zadáme jako text například Ahoj a potvrdíme tlačítkem OK, v prohlížeči se nám vypíše:

Vstup, který uživatel v dialogovém okně zadá, se nám vrací jako textový řetězec. Zkusme si nechat zadat dvě čísla a sečíst je:

let a = prompt("Zadej první číslo:");
let b = prompt("Zadej druhé číslo:");
document.write("Součet zadaných čísel: " + (a + b));

Pokud nyní zadáme pokaždé číslo 1 dostaneme v prohlížeči tento výsledek:

Chceme-li tedy pomocí funkce prompt() načíst číslo, je nutné provést konverzi, neboli parsováni. K tomu slouží funkce parseInt() pro získání celého čísla a parseFloat() pro získání desetinných čísel. Aby předešlý příklad vracel správný výsledek, vložíme funkci prompt() do funkce parseInt():

let a = parseInt(prompt("Zadej první číslo:"));
let b = parseInt(prompt("Zadej druhé číslo:"));
document.write("Součet zadaných čísel: " + (a + b));

V prohlížeči se nám už zobrazí správný výsledek:

Nyní si ukážeme, jak na zadaný vstup reagovat pomocí podmínky.

Jednoduchá podmínka - if

Podmínky zapisujeme pomocí klíčového slova if, za kterým následuje logický výraz. Pokud je výraz pravdivý, provede se následující příkaz. Pokud ne, následující příkaz se přeskočí a pokračuje se až pod ním. Vyzkoušejme si to:

if (15 > 5) {
    document.write("Pravda <br />");
}
document.write("Program zde pokračuje dál");

Výstup:

Součástí výrazu samozřejmě může být i proměnná:

let cislo = parseInt(prompt("Zadej nějaké číslo:"));
if (cislo > 5) {
    document.write("Zadal jsi číslo větší než 5 <br />");
}
document.write("Děkuji za zadání");

Když zadáme číslo větší než 5, vypíše se v prohlížeči:

Pokud bychom zadali menší číslo nebo nečíselný vstup, vypíše se pouze druhá věta.

Podmínka tedy začíná příkazem if a následuje logický výraz, který píšeme do závorky. Pokud výraz platí, spustí se první příkaz za podmínkou, v opačném případě se přeskočí. Program poté pokračuje dále až pod ním.

Relační operátory

Ukažme si nyní relační operátory, které můžeme ve výrazech používat:

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 nebo 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

V tabulce výše je uveden operátor pro rovnost hodnotou i typem. Někdy se totiž potřebujeme zeptat, zda je v proměnné opravdu číslo 10 a ne text "10". Operátor == bere tyto dvě hodnoty jako shodné, naopak striktní operátor === je vyhodnotí jako různé. Zkusme si to:

if (10 == "10") {
    document.write('10 == "10" platí');
}

if (20 === "20") {
    document.write('20 === "20" platí');
}

Výsledek:

Vidíme, že druhá podmínka nebyla splněna a část kódu (20 === "20" platí) se nevypsala.

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.

Blok příkazů

Když budeme chtít vykonat více než jen jeden příkaz, musíme příkazy vložit do bloku ze složených závorek:

let zaklad = parseInt(prompt("Zadej nějaké číslo, ze kterého spočítám odmocninu:"));
if (zaklad >= 0) {
    document.write("Zadal jsi číslo větší nebo rovno 0, to znamená, že ho mohu odmocnit! <br />");
    let odmocnina = Math.sqrt(zaklad);
    document.write("Odmocnina z čísla " + zaklad + " je " + odmocnina + "<br />");
}
document.write("Děkuji za zadání");

Pro výpočet odmocniny jsme použili funkci sqrt() z knihovny Math. Tuto knihovnu a další její matematické funkce si blíže představíme později v kurzu, v lekci Práce s čísly a knihovna Math v JavaScriptu.

Kvůli přehlednosti kódu se doporučuje složené závorky používat i v případě, že je v těle podmínky jen jeden příkaz.

Větev else

Bylo by hezké, kdyby nám program vyhuboval v případě, že zadáme záporné číslo. S dosavadními znalostmi bychom napsali něco jako:

let zaklad = parseInt(prompt("Zadej nějaké číslo, ze kterého spočítám odmocninu:"));
if (zaklad >= 0) {
    document.write("Zadal jsi číslo větší nebo rovno 0, to znamená, že ho mohu odmocnit! <br />");
    let odmocnina = Math.sqrt(zaklad);
    document.write("Odmocnina z čísla " + zaklad + " je " + odmocnina + "<br />");
}
if (zaklad < 0) {
    document.write("Odmocnina ze záporného čísla neexistuje v oboru reálných čísel! <br />");
}
document.write("Děkuji za zadání");

Kód však můžeme výrazně zjednodušit pomocí klíčového slova else, které vykoná následující příkaz nebo blok příkazů v případě, že podmínka nebyla splněna:

let zaklad = parseInt(prompt("Zadej nějaké číslo, ze kterého spočítám odmocninu:"));
if (zaklad >= 0) {
    document.write("Zadal jsi číslo větší nebo rovno 0, to znamená, že ho mohu odmocnit! <br />");
    let odmocnina = Math.sqrt(zaklad);
    document.write("Odmocnina z čísla " + zaklad + " je " + odmocnina + "<br />");
} else {
    document.write("Odmocnina ze záporného čísla neexistuje v oboru reálných čísel! <br />");
}
document.write("Děkuji za zadání");

V prohlížeči se nám při správném zadání vypíše například:

Pokud ale zadáme záporné číslo, vypíše se:

Kód je mnohem přehlednější a nemusíme vymýšlet opačnou podmínku, což by v případě složené podmínky mohlo být někdy i velmi obtížné.

Klíčové slovo 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.

Přepínání hodnoty boolean proměnné

Ukažme si ještě poslední příklad. V něm budeme mít boolean proměnnou, které určíme, zda svítí světlo. Pokud ano, budeme ho chtít zhasnout. Jestliže nesvítí, budeme naopak chtít rozsvítit. Nejprve uvedeme toto řešení:

let svetloSviti = false; // na začátku je světlo zhasnuté

if (!svetloSviti) { // pokud je zhasnuto, rozsvítíme - nastavíme proměnnou na true
    svetloSviti = true;
    document.write("Světlo bylo zhasnuté, rozsvítili jsme.");
} else { // pokud se svítí, zhasneme - nastavíme proměnnou na false
    svetloSviti = false;
    document.write("Světlo bylo rozsvícené, zhasli jsme.");
}

Prohození hodnoty boolean proměnné lze však dosáhnout pomocí operátoru !. Kód výše je tedy možné zapsat takto:

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.");
}

Oba kódy do prohlížeče vypíšou:

Vzhledem k tomu, že se stav boolean proměnné pouze přepíná, není poté třeba používat if a else. Operátor ! totiž také invertuje hodnotu naší proměnné svetloSviti, tedy zajistí přepnutí z true na false a naopak.

K podmínkám se v našem kurzu ještě vrátíme a představíme si několik dalších konstrukcí.

V příští lekci, Podmínky podruhé: Konstrukce switch v JavaScriptu, se naučíme skládat podmínky pomocí logických operátorů. Dále se podíváme na využití konstrukce switch.

 

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