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š.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 4x (3.27 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript