7. diel - Podmienky druhýkrát: Konštrukcia switch v JavaScripte

V predchádzajúcom cvičení, Riešené úlohy k 6. lekcii JavaScriptu, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

V dnešnom tutoriále základov JavaScriptu sa naučíme skladať podmienky za pomoci logických operátorov. Následne sa pozrieme na konštrukciu switch a používanie boolean premenných v podmienkach.

Skladanie podmienok

Podmienky je možné skladať, a to pomocou dvoch základných logických operátorov:

Operátor	C-like Zápis
A zároveň	&&
Alebo	||

Znak & alebo ampersand napíšeme pomocou klávesy pravý Alt a C. Uvedieme si rovno aj znak | (tzv. pipe alebo rúrka), ktorý sa napíše pomocou pravého Alt a písmena W:

Uveďme si jednoduchý príklad:

Uvedený kód vypíše Dobrý den pokiaľ je aktuálna hodina väčšia ako 5 ráno a zároveň menšia ako 18 (6 večer):

S tým si zatiaľ vystačíme, operátory sa pomocou zátvoriek samozrejme dajú kombinovať:

Pozdrav na web

Vráťme sa ale k nášmu pozdravu na webe. Skúsme sa s podmienkami pohrať tak, aby skript vedel pozdraviť návštevníka stránok podľa dennej doby. Budeme teda vypisovať pozdravy Dobré ráno, Dobré dopoledne, Dobré poledne, Dobré odpoledne, Dobrý večer a Dobrou noc. Iste to zvládneme, stačí vložiť viac podmienok za seba a vhodne nastaviť časy. Nesmieme zabudnúť na použitie operátorov s rovná sa (teda >=, <=):

Všimnime si, že u posledného else už nie je žiadne if. Akonáhle sa program dostane až sem, nezostáva iná možnosť, než že je noc a je zbytočné to overovať.

Konštrukcia switch

Pokiaľ v podmienkach reagujeme na rôzne hodnoty jednej premennej, môžeme namiesto sekvencie if - else if použiť konštrukciu switch. Konštrukcia switch je optimálna pre situácie, keď máme jednu premennú nadobúdajúcu mnoho možných hodnôt a chceme na základe tejto hodnoty vykonať rôzne akcie. Sekvencia if a else je oproti tomu flexibilnejšia v tom zmysle, že umožňuje kombinovať viacero rôznych podmienok a logických operátorov.

Príklad s else if

Konštrukcia switch nám v niektorých prípadoch umožňuje (relatívne) zjednodušiť zápis viacerých podmienok pod sebou. Ukážme si príklad, kedy chceme prepísať číslo slovami. Bez konštrukcie switch by sme napísali kód podobný tomuto:

Všimnime si, že sme premennou slovy deklarovali na začiatku, len tak do nej môžeme potom priraďovať. Keby sme ju deklarovali pri každom priradení, kód by vyhodil chybu. Premenná môže byť deklarovaná (založená v pamäti) vždy len raz.

Program by v tomto prípade fungoval rovnako aj bez tých else, ale načo sa ďalej pýtať, ak sme už našli zodpovedajúcu hodnotu.

Riešenie pomocou konštrukcie switch

Teraz si skúsime napísať ten istý kód pomocou konštrukcie switch. Pretože funkcia prompt() vracia užívateľský vstup ako textový reťazec, využijeme funkciu parseInt(), ktorá nám vráti celé číslo. Na získanie desatinného čísla by sme použili funkciu parseFloat():

Syntax vychádza z jazyka C a príkazy jednotlivých vetiev sa nepíšu do zložených zátvoriek. Oddeľujú sa príkazom break, ktorý spôsobí vyskočenie z celej konštrukcie switch. To môže byť pre začiatočníkov neprirodzené a dá sa na to ľahko zabudnúť. Pokiaľ sa nevykoná ani jeden prípad, spustí sa vetva default, čo je obdobou posledného else.

Podmienky a dátový typ boolean

Z lekcie Základné dátové typy v JavaScripte poznáme dátový typ boolean, ktorý nadobúda iba hodnoty true (pravda) alebo false (nepravda). Na hodnotu true alebo false sa prevedie aj akákoľvek podmienka, do premennej typu boolean môžeme teda uložiť podmienku a získať tak jej výslednú hodnotu:

Pokiaľ premennú typu boolean použijeme ďalej v podmienke, je už zbytočné pýtať sa, či sa rovná true:

Namiesto toho do podmienky zapíšeme samotnú premennú alebo jej negáciu:

Ukážme si to prakticky:

Prepínanie hodnoty boolean premennej

Ukážme si ešte posledný príklad. V ňom budeme mať premennú, ktoré určíme, či svieti svetlo. Ak áno, budeme ho chcieť zhasnúť. Ak nesvieti, budeme naopak chcieť rozsvietiť. Najprv uvedieme toto riešenie:

Prehodenie hodnoty boolean premennej je však možné dosiahnuť pomocou operátora !. Kód vyššie je teda možné zapísať takto:

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 svetloSviti, teda zaistí prepnutie z true na false a naopak.

V nasledujúcom cvičení, Riešené úlohy k 7. 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š.