JavaScript elágazások (if, switch)
Ebben a cikkünkben a feltételes utasításokról (angolul conditional statements) lesz szó, melyeket magyarul leginkább elágazásoknak nevezünk. Két nagyobb elágazástípust különböztetünk meg:
- if
- switch
Ezt a két elágazást, illetve az előbbihez tartozó speciális eseteket fogjuk bemutatni ebben a JavaScript leckében.
Mik azok az elágazások?
A közlekedés során, akkor beszélünk elágazásról, ha egy választás elé érkeztünk, ahol el kell döntenünk, hogy merre haladjunk tovább. Az út több irányba halad, de mi csak az egyiken mehetünk egyszerre.
Ugyanígy kell ezt elképzelni a JavaScript-ben (és a 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 merre halad 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.
Mikor használunk elágazásokat?
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 az alábbi esetekben is:
- ha más tartalmat szeretnénk mutatni különböző nemű személyeknek
- ha szeretnénk szétválogatni a számokat aszerint, hogy páros vagy páratlan
- ha szeretnénk szétválogatni a negatív és a pozitív számokat
- ha nem szeretnénk beengedni a weboldalunkra a 18 év alattiakat
- szerepel-e a szövegben egy speciális karakter vagy sem
- a megadott jelszó helyes-e
Ezek rémegyszerű helyzetek, csak azért hoztuk ezeket a példákat, hogy érthető legyen a helyzet. Természetesen ezeken felül még millió és egy esetben szoktak elágazásokat használni.
Szóval azt mondhatjuk, 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 dolgot szeretnénk elvégezni.
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.
if elágazás
Elsőnek ismerkedjünk meg az if elágazással, mely a leggyakrabban használt elágazás.
Egy if elágazás alapesetben egyetlen egy ágból áll, de ez opcionálisan bővíthető kettőre, háromra vagy akár sokkal többre is.
Kezdjük az alapesettel, amikor csak egyetlen egy ág van, ez az egyetlen egy ág csak akkor fog lefutni, ha a feltétel teljesül, azaz igaz értékkel tér vissza.
Szintaktika
if (FELTÉTEL) {
IGAZ ÁG
}
Ebben az esetben csak egyetlen egy águnk van, ami szembe megy a fent említett dolgokkal, hogy különböző ágak futnak le a feltételtől függően. De ha egy kicsit jobban belegondolunk, akkor láthatjuk, hogy nem teljesen hazudtunk fentebb, hiszen itt egy feltételhez kötjük azt, hogy arra a bizonyos egyetlen egy ágra bemenjen-e a programunk vagy sem.
Abban az esetben érdemes az egy ágú if elágazást használni, ha csak egyetlen egy feltétel alapján szeretnénk szűrni. Például szeretnénk kigyűjteni csak azokat a személyeket, akik Budapesten élnek, de azok akik nem, azokkal most nem szeretnénk semmit sem kezdeni.
Fontos, hogy az if szót teljesen kisbetűvel írjuk, másképp JavaScript hibát fogunk kapni.
Példa
JavaScript + HTML kód
<!DOCTYPE html>
<html>
<head>
<script>
var szamok = [-241, 41, 421, 0, 31, -31, 7, -3, 7];
var pozitivSzamok = [];
function elagazas() {
for (var i=0; i < szamok.length; i++)
{
if (szamok[i] > 0)
{
pozitivSzamok.push(szamok[i]);
}
document.getElementById("pozitiv").innerHTML = pozitivSzamok;
}
}
</script>
</head>
<body>
Pozitív számok: <p id="pozitiv"> </p>
<button onclick="elagazas()">Pozitív számok</button>
</body>
</html>
Code language: HTML, XML (xml)Eredmény
Pozitív számok:
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
A fenti példában egy for ciklusba helyeztük el az if elágazást, hogy a tömb összes elemét megtudjuk vizsgálni. Ebben a példában csak a pozitív számokat szerettem volna kiválogatni egy tömbbe, a negatív számokra nem volt szükségem, így csak egy egyágú if elágazást használtam.
else elágazás
Ez még mindig az if elágazáshoz tartozik, de ha szeretnénk hozzáadni egy hamis ágat is, akkor az else-re lesz szükségünk.
Szintaktika
if (FELTÉTEL)
{
IGAZ ÁG
}
else
{
HAMIS ÁG
}
Code language: JavaScript (javascript)Ebben az esetben csak egy else ággal egészült ki az előző szintaktika. A program megvizsgálja, hogy teljesül-e a feltétel, ha teljesül, akkor az igaz ág, ha nem teljesül, akkor a hamis ág fog lefutni.
Példa
JavaScript + HTML kód
<!DOCTYPE html>
<html>
<head>
<script>
var szamok = [-241, 41, 421, 0, 31, -31, 7, -3, 7];
var pozitivSzamok = [];
var nemPoizitivSzamok = [];
function elagazas() {
for (var i=0; i < szamok.length; i++)
{
if (szamok[i] > 0)
{
pozitivSzamok.push(szamok[i]);
}
else
{
nemPoizitivSzamok.push(szamok[i]);
}
document.getElementById("pozitiv").innerHTML = pozitivSzamok;
document.getElementById("negativ").innerHTML = nemPoizitivSzamok;
}
}
</script>
</head>
<body>
Pozitív számok: <p id="pozitiv"> </p>
Nem pozitív számok: <p id="negativ"> </p>
<button onclick="elagazas()">Pozitív és nem pozitív számok</button>
</body>
</html>
Code language: HTML, XML (xml)Eredmény
Pozitív számok:Nem pozitív számok:
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Ebben a példában már sikerült kétfelé elágaztatnunk a programkódunkat. Megvizsgáltuk, hogy a számunk nagyobb-e, mint 0, ha ez igaz, akkor pozitív lesz a szám, ha hamis, akkor nem pozitív.
else if elágazás
Ha a felső két elágaztatás nem lenne elég, mint ahogy nekünk sem elég most, mert a 0 se nem negatív, se nem pozitív, akkor lehetőségünk van használni az else if elágazást. Ez korlátlan mennyiségben felhasználható, de nekünk elegendő lesz most csak egyetlen egyszer használnunk, mert már csak a 0 számjegyet kell külön válogatnunk.
Szintaktika
if (FELTÉTEL1)
{
//HA A FELTÉTEL1 IGAZ
}
else if (FELTÉTEL2)
{
//HA A FELTÉTEL1 HAMIS, DE A FELTÉTEL2 IGAZ
}
else
{
//HA A FELTÉTEL1 ÉS A FELTÉTEL2 IS HAMIS
}
Code language: PHP (php)Fontos, hogy az else if csak az if és az else közé kerülhet, azaz nem cserélődhet fel a sorrend.
Továbbá, ahogy már fentebb is írva volt bármennyi else if elágazás használható, nem csak egyetlen egy.
Példa
JavaScript + HTML kód
<!DOCTYPE html>
<html>
<head>
<script>
var szamok = [-241, 41, 421, 0, 31, -31, 7, -3, 7];
var pozitivSzamok = [];
var negativSzamok = [];
var nullaSzamok = [];
function elagazas() {
for (var i=0; i < szamok.length; i++)
{
if (szamok[i] > 0)
{
pozitivSzamok.push(szamok[i]);
}
else if (szamok[i] < 0)
{
negativSzamok.push(szamok[i]);
}
else
{
nullaSzamok.push(szamok[i]);
}
document.getElementById("pozitiv").innerHTML = pozitivSzamok;
document.getElementById("negativ").innerHTML = negativSzamok;
document.getElementById("nulla").innerHTML = nullaSzamok;
}
}
</script>
</head>
<body>
Pozitív számok: <p id="pozitiv"> </p>
Negatív számok: <p id="negativ"> </p>
Nulla: <p id="nulla"> </p>
<button onclick="elagazas()">Pozitív, negatív és nulla számok</button>
</body>
</html>
Code language: HTML, XML (xml)Eredmény
Pozitív számok:Negatív számok:
Nulla:
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Ezzel a megoldással már tökéletesen háromfelé válogattuk a számokat.
switch
A switch alkalmazása abban az esetben lehet indokolt, amikor tudjuk a feltétel kivizsgálására vonatkozó lehetséges eredményeket, értékeket.
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 és az Y-ból választhat. Ilyenkor tudjuk az összes lehetséges bemenetet a feltételre vonatkozólag. Ez azért jó, mert ilyenkor előre letudjuk programozni, hogy mi legyen a teendő X vagy Y esetén.
Akkor nem érdemes használni, amikor például 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.
A switch-case szintaxisa
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. A "case 1" jelöli az első lehetséges kimenetelt, a "case 2" a másodikat és így tovább. Tetszőlegesen annyi esetet adhatunk meg, amennyit csak szeretnénk. A "case" kulcsszó után jönnek az arra az esetre vonatkozó utasítások, 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.
Switch (vagy switch-case) példa
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. <<
Nem kell ettől a nagyon hosszú kódtól megijedni, igazából csak a kiemelt résszel kell foglalkoznunk. Az előtte lévő részek csak annyit csinálnak, hogy a megnyomott gombnak megfelelő napot elmentjük egy változóba, majd meghívjuk a switch-et futtató függvényt, melyben megvizsgáljuk a "nap" névre hallgató változót, és szépen elkezdjük vizsgálgatni, hogy a "nap" nevű változónak az értéke vajon egyenlő-e hétfővel vagy sem, ha egyenlő, akkor futtatjuk a hozzátartozó kódokat, ha nem, akkor megyünk tovább míg meg nem találjuk 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 eshetőség, de a biztonság kedvéért írtunk egyet, ami csak akkor fut le, ha a fenti esetek közül egyik sem felelt meg a feltételünknek, kifejezésünknek.
