JavaScript Temelleri

Bölüm 18

Belge Çözümleyicisi Nesne Modeli (Browser Object Model) (BOM)

Bölüm 18 Sayfa 2

18.3.2 - window.blur Metodu

Bu metot, Javascript program adımları tarafından open() metodu ile ve açılan pencere nesnesinin bellek işaretçisinin bir pencere referans değişkenine atanmış olan açılmış pencereler üzerinden ilgi odağını kaldırır. Bu metodun uygulanması sonucunda, geçerli pencere, geçerli pencere olma niteliğini kaybederek, arka plana geçer. Arka plandaki bir pencereden okuma yapılamaz ve böyle bir pencereye bilgi yazılamaz. JavaScript pencere nesnesinin blur() Metodu, sadece Javascript program adımları tarafından açılmış ve referansı bir değişkene atanmış yani bir pencere referansı belirlenmiş olan pencerereler üzerinde etkilidir. İşletim sistemi tarafından açılmış olan pencere refransı belli olmayan pencerelere JavaScript program adımları ile erişilemediğinden, bu pencerelerin üstündeki ilgi odağının bu metot ile kaldırılması olanağı yoktur. İşletim sistemi tarafından açılmış olan pencerelerin üzerindeki ilgi odağı, ancak kullanıcı başka bir pencereye geçtiğinde kalkarak, yeni pencereye geçer.

Bu yöntemin uygulanması aşağıda JavaScript kodları görülen bir örnekle açıklanmıştır.


/* <![CDATA[  */

function pencereAç(URI) {

/*Not: Eğer isim parametresi ile bir 
boş karakter dizgisi (str) literal veya _blank
değil geçerli bir karakter dizgisi (str) literal
veriliyorsa ve bu isim ile sistemde açık bir pencere varsa, 
yeni bir pencere (window) değil, aynı pencerede , içeriği, 
bu fonksiyonun URI argümanının işaret ettiği belgenin 
içeriği olan yeni bir belge (document) açılacaktır.
Yani, aynı isimli açık pencerenin içeriği değişecektir*/


pencereRef=window.open(URI, "Tarifeler",
'left = 400, top = 10, width = 600, height = 450,' +
'toolbar = no, menubar = no, location = no,' +
'directories = no, scrollbars = yes,' +
'resizable = no, status = yes');
pencereRef.blur();  // Açık pencere nesnesini yeniden ilgi odağına getir. 

}


function otobüsTarifesi() {
var
bağlantı = [], URI = '';
			
bağlantı = document.getElementsByTagName('a');
			
URI = bağlantı[5].getAttribute('href');
pencereAç(URI);
return false;
}


function başlat() {

var
bağlantı = [];

bağlantı = document.getElementsByTagName('a');

bağlantı [5].onclick = otobüsTarifesi;
}


sayfaYüklendiktenSonraÇalıştır(başlat);

/* ]]>  */
		

Bu örnekte, açılan pencerenin, açıldığı anda ortadan kaybolduğu görülmektedir. Aslında pencere kapanmamış, fakat arka plana atılmış ve üzerinden ilgi kalkmıştır. Bu olaya blur (gözönünden uzaklaştırma) adı verilmektedir. İlgi odağının değiştirilmesi, bir kullanıcının sürekli yaptığı bir eylemdir. Açık pencerelerden birisi ile çalışılırken, mouse ile başka bir pencerenin içeriğine tıklanması, anında ilgi odağının yeni penceye aktarılmasına neden olur. Çalışmanın akışı içinde bir kullanıcı bunu doğal kabul eder ve geçişi farketmeyebilir. Olayların oluşunu gözleyen, olay yöneticileri ise, bu gibi olayları anında algılar ve vermeleri programlanmış olan tepkileri verirler. Böylece, bir blur olayını gözleyen onblur olay yöneticisi, ilgi değişikliğini algıladığı anda, örnek olarak bir alert() mesajı verdirebilir.

Kullanıcılar, ilgilenmekte oldukları pencerelerin, kendi kontrolleri dışında, gözönünden kaybolmasından hoşlanmazlar. Bu nedenle, blur olay yaratıcısının ve olay yöneticisinin fazla kullanılmaması yönünde genel bir eğilim oluşmuştur.

18.3.3 - setInterval() ve clearInterval() Metotları

setInterval() Metodu, bir program kodunu belirli aralıklar (interval) ile tekrar eder. Kullanımı,

window.setInterval(Program Kodu,milisaniye);
		

şeklindedir. Burada, program kodu bir ifade veya fonksiyon olabilir. Milisaniye türünden aralık süreci, 60000 milisaniye=1dakika olacak şekilde hesaplanır. setInterval() Metodunda, her yeniden başayan aralık süreci, kendisi için spesifik bir tamsayı değer olan süreçKimlikDeğeri kimlik değerini geri döndürür. Bu kimlik değerinden yararlanılarak, başlatılmış bir aralık işlemi, clearInterval() metodu ile sona erdirilebilir.

clearInterval() Metodu, setInterval() metodu ile konulan bir aralık sürecini durdurur. Kullanımı,

window.clearInterval(süreçKimlikDeğeri);
		

şeklindedir. Bu metot, belirli bir aralık sürecini durdurmak için, süreçKimlikDeğerinden yararlanır. Birden fazla aralık süreci çalışıyorsa, durdurulacak aralık süreci, özgün süreçKimlikDeğeri değerlerinden yararlanılarak durdurulabilir.

Aşağıda, bu konudaki uygulama sayfasının ilgili kısmı görülmektedir:

<p id="sayfaortala">
<input type="button" class="sil" size="50" value="Başlat!" />
<input type="button" class="kaydet" size="50" value="Sonlandır!" />
</p>

<p id="indent">
<input type="text" size="30" />
<input type="text" size="70" />
</p>

<p id="indent">
<input type="text" size="23" />
<input type="text" size="30" />
</p>

Program kodları ise,

/* <![CDATA[  */

function Başlangıç() {

var düğme = document.getElementByTagNames('input'), süreç1KimlikDeğeri = 0, _gizli = true;

this.başlat = function () {
if (_gizli) {
süreç1KimlikDeğeri = setInterval(alarm(), 5E3);
düğme[2].style.color = 'red';
düğme[2].value = 'Süreç1 Başlatıldı !';

düğme[3].style.color = 'red';
düğme[3].value = ''Süreç1 Başlatıldı, Süreç1 Kimlik Değeri Üretildi, Göstergeyi Bekleyiniz !';

düğme[4].style.color = 'brown';
düğme[4].value = 'Süreç1 Kimlik Değeri';

düğme[5].style.color = 'brown';
düğme[5].value = Süreç1KimlikDeğeri;
}

_gizli = false;

}

this sonlandır = function () {

clearInterval(süreç1KimlikDeğeri);

süreç1KimlikDeğeri = 0;

düğme[2].style.color = 'red';
düğme[2].value = 'Süreç1 Durduruldu !';

düğme[3].style.color = 'red';
düğme[3].value = 'Süreç1 Durduruldu, Yeniden Başlamak İçin Lütfen Başlat Düğmesine Yeniden Basınız !';

düğme[5].value = 0;
}
}


function alarm() {

var zaman=new Date();
	
alert(zaman.toLocaleString());

}


function başlat() {

var buton = document.getElementByTagNames('input'), süreç1 = new Başlangıç();

buton[0].onclick= süreç1.başlat;
buton[1].onclick= süreç1.sonlandır;

buton[2].style.color = 'navy';
buton[2].value = 'Yeni Süreç !';

buton[3].style.color = 'navy';
buton[3].value = 'Süreçi Başlatmak İçin Lütfen Başlat Düğmesine Basınız !';

buton[4].style.color = 'navy';
buton[4].value = 'Süreç Kimlik Değeri';

buton[5].style.color = 'navy';
buton[5].value = 'Henüz Verilmedi!';
}



sayfaYüklendiktenSonraÇalıştır(başlat);

/* ]]>  */
		

şeklindedir.

Yukarıdaki program, basit görünmesine karşın çözümü çok zor olan duyarlı konuların üstesinden gelebilmiş orijinal bir yazılımdır. Herşeyden önce bu program, sayfa kodlarını engellemeyen bir JavaScript programı niteliğindedir. Sayfa kodlarında hiç JavaScript kodu görülmemektedir. Tüm JavaScript kodları ayrı bir kod sayfasında toplanmıştır. Sayfa kodlarında hiç JavaScript kodu görülmemesinin sağlanabilmesi için, XHTML olay yöneticileri kullanılmamış, bunun yerine JavaScript olay yöneticileri kullanılmıştır. Bunun programlama açısından çeşitli ek güçlükler getirdiği bilinmektedir. Buna rağmen kodların temizliği adına zorluklar göze alınmış ve aşılmaya çalışılmıştır. Yine bu programda, hiç global değişken kullanılmamış ve bunun da getirdiği zorlukların üstesinden gelinmeye çalışılmıştır.

JavaScript yorumlayıcısı, setInterval() Metodu ile başlatılan her sürece özgün bir tamsayı olan bir süreçKimlikDeğeri verir. Bu değer belirtilmeden, yaratılmış bir süreç clearInterval() metodu ile durdurulamaz. Global değişken kullanılmadan Bu değerin olay yöntecisi fonksiyonlar arası akatrımı çok güçtür, çünkü, JavaScript olay yönetiminde, bir olaya bağlanacak fonksiyonlarda, argüman kullanılamamaktadır.

setInterval() ve clearInterval() Metotları ile çalışmanın ek bir zorluğu, kullanıcının bir sürecin başlatılmasından sonra yeniden bilinçsizce başlat düğmesine sürekli basmasıdır. Bu durumda, sürecin kimlik değeri yenileceğinden, saklanan süreç kimlik değeri ile sürecin clearInterval () metodu ile iptal edilmesi olanağı ortadan kalkacaktır. Bu konudaki programlarda, üstüste tıklamanın etkisiz kalması için bir yöntem bulunmalıdır.

Tüm bu sorunların aşılması için, yukarıdaki programda olağanüstü önlemler alınmıştır. Süreç kimlik değeri ve üstüste tıklamanın etkisizleştirilmesi için, kullanıcı tipli nesnelerin özel üyeleri kullanılmıştır. Burada Başlangıç() sınıfının özel üyeleri, süreç1KimlikDeğeri ve _gizli adlı değişkenlerdir. Bu değişkenler sayesinde değer aktarımı ve üstüste tıklamanın etkisizleştirilmesi sağlanabilmektedir. Yukarıdaki programın çok iyi izlenmesi gerekmektedir.

Yukarıdaki programda, örnek olarak tek bir sürecin başlatılıp durdurulması yapılmıştır. Bu program istendiğinde birden çok sürecin kontrolünü sağlayabilir. Bunun için, birinci süreçte gerçekleştirilen program adımları, bundan sonraki süreçler için de tekrar edilmelidir.

18.3.4 - setTimeout() ve clearTimeout() Metotları (Gecikmeli Kod Çalıştırılması)

setTimeout() Metodu, belirli bir fonksiyon veya ifadenin gecikmeli olarak çalıştırılması için kullanılır. Kullanımı

setTimeout('fonksiyon veya ifade',milisaniye olarak zaman);
		

şeklindedir. Bu sözdiziminin setInterval() metodu ile aynı olduğu görülmektedir.

setTimeout() Metodu, yarattığı olayın sadece bir kez gerçekleşebilmesi açısından, setInterval () metodundan farklıdır. Bu nedenle, bu metodun durdurulmasına yarayan clearTimeout() metoduna fazla gereksinme olmaz. Kullanıcının ancak setTimeout() metodu ile gerçekleşecek olayın gerçekleşmesine kadar olan süre içinde, geröekleşecek olayı clearTimeout() metodu ile durdurma şansı vardır ve normalde, kullanıcı bu süre içinde olayı durdurmakta başarılı olamaz. Bu nedenle, olayın gerçekleşmeden durdurulması için kullanıcıya güvenmemek gerekir. Web sitelerinin izleyicilerinin sitede ne kadat duracakları belli olmaz. Bu nedenle ne kadar uzun süreli gerçekleşme süreçleri yaratılırsa olayın izlenme şansı da o kadar düşer. Bu nedenle, önemli bilgilerin görüntülenmesi hiçbir şekilde setTimeout() metoduna bağlanmamalıdır. Çünkü, bu durumda kullanıcıların bu bilgiden yoksun kalma olasılıkları yüksek olacaktır.

setTimeout() Metodunun en çok kullanıldığı uygulamalar, animasyon tipi ugulamalar, resimlerin yer değiştirmesi reklem pencerelerinin açılması ve benzeri işlemlerdir. clearTimeout() Metodu ise çoğunlukla turunu tamamlamış bir animasyonun otomatik olarak durdurulması amacı ile kullanılır.

setTimeout() Metodunun programlanması da setInterval() metodundan daha kolaydır. Burada olay sadece bir kez gerçekleştiğinden tıklama kontrolüne gerek kalmamaktadır. Çünkü, olay zaten bir kez gerçekleşecektir ve clearTimeout() metodu en son oluşan süreçKimilkDeğerini izleyecektir. Bu konuda, oluşturulmuş örnek program, bir önceki setInterval() metodu örnek programına kıyasla, önemli değişiklikler içermektedir. Bu programda, tıklama kontrolü yapılmamaktadır. Başlatılan bir sürecin durdurulabilmesini sağlayan, süreçKimlikDeğerinin, clearTimeout() metoduna global değişken kullanılmaksızın aktarılabilmesinin sağlanması için, olayın başlatılma ve durdurulması aynı fonksiyonun alt fonksiyonları olarak düzenlenmiştir. Bu bir kapalı devre (closures) uygulamasıdır. setTimeout() Metodunun uygulama programının yazılımı aşağıda görülmektedir. Bu programın ilişkili olduğu sayfada verdiği sonuç yerinde denenebilir.

/* <![CDATA[  */

function alarm() {

var zaman=new Date(), düğme = document.getElementByTagNames('input');
	
alert(zaman.toLocaleString());

düğme[2].style.color = 'red';
düğme[2].value = 'Olay Gerçekleşti !';

düğme[3].style.color = 'red';
düğme[3].value = 'Olayı Yeniden Başlatmak İçin Lütfen Sayfayı Yenileyiniz Veya Başlat Düğmesine Yeniden Basınız !';

düğme[5].value = 0;

}


function başlat() {

var düğme = document.getElementByTagNames('input'), süreç1KimlikDeğeri = 0;

buton[2].style.color = 'navy';
buton[2].value = 'Yeni Süreç !';

buton[3].style.color = 'navy';
buton[3].value = 'Süreçi Başlatmak İçin Lütfen Başlat Düğmesine Basınız !';

buton[4].style.color = 'navy';
buton[4].value = 'Süreç Kimlik Değeri';

buton[5].style.color = 'navy';
buton[5].value = 'Henüz Verilmedi!';


buton[0].onclick= function() {

süreç1KimlikDeğeri = setTimeout('alarm()', 2E3);
düğme[2].style.color = 'red';
düğme[2].value = 'Süreç1 Başlatıldı !';

düğme[3].style.color = 'red';
düğme[3].value = ''Süreç1 Başlatıldı, Süreç1 Kimlik Değeri Üretildi, Göstergeyi Bekleyiniz !';

düğme[4].style.color = 'brown';
düğme[4].value = 'Süreç1 Kimlik Değeri';

düğme[5].style.color = 'brown';
düğme[5].value = Süreç1KimlikDeğeri;
}


buton[1].onclick = function () {

clearTimeout(süreç1KimlikDeğeri);

süreç1KimlikDeğeri = 0;

düğme[2].style.color = 'red';
düğme[2].value = 'Süreç1 Durduruldu !';

düğme[3].style.color = 'red';
düğme[3].value = 'Yeniden Başlamak İçin Lütfen Sayfayı Yenileyiniz Veya Başlat Düğmesine Yeniden Basınız !';

düğme[5].value = 0;
}

}

sayfaYüklendiktenSonraÇalıştır(başlat);

/* ]]>  */
		

Modal pencereler, JavaScript tarafından açılan ve kullanıcıdan bir etki bekleyen ve bu etki gerçekleştiğinde otomatik olarak kapanan pencerelerdir. Modal bir pencere açıldığında, JavaScript program çalışması durur ve kullanıcının vereceği tepkiye göre yeniden devam eder.

JavaScript programlamasında, iki tür modal pencere oluşturulabilir. Bunlardan ilki, window nesnesinin, öntanımlı hazır metotları olan alert(), confirm() ve prompt() metotları ile açılan modal diyalog pencereleridir. İkinci tür modal pencereler, Scott Andew tarafından örneklerinin verildiği ve W3C-DOM yöntemlerinden yararlanılarak görüntülenen pencerelerdir. Bu tür pencereler, Bölüm 19 da açıklanacaktır. Burada sadece window nesnesinin üç hazır metodundan yararlanılarak açılabilen modal diyalog pencereleri incelenecektir.

Bu metot, modal bir mesaj penceresi açar ve window nesnesinin, modal pencere açan metotlarından biridir. Modal pencere, kullanıcı tarafından kapanması gereken bir pencere türüdür. Modal pencerelere, dialog kutusu adı da verilmektedir. Kullanımı,

window.alert([sMesaj]);
		

şeklindedir. Burada, metodun argümanı olan ve karakter dizgisi tipinde olacağı belirtilen veri, bir karakter dizgisi literal veya program akışı içinde sayısal bir değeri olan ve değeri otomatik olarak karakter dizgisi tipine çevrilen bir değer de olabilir. Bu metodun açtığı modal pencerenin (diyalog kutusunun) başlığı kullanıcı tarafından değiştirilemez.

window.alert() hazır fonksiyonu, geriye bir değer döndürmez. Bu metodun içeriği olan karakter dizgisi, (X)HTML değil düz metin formatındadır ve mesajın görüntülenmesi için sadece standart metin düzenleme kodlarından yararlanılabilir. Bu kodlar,

Table 18.6 - Standart Metin Düzenleme Kodları
kontrol/kaçış Unicode değeri etkisi
t \u0009 yatay tab
n \u000A Satırbaşı
v \u000B dikey tab
f \u000C form feed
r \u000D tekrar aynı satırın başına

şeklindedir. Bu konuda, aşağıda görülen bir örnek, girilen bir sayısal verinin kullanılması ile gerçekleştirilebilecek her türlü matematik işlemin sonucun hesaplayacak kapasitede bir hesapla() fonksiyonunu kullanarak sonucu bir window.alert() penceresinde görüntülemektedir. Bu sayfanın ilgili elementlerinin XHTML kodları aşağıda görülmektedir:


<p class="indent green pl-50 dikeyTab-10">
Sonucu hesaplamakiçin lütfen düğmeye basınız !
</p>

<p class="indent green pl-200 dikeyTab-10">
<input type="text" size="4" value="&#x221A" />
<input type="text" size="20" id="veri" />
</p>

<p class="dikeyTab-50">
<input type="text" class="option-2" value="Sonucu Hesapla !" />
</p>
		

Görüldüğü sayfanın içerik (XHTML), görütelenme(CSS) ve davranış (JavaScript) kodları, birbirinden kesinlikle ayrılmıştır. Tüm kodlar, kendilerine özgü, ayrı sayfarda bulunmaktadır. Kodların birbirbirini engellememesi amacı ile, XHTMl olay yöneticileri değil, JavaScript olay yöneticileri kullanılmıştır. Bu sayfanın, Program kodları ise,

/* <![CDATA[  */

function başlat() {

var düğme = document.getElementByTagNames('input'), 
veriGirişi = giriş[1],
düğme = giriş[2];

düğme.onclick = function () {

var veri = veriGirişi.value,
sonuç = Math.sqrt(veri);

alert('Sonuç = ' + sonuç);
}

}

sayfaYüklendiktenSonraÇalıştır(başlat);

/* ]]>  */
		

şeklindedir.

alert() Modal pencereleri, bir tür kullanıcıyı bilgilendirme pencereleridir. Bunları mesaj pencereleri olarak tanımlamak daha doğru olacaktır. Bu pencereler, son derece yararlı enstrümanlardır ve kullanıcılara her türlü verilerin iletilmesi için kullanılabilirler. Bu pencerelerde, yanlış girilen veriler, bulunmayan aranan bilgiler, hesap sonuçları gibi bilgiler kullanıcılara kolaylıkla iletilebilir.

alert() Mesaj pencereleri, daha önce incelenmiş olan, havada uçan (on the fly pop-up) mesaj pencerelerinin yaratabileceği sorunları yaratmaz. Pop-up pencere önleyicileri, alert() pencerelerini engellemez. alert() Pencerelerinin kullanımları daha güvenli, fakat içerik olarak salt metin temelli olduklarından, verebilecekleri salt metin mesaj daha renksiz ve formatlanması daha zordur. Havada uçan pencerelerin kullanımında ise, bu pencerelerin içerikleri (X)HTML formatında olduğundan tüm mültimedya olanaklarından yararlanma olanağı elde edilerek. gözalıcı mesajlar verilebilir. Fakat, açılan pencere önleyicileri bu pencereleri engelleyecektir.

Bu metodun amacı, bir diyalog kutusunun (modal bir pencerenin) açılarak kullanıcıya bir değişkenin değerini belirleme olanağı sağlamaktır. Diyalog kutusu kapatıldığında, program değişkenin yeni değeri ile kaldığı yerden devam eder.

prompt() Metodunun kullanım şekli, aşağıda görülmektedir:

değer=prompt('[Mesaj]'[,varsayılan değer]);
		

prompt() Metodu, etkili fakat demode bir veri girişi sağlar. Açılan prompt() penceresi, sakil bir görüntü verir. JavaScript yeni W3C-DOM yöntemleri ile sayfaya girilecek tüm veri kaynaklarını değerlendirebilecek durumdadır. Yani, prompt ()pencerelerine artık gerek kalmamıştır. Yine de, metodun çalışmasının bilinmesi gerekir.

Bu metot, modal alt pencere açan JavaScript hazır pencere metotlarının sonuncusudur. Bu metodun amacı kullanıcının onay yanıtı verebileceği bir mesaj penceresinin açılmasıdır. Bu metodun sözdizimi,

onay=window.confirm ([sMesaj]);
		

şeklindedir. window sözcüğü diğerlerinde olduğu gibi istenirse ihmal edilebilir. Burada onay, isteğe bağlı bir mantıksal değişken, Mesaj isteğe bağlı bir karakter dizgisi (str) değişkendir. Bu Metot geriye mantıksal bir değer döndürmektedir. Kullanıcı onay kutusunun önermesini onaylarsa, geri döndürülen değer true, aksi halde false olacaktır. Bu metot da aynı bir önceki metot gibi demode olmuştur ve günümüzde daha etkili etkileşim yöntemleri kullanılmaktadır.