Pouze tento týden sleva až 80 % na e-learning týkající se Pythonu. Zároveň využij narozeninovou akci až 80 % zdarma při nákupu e-learningu - 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í.
Python week + discount 80

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:

Your page
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

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

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
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é 747x (2.7 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 Čápka
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi 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

 

 

Komentáre

Avatar
Jan Srb
Člen
Avatar
Jan Srb:13.5.2020 11:45

Super, díky moc za vyčerpávající odpověď. H.

 
Odpovedať
13.5.2020 11:45
Avatar
Jindřich Pšeničný:5.7.2020 6:25

Na rozdíl od Javy, Javascript je dynamicky typovaný jazyk. Není třeba parsovat.

Odpovedať
5.7.2020 6:25
se učit, se učit, se učit...
Avatar
Jindřich Pšeničný:5.7.2020 6:32

Omlouvám se je. Pomocí vstupu prompt to potřeba je. Zbrklý komentář.

Odpovedať
5.7.2020 6:32
se učit, se učit, se učit...
Avatar
Jiří Staniš:26.8.2021 19:54

Ahoj, v článku je uvedena tabulka operátorů a jejich význam. Pro operátor !== je zde uvedeno "Nerovnost hodnotou i typem". Předpokládám že přesnější by bylo "Nerovnost hodnotou nebo typem". Jinými slovy pokud budou typy odlišné, tak bude výsledek false.
V každém případě díky za kvalitní a přehledné zpracování tématu.

 
Odpovedať
26.8.2021 19:54
Avatar
Lubomír Berky:20.10.2021 9:21

Ahoj, mě by zajímalo
let d = new Date();
výzman toho "new"
Diky

 
Odpovedať
20.10.2021 9:21
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
Avatar
Jurajs
Člen
Avatar
Odpovedá na Lubomír Berky
Jurajs:22.10.2021 15:07

Cau, jestli se nepletu, tak to znamena - vyvtoreni noveho objektu Date ....

 
Odpovedať
22.10.2021 15:07
Avatar
Jaroslav Drobek:26. apríla 6:42

Hodnocení:

  • "Níže si uvedeme kód s využitím logického operátoru AND:" ...AND tam nikde není vidět.
  • Řetězec "Test plnoletosti" v posledním výstupu je mega, ale spadl odněkud z vesmíru, takže je trochu zneklidňující..
 
Odpovedať
26. apríla 6:42
Avatar
Odpovedá na Jaroslav Drobek
Lukáš Bartošek :16. mája 13:10

"Níže si uvedeme kód s využitím logického operátoru AND:" ...AND tam nikde není vidět.

Pravda není tam doslova řešeno že AND = &&
Ale lze si odvodit.

Řetězec "Test plnoletosti" v posledním výstupu je mega, ale spadl odněkud z vesmíru, takže je trochu zneklidňující..

Na začátku kurzu je jasně psáno že tento kurz vyžaduje absolvování kurzu HTML/CSS.
>>

Rovnou na začátku říkám, že když chcete pracovat s JavaScriptem, musíte umět alespoň základy HTML.

Takže autorovy přijde zbytečné vysvětlovat zapsání tagu jako je H1.

Odpovedať
16. mája 13:10
Nachystejte uzenáče, na snídani jsem zpátky!
Avatar
Werner Yuyong:25. mája 16:17

Supr clanek, diky

 
Odpovedať
25. mája 16:17
Avatar
Tomáš Fric
Člen
Avatar
Tomáš Fric:22. júna 20:51

V calnku je jen cast pro lajka jak psat ty kody je problem

 
Odpovedať
22. júna 20:51
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!