4. diel - Podmienky v JavaScripte
V minulej lekcii, Začíname s JavaScriptom - Prvý skripty , bola reč o dátových typoch a ich funkciách. Dnes sa v JavaScript tutoriálu budeme venovať podmienkam.
Aby sme si niečo naprogramovali, potrebujeme nejako reagovať na vstupy. Tie môžu byť buď od používateľa alebo od systému a podľa nich budeme meniť priebeh programu. Hovorí sa tomu vetvenia a používajú sa k tomu podmienky. V JavaScriptu sa podmienky píšu úplne rovnako, ako vo všetkých Clik jazykoch, pre začiatočníkov samozrejme vysvetlím. Pokročilejšie sa dnes asi budú zo začiatku nudiť, ale verím, že ku koncu to začne byť zaujímavé aj pre nich
Nasledujúci kód vypíše text "Je po šiestej hodine", ak je 18:00 a viac.
Bude fungovať až do polnoci, kedy sa hodiny dostanú na 0
a to
začne byť menšia ako 18.
let d = new Date(); if (d.getHours() >= 18) { document.write("Je po šiestej hodine."); }
Podmienka začína príkazom if
, samotný výraz v podmienke
píšeme do zátvorky a tak, ako sme zvyknutí z matematiky. Je tu však menšia
zmena v zápise (syntaxi) operátorov, viď tabuľka nižšie. Ak výraz platí,
spustí sa prvý príkaz za podmienkou. Ak nie, príkaz sa preskočí a program
pokračuje ďalej až pod ním. Ak potrebujeme spustiť viac príkazov, píšeme
ich do zložených zátvoriek. Kvôli prehľadnosti sa niekedy do zátvoriek
píše i len jeden príkaz, víz príklad vyššie.
Operátormi
Vo výrazoch môžeme využívať nasledujúcich operátorov:
operátor | C-like Zápis |
---|---|
rovnosť hodnotou | == |
Rovnosť hodnotou aj typom | === |
Je ostro väčšia | > |
Je ostro menšia | < |
Je väčšie alebo rovné | > = |
Je menšie alebo rovné | <= |
nerovnosť hodnotou | ! = |
Nerovnosť hodnotou aj typom | ! == |
Všeobecná negácia | ! |
==
preto, aby sa to neplietlo s bežným
priradením do premennej, ktoré sa robí len jedným =
. Ak chceme
nejaký výraz znegovat, napíšeme ho do zátvorky a pred neho výkričník.
Striktné operátormi
Iste vás zaujali operátormi pre rovnosť a nerovnosť hodnotou aj typom.
Niekedy sa totiž potrebujeme opýtať, či je v premennej napr. Naozaj číslo
10
a nie text "10"
. Klasická dve rovná sa
(==
) berú tieto 2 hodnoty ako zhodné. Naopak operátor
===
je vyhodnotí ako rôzne. Skúsme si to:
výsledok:
S porovnávaním rôznych dátových typov je v JavaScripte spojené veľa ďalších úskalia, ale s tým si teraz nebudeme lámať hlavu.
Skladanie podmienok
Teraz si skúsme urobiť niečo lepšie, čo už reálne k niečomu bude. Zatiaľ nevieme spracovávať moc vstupov, zostaňme teda u času. Napíšeme si skript na rozpoznanie dňa a noci. To sa môže hodiť pre pozdrav na webe ( "Dobrý večer" / "Dobrý deň") alebo dokonca pre prepínanie skinu webu na denný / nočný.
let d = new Date(); if ((d.getHours() > 5) && (d.getHours() < 18)) document.write("Dobrý deň"); else document.write("Dobrý večer");
Iste aj hovoríte, čo sú to tie 2 ampersand (``), Uveďme si preto ešte jednu tabuľku operátorov pre skladanie podmienok:
operátor | C-like Zápis |
---|---|
A zároveň | && |
alebo | || |
5
ráno a zároveň menšie ako
18
(6 večer).
Novinkou oproti minule je príkaz else
, ktorý vykoná
nasledujúci príkaz v prípade, že podmienka neplatila. To sa iste hodí, inak
by sme museli písať tú istú podmienku opačne aj pre noc.
Príkaz else
sa tiež využíva v prípade, keď potrebujeme
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 vetvy
else
. Ukážme si to na príklade: Majme číslo a
,
kde bude hodnota 0
alebo 1
a po nás sa bude chcieť,
aby sme hodnotu prehodili (ak tam je 0
, dáme tam 1
,
ak 1
, dáme tam 0
). Naivne by sme mohli kód napísať
takto:
let a = 0; // do a si priradíme na začiatku 0 if (a == 0) // ak je a 0, dáme do neho jedničku a = 1; if (a == 1) // ak je a 1, dáme doňho nulu a = 0; document.write(a);
Nefunguje to, že? Poďme si prejsť, čo bude program robiť. Na začiatku
máme v a
nulu, prvá podmienka sa určite splní a dosadí do
a
jedničku. No ale razom sa splní aj tá druhá. Čo s tým? Keď
podmienky otočíme, budeme mať ten istý problém s jednotkou. Ako z toho von?
Áno, použijeme else
.
let a = 0; // do a si priradíme na začiatku 0 if (a == 0) // ak je a 0, dáme do neho jedničku a = 1; else // ak je a 1, dáme doňho nulu a = 0; document.write(a);
Skúsme si s podmienkami pohrať tak, aby skript vedel pozdraviť
návštevníka stránok podľa dennej doby, teda "Dobré ráno", "Dobré
dopoludnia", "Dobré poludnie", "Dobré popoludnie", "Dobrý večer" ... Iste to
zvládnete, stačí vložiť viac podmienok za seba a vhodne nastaviť časy.
Nesmiete zabudnúť na použitie operátorov s rovná sa (teda
>=
, <=
). Pre tých, ktorí rovnako potrebujú
postrčiť, dám malú nápovedu, ako za seba podmienky spájať:
let d = new Date(); if ((d.getHours() >= 5) && (d.getHours() <= 9)) document.write("Dobré ráno"); else if ((d.getHours() >= 10) && (d.getHours() <= 11)) document.write("Dobré dopoludnia"); else if ((d.getHours() == 12)) document.write("Dobré poludnie"); else if ((d.getHours() >= 13) && (d.getHours() <= 17)) document.write("Dobré popoludnie"); else if ((d.getHours() >= 18 && (d.getHours() <= 21))) document.write("Dobrý večer"); else document.write("Dobrú noc");
Všimnite si, že u posledného else
už nie je žiadny
if
. Keď sa program dostane až sem, nezostáva iná možnosť,
než že je noc a je zbytočné to overovať.
Switch
Ak reagujeme na rôzne hodnoty jednej premennej, môžeme miesto sekvencie
if
- else if
použiť konštrukciu
switch
. Teoreticky môže niekedy kód sprehľadniť, aj keď by
sme sa podobnému vetvenia mali skôr vyhýbať a snažiť sa ho riešiť napr.
Pomocou polí (pozri ďalej v JavaScript kurze).
let hodnota = 2; let slovy; switch (hodnota) { case 1: slovy = "jedna"; break; case 2: slovy = "dva"; break; case 3: slovy = "tri"; break; default: slovy = "neviem"; } document.write(slovy);
Syntax vychádza z céčka a príkazy
jednotlivých vetiev sa nepíšu do zložených zátvoriek, ale oddeľujú
príkazom break
, čo je pomerne neprirodzené a dá sa na neho
ľahko zabudnúť. Ak sa nevykoná ani jeden prípad, spustí sa vetva
default:
, čo je obdobie posledného else
. Každý
switch
možno zapísať pomocou sekvencie if
-
else if
a okrem iného zápisu nám neprináša žiadnu výhodu,
zmieňujem ho len keby ste ho niekde videli alebo sa vám nejako extra
zapáčil.
Boolean
S podmienkami úzko súvisí dátový typ boolean
, ktorý v sebe
dokáže uchovávať iba 2 hodnoty - true
(pravda) alebo
false
(nepravda). Vytvorme si nejakú takú premennú:
let mameRohliky = false; let mameChleba = true;
Na hodnotu true
/ false
sa vo finále prevedie
akákoľvek podmienka, môžeme teda do premennej uložiť jej výslednú
hodnotu:
let vek = 26; let zletily = (vek >= 18); document.write(zletily);
Ak premennú typu boolean
použijeme ďalej v podmienke, je už
zbytočné pýtať sa či sa hodnota rovná true
:
if (zletily == true) // ...
a namiesto toho sa môžeme pýtať len na premennú, pretože konštrukcia
if
očakáva logický výraz, ktorý nadobúda hodnoty
true
alebo false
:
if (zletily) // ...
Prompt ()
Pretože teraz viete podmienky, iste by bolo príjemné vyskúšať si reagovať na čo najviac vstupov. Bohužiaľ zatiaľ poznáme len dátum a čas a na načítanie textu z formulárov ešte nie sme dosť skúsení.
JavaScript nám však poskytuje funkciu prompt()
, ktorá vyvolá
zobrazenie dialógu na zadanie textu. Funkcia berie 2 vstupné parametre, prvým
je otázka, ktorá sa užívateľovi položí a druhým parametrom je
predvolený text, ktorý je v poli zadaný. Druhý parameter môžeme vynechať.
Skúsme si napísať aplikáciu, ktorá zistí či je používateľ
plnoletý:
let vek = prompt("Zadaj svoj vek"); if (vek >= 18) document.write("Si plnoletý"); else document.write("Nie si plnoletý");
výsledok:
K podmienkam sa v našom kurze ešte raz vrátime a predstavíme si niekoľko
ďalších konštrukcií. Teraz myslím, že základ podmienok už vieme a
odniesli sme si užitočný script pre pozdravenie návštevníkov Navyše viete používať
prompt()
a môžete tak písať aplikácie, ktoré komunikujú s
užívateľom. V budúcej lekcii, Riešené úlohy k 4. lekcii JavaScriptu , bude reč o cykloch v
JavaScripte.
V nasledujúcom cvičení, Riešené úlohy k 4. lekcii JavaScriptu, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.
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é 1215x (3.15 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript