Elágazás, If-else. Az If utasítást feltételek kiértékelésére használjuk.
Szintaktika:
|
1 2 3 |
if (feltétel) { Utasítások, amelyek akkor futnak le, ha a feltétel igaz } |
Figyelni kell a kapcsos zárójelekre, és az átlátható tagolásra.
|
1 2 3 4 5 6 7 |
<script> var eletkor = 20; if( eletkor > 18 ) { document.write("Ön már várásolhat alkoholos terméket."); } </script> |
Bővítsük egy plusz ággal a feltételünket, mi van akkor, ha egy állítás hamis…
|
1 2 3 4 5 6 7 8 |
if (feltétel) { utasítások, ha a feltétel igaz } else { utasítások, ha a feltétel hamis } |
Döntsük el egy számról, hogy páros, vagy páratlan! A kiértékeléstől függően írjuk ki a „páros”, vagy „páratlan” szöveget. (Egy szám páros, ha kettővel osztva a maradék = 0)
|
1 2 3 4 5 |
var a = 42; if (a %2 == 0) // maradékos osztás { document.write(a, 'szám páros<br>');// akkor fut le, ha az állítás IGAZ } |
Az if utasítás után zárójelben egy olyan állítást kell megadnunk, amelynek logikai eredménye lesz (igaz/hamis). Az a % 2 művelet után álló „==” jelentése: egyenlő-e? Ne keverjük össze az „=” jellel, amely értékadást takar. Ez egy kérdés, amely igaz, vagy hamis(lásd: „relációs operátorok”függelék).A feltétel után írt „{ }”jelek közé írt utasítások akkor futnak le, ha a feltétel igaz, ellenkező esetben a fordító átugorja a blokkot (a kapcsos zárójel közé tett részt). A változó értékét páratlanra módosítva a mintaprogram nem ír ki semmit. Oldjuk meg a páratlan érték felismerését:
|
1 2 3 4 5 6 |
var a = 42; if (a % 2 == 0){ document.write(a, 'szám páros<br>'); } else { document.write(a, 'szám páratlan<br>'); } |
Az else után írt blokkban lévő utasítások akkor futnak le,ha az if után írt feltétel hamisnak bizonyult.
Kérjük be a változó értékét futás közben:
|
1 2 3 4 5 6 |
var a = parseinf(prompt('Kérek egy számot','0')); //átalakítjuk numerikus adattá if (a % 2 == 0) { document.write(a, 'szám páros<br>'); } else { document.write(a, 'szám páratlan<br>'); } |
Egy kicsit összetettebb példa következik. Alap feladat: bekérünk egy számot a felhasználótól, és eldöntjük, páros, vagy páratlan szám-e. De vizsgáljuk azt a lehetőséget is, ha esetleg nem számot, vagy nem egész számot ír be.
Az isFinite() beépített függvény logikai igaz értéket ad vissza, ha a paramétere szám típus.
|
1 2 3 4 5 6 7 8 9 |
var a = prompt('Kérek egy számot','0'); if (isFinite(a)) { if (a % 2 == 0) { document.write(a, ' szám páros '); } else { document.write(a, ' szám páratlan'); } else { document.write(a, ' NEM SZÁM!'); } |
Összetett logikai állítások
és,vagy
Az && jel az ÉS logikai műveletet jelenti, amely akkor igaz, ha mindkét feltétel igaz. Tehát hiába lesz igaz az egyik logikai állítás, ha a másik hamis, akkor az egész állítás hamis lesz.
Az || jel a VAGY logikai műveletet jelenti, amely akkor igaz, ha már az egyik állítás igaz.
Kérjünk be a felhasználótól egy 100-nál nagyobb páros számot! A két feltételt és logikai művelettel kapcsoltuk össze.
|
1 2 3 4 5 6 7 8 9 |
var a = prompt('Kérek egy 100-nál nagyobb páros számot','0'); if (a % 2 == 0 && a > 100) { document.write(a, ' OK'); } else { document.write(a, ' NEM OK'); } |
Dobókocka játék, 2 játékossal
Tovább lehet bonyolítani a dobókockás játékot, ha mondjuk 2 játékost hozunk létre, dobnak, majd összehasonlítva az eredményt kiírjuk, ki nyert, vagy esetleg döntetlen az állás.
Kérjünk be két nevet, generáljunk 2 véletlen számot, mutassuk meg a hozzá tartozó képet, és értékeljük ki, ki nyert:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<html lang="hu"> <head> <meta charset="utf-8" /> <title>Dobókocka-játék</title> </head> <body> <form name="urlapocska" /> 1. játékos: <input type="text" name="nev1" /><br/> 2. játékos: <input type="text" name="nev2" /><br/> <img src="1.png" id="kocka1" /> <img src="2.png" id="kocka2" /><br/> <input type="button" value="Dobás" onClick="dobas();"/> </form> <span id="nyertes"></span> <script> function dobas(){ var jatekos1=document.urlapocska.nev1.value; var jatekos2=document.urlapocska.nev2.value; if (jatekos1=="" || jatekos2=="") alert("Hiányzó játékos"); else { var dob1= Math.floor((Math.random()*6))+1; var dob2= Math.floor((Math.random()*6))+1; document.getElementById("kocka1").src=dob1+".png"; document.getElementById("kocka2").src=dob2+".png"; if (dob1>dob2) { document.getElementById("nyertes").innerHTML="A nyertes: "+jatekos1; } else if (dob1<dob2) { document.getElementById("nyertes").innerHTML="A nyertes: "+jatekos2;} else { document.getElementById("nyertes").innerHTML="Döntetlen"; } } } </script> </body> </html> |
BMI index kiszámítása
Számítsuk ki a bekért magasságból és testsúlyból, hogy mennyi az adatok alapján a bmi (testtömeg) index. Értékeljük is ki: ha 18,5 alatti, akkor sovány testalkat, 18,5 és 25 között normál, e fölött pedig túlsúlyos. Az eredményekhez használjunk szövegbeviteli mezőket!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>BMI</title> </head> <body> <script type="text/javascript"> function szamol() { testsuly = parseFloat(document.bmi_index.testsuly.value); magassag = parseFloat(document.bmi_index.magassag.value); if (testsuly > 0 && magassag > 0) { eredmeny = testsuly/(magassag/100*magassag/100); document.bmi_index.eredmeny.value = eredmeny; if (eredmeny < 18.5) { document.bmi_index.ertekeles.value="Sovány testalkat" ; } if (eredmeny> 18.5 && eredmeny <= 25) { document.bmi_index.ertekeles.value="Normál testalkat" ; } if (eredmeny> 25) { document.bmi_index.ertekeles.value = "Túlsúly!"; } } else { alert("Nem adott meg adatot!"); } } </script> <form class='bmi' name='bmi_index'> <h4> BMI index kiszámítása </h4> <b>Kiindulási adatok:</b><br> <b>Testsúlyod:</b> <input name='testsuly' size=5> kg<br> <b>Magasságod:</b> <input name='magassag' size=5> cm <br> <input type='button' value='Számol' onclick=' szamol(); '> <hr> <b>Eredmények:</b><br> <span>Testtömegindexed: </span> <input name='eredmeny' size=20 readonly> <span>Értékelés: </span> <input name='ertekeles' size=20 readonly> </form> </body> </html> |
Switch
A switch segítségével is készíthetünk feltétel vizsgálatot. Első példánkban attól függően, milyen böngészőt adunk meg a browser változónak, más-más eredményt kapunk:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> var browser='Edge'; switch (browser) { case 'Edge': alert( "Ön Edge böngészőt használ." ); break; case 'Chrome': case 'Firefox': case 'Safari': case 'Opera': alert( 'Ön Chrome/Firefox/Safari/Opera böngészőt használ.' ); break; default: alert( 'Ismeretlen típusú böngésző.' ); } </script> |
Második példa: az aktuális dátum alapján írassuk ki, milyen nap van ma!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<p id="demo"></p> <script> var day; switch (new Date().getDay()) { case 0: day = "Vasárnap"; break; case 1: day = "Hétfő"; break; case 2: day = "Kedd"; break; case 3: day = "Szerda"; break; case 4: day = "Csütörtök"; break; case 5: day = "Péntek"; break; case 6: day = "Szombat"; } document.getElementById("demo").innerHTML = "Mai nap: " + day; </script> |
Példa: Kérjünk be a felhasználótól egy hónapot, és írassuk ki, melyik évszaknak felel meg!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html> <body> <script> var honap = prompt('Milyen hónap?'); switch (honap) { case 'december': case 'január': case 'február': alert( "Tél" ); break; case 'március': case 'április': case 'május': alert( "Tavasz" ); break; case 'június': case 'július': case 'augusztus': alert( "Nyár" ); break; case 'szeptember': case 'október': case 'november': alert( "Ősz" ); break; default: alert( 'Hiba, nincs ilyen hónap!' ); } </script> </body> </html> |