|
|
|
JAVASCRİPT
KONULAR
|
Program Akış DenetimiJavascript 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ı:
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:
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. denetim1.’in dört "if" ifadesini de silin ve yerine şunları yazın:
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 Döngü Denetimi 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:
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: "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:
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:
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.
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 "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:
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.
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:
Bu sayfayı Browser’da açtığınızda, karşınıza bir diyalog kutusu gelecektir. 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.
|
©2001 BİRSEY.COM |
