hu en sv en hu it hu en hu de hu ja hu hu hu hu hu hu hu hu en hu hu en hu en hu hu ar en hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu cs hu hu hu hu hu hu hu hu hu hu hu hu cs hu hu hu hu hu hu hu hu hu hu hu hu hu hu cs hu hu hu hu de hu hu hu en hu hu hu hu hu hu hu cs hu hu hu hu hu hu hu hu hu es es es tr en hu hu hu hu hu hu hu hu hu fr hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu en hu it hu en hu de hu ja hu hu hu hu hu es es es tr en hu
JavaScript elágazások (if, switch) - WEBiskola
Weboldalszerkesztő (HTML, CSS, JS kódszerkesztő) HTML-színkód generátor (Hexadecimális, RGB, HSL színkód kereső)
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.
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.
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.
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.
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.
JavaScript + HTML kód
var szamok = [-241, 41, 421, 0, 31, -31, 7, -3, 7]; var pozitivSzamok = []; function elagazas() { for (var i=0; i   0) { pozitivSzamok.push(szamok[i]); } document.getElementById("pozitiv").innerHTML = pozitivSzamok; } }       Pozitív számok:      Pozitív számok      Code language: HTML, XML (xml)
>> 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.
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.
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.
JavaScript + HTML kód
var szamok = [-241, 41, 421, 0, 31, -31, 7, -3, 7]; var pozitivSzamok = []; var nemPoizitivSzamok = []; function elagazas() { for (var i=0; i   0) { pozitivSzamok.push(szamok[i]); } else { nemPoizitivSzamok.push(szamok[i]); } document.getElementById("pozitiv").innerHTML = pozitivSzamok; document.getElementById("negativ").innerHTML = nemPoizitivSzamok; } }       Pozitív számok:     Nem pozitív számok:      Pozitív és nem pozitív számok      Code language: HTML, XML (xml)
Pozitív és 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.
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.
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.
JavaScript + HTML kód
var szamok = [-241, 41, 421, 0, 31, -31, 7, -3, 7]; var pozitivSzamok = []; var negativSzamok = []; var nullaSzamok = []; function elagazas() { for (var i=0; i   0) { pozitivSzamok.push(szamok[i]); } else if (szamok[i]       Pozitív számok:     Negatív számok:     Nulla:      Pozitív, negatív és nulla számok      Code language: HTML, XML (xml)
Pozitív, negatív és nulla számok
>> 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.
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.
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. 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.
Nézzünk a switch-re (vagy switch-case) is egy példát.
JavaScript + HTML kód
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; }       Milyen nap van ma?     Hétfő   Kedd   Szerda   Csütörtök   Péntek   Szombat   Vasárnap          Code language: HTML, XML (xml)
Milyen nap van ma?
Hétfő Kedd Szerda Csütörtök Péntek Szombat Vasárnap
>> 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.
Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!
A switch használata a JavaScript-ben (JS switch...case)
if használata a JavaScript-ben (JS if, else és else if magyarul)
Elágazások a PHP-ban (if és switch feltételes utasítás)
JavaScript alapok (A JS programozás alapjai)
#elágazások #if #JavaScript #JavaScript alapok #JavaScript alapok kezdőknek #javascript ismeretek #JavaScript programozás #JavaScript tananyag #JavaScript webfejlesztés #JavaScript webprogramozás #JS #js elágazások #switch #webfejlesztés #webprogramozás alapjai #webprogramozás alapok
Mi az a JavaScript? A JavaScript (JS) bemutatása
JavaScript használata (Hova rakjuk a JS kódot, hogyan kössük össze a HTML dokumentummal) – head, body, külső fájl
Milyen JavaScript szerkesztő programot használjak? + Letöltés
JavaScript alapok (A JS programozás alapjai)
JavaScript változók és konstansok (var, let és const magyarul)
Tömbök a JavaScript-ben (Tömbök magyarázata, létrehozása, elemek hozzáadása, módosítása, törlése, indexelés, tömb hosszának megállapítása)
Műveletek string-ekkel a JavaScript-ben (JS string metódusok, függvények, tulajdonságok)
JavaScript ciklusok, azaz JS iterációk (for, while, do while)
A for ciklus használata a JavaScript-ben (JS for iteráció elmélet, szintaktika, példa)
JavaScript while ciklus bemutatása (JS while és do while iteráció szintaktika, példa)
JavaScript operátorok ismertetése (JS aritmetikai, értékadó, összehasonlító, logikai, bitenkénti és típus operátor bemutatása)
JavaScript logikai változó (JS boolean magyarul)
JavaScript elágazások (if, switch)
if használata a JavaScript-ben (JS if, else és else if magyarul)
A switch használata a JavaScript-ben (JS switch…case)
JavaScript alert használati útmutató (JS felugró ablak)
JavaScript getElementBy és innerHTML használata (Szöveg írása HTML dokumentumba JS segítségével)
JavaScript függvények, eljárások, metódusok (JS függvény fogalma, létrehozása, meghívása)
JavaScript események (JS event magyarul)
JavaScript onclick esemény (JavaScript függvény meghívása kattintáskor, gomb megnyomásakor)
JavaScript objektumok fogalma, létrehozása, használata (Objektum tulajdonságok és metódusok szintaxisa + példa)
JavaScript JSON használata, készítése, feldolgozása, beolvasása
Random, véletlenszám generálása JavaScript-ben (JS Math.random() és Math.floor() magyarul)
Kliensoldali űrlapellenőrzés: űrlapmezők ellenőrzése HTML és JavaScript segítségével
A legjobb JavaScript keretrendszerek (17 JS framework)