if használata a JavaScript-ben (JS if, else és else if magyarul)

Előző cikkünkben megismerkedtünk a két legfontosabb feltételes utasítással, melyek az

if (vagy if-else)
switch

Jelen cikkünkben az if elágazással fogunk kiváltképp foglalkozni.

Tartalomjegyzék

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 haladhat, de mi csak az egyiken folytathatjuk az utunkat.

Ugyanígy kell ezt elképzelni a JavaScript-ben (és a programozásban) található elágazások esetében is, a programunk egy választás elé érkezik és el kell döntenie, hogy merre 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 kisbolt, ahová elszeretnénk jutni. Ha a kisbolt balra található, akkor értelemszerűen nem jobbra fogunk menni.

Valahogy így kell ezt elképzelni a JavaScript-ben is: hasonló feltételeket kell tennünk a programozás során, amelyet megvizsgálva a program eldönti, hogy melyik a számára megfelelő út. Ezeket az utakat a programozásban ágaknak hívjuk.

Mikor kell elágazást használni?

Akkor kell elágazást használni, 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.

Ezekben az esetekben célszerű elágazásokat használni:

ha szeretnénk megvizsgálni, hogy a megadott jelszó helyes-e
ha szeretnénk szétválogatni a pozitív és a negatív számokat
ha más tartalmat szeretnénk mutatni a különböző nemű személyeknek
ha például nem szeretnénk beengedni a weboldalunkra a 18 évnél fiatalabbakat
ha érdekel, hogy egy egy speciális karakter szerepel-e a szövegben vagy sem
ha szeretnénk szétválogatni a számokat aszerint, hogy páros vagy páratlan

Ezek valójában nagyon sarkított helyzetek, csak azért hoztuk ezeket a példákat, hogy el tudjátok képzelni, hogy milyen esetekben célszerű elágazásokat alkalmazni. Természetesen ezeken felül még millió és egy esetben szoktak elágazásokat használni.

Összefoglalva az eddigieket azt mondhatjuk, hogy akkor kell elágazást használnunk, ha egy feltétel eredményétől függően más és más műveletsort 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

Az if elágazás a programozás során leggyakrabban előforduló elágazásfajta. Szokás még if-else elágazásnak is nevezni.

Egy if-else feltételes utasítás alapesetben egyetlen egy ágból áll, de ez szabadon bővíthető kettőre, háromra, négyre vagy akár 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.

Szintaktika egyetlen egy utasítással:

if (FELTÉTEL) UTASÍTÁS;

Ha egyetlen egy sor utasításunk van, akkor nem szükséges utasításblokkot nyitnunk a kódunknak „{„, „}” jelekkel. A kapcsos zárójelezést el is hagyhatjuk. Nem kötelező elhagyni, de nyugodtan megtehetjük.

Nagyon fontos, hogy a kapcsos zárójeleket csak abban az esetben hagyhatjuk el, ha a feltétel teljesülésére vonatkozó kód csak egyetlen egy utasításból áll.

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, így a tömb összes elemét megtudjuk vizsgálni. Ebben a példában csak a pozitív számokat szerettük volna kiválogatni egy tömbbe, a negatív számokra nem volt szükségünk, így csak egy egyágú if elágazást használtunk.

else elágazás

Ha az if elágazásunkhoz szeretnénk hozzáadni egy hamis ágat is, akkor az else-re lesz szükségünk. Akkor van hamis ágra szükségünk, ha azt szeretnénk elérni, hogy ha nem teljesül az igaz ág, akkor is legyen egy kódrészlet ami lefut. Azaz más kódok fussanak le, ha az illető idősebb és más kódok, ha fiatalabb, mint 18 éves.

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.

if (FELTÉTEL) IGAZ.UTASÍTÁS;
else HAMIS.UTASÍTÁS;
Code language: CSS (css)

Ebben az esetben is kiegészíthetjük a kódot úgy, hogy elhagyjuk a kapcsos zárójeleket. Természetesen csak abban az esetben, ha az if és else kulcsszavakat csak egyetlen egy utasítás követi.

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é á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 viszont nem pozitív. De még mindig nem jelenthetjük ki, hogy negatív, hiszen 0 is lehet. Ezt a harmadik elágazást egy else if-el érhetjük el.

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, amely újabb ágakat helyez el az elágazásunkban. 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.

Szintaktika abban az esetben, amikor csak egysoros utasításokat írunk

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)

Természetesen else if-ek használata esetén is elhagyhatjuk egysoros kódok esetén a kapcsos zárójelezést.

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)