Yazar: Merhaba değerli web programcı kardeşlerim!
Bu yazımda sizlere javascript’in if else yapısından yani koşul bildiren durumlarından bahsedeceğim.
Her programlama dilinde if ve else durumlarını görmeniz mümkündür. hemen hemen tüm programlama dillerinde bu yapı aynıdır sadece yazım farkları vardır.
Bir programın bir işi yerine getirmesi şartı ve yerine getirememesi durumunda bir sonraki şartın yerine getirlme durumuna biz if else durumu demekteyiz.
Javascript’in, bir değişkenin değerine göre yönlenmesini sağlayan ilk aracı, “if” (eğer) ifadesidir.
İşte size program akışını “if” yoluyla kontrol eden bir HTML sayfası:
örnek:
<!doctype html>
<html>
<HEAD>
<meta charset=”utf-8″>
<title> java scripte koşulu ifadeler </title>
</head>
<body>
<h1> javscript if else yapısı </h1>
<BR>
<div>
<FORM NAME=”tarifForm”>
<P>Hangi yemeğin tarifini istiyorsunuz? Lütfen istediğiniz yemeği seçin:</P>
<SELECT NAME=”yemeklistesi” onChange=”goster(this)”>
<OPTION SELECTED> Bir yemek seçiniz
<OPTION> Adana Kebap
<OPTION> Yogurtlu Iskender
<OPTION> Biber Dolma
<OPTION> Yaprak Sarma
</SELECT>
<P></P>
<INPUT NAME=”tarif” VALUE=”” SIZE=55>
</FORM>
</div>
<script>
function goster(secme)
{
var endeks, secilenYemek
endeks=secme.selectedIndex
secilenYemek=secme.options[endeks].text
if (secilenYemek == “Adana Kebap”)
{
document.tarifForm.tarif.value=secilenYemek + ” seçtiniz! Bravo!”
}
if (secilenYemek == “Yogurtlu Iskender”)
{
document.tarifForm.tarif.value=secilenYemek + ” seçtiniz. Sizi tebrik ederiz!”
}
if (secilenYemek == “Biber Dolma”)
{
document.tarifForm.tarif.value=secilenYemek + ” seçtiniz. Zevkinize hayranız!”
}
if (secilenYemek == “Yaprak Sarma”)
{
document.tarifForm.tarif.value=secilenYemek + ” yapması biraz zordur; ama çok lezizdir”
}
}
</script>
</body>
</html>
dosyayı if.html adıyla kayıt edin ve web tarayıcınızda görüntüleyin.
Şimdilik, yemek tariflerini vermediğime bakmayın. Daha sonra bunu yapmanın yolunu da göstereceğim sizlere.
Bu sayfadaki Javascript kodunda “goster()” isimli bir fonksiyon var; bu fonksiyon kendisini harekete geçmeye çağıran nesnenin kendisine “secme” adı altında bir takım bilgiler göndermesini şart koşuyor.
Sayfamızda yer alan ve adı “tarifForm” olan FORM nesnesi, kendi unsurlarından SELECT nesnesindeki her değişiklikte, “goster” fonksiyonunu harekete geçiriyor. “yemeklistesi” isimli SELECT etiketinin içindeki onChange (değişiklik halinde) isimli Javascript komutu, bir metod’tur ve burada kendi unsurlarını ve değerlerini topluca “gonder” fonksiyonuna gönderecektir.
(Şimdilik bu metod ve metodu kullanırken yazdığımız THIS ifadesi üzerinde durmayın. zamanı gelince anlatılacak.)
Fonksiyonun başında iki değişken tanımlıyoruz: endeks ve secilenYemek. Endeks değişkeninin değeri, fonksiyona gönderilecek nesnelerden birinden alınıyor. Bu nesne “selectedIndex” adını taşıyor.
“selectedIndex” denen şeyin, HTML belgesinin Form nesnesinin bir özelliği (property) olduğunu belirtmekle yetinelim; ayrıntılarını Form nesnesinin özelliklerini incelerken göstereceğim.
Bir Form’un içinde SELECT nesnesi varsa, web tarayıcısı mevcut SELECT ögelerini dizi-değişken yaparak 0’dan itiberen numaralar ve kullanıcının seçtiği SELECT ögesinin numarası “selectedIndex” adıyla bir kenara kaydeder.
Fonksiyonumuzdaki ikinci değişken olan “secilenYemek” değişkeni de değerini, SELECT nesnesinin seçilen ögesinin metninden alıyor. Şimdilik bu tanımlar sizin için anlam ifade etmiyorsa, üzerinde durmayın;
iki değişkenimize ziyaretçinin sayfada yapacağı tercihe bağlı olarak değerler kazandırdığımızı düşünün. Şimdi dikkatimizi şu satıra verelim:
if (secilenYemek == “Adana Kebap”)
Yukarıda öğrendiğimize göre, bu satırdaki ifadede Javascript’e ne demiş oluyoruz? “Ey Javascript, ‘secilenYemek’ adlı değişkenin değerine bak; orada gördüğün metin, ‘Adana Kebap’ alfanümerik değeri ile aynı ise, bu satırdan hemen sonraki işi yap! aynı değilse, ber sonraki satıra git, oradaki işi yap!” diyoruz.
Buradaki “aynı ise” ifadesini, “==” işaretleriyle sağladığımızı biliyorsunuz; “hemen sonraki iş” ifadesinin de bir karşılaştırma komutu doğru sonuç verirse, Javascript’in bu karşılaştırma komutundan hemen sonra gelen satırdaki işi yapmasından kaynaklandığını hatırlıyorsunuz. Ziyaretçi “Adana Kebap” seçeneğini seçti ise, “Seçim, Adana Kebap ise” sorgulamasının sonucu doğru olacak, ve Javascript
document.tarifForm.tarif.value=secilenYemek + ” seçtiniz! Bravo!”
komutunu icra ederek, ekrana “secilenYemek” değişkeninin değeri yazacak ve buna “seçtiniz! Bravo!” kelimelerini ekleyecektir. Sorgulamanın sonucu doğru değil ise, yani ziyaretçi Adana Kebap’ı seçmemişse, Javascript bir sonraki satırına atlayacaktır. Burada “bir sonraki satır” ile şu anda içinde bulunduğumuz “if” ifadesinin açılan ve kapanan süslü parantezle belirlenen sınırının bittiği yeri kastediyoruz. Yazma kolaylığı bakımından ve açtığımız parantezi kapattığımızdan emin olmak için süslü parantezleri ayrı satırlara yazarız. Ama bu şart değildir. Yani istese idik, burada üç satıra yayılan “sonraki satır” aslında tek satırda yazılabilirdi.
Javascript’in, ziyaretçinin Adana Kebap’ı seçmemesi halinde atlayacağı bir sonraki satırda da bir “if” ifadesi var. Javascript bu kez bu sorgulamanın sonucunu alacak ve bu sorgulama doğru sonuç verirse (yani ziyaretçi Yoğurtlu İskender’i seçmişse), hemen sonraki satırı, seçmemişse, bir sonraki satırı icra edecektir. Böylece dört sorgulamayı da bitiren Javascript, çalışmasına son verecektir. Taa ki, ziyaretçi, yeni bir tercih yapıncaya kadar. SELECT etiketinin içindeki onChange (değişiklik halinde) yönlendiricisi, bu kutuda olacak her değişiklikte, formun SELECT nesnesinin ögelerini topluca “gosder” fonksiyonuna gönderecektir.
Bir “if” sorgusunun içinde bir veya daha fazla “if” bulunabilir. Böyle iç-içe “if” ifadesi yazarsanız, herbirinin icra alanının başladığı ve bittiği yeri gösteren süslü parantezlerine dikkat edin.
genellikle bu kadar çok seçeneğe tek tek “if” ifadesi yazmayız, böyle durumlarda; Javascript’e “Eğer şu değişkenin değeri şu ise şunu yap, diğer bütün durumlarda ise şunu yap!” demek daha doğru olacaktır. “if… else” ifadesi ile bunu sağlarız.
bir önceki oluşturduğunuz if.html dosyasını açıp script etiketleri arasında yer alan javascript komutlarını silin ve şu kodları yazın:
if (secilenYemek != “Adana Kebap”)
{
document.tarifForm.tarif.value=secilenYemek + ” tarifini veremiyoruz!”
}
else
{
document.tarifForm.tarif.value=”Adana Kebap Tarifini asağıda sunuyoruz:”
}
if (secilenYemek != “Adana Kebap”)
kodları yazdıktan sonra dosyanızı farklı kayıtederek else.html olarak düzenleyin. şimdi if şartının yerine getirilmediği durumlarda yerine getirilecek koşulun else olduğunu farketmişsinizdir.
yukarıda öğrendiğimize göre, bu satırdaki ifadede Javascript’e “Ey Javascript, ‘secilenYemek’ adlı değişkenin değerine bak; orada gördüğün metin, ‘Adana Kebap’ alfanümerik değeri ile aynı değil ise, bu satırdan hemen sonraki işi yap!” demiş oluyoruz. Buradaki “aynı değil ise” ifadesini, “!=” işaretleriyle sağlıyoruz; “hemen sonraki iş” ifadesinin de bir karşılaştırma komutu doğru sonuç verirse, Javascript’in bu karşılaştırma komutundan hemen sonra gelen satırdaki işi yapmasından kaynaklandığını hatırlıyorsunuz. Ziyaretçi “Adana Kebap” seçeneğini seçmedi ise, “Seçim, Adana Kebap değil ise” sorgulamasının sonucu doğru olacak, ve Javascript
“document.tarifForm.tarif.value=secilenYemek + ” tarifini veremiyoruz!”
komutunu icra ederek, ekrana “secilenYemek” değişkeninin değeri yazacak ve buna “tarifini veremiyoruz!” kelimelerini ekleyecektir. Sorgulamanın sonucu doğru değil ise, yani ziyaretçi Adana Kebap’ı seçmişse, Javascript sorgulamanın sonucunun “diğer” sınıfına girdiğini anlayacak ve “Else” ifadesini icra edecektir. Yani ekrana “Adana Kebap Tarifini aşağıda sunuyoruz:” yazacaktır. (Tarifi vermediğimizin üzerinde de durmayın. İlerde bu tür uzun ifadeleri Javascript ile sayfaya yazdırmanın yollarını da göreceğiz.)
Özetleyecek olursak, if ifadesi bir şartın yerine gelmesi durumu demektir. else ifadesi ise if koşulunun yerine getirilemediği durumlarda bir sonraki koşulun yerine getirilme durumudur.
Javascript’in if else yapısını sizlere anlatmaya çalıştım, sık sık örnekler yaparak hem elinizi alıştırabilir, hemde mantığını kavrayabilirsiniz. soru ve sorunlarınızı yorum olarak bana ulaştırabilirsiniz. iyi bloglamalar herkese.
Bir önceki yazımız olan javascript'te operatörler başlıklı makalemizde javascript'te işlem sırası, javascript'te operatörler ve karşılaştırma operatörleri hakkında bilgiler verilmektedir.