JavaScript Temelleri

Bölüm 18

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

Bölüm 18 Sayfa 3

18.3.6 - window.close() Metodu (Sayfanın Kapanması)

Bu metodun uygulanması,

		window.close();
		

şeklindedir. Bu metodun uygulanmasında, olayların anlaşılması için, öncelikle açılmış olan belge çözümleyici penceresi türlerinin iyi anlaşılması gerekir. Belge çözümleyicisi pencereleri iki farklı yöntemle açılmış olabilir. Bu pencereler:

olarak nitelendirilirler.

window.close() Metodu, uygulandığı pencerenin kapatılmasına çalışır. Pencereler bu isteme, açılmış oldukları yönteme ve belge çözümleyicisi türüne bağlı olarak farklı tepkiler verirler. Belge çözümleyicisi:

Internet Explorer (8.0) ise :

FireFox (3.0) ise :

Opera (9.2) ise :

Programlamada genel uygulanabilirlik gözetilmek durumunda olduğundan, sistem pencerelerinin window.close() metodu ile kapatılmasına çalışılmamalıdır. Çünkü Firefox ve Mozilla ailesi (GECKO Motoru) bir belge çözümleyici kullanan bir kullanıcının penceresinde, bu metot çalışmayacaktır. Ayrıca, sistem pencerelerinin zaten bir kapanma tutamakları bulunmaktadır. Sistem pencerelerini (hatta her açılan pencereyi), kapatma tutamağına tıklayarak kapatma olanağı her zaman bulunmaktadır.

Alt pencererelere bir kapatma olanağı eklenmesi ise, alt pencerin kapatma tutamağı görünmez durumda olarak açıldığı durumlarda gereklidir. Diğer durumlarda, alt pencereler de, sistem pencereleri gibi, kapatma tutamaklarından yararlanılarak kapatılabilirler.

Bu konudaki ilk örneğimiz, bir sistem penceresinin window.close() metodu ile kapatılmaya çalışılmasıdır. Bu programın kodları aşağıda görülmektedir:

/* <![CDATA[  */


function PencereyiKapat() {

window.setTimeOut('windows.close()', 2E3);

}



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


/* ]]>  */
		

Bu program, ilişkilendirildiği sayfada, hiçbir sayfa elemanı ile ilişki kurmamamakta, sadece sayfanın açıldığı pencerenin kapatılmasına çalışmaktadır. Bu sayfayı, değişik belge çözümleyiciler ile açmaya çalışınız. Sadece Internet Explorer uygun bir mesajal sistem penceresini katma olanağı sağlayacaktır. GECKO temeli ile çalışan hiçbir belge çözümleyici, sistem pencerelerinin kapılmasına olanak vermemektedir. Bazı belge çözümleyiciler ise, hiçbir mesaj vermeksizin anında pencereyi kapatmaktadır ve bu kullanıcıyı rahatsız etmektedir. Sonuç olarak, Yukarıdaki program ortak desteklenebilen bir program değildir ve kullanılmaması gerekir. Sistem pencerelerinin kapatılması için, kapatma tutamaklarından yararlanılması daha doğru olacaktır.

İkinci uygulama, JavaScript program adımları ile açılmış olan pencerelerin kapatılmasıdır. Bu konudaki uygulamalar, ilk olarak, 18.3.1 konusunda incelenmiş olan yöntemle bir açılan pencere (pop-up penceresi) açarak, bu pencerenin kullanıcı eliye kapatılmasına çalışacaklardır. Kapatma düğmeleri çoğunlukla açılan sayfa üzerindedir. Bu uygulamada da açılan pencere üzerinde bir kapatma düğmesi bulunmaktadır. Bu program, prensip olarak, 18.3.1 konusunda üçüncü uygulama olarak incelenmiş olan, pencere açma programı ile açılan sayfanın ilişikli olduğu, program kodlarını içermektedir. Bu program kodları aşağıda görülmektedir:

/* <![CDATA[  */

function pencereyiKapat() {

self.close();

}


function pencereyiYazdır() {
			
self.print();

}


function başlat() {

var

kapat = document.getElementById('kapat'),

yazdır = document.getElementById('yaz');

kapat.onclick = pencereyiKapat;

yazdır.onclick = pencereyiYazdır;
			
}


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

/* ]]>  */
		

Bu program kodlarının, ilişikli olduğu tarifeler.htm sayfasının XHTML kodlarının programla ilgili kısımları ise aşağıda görüldüğü gibi sadece sayfa kodlarından oluşmaktadır ve JavaScript kodları bu kodlarla karışmaması için, kendisine özgü bir dış JavaScript sayfasında bulunmaktadır.

...

<p class="indent pl-200">
<input id="kapat" value="Sayfayı Kapat !" />
<input id="yaz" value="Sayfayı Yazdır !" />
</p>
			
...
		

Bu uygulama, tüm belge çözümleyicilerde sorunsuz çalışabilmektedir.

18.3.7 - window.focus() Metodu (Sayfanın İlgi Kazanması)

Bu metot, klavye ilgisinin sağlanması olarak açıklanabilir. Klavye ilgisi bir pencere üzerinde odaklandığında, klavye girişleri, ilginin odaklandığı pencereye yönelir. focus Metodu, blur metodunun antagonistidir (blur metodunun etkisi, focus metodunun etkisi ile ters yöndedir). Klavye ilgisi, bir nesne üzerinde odaklandığında, o nesnenin onfocus olay dinleyicisi, bir eylemi başlatabilir. Genel olarak, window.open() metodu ile açılan alt pencerelerin açılma kodlarına window.focus() metodunun eklenmesi, açılan pencereye anında ilgi sağlayacağı için, iyi bir fikir olabilir. Çünkü, yeni açılan bir pencerenin otomatik olarak ilgi kazanmasına karşın, aynı isimle açık halde olan bir pencereye yeni bir belge yüklenmesi ile sonuçlanan isimli bir alt pencere açma olayında, yeni bir belge yüklenen açık pencere arka plana düşer. Kullanıcının bu pencereye window.focus() bildirimi ile yeniden ilgi kazandırması (ön plana çekmesi) gerekebilir.

Çalışmalarınıza, window.focus() metodunun kullanıldığı çeşitli örnekler verilmiştir. Bu konudaki en son örnek, yukarıdaki, uygulamada gerçekleşmiştir.

18.3.8 - window.moveBy() Metodu (Sayfanın Yer Değiştirmesi)

Bu metot, pencerenin bulunduğu yerden, verilen piksel değerlerine kadar, dikey ve yatay yönde kaydırılmasını sağlar. Kullanımı,

window.moveBy(yatay kaydırma piksel değeri, dikey kaydırma piksel değeri); 

şeklindedir. Bu metodun koordinat sistemi görelidir. Verilen koordinat değerleri, pencerenin bulunduğu koodinatlar (0,0) kabul edilerek, verilen piksel biriminde segment parçaları kadar, pencerenin yerini değiştirirler. Pozitif ve negatif uzunluklar kullanılabilir.

Bu metodun uygulanmasında alt pencerelerde bir sorun yaşanmaz fakat, sistem pencerelerinde, sekmeli sayfalar (tabbed browsing) ve çerçevelerle yapılacak çalışmalarda (frames) bu metot çalışmaz.

Bu konuda, kodları aşağıda görülen bir örnek program verilmiştir. Bu program, uygulama sayfası ile ilişikli olarak çalışmaktadır. Örnekte, sayfanın yer değiştirmeden önce arka plana alınması ve bu şekilde, yer değiştirme işleminin, kullanıcının görüş alanı dışında tamamlanarak, bir rahatsızlığa neden olmaması sağlanmıştır. Yer değiştirme işlemi tamamlandığında, alt pencere tekrar ön plana taşınmaktadı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, "reklam",
'left = 100, top = 10, width = 300, height = 250,' +
'toolbar = no, menubar = no, location = no,' +
'directories = no, scrollbars = no,' +
'resizable = no, status = no');

pencereRef.blur();  // Açık pencere nesnesini ilgi odağından uzaklaştır. 

pencereRef.moveBy(400, 100); // Açık pencere nesnesinin yerini Değiştir.  

pencereRef.focus();  // Açık pencere nesnesini yeniden ilgi odağına getir. 

}


function reklam() {
var
bağlantı = [], URI = '';
			
bağlantı = document.getElementsByTagName('a');
			
URI = bağlantı[6].getAttribute('href');

pencereAç(URI);

return false;
}


function başlat() {

var
bağlantı = [];

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

bağlantı [6].onclick = reklam;
}


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

/* ]]>  */
		

18.3.9 - window.moveTo() Metodu (Sayfanın Yer Değiştirmesi)

Bu metot, pencerenin belirtilen piksel değerlerine uygun olarak yeni koordinatlara geçmesini sağlar. Kullanımı,

window.moveTo(yatay koordinat bileşeni, dikey koordinat bileşeni);
		

şeklindedir. Yatay ve dikey koordinat bileşenleri, piksel olarak verilmelidir. Bu metodun koordinat sistemi mutlaktır. Koordinat ekseni başlangıcı, pencerenin sol üst köşesi, (0,0) olacak şekilde kabul edilmiştir. Negatif koordinat değerleri kullanılmaz.

Bu metodun kullanımı, window.moveBy() metoduna benzer. Uygulanmasında alt pencerelerde bir sorun yaşanmaz fakat, sistem pencerelerinde, sekmeli sayfalar (tabbed browsing) ve çerçevelerle (frames) çalışmalarda bu metot da çalışmaz.

Bu konuda, kodları aşağıda görülen bir örnek program verilmiştir. Bu program, uygulama sayfası ile ilişikli olarak çalışmaktadır. Örnekte, sayfanın yer değiştirmeden önce arka plana alınması ve bu şekilde, yer değiştirme işleminin, kullanıcının görüş alanı dışında tamamlanarak, bir rahatsızlığa neden olmaması sağlanmıştır. Yer değiştirme işlemi tamamlandığında, alt pencere tekrar ön plana taşınmaktadı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, "reklam",
'left = 100, top = 10, width = 300, height = 250,' +
'toolbar = no, menubar = no, location = no,' +
'directories = no, scrollbars = no,' +
'resizable = no, status = no');

pencereRef.blur();  // Açık pencere nesnesini ilgi odağından uzaklaştır. 

pencereRef.moveTo(400, 100); // Açık pencere nesnesinin yerini Değiştir. 

pencereRef.focus();  // Açık pencere nesnesini yeniden ilgi odağına getir. 

}


function reklam() {
var
bağlantı = [], URI = '';
			
bağlantı = document.getElementsByTagName('a');
			
URI = bağlantı[6].getAttribute('href');

pencereAç(URI);

return false;
}


function başlat() {

var
bağlantı = [];

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

bağlantı [6].onclick = reklam;
}


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

/* ]]>  */
		

18.3.10 - window.scroll() Metodu (Sayfanın İçeriğinin Kaydırılması)

Bu metot, pencerenin içeriğinin, verilen piksel değerleri kadar olarak yana ve aşağıya doğru kaymasını sağlar. Kullanımı,

		window.scroll(yatay kayma değeri, dikey kayma değeri);

şeklindedir. Bu metot, göreli bir kayma sağlar. Yatay ve dikey kayma değerlerinin, başlangıç noktası sayfanın, o anda bulunduğu durumdaki değerlerdir. Değerler piksel biriminde belirtilirler. Bu metodun kullanımı, prensip olarak , window.scrollBy() metodu ile aynı sonucu verir.

Bu konuda, kodları aşağıda görülen bir örnek program verilmiştir. Bu program, uygulama sayfası ile ilişikli olarak çalışmaktadı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, "sayfa",
'left = 100, top = 10, width = 300, height = 250,' +
'toolbar = no, menubar = no, location = no,' +
'directories = no, scrollbars = no,' +
'resizable = no, status = no');

pencereRef.scroll(0, 6890); // Açık pencere nesnesinin içeriğinin gösterimini yeni bir koordinattan başlat.

pencereRef.focus();  // Açık pencere nesnesini yeniden ilgi odağına getir. 

}


function kaydır() {
var
bağlantı = [], URI = '';
			
bağlantı = document.getElementsByTagName('a');
			
URI = bağlantı[4].getAttribute('href');

pencereAç(URI);

return false;
}


function başlat() {

var
bağlantı = [];

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

bağlantı [4].onclick = kaydır;
}


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

/* ]]>  */
		

18.3.11 - window.scrollBy() Metodu (Sayfanın İçeriğinin Kaydırılması)

Bu metot, prensip olarak bir önceki, window.scroll() metodu ile aynı etkiyi yapar. Bu konuda yukarııdaki son uygulama, sadece ilgi program adımı,

...

pencereRef.scrollBy(0, 10450); // Açık pencere nesnesinin içeriğinin gösterimini yeni bir koordinattan başlat.
			
...
		

şeklinde değiştirilerek yenilenmiştir. Bu program, bağlantılı olduğu sayfada çalışmaktadır.

18.3.12 - window.scrollTo() Metodu (Sayfanın İçeriğinin Kaydırılması)

Bu metot diğer önceki kaydırma metotları gibi, sayfa içeriğinin belirli bir koordinata kadar kaydırılmasına yarar. Bu yöntemdeki koordinatlar mıutlak değerlerdir. Kartezyen koordinat sisteminin başlangıcı, açılan sayfanın en sol üst köşesinin koordinatları olarak kabul edilen (0, 0) değerleridir. Koordinat birimleri piksel değerleridir.

Bu konuda bir uygulama programı, bir önceki programın ilgili adımlarının

...

pencereRef.scrollTo(0, 10450); // Açık pencere nesnesinin içeriğinin gösterimini yeni bir koordinattan başlat.
			
...
		

şeklinde değiştirilmesi ile gerçekleştirilmiştir. Bu program, bağlantılı olduğu sayfada çalışmaktadır.

18.3.13 - Belge Çözümleyicilere Özgü BOM Metotları

Bu çalışmada sadece, tüm belge çözümleyicilerde desteklenebilen BOM metotları incelenmiştir. Bu metotlardan başka, çok sayıda salt bir tek belge çözümleyiciye özgü ve diğerleri tarafından desteklenmeyen metotlar da bulunmaktadır. Bu özel metotların, genel amaçlı sayfalarda kullanılmaları doğru değildir. Kapalı Intranetlerde ise, yerine göre çok yararlı olabilirler. Salt MSIE için geçerli olan BOM metotları için MSIE referans sayfası ve IE window nesnesi referans sayfalarından yararlanılabilir. GECKO temelli belge çözümleyiciler için, GECKO referans sayfası ve GECKO window nesnesi sayfalarından yararlanılabilir.