..etiketleri arasında olması gerekir. Aksi taktirde Javascript ne yazdırırsa yazdırsın, HTML bu özel karakterleri dikkate almayacaktır.
BURAYA ÇEŞİTLİ AMAÇLARLA HTML KODLARI GİREBİLİR!! SONRA TEKRAR SIRA JAVASCRIPT?E GELEBİLİR
<SCRIPT LANGUAGE="Javascript1.2">
<SCRIPT LANGUAGE="Javascript1.2">
Hangi yemeğin tarifini istiyorsunuz? Lütfen istediğiniz yemeği seçin:
<SCRIPT LANGUAGE="Javascript1.2">
function hesapla(miktar)
{
var endeks, talepMiktar, satis
endeks=miktar.selectedIndex
talepMiktar=miktar.options[endeks].text
satis = 0
while (talepMiktar < stok)
{
stok -= talepMiktar
satis++
}
**********miktarForm.sonuc.value=talepMiktar + " ton itibariyle "+ satis + " adet sipariş için stokumuz var!"
}
<FORM NAME="miktarForm">Alacağınız miktarı lütfen seçiniz:
Miktarı seçiniz 100 200 300 400
FORM>
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:Javascript?te Switch
<SCRIPT LANGUAGE="Javascript1.2">
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:Javascript?te Switch
<SCRIPT LANGUAGE="Javascript1.2">
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.
Javascript?te Fonksiyon
Javascript, klasik HTML?in yapamadığı şeyler yapabilir; ziyaretçiden veya ziyaretçinin Browser programından alacağı bir bilgiyi değerlendirerek bir dizi işlem yapabilir; ziyaretçiyi sitemizde belli bir sayfaya yönlendirebilir; kısaca sayfalarımıza ziyaretçi ile etkileşme imkanı kazandırır.
Yukarıdaki çeşitli örneklerde gördüğünüz işlerin çoğu bir kere başvurulan işlerdi; fakat çoğu zaman sayfanızdaki bir Javascript işleminin defalarca yapılması gerekebilir. Hatta öyle işlemler olur ki, Javascript, başka bir işi yapmadan önce, mutlaka bu işlemi yapmak isteyebilir.
Bu tür tekrarlanan işleri, bu işin yapılması için gerekli bilgi kümesi ve komutlarla birlikte bir grup haline getirsek ve bu gruba bir isim versek; sonra bu iş kümesine ihtiyaç olduğu yerde Javascript?e ?Filanca isimli grubu al; içinde belirtilen işleri yap, sonra sonucu bu noktaya bildir!? desek; acaba işlerimiz daha kolay hale gelmez mi?
İşte bu tür, bir isim altında toplanmış işlem paketlerine Function (işlev) adı verilir; Javascript kendisine ?Şu fonksiyonu yap!? dediğiniz noktada yapmakta olduğu durdurur ve fonksiyon paketindeki işleri yapar; bu paket ortaya bir değişken veya sonuç çıkartıyorsa, o bilgiyi edinmiş olarak fonksiyon için yarım bıraktığı işleme geri döner. Fonksiyon yazmanızdaki birinci sebep, büyük bir ihtimalle, Javascript?e, Fonksiyon?un sağlayacağı bilgiyi kazandırmaktır.
__________________
<SCRIPT LANGUAGE = "Javascript1.2">
Bu üç sayfayı oluşturduktan sonra onClick.htm?de sırayla her iki düğmeyi de tıklayın; her Click olayında onClick yönlendiricisinin farklı fonksiyonları çağırdığına dikkat edin.
Kimi zaman onClick yönlendiricisi, bağlantı nesnesi ile doğrudan kullanılabilir. Bağlantı nesnesi olan etiketi, bir bağlantı protokolü adresi (URL) verilmesini ister. Ancak HTTP veya FILE protokolü yerine buraya doğrudan JavaScript?in adını ve icra etmesi istenen fonksiyonu yazabilirsiniz. Örneğin, şeklinde bir ifade, protokol olarak Javascript?i göstermemizi sağlayabilir.
onClick01.htm?de INPUT etiketleri yerine, şu iki satırı yazarak, onClick02.htm adıyla kaydedip, Browser?da açın. Düğmelerin yerini bağlantılı iki kelimenin aldığını göreceksiniz; fakat sayfanın işlevi değişmeyecek. onClick, bu kez düğmenin Click olayını değil, bağlantının Click olayını karşılıyor:
Resim 1
Resim 1
onSubmit
Javascript?in, HTML?i tamamladığı noktaların başında Form ve Form yoluyla elde edilecek bilgilerle ilgili işlemler gelir. Bu işlemlerin başında ise Form?daki bilgilerin Server?a gönderilmeden önce, daha Browser?da iken doğrulanması ve hatalardan arındırılması vardır. Javascript, bunu ziyaretçinin formda, Submit (Gönder) olayına yol açan herhangi bir düğmenin tıklanması halinde yapar. Bir form, ziyaretçi tarafından türü Submit olan bir düğmenin tıklanması halinde, Browser tarafından HTTP protokolü ile Server?a gönderilir. Javascript, onSubmit yönlendiricisi ile bu olaya ilişkin işler yapabilir, fonksiyonlar icra edebilir. Fakat burada dikkat edeceğiniz nokta, ?Submit? olayına engel olmamak veya bu işlemi şarta bağladı iseniz, bu şartın yerine gelmesini sağlamaktır. Bunu bir örnek üzerinde görelim. Diyelim ki, HTML sayfanızda, şuna benzer bir FORM etiketi var:
<FORM ACTION=?form_islem.pl? METHOD=?post? onSubmit=?onayla()?>
Burada adı geçen ?onayla()? fonksiyonu HTML?in HEAD bölümünde yer alıyor ve şuna benzer komutlar içeriyor:
//onSubmit olayını yönlendirme fonksiyonu
function onayla() {
confirm(?Bu siparişi vermek istediğinizden emin misiniz??);
}
İlk bakışta böyle bir ?tuzak,? formun bir kere daha onaylandıktan sonra gönderileceğini düşündürebilir. Burada gördüğünüz ?confirm? komutu, Javascript?e, Browser?ın kullanıcıdan OK (Tamam) ve Cancel (İptal) yazılı bir kutu ile onay almasını sağlar. Kullanıcı OK düğmesini tıklarsa, Browser, Javascript?e ?true? (doğru), kullanıcı Cancel (İptal) düğmesini tıklarsa ?false? (yanlış) değeri gönderecektir; sanılabilir ki, Javascript?e ?true? değeri dönerse formu gönderilecek, fakat ?false? değeri dönerse form gitmeyecektir.
Bu doğru değil! Her iki değerde de form gidecektir; çünkü, yukarıdaki kodda Browser?ın Confirm kutusunun oluşturacağı değerin türü ile onSubmit olay yönlendiricisi arasında bir bağ kurulmuyor; başka bir deyişle onSumbit?e kendisine dönmesi gereken bir sonuç olduğu bildirilmiyor. Bunu ?return? anahtar kelimesiyle sağlarız. ?return? (anlamı: geri dön) kelimesi, bir fonksiyona kendisini göreve çağıran unsura mutlaka bir değer göndermesi gerektiğini bildirir. ?return? kelimesini kullanarak, Form etiketini şöyle yazabiliriz:
<FORM ACTION=?form_islem.pl? METHOD=?post? onSubmit=?return onayla()?>
Dolayısıyla ?onayla()? fonksiyonuna da kendisini göreve çağıran komuta bir sonuç ulaştırması gerektiğini bildtirmemiz gerekir:
//onSubmit olayını yönlendirme fonksiyonu
function onayla() {
return confirm(?Bu siparişi vermek istediğinizden emin misiniz??);
}
Bu durumda kullanıcı/ziyaretçi ?confirm? kutusunun OK (Tamam) düğmesini tıklarsa onSubmit yönlendiricisi Form?u belirtilen CGI programına, işlenmek üzere, gönderecek; Cancel (İptal) düğmesi tıklanırsa, onSubmit yönlendiricisi submit olayını durduracaktır.
onReset
Formlara koyduğunuz Reset (Başa dön) düğmesi, bir Form?daki bütün bilgilerin silinmesini sağlar; Browser?ın Geri düğmesini tıklamak dahil, hiç bir eylem ziyaretçinin yanlışlıkla bastığı Sil düğmesinin sildiğini geri getiremez. Fakat programcı olarak siz böyle bir hatayı önleyebilirsiniz. Çünkü Sil düğmesinin oluşturduğu ?reset? olayını yönlendiren onReset, size bu imkanı verir. Tıpkı onSubmit?teki gibi FORM etiketinize onReset tarafından devreye sokulacak bir doğrulama fonksiyonu koyabilirsiniz. Form etiketiniz şöyle olabilir:
<FORM ACTION=?form_islem.pl? METHOD=?post? onReset=?return sahiMi()?>
Bu fonksiyonu da HTML?in HEAD bölümünde şöyle yazabilirsiniz:
//onReset olayını yönlendirme fonksiyonu
function sahiMi() {
return confirm(?Bu formdaki büktün bilgileri silmek istediğinizden emin misiniz??);
}
Ziyaretçiniz doldurduğu formda, Gönder yerine yanlışlıkla Sil?i tıkladıysa, böylece bir şansa daha kavuşmuş olur.
onChange
HTML sayfanızda olabilecek tek değişiklik, ziyaretçinin içine bir şeyler yazabildiği veya bazı işaretler koyabildiği üç alandır: Text (Metin), Textarea (Metinalanı) ve select (Seç) etiketleri. Metin ve metinalanın içini tıklayarak Browser Penceresi?nin odak noktasını buraya getiren ziyaretçi klavyesine basarak, bu alanlara metin girebilir; bu HTML sayfasında ?change? (değişiklik) olması anlamına gelir select etiketinin sağladığı şıklardan birini seçen ziyaretçi de sayfada değişiklik olayına yol açar. ?change? olayı halinde, onChange bu olayı yönlendirir. Javascript programcısı olarak siz bu yönlendiriciye belirli bir fonksiyonu çalıştırmasını bildirebilirsiniz.
Bunu da bir örnekle ele alalım. Diyelim ki Frame (Çerçeve) esasına dayanan bir ana sayfanız var; ziyaretçinin bir çerçevedeki ?select? etiketinin seçeneklerinden birini seçmesi halinde bir diğer çerçevenin içeriği değişsin istiyorsunuz. Ana sayfanızda bir FRAMESET var ve bu üç çerçeveli bir sayfa oluşturuyor. Burada Browser?ın ?document? (sayfa) hiyerarşisi içinde Frameset ?Parent? (ebeveyn; çünkü diğer bütün Frame?leri o doğuruyor!) ve ?Frame 0? (1?nci çerçeve) ?Frame 1? (2?nci çerçeve) ve ?Frame 2? (3?ncü çerçeve) vardır. ?document? nesnesi çerçeveleri bir dizi-değişken içinde tuttuğu ve Array (dizi değişken) numaralanmaya 0?dan başladığı için çerçevelerimiz 0?dan itibaren numaralanıyor. Buna göre sağ Frame?in içeriğini değiştireceğimiz zaman bu çerçeveye "Frame 2" adıyla gönderme yapmalıyız. Frame 1?e şöyle bir FORM koyarsak, daha sonra bu formun değişiklik olayını onChange ile sağ çerçevenin içeriğini değiştirmeye yönlendirebiliriz:
<FORM METHOD="post">
FORM>
Burada, select nesnesinin içeriği, ziyaretçinin herhangi bir seçeneği seçmesi halinde değişmiş oluyor; bu ?change? olayı üzerine bu olayı yönlendirmek üzere kullandığımız onChange ise karşısındaki Javascript komutunu icra etmeye başlıyor. Bu uzun kodda, ?this? (bu) anahtar kelimesinin yeniden kullanıldığını görüyorsunuz. Bu kelime, herhangi bir Javascript fonksiyonuna (adı fonksiyon olmamakla birlikte burada yazdığımız kod da bir fonksiyonun görevini yapıyor) ihtiyacı olan bilgileri bu nesneden almasını bildiriyor. ?Bu? diye nitelediğimiz nesne, içinde bulunduğumuz FORM?un select ögesidir. select ögesinin OPTION?ları, bu nesnenin OPTIONS dizi-değişkeninde numaralanır ve seçilen OPTION?ın numarası ?selectedIndex,? içeriği ise ?.value? adıyla adlandırılır. Nesneleri ve özelliklerini ele aldığımız bölümde bu konuya yeniden döneceğiz.
onFocus, onBlur
Bilgisayarda bir program açıkken, Mouse ile programın başlık çubuğunu tıklayın; çubuğun renginden işletim sisteminin dikkatinin bu programın penceresinde yoğunlaştığını göreceksiniz. Bir de masaüstünde boş bir yeri tıklayın; bu pencere sistemin odak noktası olmaktan çıkacaktır. HTML sayfasında da Browser?ın Focus?unu (dikkat odağını) üzerinde topladığı veya odağın çekildiği üç nesne olabilir: Text (Metin), Textarea (Metinalanı) ve select (Seç) etiketleri. Çünkü ziyaretçinin sadece bu etiketlerin oluşturduğu nesnelere klavyenin dikkatini çekme hakkı vardır. Bu nesnelerden biri tıklanınca Browser?ın focus?u bu nesneye dönmüş, yani ?focus? olayı olmuş demektir; bu durumda, biz de bu olayı yönlendiren onFocus?u kullanabiliriz. Aynı mantıkla, ziyaretçi Browser?ın focus?unu bu nesneden başka bir yere çektiği zaman bu nesne focus?u kaybeder, ?blur? (netlikten çıkma, flulaşma) olayı olur. Bunu da onBlur ile yönlendiririz. Bu iki yönlendiricinin birlikte kullanıldığı şu örnek kodu, onFocus.htm adıyla kaydederseniz ve Browser?da ekrandaki talimatları izlerseniz, her iki yönlendiriciyi de kullanmış olacaksınız:
Lütfen adınızı yazın ve sayfa üzerinde başka bir yeri tıklayın:
Şimdi de aşağıdaki kutuya mesleğinizi yazın:
FORM>
Javascript, üstteki kutuya adınızı yazdıktan sonra başka bir yeri tıkladığınızda olan iş, ?ad? isimli metin kutusunun ?blur? olayına onBlur?ün çağırdığı goster() fonksiyonu ile; alttaki kutuyu mesleğinizi yazmak üzere tıkladığınız anda ?meslek? kutusunda olan ?focus? olayına da uyar() fonksiyonu ile karşılık veriyor.
onMouseOver, onMouseOut
Javascript dünyasında en çok kullanılan iki ?event? varsa, birincisi Mouse işaretçisinin bir nesnenin üzerine gelmesi (?MouseOver? olayı), ikincisi ise Mouse iuşaretçisinin bir nesnenin üzerinden çekilmesi (?MouseOut? olayı) sayılabilir. Bu iki olayı onMouseOver ve onMouseOut yönlendiricileri ile karşılayabiliriz. Gerçekte bu iki olayla, Mouse işaretçisi bir bağlantı satırı veya grafiğinin ve bir grafik haritasının (Map, Area) üzerine geldiği veya üzerinden çekildiği zaman ilgilenebiliriz; çünkü diğer HTML unsurları ve Javascript nesneleri ile Mouse işaretçisinin işaretleme ilişkisi yoktur.
Bu olayı ve yönlendirilmesini, şu küçük programda görebiliriz: