Javascript programının, 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ı:
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>Javascript'te Mukayese</TITLE>
<SCRIPT LANGUAGE="Javascript1.2">
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>
</HEAD>
<BODY>
<BR>
<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>
</BODY>
</HTML>
Bu sayfayı denetim1.htm adıyla kaydedin ve Browser?inizde açın. Şimdilik, yemek tariflerini vermediğimize aldırmayın. Daha sonra bunu yapmanın yolunu da göreceğiz. 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. Sırası gelecek.)
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öreceğiz. Bir Form?un içinde SELECT nesnesi varsa, Browser 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.