İçindekilerGirişİndex
YukarıİlkÖncekiSonraki YokSon
Geriİleri
Yazdır

PROGRAM DÖNGÜ DENETİMİ

PROGRAM DÖNGÜ DENETİMİ

Javascript'te bazen işler yukarıdaki örnekte olduğu gibi açık ve belirgin şartlara bağlı ve bir kere icra edilecek türden olmayabilir. Javascript, bir işi belirli (veya kendi belirleyeceği) kere yapmasını isteyebilirsiniz. Bu tür tekrarlanan işleri Javascript'e bir kaç satırlık bir kodla yaptırtmak çoğu kez bizi sayfalar dolusu kod yazmaktan kurtarır

"for" döngüsü

Diyelim ki, sitenizde santigrad dereceyi fahrenhayt dereceye çeviren tablo sunmak istiyorsunuz. 0'dan 100'e kadar bütün santigrad derecelerin (fahrenhayt = santigrad * 9 / 5 + 32 ) formülüyle karşılığını bulup, bir tabloya yazabilirsiniz. Hesabı yapmanın güçlüğünün yanı sıra, HTML kodunuz tam 100 adet <TR><TD>..</TD><TD>..</TD></TR> kodu içerecektir. Oysa bunu iki satırlık bir Javascript kodu ile Browser'a yaptırabilirsiniz. Aşağıdaki kodu, dongu1.htm adıyla kaydedin ve Browser'ınızda açın:

Göster Gizle Kopar Satır Gizle Satır Göster
  1 <HTML>
  2 <HEAD>
  3 	<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
  4 	<TITLE>Javascript'te döngü</TITLE>
  5 	<SCRIPT LANGUAGE="Javascript1.2">
  6 	<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
  7 	// santigrad-fahrenhayt tablosu
  8 		document.writeln("<TABLE Border=\"1\">")
  9 		document.writeln("<TR><TD>Santigrad</TD><TD>Fahrenhayt</TD></TR>")
 10 		for (santigrad = 0; santigrad <= 100; ++santigrad)
 11 		{
 12 			fahrenhayt = santigrad * 9 / 5 + 32
 13 			document.writeln("<TR><TD>" + santigrad + "</TD><TD>" + fahrenhayt + "</TD></TR>")
 14 		}
 15 		document.writeln("</TABLE>")
 16 	// -->
 17 	</SCRIPT>
 18 </HEAD>
 19 <BODY>
 20 </BODY>
 21 </HTML>

Burada "for" ifadesiyle tekrarlanan bir döngü oluşturuyoruz. "for" döngüsüne geçmeden Javascript'e, sayfaya bir kaç HTML komutu göndermesini bildiriyoruz; bu komutlar sayfada bir tablo başlatıyor; tablonun birinci sırasına iki kutu oluşturarak, içlerine "Santigrad" ve "Fahrenhayt" yazıyor. Şimdi asıl, "for" ifadesi üzerinde duralım:

quot;for" ile oluşturacağımız döngü, bir sayaca göre ilerler. Burada sayaç olarak "santigrad" adında bir değişken oluşturuyoruz, Javascript'e "Santigrad adında bir değişken yap, içine 0 değerini koy; ve bu değişken 100'den küçük veya 100'e eşit ise bazı işler yap!" demiş oluyoruz. Bu arada Javascript, diğer dillerin benzeri komutuna göre bize bir kolaylık sağlıyor: Javascript'in her döngü yapacağı işten sonra santigrad'ın mevcut değerine 1 eklemesini aynı satırda ve kolayca sağlıyoruz. "for" işleminin başladığını belirten açılan süslü parantezden sonra Javascript'e her döngüde yapacağı iki işi bildiriyoruz:

ahrenhayt = santigrad * 9 / 5 + 32

Bu komutla Javascript, "fahrenhayt" adını verdiği bir değişken oluşturuyor ve ilk değer olarak, santigrad değişkeninin değerini 9 ile çarpıp, 5'e bölüyor, bulduğu sayıya 32 ekliyor. ilk turda, santigrad değişkeninin değeri 0 olduğuna göre, fahrenhayt değişkeninin değeri 32 olarak bulunuyor; ve Javascript ikinci işe geçiyor:

document.writeln("<TR><TD>" + santigrad + "</TD><TD>" 
  + fahrenhayt + "</TD></TR>"

Bu iş ise, sayfaya bir tablo sırası ile bir tablo kutusu göndermek; bu kutunun içine santigrad değişkeninin değerini yazmak; sonra bu kutuyu kapatıp yeni bir kutu açmak; bu kutunun içine fahrenhayt değişkenini değerini yazarak, kutuyu ve tablo sırasını kapatmaktan ibaret.

Javascript, birinci turu bitirdiğinde, "for" komutunun tayin ettiği ölçüde sayaç değişkeninin arttırıp veya azaltıp, ikinci tura başlayacaktır. Bu ne zamana kadar böyle devam edip gidecektir? Sayaç değişkeninin değeri, tayin ettiğiniz sınına ulaşıncaya kadar. Nedir bu sınır: santigrad değişkeninin değerinin 100'e eşitlenmesi. Bu kadar uzun bir tablo vermek istemiyorsanız, bu değeri istediğiniz bir sayıya indirebilirsiniz ve sayacı birer birer arttırma yerine, mesela beşer beşer attırabilirsiniz. Sayacı beşer-beşer arttırmak için "for" komutunun son argümanını "santigrad +=5" şeklinde yazmalısınız.

Şartlı Döngü; While

Javascript kodu yazarken öyle durumlar olabilir ki, programın sayaç değişkeninin her değeri için yapmasını istediğiniz işi yapmasındansa, sadece belirli bir şart karşılanıyorsa yapmasını tercih edebilirsiniz. Bunu "while" (...iken) ifadesiyle sağlarız. Bu yöntemle Javascript'e "filanca işi yap, ama falanca şart varsa (veya yoksa)" demiş oluruz.

"while" ile kuracağınız döngünün şartı rolünü oynayacak değişkenin daha önceden oluşturulması, içeriğinin başka bir yöntemle belirlenmesi ve değiştirilmesi gerekir; "for" döngüsünün aksine "while" şartlı döngüsü bunu sizin için otomatik olarak yapmaz. Ayrıca koyduğunu şarta bağlı olarak, "while" döngüsü sırasında yapılmasını istediğiniz iş hiç yapılmayabilir.

Diyelim ki, bir elektronik ticaret siteniz var; ve müşteri adayı ziyaretçileriniz, bazı malları Web sayfanızda toptan ısmarlayabilirler. Böyle bir siparişi alabilmek için, o maldan stokunuzda yeterli miktarda bulunması gerekir. Aşağıdaki kodu dongu2.htm adıyla kaydederseniz, ısmarlanan bir miktar üzerinden kaç sipariş karşılayabileceğini sayfanız otomatik olarak hesaplayacaktır.

Göster Gizle Kopar Satır Gizle Satır Göster
  1 <HTML>
  2 <HEAD>
  3 	<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
  4 	<TITLE>Javascript'te döngü</TITLE>
  5 	<SCRIPT LANGUAGE="Javascript1.2">
  6 	<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
  7 	// envanter kontrolü icin degisken
  8 		var stok = 700
  9 	// -->
 10 	</SCRIPT>
 11 </HEAD>
 12 <BODY>
 13 <PRE>
 14 <SCRIPT LANGUAGE="Javascript1.2">
 15 	function hesapla(miktar)
 16 	{
 17 		var endeks, talepMiktar, satis 
 18 		endeks=miktar.selectedIndex
 19 		talepMiktar=miktar.options[endeks].text
 20 		satis = 0
 21 		while (talepMiktar < stok)
 22 		{
 23 			stok -= talepMiktar
 24 			satis++
 25 		}
 26 		document.miktarForm.sonuc.value=talepMiktar + " ton itibariyle "+ satis + " adet sipariş için stokumuz var!"
 27 	}
 28 </SCRIPT>
 29 </HEAD>
 30 <BODY>
 31 <BR>
 32 	<FORM NAME="miktarForm">
 33 		<P>Alacağınız miktarı lütfen seçiniz:</P>
 34 		<SELECT NAME="miktar" onChange="hesapla(this)">
 35 			<OPTION SELECTED> Miktarı seçiniz
 36 			<OPTION>100
 37 			<OPTION>200
 38 			<OPTION>300
 39 			<OPTION>400
 40 		</SELECT>
 41 		<P></P>
 42 		<INPUT NAME="sonuc" VALUE="" SIZE=55>
 43 	</FORM>
 44 </BODY>
 45 </HTML>

Bu kodun da bir çok unsuru üzerinde durmayalım; bizi döngü açısından ilgilendiren bölümlerini ele alalım. Gördüğünüz gibi üç değişken tanımlıyoruz; "stok" değişkeninin değerini biz veriyoruz; miktarTalep değişkeni ise sayfamızdaki Form nesnesinin "miktar" adlı SELECT nesnesinden alınıyor. Bu arada, işlemi yapan fonksiyonun içinde "satıs" adlı bir değişken oluşturuyoruz ve değerinin, döngünün içinde birer birer artmasını sağlıyoruz. Bu kodun mantığı, müşterinin sipariş vereceği miktarda, stokumuzdan kaç adet toptan satış yapılacağını bilmek olduğuna göre, Javascript, döngünün içinde çalışırken şöyle düşünecektir:

"Benden, stok değişkeninin değerinden talepMiktar değişkeninin değeri kadar çıkartmam; sonra da satıs adlı değişkenin değerini bir adet arttırmam isteniyor. Ama bunu ancak ve sadece talepMiktar değişkeninin değeri stok değişkeninin değerinden az iken yapabilirim!"

Nitekim Javascript, talepMiktar değişkeninin değeri stok değişkeninin değerine eşit veya fazla hale geldiği anda, döngüye son verecek ve "while" ifadesinin dışına çıkacaktır. Döngüden çıktığı anda Javascript'in yapacağı iş ise ekrandaki Form'un sonuc adlı kutusuna kendisine bildirilen metni yazmaktan ibaret!

do...while

quot;while" döngüsünün, koyduğunuz şarta göre bazen hiç icra edilmeyebileceğini söyledik. Yukarıdaki örnekte müşteri öyle bir rakam verir ki, sipariş miktarı stoktan yüksek olduğu için, hesaplama hiç yapılmaz ve müşteriye kaç parti sevkiyat yapacağımızı değil, sevkiyat yapamayacağımızı bildiririz. Fakat bazı durumlarda döngünün bir kere işlemesi, fakat ikinci ve daha sonraki seferler için bir değişkenin değerine bakması gerekebilir. Akla gelecek ilk örnek, bir elektronik ticaret sitesinde, müşteriye bir malı almak isteyip istemediği sorusudur. Bu soruyu bir kere sormak zorundayız; müşteri bu soruya "Hayır!" yanıtını verirse, alış-veriş sorusunu soran döngüyü durdurmamız gerekir; müşteri alışverişe devam etmek istediğini bildirirse, döngü devam edecek ve müşteriye alış-veriş sorusu yeniden sorulacaktır.

Bunu, do...while (Yap ... iken) komut grubuyla yapabiliriz. Do (Yap) komutu bir kere icra edilir ve ondan sonra while (..iken) şartı aranır. Bu şart yerine geliyorsa, Do'daki komut yeniden icra edilir, şartın değişip değişmediğine yeniden bakılır.

Düz yazı programında aşağıdaki kodu yazın ve dongu5.htm adıyla kaydedin:

Göster Gizle Kopar Satır Gizle Satır Göster
  1 <HTML>
  2 <HEAD>
  3 	<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
  4 	<TITLE>Javascript'te Switch</TITLE>
  5 	<SCRIPT LANGUAGE="Javascript1.2">
  6 	<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
  7 		// gecici bir degiskene ihtiyacımız var
  8 		gecici = "Bir"
  9 		// müsteriye soruyu bir defa soralım
 10 		do
 11 		{
 12 			//buraya gerçek alış veriş halinde gerekli işlemler girecek
 13 			yanit = prompt(gecici + " gömlek almak ister misiniz?", "Evet")
 14 			gecici = "Bir başka"
 15 		}
 16 		while (yanit == "Evet")
 17 	// -->
 18 	</SCRIPT>
 19 </HEAD>
 20 <BODY>
 21 </BODY>
 22 </HTML>

Bu programda Browser'ın kullanıcıdan bilgi alma aracı olan Prompt kutusunu kullanıyoruz; müşteri adayına "bir" gömlek almak isteyip istemediğini soruyoruz. Buradaki "bir" kelimesi, geçici değişkenimizden alınıyor; müşteri ikinci alış-verişini yapmaya karar verirse, bu değişkenin değerini "Bir başka" olarak değiştiriyoruz. Bu programda, müşteri-ziyaretçinin ilk "Evet" yanıtı halinde sayfamızda yapılabilecek siparişi alma, fiyatı bildirme, onay isteme ve benzeri işlerin hiç biri yok; Javascript sadece aynı soruyu yeniden soruyor; taa ki ziyaretci Prompt kutusuna "Evet" dışında bir şey yazıncaya kadar. Do komutu, while bölümüne yazdığınız şart değişinceye kadar icra edilecektir. (Tabiî, buradaki örnekte bütün süreç, müşteri-ziyaretçinin Prompt kutusunda Cancel (İptal) düğmesine basmasıyla da sona erecektir; ama bu Prompt kutusunun bir özelliğidir.)

"Break" ve "Continue"

Şartlı döngüde, tekrar eden iş, şartın yerine geldiği noktada kendiliğinden kesilecektir. Aynı otomasyonu "for" döngüsünde break (kes) ve continue (devam et) komutlarıyla biz de sağlayabiliriz.

Javascript, Break ile karşılaştığı anda döngüyü keser ve icraata döngüden sonraki ilk ifadeden devam eder. Continue ise Javascript'in döngünün o andaki adımını durdurup, döngünün başına dönmesini sağlar; döngü baştan devam eder.

dongu1.htm adıyla kaydettiğiniz dosyada, fahrenhayt'ı hesaplattırdığınız komutla, bunu HTML belgesine yazdırdığınız komut arasına şu satırı koyarak, dosyayı, dongu3.htm adıyla saklayın.

if (santigrad == 13) continue

Browser'da incelediğinizde, Fahrenhayt derecenin 13 santigrad derece için hesaplanmadığını göreceksiniz. Eklediğiniz satırdaki "continue" komutu, santigrad 13'e eşitlendiğinde, döngüyü olduğu yerde keserek, bir sonraki adımdan yeniden başlattı.

Eklediğiniz bu satırdaki "continue" kelimesini "break" diye değiştirir, dosyayı dongu4.htm adıyla kaydeder ve sayfayı Browser'da açarsanız, bu kez listenin 12'de kesildiğini göreceksiniz; çünkü break komutu döngüyü olduğu yerde durdurup, Javascript'i bir sonraki adımdan devama zorladı.

"Switch"

Javascript'in switch (değiştir) komutu, programın bir değişkenin değerine göre, belirli bir işi yapmasını sağlar. Sözgelimi, elektronik satış sitenizde, müşteri-ziyaretçiniz, alacağı gömleğin beden ölçüsünü seçecek ve siz de bu ölçüye göre, siparişi kaydedecek ve müşteriye siparişin alındığını bildireceksiniz. Javascript programının mantığı şöyle olacak: "Müşteri büyük beden'i seçti ise Büyük bedenle ilgili işleri yap; küçük bedeni seçti ise küçük bedenle ilgili işleri yap; orta bedeni seçti ise orta bedenle ilgili işleri yap!"

Javascript'e switch komutu, bir veri kümesi gösterilerek verilir ve bu veri kümesi içinde hangi değere göre ne yapacağı case (halinde) ifadesiyle bildirilir: "Değerin A olması halinde şu işi yap; değerin B olması halinde şu işi yap!" gibi. Şimdi şu kodu düzyazı programında yazın ve dosyayı dongu6.htm adıyla kaydedin:

Göster Gizle Kopar Satır Gizle Satır Göster
  1 <HTML>
  2 <HEAD>
  3 	<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
  4 	<TITLE>Javascript'te Switch</TITLE>
  5 	<SCRIPT LANGUAGE="Javascript1.2">
  6 	<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
  7 		// degiskeni tanımlayalım
  8 		var olcu
  9 		// degiskeni ziyaretciden alalım
 10 		olcu = prompt("Ölçünüzü belirtin: B-Büyük K-Küçük O-Orta", "O")
 11 		// bu degiskene göre yanıt verelim
 12 		switch (olcu)
 13 		{
 14 			case "O" :
 15 			case "o" :
 16 				alert ("Orta boy gömlek siparişiniz alındı!")
 17 				break
 18 			case "B" :
 19 			case "b" :
 20 				alert ("Büyük boy gömlek siparişiniz alındı!")
 21 				break
 22 			case "K" :
 23 			case "k" :
 24 				alert ("Küçük boy gömlek siparişiniz alındı!")
 25 				break
 26 			default: alert ("Lütfen beden ölçünüzü belirtiniz!")
 27 		}
 28 	// -->
 29 	</SCRIPT>
 30 </HEAD>
 31 <BODY>
 32 </BODY>
 33 </HTML>

Bu sayfayı Browser'da açtığınızda, karşınıza bir diyalog kutusu gelecektir.

<js003.tif ve js004.tif -- Resimaltı: Javascript'in "prompt" komutu ile IE'nin ve Netscape'in açtığı diyalog kutuları, başlıkları dışında, aynıdır.>

Bu kutuda varsayılan değer olarak Orta Boy ölçü için O harfi bulunuyor. isterseniz, komutta değişiklik yaparak. bu kutuya istediğiniz değeri girebilirsiniz. Javascript, bu kutunun sağlayacağı değeri, "olcu" adı altında, switch komutuna iletiyor; switch komutu da "olcu" bilgisinin üç ayrı halinde üç ayrı yanıt veriyor. Böyle bir programı gerçek hayatta uygularken, yapılacak iş olarak sadece bir Alert kutusuyla yetinmeyerek, söz gelimi bu noktada Javascript'i farklı fonksiyonlara sevkederek, diyelim ki bir sipariş belgesi hazırlatabilirsiniz. Bu örnekte Javascript, olcu bilgisinin farklı hallerinde sadece farklı uyarı kutuları vermekle yetiniyor. Bu programda dikkatinizi çeken bir diğer nokta, her bir hale ilişkin case grubunda yer alan break komutu olmalı. Olcu isimli switch döngüsünün işi gerekli mesajı verdikten sonra bittiğine göre, Javascript'in diğer case'leri değerlendirmesini önlememiz gerekir; bunu break ile sağlıyoruz.

Ayrıca bu programda, ziyaretçi ile ilişkilerde gözönünde tutmanız gereken bir ilkenin uygulandığını görüyorsunuz: ziyaretçinin büyük beden için büyük ya da küçük harf B tuşuna basacağını bilmediğimiz için, kendimizi her iki ihtimale karşı da hazırlıyoruz. İyi bir programcılık tekniği, özellikle ziyaretçilerden girdi beklediğiniz hallerde, büyük harf-küçük harf durumlarına karşı hazırlıklı olmaktır.

Dosya Listesi

İçindekilerGirişİndex
YukarıİlkÖncekiSonraki YokSon
Geriİleri
Yazdır