switch használata a JavaScript-ben (JS switch…case)

Ebben a JS leckében megismerkedhetsz a switch feltételes utasítással (elágazással) JavaScript nyelven belül. Taglaljuk az elágazások mögött húzódó elméletet, megnézzük a switch feltételes utasítás szintaktikáját, továbbá nézünk rá konkrét példát is.

switch használata a JavaScript-ben (JS switch...case) című cikk borítóképe

switch használata a JavaScript-ben (JS switch…case)

Egy korábbi cikkünkben bemutattuk a feltételes utasításokat (angolul conditional statements), melyeket magyarul leginkább elágazásoknak nevezünk. Két nagyobb elágazástípust különböztetünk meg:

Ebben a cikkben a switch-el fogunk foglalkozni.

Mik azok az elágazások?

A valóéletben a közlekedés során, akkor beszélünk elágazásról, ha az út egyszerre több irányba halad, de mi csak az egyiken mehetünk haladhatunk tovább. Egy ilyen esetben muszáj eldöntenünk, hogy merre haladjunk tovább, hiszen egyszerre nem mehetünk két úton.

Ugyanígy kell ezt elképzelni a JavaScript programozásban található elágazások esetében is, a programunk is egy választás elé érkezik és el kell döntenie, hogy melyik úton (ágon) menjen tovább.

A valóságban is valamilyen feltételhez kötjük a továbbhaladás irányát, például, hogy melyik úton található a célunk, amerre található arra megyünk tovább.

Hasonló feltételeket kell tennünk a programozás során is, amelyet megvizsgálva a program eldönti, hogy melyik a számára megfelelő út. És csak a megfelelő úton (ágon) lévő utasításokat hajtja végre. Ezért nevezzük feltételes utasításoknak, hiszen az utasítások végrehajtását feltételekhez kötjük.

Példák elágazásokra

Elágazásokra akkor van szükségünk, amikor valamilyen feltételhez szeretnénk kötni a továbbhaladás irányát. Nézzünk pár példát, amely segíthet megérteni, hogy milyen esetekben lehet szükségünk elágazásra.

Elágazásokat használunk ezekben az esetekben is:

  • ha nem szeretnénk beengedni a weboldalunkra a 18 év alattiakat (ilyenkor megvizsgáljuk az életkorát)
  • ha tudni szeretnénk, hogy szerepel-e a szövegben egy speciális karakter vagy sem (ilyenkor az előforduló karaktereket hasonlítjuk össze az általunk keresettel)
  • ha szeretnénk szétválogatni a negatív és a pozitív számokat (azt vizsgáljuk, hogy egy szám nagyobb, vagy kisebb, mint 0)
  • ha szeretnénk ellenőrizni, hogy a megadott jelszó helyes-e (megvizsgáljuk, hogy a megadott jelszó azonos-e az általunk tárolttal)
  • ha más tartalmat szeretnénk mutatni különböző nemű személyeknek (vizsgáljuk a felhasználó nemét)
  • ha szeretnénk szétválogatni a számokat aszerint, hogy páros vagy páratlan (azt vizsgáljuk, hogy a szám 2-vel osztva ad-e vissza maradékot)

Azért hoztuk ezeket a példákat, hogy mindenki eltudja képzelni, hogy milyen helyzetekben van szükségünk elágazásokra, de természetesen még ezeken felül is rengeteg esetben van szükségünk elágazásokra.

Azt, hogy mikor van szükségünk egy elágazásra, azt mindig a helyzet hozza, de általánosságban elmondhatjuk, hogy akkor kell elágazásokat használnunk, ha szeretnénk egy feltételről eldönteni, hogy igaz-e vagy hamis, és ennek az eredményétől függően más és más utasításokat szeretnénk végrehajtani.

Például megvizsgáljuk, hogy a megadott jelszó helyes-e, ha helyes, akkor beengedjük a weboldalra, ha helytelen, akkor kizárjuk. Ebben az esetben is először megvizsgáljuk a jelszó helyességét, majd a visszakapott eredménytől függően más és más esemény következik.

switch

Akkor érdemes switch feltételes utasítást használni, amikor tudjuk a feltétel kivizsgálására esetén létrejövő lehetséges kimeneteleket, eredményeket.

Például tegyük fel, hogy várunk a felhasználótól egyetlen egy karakterleütést, de kiírtuk a képernyőre, hogy csak az X-ből, az Y-ból vagy a Z-ből választhat. Ilyenkor tudjuk az összes lehetséges bemenetet (X, Y vagy Z) a feltételre vonatkozólag. Ez azért jó, mert ilyenkor előre letudjuk programozni, hogy mi legyen a teendő X, Y vagy Z esetén.

Akkor nem érdemes használni, amikor nem tudjuk megjósolni az összes lehetséges bemenetet, vagy túl sok programozással járna a konkrét esetek felvitele. Például, ha egy konkrét szót várunk a felhasználótól, de nem adtuk meg neki, hogy miből választhat, vagy ha a születési dátumát kell megadnia a felhasználónak és az alapján szeretnénk valamit csinálni, mert rengeteg születési dátum van és az rengeteg esetet eredményezne. Egy ilyen esetben válasszuk inkább az if elágazást.

Nézzük meg a switch-case szintaxisát:

switch (KIFEJEZÉS) {
  case 1:
    UTASÍTÁSOK;
    break;
  case 2:
    UTASÍTÁSOK;
    break;
  case 3:
    UTASÍTÁSOK;
    break;
  default:
    UTASÍTÁSOK;
}
Code language: JavaScript (javascript)

A switch kulcsszó után következik a zárójelek közé egy kifejezés, aminek a lehetséges kimeneteleit szeretnénk vizsgálni Általában ez egy változó szokott lenni. A “case 1” jelöli az első lehetséges kimenetelt, a “case 2” a másodikat és így tovább. Tetszőlegesen annyi esetet, kimenetelt adhatunk meg, amennyit csak szeretnénk. A case szó után található szám helyére kell behelyettesíteni a várt értéket, majd azután egy kettőspont után az arra az esetre vonatkozó utasításokat, amit egy “break”-el kell lezárnunk, ez jelöli azt, hogy itt ér véget az erre az esetre vonatkozó kódblokk. Ha megírtuk az összes case esetünket, akkor a legvégére raknunk kell egy “default” esetet, amely abban az esetben fut le, ha a fenti esetek közül egyetlen egy sem felel meg a kifejezésünknek.

Nézzünk a switch-re (vagy switch-case) is egy példát.

JavaScript + HTML kód

<!DOCTYPE html>
 <html>
  <head>
    <script>
    
    var nap="";
    var uzenet="";
    
    function hetfo()
    {
      nap="Hétfő";
      melyikNap();
    }
    
    function kedd()
    {
      nap="Kedd";
      melyikNap();
    }
    
    function szerda()
    {
      nap="Szerda";
      melyikNap();
    }
    
    function csutortok()
    {
      nap="Csütörtök";
      melyikNap();
    }
    
    function pentek()
    {
      nap="Péntek";
      melyikNap();
    }
    
    function szombat()
    {
      nap="Szombat";
      melyikNap();
    }
    
    function vasarnap()
    {
      nap="Vasárnap";
      melyikNap();
    }
    
    
    function melyikNap()
    {
    switch(nap)
    {
    case "Hétfő":
    	uzenet = "A hét legnehezebb napja.";
        break;
    case "Kedd":
    	uzenet = "Legalább nem hétfő.";
        break;
    case "Szerda":
    	uzenet = "A hét közepe.";
        break;
    case "Csütörtök":
    	uzenet = "Már mindjárt péntek.";
        break;
    case "Péntek":
    	uzenet = "Végre péntek.";
        break;
    case "Szombat":
    	uzenet = "Végre hétvége.";
        break;
    case "Vasárnap":
    	uzenet = "Holnap már megint hétfő.";
        break;
    default:
    	uzenet = "Nem is létezik ilyen nap.";
    }
    
    document.getElementById("valasz").innerHTML = uzenet;
    }
      
    </script>
  </head>
  <body>
   Milyen nap van ma?
   
   <br><br>
   
   <button onclick="hetfo()">Hétfő</button>
   <button onclick="kedd()">Kedd</button>
   <button onclick="szerda()">Szerda</button>
   <button onclick="csutortok()">Csütörtök</button>
   <button onclick="pentek()">Péntek</button>
   <button onclick="szombat()">Szombat</button>
   <button onclick="vasarnap()">Vasárnap</button>
 
   <p id="valasz"> </p>
 </body>
</html>
Code language: HTML, XML (xml)

Eredmény

Milyen nap van ma?


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

A kód egy kicsit hosszúnak tűnik, de egyáltalán nem bonyolult, nekünk elég csak a kiemelt részre tekintenünk. Az előtte lévő kódrészlet csak annyit csinál, hogy a megnyomott gombnak megfelelő napot elmenti egy változóba, majd meghívja a switch-et tartalmazó függvényt, amely megvizsgálja a “nap” névre hallgató változót, és szépen elkezdi vizsgálgatni, hogy a “nap” nevű változónak az értéke vajon egyenlő-e hétfővel vagy sem, ha egyenlő, akkor futtatja a hozzátartozó kódokat, ha nem, akkor megy tovább, addig amíg meg nem találja a változó értékének megfelelő napot. Bár nem lett volna kötelező írni default blokkot, mert ebben az esetben nem történhet a hét nap nevének kiválasztásán kívül más nap kiválasztása, hiszen nincs olyan gomb, ami ezt lehetővé tenni, de a biztonság kedvéért írtunk egy default esetet is, ami csak akkor fut le, ha a fenti esetek közül egyik sem felelt meg a feltételnek, kifejezésnek.

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!