JS Bilgileri -4- JavaScript Karar Yapıları
Merhaba, Programlama dillerinde en çok kullanmaya ihtiyaç duyduğumuz komutlardan biri de karar yapılarıdır. Bir durumun gerçekleşmesi veya gerçekleşmemesi için koşullara bağlamamız gerekebilir. Bu durumda if / else yapısını kullanacağız.
if(koşul){ // Koşul sağlanırsa yapılacaklar }else if(başka bir koşul){ // İlk koşul sağlanmayıp, ikinci koşul sağlanırsa yapılacaklar }else{ // Hiç bir koşul sağlanmazsa yapılacaklar }
Gerçek bir örnekte kullanacak olursak da:
var x=20; if(x==20){ alert(x); }
Bu örneği açacak olursak; öncelikle x değişkeni oluşturup değerine 20 atadık ve eğer x değişkeni 20 ise x değişkeninin değerini mesaj kutusunda göstermesini söyledik. Bunu çalıştırırsak x == 20 değerini karşıladığı için mesaj kutumuz çalışacak ve 20 yazacaktır. Eğer kodun başındaki var x=20; değerini var x=21; olarak değiştirip aynı şekilde çalıştıracak olursak, if koşulumuz sağlanmadığı için mesaj kutusu hiç açılmayacaktır.
JavaScript Karşılaştırma Operatörleri
Yukarıdaki örnekte koşul olarak x==20 yazdık. Burada kullandığımız == ifadesi bir karşılaştırma operatörüdür ve eşitlik var mı diye kontrol eder. Bunun gibi kullanabileceğimiz çeşitli karşılaştırma operatörlerimiz bulunur.
- Eşitlik Var Mı? (==): Bu operatörümüz 2 değeri karşılaştırır ve eşit olup olmadıkları sonucunu alırız.
- Kesin Eşitlik (===): Bu operatörümüz de eşitlik olup olmadığını kontrol eder ancak hem aynı değerde hem de aynı tipte olup olmadığını da kontrol eder.
- Eşit Değil Mi? (!=): Bu operatörümüz de eşitlik var mı operatörümüzün tam tersi iş görür. Eğer eşit değilse doğru sonucu vermiş olur.
- Büyüktür (>) / Küçüktür (<): Bu operatörlerimiz matematikten de bildiğimiz büyüktür – küçüktür ifadeleri. İki değerin birbirinden büyük / küçük olma durumlarını karşılaştırır.
- Büyük Eşit (>=) / Küçük Eşit (<=): Bu operatörümüz de yine aynı şekilde iki değerin büyük veya eşit / küçük veya eşit olma durumlarını kontrol eder.
Küçük bir uygulamayla if yapısını kullanalım. Yeni bir HTML sayfası oluşturup aşağıdaki gibi dolduralım:
<html> <head> <title>if komutu</title> </head> <body> <input type="button" value="TIKLA" onclick="return dugmeFonksiyonu();"> <script> var sayi; function dugmeFonksiyonu(){ sayi = prompt('Bir değer girin...'); if(sayi>20){ alert('Girdiğiniz sayı 20den büyük'); } } </script> </body> </html>
Uygulamamızda önceki yazılarımızda görmediğimiz biri takım öğeler mevcut ancak kabaca inceleyelim. Öncelikle bir düğme oluşturduk ve düğmeye tıklandığı zaman dugmeFonksiyonu ismindeki JavaScript fonksiyonunu çalıştırmasını söyledik.
JavaScript kodumuzda ise önce sayi adında bir değişken oluşturduk ve fonksiyonumuzu yazmaya başladık. Fonksiyonumuzda sayi değişkenimize ekrana giriş yapabileceğimiz bir kutu açmasını söyledik. Ve bu kutuya bir değer girildiğinde if kullanarak eğer girilen sayı 20’den büyük ise bir mesaj kutusu ile Girdiğiniz sayı 20den büyük yazdırdık.
Hazırladığımız HTML dosyasını tarayıcıda açarak programımızı test edebiliriz.
JavaScript if/else Kullanımı
Burada yalnızca tek koşul sağladık. Ve koşul gerçekleşirse yapılacak işlemi söyledik. Peki ya koşul sağlanmazsa? O zaman da bir şey yapmasını istiyorsak else ifadesinden yararlanacağız. Aynı HTML dosyamızda JavaScript kodumuzda küçük bir değişiklik yapalım.
var sayi; function dugmeFonksiyonu(){ sayi = prompt('Bir değer girin...'); if(sayi>20){ alert('Girdiğiniz sayı 20den büyük'); }else{ alert('Girdiğiniz sayı 20den büyük değil'); } }
Burada yalnızca if ‘in bitimine bir de else ifadesi ekledik. Yani girilen sayı 20’den büyük ise ‘Girdiğiniz sayı 20den büyük’ yazacak, değilse ‘Girdiğiniz sayı 20den büyük değil’ yazacak.
JavaScript else if Kullanımı
Bu scriptimizde 20den büyük olmayan ne değer gelirse gelsin ‘Girdiğiniz sayı 20den büyük değil’ mesajı verecek. Hatta girilen değer sayı değil bir yazı bile olsa bu sonucu verecek. Şimdi aynı dosyamızda scriptimize bir koşul daha ekleyelim. Yeni scriptimiz:
var sayi; function dugmeFonksiyonu(){ sayi = prompt('Bir değer girin...'); if(sayi>20){ alert('Girdiğiniz sayı 20den büyük'); }else if(sayi<20){ alert('Girdiğiniz sayı 20den küçük'); }else if(sayi==20){ alert('Girdiğiniz sayı 20'); }else{ alert('Bir sayı değeri girmediniz'); } }
Burada toplamda 3 koşul ve bu 3 koşul da sağlanmazsa gerçekleştirilecek işlemi belirledik.
- Scriptimiz ilk olarak girilen sayı 20’den büyük mü diye kontrol ediyor. 20’den büyük bir değer girildiyse ‘Girdiğiniz sayı 20den büyük’ mesajını veriyor. Eğer girilen değer 20’den büyük değilse ikinci koşula gidiyor.
- İkinci koşulda sayı 20’den küçük mü diye kontrol ediyor. 20’den küçük biri değer girildiyse ‘Girdiğiniz sayı 20den küçük’ mesajını veriyor. Eğer girilen değer 20’den küçük değilse üçüncü koşula gidiyor.
- Üçüncü koşulda ise sayı 20’ye eşit mi diye kontrol ediyor. Girilen değer eğer 20 ise ‘Girdiğiniz sayı 20’ mesajını veriyor. Eğer girilien değer 20 değilse dördüncü koşula gidiyor.
- Dördüncü aşamada bir koşulumuz yok. Burada else değeri kullandık. Bu sebeple diğer 3 koşulun sağlayamadığı durumda ‘Bir sayı girmediniz’ mesajını gösteriyor. Eğer girilen değer 20’den büyük değilse, 20’den küçük değilse, 20’ye eşit değilse, geriye tek bir şey kalıyor, girilen değer bir sayı değildir…
Uygulama koşullarımızı ve değerlerimizi değiştirerek, koşul sayısını azaltarak veya artırarak farklı uygulamalar da yapabiliriz.