5. diel - Podmienky v JavaScripte

V predchádzajúcom kvíze, Kvíz - Textové reťazce v JavaScripte, sme si overili nadobudnuté skúsenosti z predchádzajúcich lekcií.

V dnešnom tutoriále základov JavaScriptu sa budeme venovať podmienkam. Vďaka nim môžeme reagovať na rôzne situácie a riadiť, ako sa naša aplikácia chová. Môže to byť napríklad hodnota zadaná užívateľom, podľa ktorej budeme chcieť meniť ďalší beh programu. Hovoríme, že sa program konárov a vetvenia používame podmienky.

Podmienky v JavaScripte

Podmienky umožňujú rozhodovať, aký kód sa vykoná v závislosti od splnenia určitých vstupov. Tie môžu byť buď od užívateľa, alebo od systému. Najprv si teda ukážeme, ako získať vstup od používateľa a potom s ním budeme ďalej pracovať.

Funkcia prompt()

Na získanie užívateľského vstupu nám JavaScript poskytuje funkciu prompt(), ktorá vyvolá zobrazenie dialógového okna na zadanie textu. Funkcia berie dva vstupné parametre. Prvým je otázka, ktorá sa užívateľovi položí. Druhý parameter nie je povinný, môžeme v ňom uviesť východiskový text, ktorý bude v poli zadaný.

V nasledujúcom príklade požiadame používateľa, aby zadal nejaký text, ktorý uložíme do premennej vstup. Získaný text potom vypíšeme na webovú stránku:

let vstup = prompt("Zadajte nejaký text:");
document.write("Zadaný text: " + vstup);

Dialógové okno zobrazené pomocou funkcie prompt() potom vyzerá takto:

Pokiaľ zadáme ako text napríklad Ahoj a potvrdíme tlačidlom OK, v prehliadači sa nám vypíše:

Vstup, ktorý používateľ v dialógovom okne zadá, sa nám vracia ako textový reťazec. Skúsme si nechať zadať dve čísla a sčítať ich:

let a = prompt("Zadaj prvé číslo:");
let b = prompt("Zadaj druhé číslo:");
document.write("Súčet zadaných čísel: " + (a + b));

Pokiaľ teraz zadáme zakaždým číslo 1 dostaneme v prehliadači tento výsledok:

Ak teda chceme pomocou funkcie prompt() načítať číslo, je nutné vykonať konverziu, čiže parsovaní. Na to slúži funkcia parseInt() na získanie celého čísla a parseFloat() na získanie desatinných čísel. Aby predošlý príklad vracal správny výsledok, vložíme funkciu prompt() do funkcie parseInt():

let a = parseInt(prompt("Zadaj prvé číslo:"));
let b = parseInt(prompt("Zadaj druhé číslo:"));
document.write("Súčet zadaných čísel: " + (a + b));

V prehliadači sa nám už zobrazí správny výsledok:

Teraz si ukážeme, ako na zadaný vstup reagovať pomocou podmienky.

Jednoduchá podmienka - if

Podmienky zapisujeme pomocou kľúčového slova if, za ktorým nasleduje logický výraz. Ak je výraz pravdivý, vykoná sa nasledujúci príkaz. Pokiaľ nie, nasledujúci príkaz sa preskočí a pokračuje sa až pod ním. Vyskúšajme si to:

if (15 > 5) {
    document.write("Pravda <br />");
}
document.write("Program tu pokračuje ďalej");

Výstup:

Súčasťou výrazu samozrejme môže byť aj premenná:

let cislo = parseInt(prompt("Zadaj nejaké číslo:"));
if (cislo > 5) {
    document.write("Zadal si číslo väčšie ako 5 <br />");
}
document.write("Ďakujem za zadanie");

Keď zadáme číslo väčšie ako 5, vypíše sa v prehliadači:

Ak by sme zadali menšie číslo alebo nečíselný vstup, vypíše sa iba druhá veta.

Podmienka teda začína príkazom if a nasleduje logický výraz, ktorý píšeme do zátvorky. Pokiaľ výraz platí, spustí sa prvý príkaz za podmienkou, v opačnom prípade sa preskočí. Program potom pokračuje ďalej až pod ním.

Relačné operátory

Ukážme si teraz relačné operátory, ktoré môžeme vo výrazoch používať:

Operátor	C-like Zápis
Rovnosť hodnotou	==
Rovnosť hodnotou aj typom	===
Je ostro väčšia	>
Je ostro menší	<
Je väčšia alebo rovná	>=
Je menšia alebo rovná	<=
Nerovnosť hodnotou	!=
Nerovnosť hodnotou alebo typom	!==
Všeobecná negácia	!

Rovnosť zapisujeme dvoma == preto, aby sa to neplietlo s bežným priradením do premennej, ktoré sa robí len jedným =. Ak chceme nejaký výraz znegovať, napíšeme ho do zátvorky a pred neho výkričník !.

Striktné operátory

V tabuľke vyššie je uvedený operátor pre rovnosť hodnotou aj typom. Niekedy sa totiž potrebujeme opýtať, či je v premennej skutočne číslo 10 a nie text "10". Operátor == berie tieto dve hodnoty ako zhodné, naopak striktný operátor === ich vyhodnotí ako rôzne. Skúsme si to:

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

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

Výsledok:

Vidíme, že druhá podmienka nebola splnená a časť kódu (20 === "20" platí) sa nevypísala.

S porovnávaním rôznych dátových typov je v JavaScripte spojených množstvo ďalších úskalí, ale s tým si teraz nebudeme lámať hlavu.

Blok príkazov

Keď budeme chcieť vykonať viac ako len jeden príkaz, musíme príkazy vložiť do bloku zo zložených zátvoriek:

let zaklad = parseInt(prompt("Zadaj nejaké číslo, z ktorého spočítam odmocninu:"));
if (zaklad >= 0) {
    document.write("Zadal si číslo väčšie alebo rovné 0, to znamená, že ho môžem odmocniť! <br />");
    let odmocnina = Math.sqrt(zaklad);
    document.write("Odmocnina z čísla " + zaklad + " je " + odmocnina + "<br />");
}
document.write("Ďakujem za zadanie");

Na výpočet odmocniny sme použili funkciu sqrt() z knižnice Math. Túto knižnicu a ďalšie jej matematické funkcie si bližšie predstavíme neskôr v kurze, v lekciiPráca s číslami a knižnica Math v JavaScripte.

Kvôli prehľadnosti kódu sa odporúča zložené zátvorky používať aj v prípade, že je v tele podmienky iba jeden príkaz.

Vetva else

Bolo by pekné, keby nám program vyhuboval v prípade, že zadáme záporné číslo. S doterajšími znalosťami by sme napísali niečo ako:

let zaklad = parseInt(prompt("Zadaj nejaké číslo, z ktorého spočítam odmocninu:"));
if (zaklad >= 0) {
    document.write("Zadal si číslo väčšie alebo rovné 0, to znamená, že ho môžem odmocniť! <br />");
    let odmocnina = Math.sqrt(zaklad);
    document.write("Odmocnina z čísla " + zaklad + " je " + odmocnina + "<br />");
}
if (zaklad < 0) {
    document.write("Odmocnina zo záporného čísla neexistuje v obore reálnych čísel! <br />");
}
document.write("Ďakujem za zadanie");

Kód však môžeme výrazne zjednodušiť pomocou kľúčového slova else, ktoré vykoná nasledujúci príkaz alebo blok príkazov v prípade, že podmienka nebola splnená:

let zaklad = parseInt(prompt("Zadaj nejaké číslo, z ktorého spočítam odmocninu:"));
if (zaklad >= 0) {
    document.write("Zadal si číslo väčšie alebo rovné 0, to znamená, že ho môžem odmocniť! <br />");
    let odmocnina = Math.sqrt(zaklad);
    document.write("Odmocnina z čísla " + zaklad + " je " + odmocnina + "<br />");
} else {
    document.write("Odmocnina zo záporného čísla neexistuje v obore reálnych čísel! <br />");
}
document.write("Ďakujem za zadanie");

V prehliadači sa nám pri správnom zadaní vypíše napríklad:

Pokiaľ ale zadáme záporné číslo, vypíše sa:

Kód je oveľa prehľadnejší a nemusíme vymýšľať opačnú podmienku, čo by v prípade zloženej podmienky mohlo byť niekedy aj veľmi ťažké.

Kľúčové slovo else sa tiež využíva v prípade, keď potrebujeme v príkaze manipulovať s premennou z podmienky a nemôžeme sa na ňu teda pýtať potom znova. Program si sám pamätá, že sa podmienka nesplnila a prejde do sekcie else. Ukážme si to na príklade.

Prepínanie hodnoty boolean premennej

Ukážme si ešte posledný príklad. V ňom budeme mať boolean premennú, ktoré určíme, či svieti svetlo. Ak áno, budeme ho chcieť zhasnúť. Ak nesvieti, budeme naopak chcieť rozsvietiť. Najprv uvedieme toto riešenie:

let svetloSviti = false; // na začiatku je svetlo zhasnuté

if (!svetloSviti) { // ak je zhasnuté, rozsvietime - nastavíme premennú na true
    svetloSviti = true;
    document.write("Svetlo bolo zhasnuté, rozsvietili sme.");
} else { // ak sa svieti, zhasneme - nastavíme premennú na false
    svetloSviti = false;
    document.write("Svetlo bolo rozsvietené, zhasli sme.");
}

Prehodenie hodnoty boolean premennej je však možné dosiahnuť pomocou operátora !. Kód vyššie je teda možné zapísať takto:

let svetloSviti = false;
svetloSviti = !svetloSviti; // prepíname stav lampičky

if (svetloSviti) {
    document.write("Svetlo bolo zhasnuté, rozsvietili sme.");
} else {
    document.write("Svetlo bolo rozsvietené, zhasli sme.");
}

Oba kódy do prehliadača vypíšu:

Vzhľadom k tomu, že sa stav boolean premennej iba prepína, nie je potom potrebné používať if a else. Operátor ! totiž tiež invertuje hodnotu našej premennej svetloSviti, teda zaistí prepnutie z true na false a naopak.

K podmienkam sa v našom kurze ešte vrátime a predstavíme si niekoľko ďalších konštrukcií.

V budúcej lekcii, Podmienky druhýkrát: Konštrukcia switch v JavaScripte , sa naučíme skladať podmienky pomocou logických operátorov. Ďalej sa pozrieme na využitie konštrukcie switch.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.