PROGRAM AKIŞ DENETİMİ

Javascript veya bir başka programlama dili ile yazacağınız programda, zaman zaman programın akışını, programa bırakmanız gerekir. Programcı olarak siz, programın izleyeceği alternatif yolları belirlersiniz; fakat bu yollardan hangisini izleyeceğine, sizin koyduğunuz şartları değerlendirerek program kendisi karar verir. Programcılığın gerçek anlamda zevki de bu noktada başlar. Şimdi Javascript'in programın akışını kontrolde kullanacağınız unsurlarını tanımaya başlayalım.

Aşağıda yazacağımız iki Javascript kodunda Browser'a, ziyaretçinin ekranındaki bir form unsurunun içini doldurtma tekniğini kullanacağız. Henüz ele almadığımız bu tekniğin ayrıntılarını FORM nesnesinin özelliklerine değinirken ele alacağız.

If (Eğer .. ise)

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ı:

  1 <HEAD>
  2 	<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
  3 	<TITLE>Javascript'te Mukayese</TITLE>
  4 	<SCRIPT LANGUAGE="Javascript1.2">
  5 		function goster(secme)
  6 		{
  7 			var endeks, secilenYemek
  8 			endeks=secme.selectedIndex
  9 			secilenYemek=secme.options[endeks].text
 10 			if (secilenYemek == "Adana Kebap")
 11 			{
 12 				document.tarifForm.tarif.value=secilenYemek + " seçtiniz! Bravo!"
 13 			}
 14 			if (secilenYemek == "Yogurtlu Iskender")
 15 			{
 16 				document.tarifForm.tarif.value=secilenYemek + " seçtiniz. Sizi tebrik ederiz!"
 17 			}
 18 			if (secilenYemek == "Biber Dolma")
 19 			{
 20 				document.tarifForm.tarif.value=secilenYemek + " seçtiniz. Zevkinize hayranız!"
 21 			}
 22 			if (secilenYemek == "Yaprak Sarma")
 23 			{
 24 				document.tarifForm.tarif.value=secilenYemek + " yapması biraz zordur; ama çok lezizdir"
 25 			}
 26 		}
 27 	</SCRIPT>
 28 </HEAD>
 29 <BODY>
 30 <BR>
 31 <FORM NAME="tarifForm">
 32 	<P>Hangi yemeğin tarifini istiyorsunuz? Lütfen istediğiniz yemeği seçin:</P>
 33 	<SELECT NAME="yemeklistesi" onChange="goster(this)">
 34 		<OPTION SELECTED> Bir yemek seçiniz
 35 		<OPTION> Adana Kebap
 36 		<OPTION> Yogurtlu Iskender
 37 		<OPTION> Biber Dolma
 38 		<OPTION> Yaprak Sarma
 39 	</SELECT>
 40 	<P></P>
 41 	<INPUT NAME="tarif" VALUE="" SIZE=55>
 42 </FORM>
 43 </BODY>
 44 </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

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

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.

If ... Else (Eğer .. Diğer)

Kimi zaman bu kadar çok seçeneğe tek tek "if" ifadesi yazmak gerekmeyen durumlar olabilir. Javascript'e "Eğer şu değişkenin değeri şu işe şunu yap, diğer bütün durumlarda ise şunu yap!" demek istiyebilirsiniz. "If... Else" ifadesi ile bunu sağlarız

Bu sayfayı denetim2.htm adıyla kaydedin ve Browser'inizde açın. Şimdi dikkatimizi şu satıra verelim:

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

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.)

Özetlersek, "if" ifadesinde ileri sürdüğünüz şart doğru ise ilk komut dizisi, doğru değilse "Else" bölümündeki komut dizisi icra edilir.

PROGRAM AKIŞ DENETİMİ