Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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 !
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 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:

/---code js if (10 == "10") document.write('10 == "10" platí'); if (10 === "10") document.write('10 === "10" platí'); \---

výsledok:

Tvoja stránka
localhost

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 ||
S tým si zatiaľ vystačíme, operátorov sa pomocou zátvoriek samozrejme dajú kombinovať. Kód vyššie teda vypíše "Dobrý deň" ak je aktuálny hodina väčšia ako 5 ráno a zároveň menšie ako 18 (6 večer).
Pozdrav v JavaScripte
localhost

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:

Prompt dialóg v JavaScripte - Základné konštrukcie jazyka JavaScript
Plnoletosť v JavaScripte
localhost

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é 1199x (3.15 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript

 

Predchádzajúci článok
Začíname s JavaScriptom - Prvý skripty
Všetky články v sekcii
Základné konštrukcie jazyka JavaScript
Preskočiť článok
(neodporúčame)
Riešené úlohy k 4. lekcii JavaScriptu
Článok pre vás napísal David Hartinger
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity