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.

Uživatelský vstup v JavaScriptu

Nejprve si 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:

• otázku, která se uživateli položí a
• nepovinný parametr s výchozím textem, 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:

Načítání čísel

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:

Vidíme, že se vstupy spojily jako řetězce a nesečetly jako čísla.

Parsování

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 z textu a parseFloat() pro získání desetinných čísel z textu. 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:

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 jsou často od uživatele nebo od jiných částí programu. 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 v kulaté závorce (). Pokud je výraz pravdivý, provede se následující příkaz nebo příkazy v bloku ze složených závorek {}. 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:

Pokud je příkaz jen jeden, můžeme složené závorky vynechat:

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

Protože je kód potom ale méně přehledný, obvykle se složené závorky píší vždy.

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.

Relační operátory

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

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í, na která časem narazíme.

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. Ukažme si program pro výpočet druhé odmocniny ze zadaného čísla. Jelikož ta nejde spočítat ze záporného čísla, program na začátku ověří, zda není zadáno záporné číslo:

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. Ta obsahuje i další matematické funkce, které si budeme podrobně popisovat v lekci Práce s čísly a knihovna Math v JavaScriptu.

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 s else 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é.

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

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

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