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 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
A switch használata a JavaScript-ben (JS switch...case) - WEBiskola
Weboldalszerkesztő (HTML, CSS, JS kódszerkesztő) HTML-színkód generátor (Hexadecimális, RGB, HSL színkód kereső)
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.
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.
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.
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.
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.
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.
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. <<
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!
JavaScript elágazások (if, switch)
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ás #elágazások #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)