Serkan Ayyıldız

Meraklı bir yazılım uzmanı...

Javascript If-Else

Yeniden merhabalar :)

Javascript makalelerimizde son hız devam ederken bugün javascript ile karar yapılarını öğreneceğiz.Aslında konumuz javascript karşılaştırma operatörleri olması gerekirken konuyu daha rahat öğrenebilesiniz diye karar yapıları başlığı altında sürdürmek istiyorum.

Eğer daha önce herhangi bir programlama bilginiz varsa karar yapılarının ne anlama geldiğini biliyorsunuz demektir ancak bilmiyorsanız kısaca şöyle özetleyebiliriz:

Karar yapıları programın runtime (çalışma zamanı) anında daha önceden belirlenmiş işleyiş senaryolarına göre programın nasıl davranacağını belirler.
Biraz teorik bir cümle olduğunun farkındayım,zaten böyle bir cümle programlamaya yeni başlayanlar için çokta fazla birşey ifade etmeyeceği için örneklerle öğrenelim istiyorum :)

Şimdi boş bir HTML belgesi oluşturalım ve head tagı içerisinde javascript kodunu yazacağımız bir script tagı açalım:

HTML

Ardından küçük bir örnek uygulama yapalım;örnek projemiz kullanıcı ekrana doğum yılını yazdığına ona kaç yaşında olduğunu söyleyelim.

Bunun için Body tagı içerisine bir input ve bir de buton ekleyelim:

Javascript

Şimdide yaşımızı hesaplayacak olan javascript fonksiyonumuzu yazıyoruz:

Javascript-function

Şimdi ne yaptığımıza bakalım; öncelikle "hesapla" adında bir fonksiyon oluşturduk ardından kullanıcının inputa girdiği değeri javascriptin DOM nesnelerine ulaşmada kullandığımız document.getElementById metoduyla inputa eriştik ve "value" metoduyla yakalayıp "girilenYil" adındaki değişkenimize parseInt ile int tipine dönüştürüp atadık.(Biraz uzun bi cümle oldu :) )

Ardından bugünkü bulunduğumuz yılı "buYil" adındaki değişkenimize atadık ve her ikisinin farkını aldıktan sonra "fark" isimli değişkenimize atayıp javascriptin alert metoduyla ekrana yansıttık.
Tabi henüz bitmiş değil,şimdide yazdığımız bu fonksiyonu butonla ilişkilendirmeliyiz.Kullanıcının butona tıklama anında çalışması için onclick eventimize metodumuzu yazıyoruz:

HTML-Button

Şimdi javascript programımızı test edebiliriz :

alert

Birde şunu deneyelim,doğum yılımı 2025 yapsam ne olurdu :



Gördüğünüz gibi -12 yaşımdaymışım :)

Buraya kadar zaten daha önce öğrendiğimiz javascript bilgilerimizdi asıl javascript karar yapıları bu noktadan itibaren başlıyor ve bu makalede javascript if else konusunu öğreneceğiz.

If-else karar yapısının genel anlamını "eğer-değilse" olarak söyleyebiliriz ve kullanımı if bloğunun içerisine olmasını istediğimiz koşulu yazar,else kısmına ise olmasını istediğimiz koşulun dışında gelişen senaryoda ne yapılması gerektiğini yazarız.

Şimdi karşılaştırma operatörler devreye giriyor ve karşılaştırma operatörlerimizi sırayla görelim:

1-Eşit Eşit (==) Operatörü

Karar yapılarında en sık kullanılan operatördür ve bu operatör ile koşulda "eşit ise" anlamını şart koşarız.

Örneğin kullanıcının girdiği yıl sıfır olmasın istiyorsak:

if-else

12. satırda koşulumuz kullanıcının girdiği değerin sıfır olup olmamasıdır ve eğer sıfır ise ekrana uyarı mesajı göstereceğiz,eğer sıfır değilse 16.satırdan itibaren program normal işleyişine devam edecektir.

2-Küçük (<) Operatörü

Sayısal bir değerin belirli bir değerden küçük olup olmadığını denetler ve örnek olarak kullanıcı 1900 yılından önce doğmuş olamasın:

if-else

Aynı mantık devam ediyor ve tek fark bu defa eşittir operatörü yerine küçük operatörü kullandık.Ayrıca dikkat ettiyseniz iç içe if koşulları yazmaya başladık.

3-Küçük Eşit (<=) Operatörü

Küçük operatöründen tek farkı girilen değer koşul değerden hem küçük hem de eşit olabileceğidir,yani bildiğimiz matematik kuralı :)

4-Büyüktür (>) Operatörü

Değerin belirtilen değerden büyük olup olmadığını denetler,örneğimizde ise kullanıcı 2013'ten sonra doğmuş olmasın:

javascript-if-else

5-Büyük Eşit (>=) Operatörü

Değerin belirtilen ikinci değerden hem büyük hem de eşit olma durumunu kontrol eder.

6-Eşit Değildir (!= veya <>) Operatörü

İster != şeklinde,isterseniz <> şeklinde kullanın aynı sonucu verir ve bu operatör değerin ikinci bir değere eşit olmamasını denetler.

Örneğin kullanıcı doğum yılını 1987 dışında bir değer girerse:

javascript-else


Karşılaştırma operatörleri buraya kadardı,tabi makalemizin henüz sonuna gelmedik şimdi ise javascript mantıksal operatörlerine giriş yapıyoruz.

Mantıksal operatörlerin karşılaştırma operatörlerinden farkı herhangi iki değeri karşılaştırmaz,sadece en az iki koşulun aynı andaki durumlarını karşılaştırır.Biraz fazla teorik bir cümle oldu o yüzden yine örneklerle devam edelim.

1-Ve (&&) Operatörü

&& operatörü en az iki koşulun sağlanıp sağlanmadığını denetler,örneğimizde kullanıcı input dom nesnesini hem boş geçemesin hem de girdiği değer sıfırdan büyük olsun isteyelim:

javascript-script

Şimdi if bloğunu içeriğine bakalım,soldan sağa doğru bakarsak girilenYil değişkeninin != operatörüyle iki tek tırnağa yani boş geçilip geçilmediğine bakıyoruz.Ardından && mantıksal operatörlerini yazdıktan sonra ikinci koşulumuzu yazıyoruz ve sıfıra eşit olup olmadığına bakıyoruz.

Buradaki koşulu şöyle okuyoruz:
Eğer girilenYil boş değilse ve sıfıra da eşit değilse..

2-Veya (||) Operatörü

İstenen en az iki koşuldan birinin gerçekleşmesini istediğimiz durumlarda kullanırız,&& operatöründe her iki koşulun yerine geldiğini isterken || operatörüyle koşullardan en az birinin sağlanmasını istiyoruz.

Örneğimizde ise kullanıcı sıfır ya da sıfırdan küçük (nagatif) değer girerse uyarı mesajı verdirelim:

javascript-if-else

Not: If-else kullanımında illa da else bloğunun yazılması gerekmez,sadece if bloğu ile programın beklenen senaryoda nasıl çalışacağına yön verilebilir.

3-Değilse (!) Operatörü

! operatörü != operatörüne oldukça benzemektedir ancak tek farkı ! operatörü boolean sonuç döndüren koşullarda ya da tam olarak ifade edemediğim koşullarda kullanılır.

Bu örneğimizle alakası olmayan bir örnek yapalım:

if-else

Özetlersek "buBilgisayarMi" isimli değişkenimizi önce true olarak atadık ve daha sonra if koşulunda eğer false olursa senaryosunu kurduk.

! operatörünü şu şekilde de kullanabilirdik:

javascipt

Tek fark elle false yazmak yerine sadece ! işaretiyle false olup olmadığını kontrol ettik.


Javascript karar yapıları ve operatörlerini burada sona erdiriyoruz,makalenin faydası olacağını umar hoşçakalın derim :)

Bir yorum bırak E-posta adresiniz yayınlanmayacaktır.

Menu