Lekce 5 - 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:
![Prompt dialog v JavaScriptu - Základní konstrukce jazyka JavaScript](images/5/js/js_prompt-text.png)
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š.
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 1211x (3.15 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript