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 vetví a pre 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 input. Získaný text potom vypíšeme na webovú stránku:

let input = prompt("Enter some text:");
document.write("Entered text: " + input);

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

Pokiaľ zadáme ako text napríklad Hi 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("Enter first number:");
let b = prompt("Enter second number:");
document.write("The sum of the entered numbers: " + (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("Enter first number:"));
let b = parseInt(prompt("Enter second number:"));
document.write("The sum of the entered numbers: " + (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("True <br />");
}
document.write("Program continues on...");

Výstup:

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

let number = parseInt(prompt("Enter any number:"));
if (number > 5) {
    document.write("Your number is greater than 5 <br />");
}
document.write("Thank you for the assignment");

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

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

Výsledok:

Vidíme, že druhá podmienka nebola splnená a časť kódu (20 === "20" true) 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 base = parseInt(prompt("Enter any number, from which I will calculate the square root:"));
if (base >= 0) {
    document.write("The number is greater than or equal to 0, that means I can square it! <br />");
    let sqrt = Math.sqrt(base);
    document.write("The square root of the number " + base + " is " + sqrt + "<br />");
}
document.write("Thank you for the assignment");

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 lekcii Prá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 base = parseInt(prompt("Enter any number, from which I will calculate the square root:"));
if (base >= 0) {
    document.write("The number is greater than or equal to 0, that means I can square it! <br />");
    let sqrt = Math.sqrt(base);
    document.write("The square root of the number " + base + " is " + sqrt + "<br />");
}
if (base < 0) {
    document.write("The square root of a negative number does not exist in the field of real numbers! <br />");
}
document.write("Thank you for the assignment");

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 base = parseInt(prompt("Enter any number, from which I will calculate the square root:"));
if (base >= 0) {
    document.write("The number is greater than or equal to 0, that means I can square it! <br />");
    let sqrt = Math.sqrt(base);
    document.write("The square root of the number " + base + " is " + sqrt + "<br />");
} else {
    document.write("The square root of a negative number does not exist in the field of real numbers! <br />");
}
document.write("Thank you for the assignment");

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 lightShines = false; // at the beginning the light is off

if (!lightShines) { // if the light is off, we turn it on - we set the variable to true
    lightShines = true;
    document.write("The light was off, now we turned it on.");
} else { // if the light is lit, we turn it off - we set the variable to false
    lightShines = false;
    document.write("The light was on, now we turned it off.");
}

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 lightShines = false;
lightShines = !lightShines; // we switch the state of the light

if (lightShines) {
    document.write("The light was off, now we turned it on.");
} else {
    document.write("The light was on, now we turned it off.");
}

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