JavaScript Temelleri

Bölüm 18

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

Bölüm 18 Sayfa 7

18.7 - window Nesnesinin location Alt Nesnesi

JavaScript programlama ortamında global nesne görevivi üstlenen window nesnesinin genel özellik ve metotları, 2006 da bir sürmekte olan çalışmanın bir başlangıç önerisi (working draft) olarak W3C tarafından yayınlanmıştır. Bu bir öneri henüz bir standart olmamasına karşın, belge çözümleyicilere yol gösteren bir yol haritası belgesi olarak düşünülebilir. Bu belgede window nesnesinin location alt nesnesinin aşağıdaki tablolarda görülen özellik ve metotları desteklemesi öngörülmektedir.

Tablo : 18-17: location Alt Nesnesinin W3C Tarafından Öngörülen Özellikleri
Özellik Tanım
href URI bilgisi (http://x.com gibi)
hash URI bilgisinin # işaretinden sonraki kısmı (http://x.com#xx gibi)
host URI bilgisinin köşeli parantezle ve port sayısı ile birlikte ifadesi ([http://x.com]:80 gibi)
hostname URI bilgisinin sunucu ismi kısmı (pegasus gibi)
pathname URI bilgisi, köşeli parantez ve port sayısı verilmeden (http://x.com gibi)
port Port sayısı ( 80 gibi)
protocol Protokol türü ( http gibi)
search URI bilgisinin ? işaretinden sonraki kısmı (http://x.com?p=depolama gibi)

Özellik değerleri genellikle karakter dizigisi (string) tipindedir. Fakat, eğer String nesnesinin metotları uygulanacak ise, sonucun toString() metodu ile karakter dizigisi (string) tipine dönüştürülmesi sağlk verilmektedir.

Tablo : 18-17: location Alt Nesnesinin W3C Tarafından Öngörülen Metotları
Metot Tanım
assign(URI) Yeni bir sayfa yerinin belirtilmesi
reload(sunucudan) Sunucudan değeri true ise sayfayı sunucudan, yoksa cache- bellekten yeniden yükler
replace(URI) Sayfayı verilen URI bilgisindeki sayfa ile değiştirir. Bu metodun assign() metodunudan farkı, sayfanın oturum history listesinde olmayacağı, yani kullanıcının back butonu ile bu sayfaya gidemeyeceğidir.

17.1 - location Nesnesinin Özellikleri

17.1.1 - location Nesnesinin href Özelliği

Bu özellik değerine, iki klasik yöntem,

location['href'] 
		

ve

location.href
		

şeklinde kullanılabilir. Fakat, prensip olarak window.location alt nesnesinin varsayılan değeri,

location = location.href
		

olduğundan daha fazlasının kullanılması gereksizdir. Sonucun veri tipi bir nesnedir. Fakat, bu nesnenin toString() metodu ile karakter dizigisine dönüştürülen değeri görüntülenir. Bu değer üzerinde String nesnesi metotları uygulanacak ise, sonucun tipini açık olarak karakter dizgisi haline dönüştürmek gerekir. Örnek olarak,

location.toString();
		

şeklinde bir ifade kullanılabilir. Aşağıda kodları görülen program, içinde çalıştığı sayfanın URI değerini görüntülemektedir.


/* <![CDATA[  */

function özellikYaz(mesaj, sonuç, yazımYeriID) {
var yazımYeri = document.getElementById(yazımYeriID), yeniParagraf = null, araYazım= null, bilgi= null;

yeniParagraf = document.createElement('p');
araYazım = document.createElement('span');
araYazım.className = 'cursive-green';
araYazım.appendChild(document.createTextNode(mesaj);
yeniParagraf.appendChild(araYazım);

araYazım = document.createElement('span');
araYazım.className = 'cursive-maroon';
araYazım.appendChild(document.createTextNode(' = '));
yeniParagraf.appendChild(araYazım);

araYazım = document.createElement('span');
araYazım.className = 'cursive-red';
araYazım.appendChild(document.createTextNode(sonuç));
yeniParagraf.appendChild(araYazım);

yazımYeri.parentNode.insertBefore(yeniParagraf, yazımYeri);
}

function işlemleriBaşlat() {
özellikYaz('location ', location, 'navbottom');
}


// Eğer Belge Çözümleyici FireFox ise (GECKO Motoru)

if (window.addEventListener) {
window.addEventListener('load', işlemleriBaşlat , false);
}

// Eğer Belge Çözümleyici Internet Explorer İse

else if (window.attachEvent) {
window.attachEvent('onload', işlemleriBaşlat);
}

/* ]]>  */
		

Yukarıdaki programda görüntülenen değer, hesaplanan mutlak URI değeridir.

Doğrudan location ile erişilen location.href özeliği, iki yönlü çalışır. Eğer bu özelliğe bir değer atanırsa, sayfa derhal bu yeni lokasyona yer değiştirir. Aşağıda kodları görülen program, içinde çalıştığı sayfanın yerini yeni URI değerine yönlendirmektedir.

/* <![CDATA[  */

location = 'http://www.msn.com';

/* ]]>  */
		

Yukarıdaki programda, olduğu gibi bir sayfanın location.href özelliğine yeni bir değer atanması ile sayfa yeni bir lokasyona yönlendirildiğinde, sayfanın yeni yerinden belge çözümleyicisinin back düğmesine basıldığında sayfa bir önceki yerine geri döner. Bunu yukarıdaki programda deneyebiliriz. Sayfa, orijinal yerinden http://www.msn.com sayfasına yönlendirilmiştir. Bu sayfadan back butonuna basıldığında yeniden orijinal yerine döner.

Bu noktada çok dikkatli olmalıyız. Bir sayfada eğer JavaScript işlevselliği iptal edilmişse, bu durumda, sayfanın JavaScript kullanılmayan bir sürümünü kullanılması ve JavaScript işlevselliği olan belge çözümleyicilerde ise JavaScript ile programlama yapılmış sayfanın çalıştırılması için bir hazırlık yapılmış olabilir. Aslında bu fazla sağlık verilen bir yöntem değildir çünkü fazla emek gerektirir, karışıklıklara neden olabilir ve bakım yapılması daha zordur. Buna rağmen böyle bir senaryo daima JavaScript işlevselliği desteklenmeyen bir belge çözümleyici ile başlanıldığı varsayımına göre devreye alınır. İlk olarak aynen yukarıdaki programda olduğu gibi, eğer JavaScript işlevselliği çalışıyorsa sayfa JavaScript kullanılan sayfaya yönlendirilir. Burada eğer back butonuna basılırsa, sayfa yeniden başlangıç sayfasına döner ve burda yeniden geldiği sayfaya yönlendirilir. Yani history siklusuna girilemez ve sayfa geriye gidemez. Bu bir sayfa için en istenmeyen durumdur. Eğer bir sayfayı JavaScript işlevselliği olan bir sayfaya yönlendirme düşünülürse, bunun replace() metodunun kullanılarak yapılmasında yarar bulunmaktadır. Bu şekilde sayfanın back butonu ile geriye gidebilmesi sağlanmış olur.

17.1.2 - location Nesnesinin hash Özelliği

Bu özellik, URI bilgisinin sayı işaretini (#) takip eden kısmıdır. Kullanımı,

location.hash
		

şeklindedir ve bu iki yönlü bir özelliktir. Yani,hem değer okunabilir, hem de istenirse değer belirlenebilir. Bu özellik bir belge içindeki yer belirleme değerini değiştirebilir. Yanlış bir bir yer belirleme değerine zorlamak hata oluşturur.

Eğer bir sayı işareti yoksa, bu özelliğin sorgulanması, geriye boş bir karakter dizgisi döndürür.

Aşağıdaki program bir sayfanın yer belirleme değerini çalıştığı sayfada yazdırmaktadır.

17.1.3 - location Nesnesinin host Özelliği

Bu özellik, hostName ve port özelliklerinin birleştirilmiş şeklidir. Kullanımı,

location.host
		

şeklindedir ve bu iki yönlü bir özelliktir. Yani,hem değer okunabilir, hem de istenirse değer belirlenebilir. Sonuç, üstüste iki nokta (kolon) ile ayrılmış olarak, hostname kısmı köşeli parantez içinde port değeri kolondan sonra tabloda görüldüğü gibi görüntülenir, Eğer bir port değeri yoksa, yani değeri null ise, host özelliğinin değeri hostname özelliği ile aynı olur.

Bu özellik sayfanın yerini değiştirmek için kullaılabilirse de, yer değiştirmeyi href özelliğinden yararlanarak sağlamak daha uygundur.

17.1.4 - location Nesnesinin hostname Özelliği

Bu özellik, URI bilgisinin sunucu ismi kısmını veya sayısal adresi geri döndürür. Eğer bir sunucu bilgisi bulunmazsa boş karakter dizigisi döndürülür. Bu özellik çift yönlüdür, fakat genel olarak sayfa yönlendirme için kullanılmaz. Kullanımı

location.hostname
		

şeklindedir Örnek olarak bir http://www.x.com sayfasının location.hostname özelliğinin değeri , x,
http://127.1.1.1:8000/sites/deneme/examples/hostname.htm sayfasının location.hostname özelliğinin değeri 127.1.1.1 olacaktır.

17.1.5 - location Nesnesinin pathname Özelliği

Bu özellik, URI bilgisinin dosya sistemi kısmını geri döndürür. Bu özellik çift yönlüdür, fakat genel olarak sayfa yönlendirme için kullanılmaz. Kullanımı

location.pathname
		

şeklindedir Örnek olarak bir http://www.x.com/sites/deneme.htm sayfasının, location.pathname özelliğinin değeri , /sites/deneme.htm,
http://127.1.1.1:8000/sites/deneme/examples/pathname.htm sayfasının location.pathname özelliğinin değeri
/sites/deneme/examples/pathname.htm olacaktır.

17.1.6 - location Nesnesinin port Özelliği

Bu özellik, URI bilgisinin port sayısını geri döndürür. Port sayısı URI değerinde bulunmadığı durumlarda geriye boş bir karakter dizisi döndürür. Kullanımı,

location.port
		

şeklindedir Örnek olarak, http://pegasus:8000/sites/deneme/index.htm URI bilgisinin location.port özelliğinin değeri 8000 olacaktır.

17.1.7 - location Nesnesinin protocol Özelliği

Bu özellik, URI bilgisinin protokol kısmını geri döndürür. Kullanımı,

location.protocol
		

şeklindedir Örnek olarak, http://pegasus:8000/sites/deneme/index.htm URI bilgisinin location.protocol özelliğinin değeri http olacaktır.

Bu özellik, URI bilgisinin ? işaretinden sonraki arama-eşleşme kısmını geri döndürür. Kullanımı,

location.search
		

şeklindedir Örnek olarak, http://tr.msn.com/?acid=iehp URI bilgisinin location.search özelliğinin değeri acid=iehp olacaktır.

17.2 - location Nesnesinin Metotları

17.2.1 - location Nesnesinin assign() Metodu

Bu metot, sayfayı adrese yönlendirir. Kullanımı,

location.assign('URI') 
		

şeklindedir. Bu metot yaygın olarak kullanılır. En çok kullanıldığı yer aşağıda kodları verilen programda olduğu gibi konuk olduğu sayfayı yeni bir adrese yönlendirilmesidir. Bu sayfada JavaScript yorumlayıcısı çalışır durumda ise yönlendirme gerçekleşir. Sayfada JavaScript yorumlayıcısı çalışır durumda değil ise, yönlendirme çalışmaz ve kullanıcı verilen bağlantıya kendisi tıklama zorunda kalır.


/* <![CDATA[  */

function yeniYer() {
window.location.assign('http://www.download.com ');
}


function başlat() {
window.setTimeout('yeniYer() ', 5000);
}


// Eğer Belge Çözümleyici FireFox ise (GECKO Motoru)

if (window.addEventListener) {
window.addEventListener('load', başlat , false);
}

// Eğer Belge Çözümleyici Internet Explorer İse

else if (window.attachEvent) {
window.attachEvent('onload', başlat);
}

/* ]]>  */
		

17.2.2 - location Nesnesinin reload() Metodu

Bu metot, sayfayı yeniden yükler. Kullanımı,

location.reload([false (varsayılan) veya true])
		

şeklindedir. Argümanı isteğe bağlı olan mantıksal bir argümandır. Argüman eğer varsayılan olarak bırakılırsa sayfa belge çözümleyicisinin cache-belleğinden, eğer açıkça true olarak belirtilirse, doğrudan doğruya sunucudan yeniden yüklenir.

Bu metot, JavaScript programlarında sayfayı yeniden yüklemek için eldeki olanaklardan birisidir. Diğerleri,

window.location.href
		

ve

window.history(-1)
		

yöntemleridir. Prensip olarak, bu metodun kullanıcı etkisi ile başlatılması uygun olacaktır. Aksi halde otomatik olarak başlatılacak sayfa yenilenmesinin durdurulması çok güç olabilir. Aşağıda kodları görülen program, konuk olduğu sayfayı kullanıcının düğmeyi tıklaması ile, sunucudaki dosyasından yeniden yüklemektedir.


/* <![CDATA[  */

function yükle() {
window.location.reload(true);
}


function başlat() {
window.setTimeout('yükle() ', 5000);
}


// Eğer Belge Çözümleyici FireFox ise (GECKO Motoru)

if (window.addEventListener) {
window.addEventListener('load', başlat , false);
}

// Eğer Belge Çözümleyici Internet Explorer İse

else if (window.attachEvent) {
window.attachEvent('onload', başlat);
}

/* ]]>  */
		

Kullanıcı etkisi olmadan otomatik sayfa yenilenmesine genel olarak fazla gereksinme olmayabilir. Fakat, bu yöntemin kullanılması gerektiğinde, sayfanın sadece bir kez yenilenmesinin sağlanmasında yarar olacaktır, çünkü aksi sitem kaynaklarını fazla işgal edecektir. Yukarıda söylendiği gibi, otomatik sayfa tazelenmesi bir kez başlatıldığında durdurulması zor fakat olanaksız değildir. Internet de dolaşan anonim bir script bu sınırlamayı gerçekleştirme başarısını sağlamaktadır. Bu programın kodları aşağıda görülmektedir. Bu program, bağlantılı olduğu sayfayı yüklendikten 5 saniye (5000 milisaniye) sonra bir kez tazelemektedir.

/* <![CDATA[  */


function mesaj() {
var mesajAlanı = document.createElement('p'),
ilkSatır = document.createElement('span'),
ikinciSatır = document.createElement('span'),
ilkMesaj = document.createTextNode('Bu Sayfa Kısa Süre Sonra Yeniden Yüklenecektir.'),
satırBaşı = document.createElement('br'),
ikinciMesaj = document.createTextNode('Sayfa Yenilenmesi Gerçekleşmezse, Lütfen Sayfanın Yenileme Düğmesine Basınız!'),
altAlan = document.getElementById('navbottom'),
üstAlan = altAlan.parentNode;
			
mesajAlanı.className = 'cursive-red' ; 


ikinciSatır.appendChild(ikinciMesaj);

iikSatır.appendChild(ilkMesaj);
iikSatır.appendChild(satırBaşı);
iikSatır.appendChild(ikinciSatır);
			
mesajAlanı.appendChild(iikSatır);

üstAlan.insertBefore(mesajAlanı, altAlan);

}


function mesajYenile() {
var mesajAlanı = document.createElement('p'),
mesaj = document.createTextNode('Sayfanın Yüklenmesi Tamamlandı !'),
altAlan = document.getElementById('navbottom'),
sayfaAlanı = document.getElementsByTagName('body');
			
mesajAlanı.className = 'cursive-blue' ;

mesajAlanı.appendChild(mesaj);

üstAlan.insertBefore(mesajAlanı, altAlan);

}


function yükle() {

var reloaded = false,

loc = '' + document.location;

loc = loc.indexOf('?reloaded=') != -1 ? loc.substring(loc.indexOf('?reloaded=') + 10, loc.length) : '';
loc = loc.indexOf('&') != -1 ? loc.substring(0, loc.indexOf('&')) : loc';
reloaded = loc != '' ? ( loc =='true') : reloaded;

function reloadOnceOnly() {
			
if(reloaded) {
window.location.replace(window.location + '?reloaded=true');
}
}
reloadOnceOnly();
}

function başlat() {
var kontrol = window.location;
			
kontrol == 'file:///F:/sites/opus/uygulamalar/b18.7.2.2-uyg-2.htm' ? mesaj() :  mesajYenile();

window.setTimeout('yükle()', 5000);
}


// Eğer Belge Çözümleyici FireFox ise (GECKO Motoru)

if (window.addEventListener) {
window.addEventListener('load', başlat , false);
}

// Eğer Belge Çözümleyici Internet Explorer İse

else if (window.attachEvent) {
window.attachEvent('onload', başlat);
}
/* ]]>  */
		

Yukarıdaki program, karmaşık görünebilen bir yapıda olmasına karşılık çok basit bir plan üzerine oluşturulmuştur. Bu plan, sayfanın yayınlandığı URI bilgisini bir karakter dizgisi değişkeni (string) haline getirmek ve bu veriyi derinliğine analiz etmek olgusuna dayanmaktadır. Eğer, URI bilgisi eklenecek etkisiz arama metni, (search string) içermiyorsa, sayfa tazelenecek ve yer imi olan URI değerine, etkisiz bir belirli arama karakter dizigisi ('?reloaded=true' eklenecektir. Bu şekilde, sayfanın URI değerinin bir kısmı aranacak metni içerdiğinden sayfa birkez daha tazelenmeyecektir. Bu plan basit olmasına karşın, gerçekleştirilmesi için yazılması gereken program adımlarının izlenmesi kolay değildir. Bazı program adımları, W3C-DOM yöntemlerini, içermektedir ve bu yöntemler bir sonraki bölümde tartışılacaktır. Bazı program adımları ise daha önce incelenmiş yöntemleri içermektedir. Bu adımların anlaşılması için, ilgili konular yeniden incelenmeli ve program adımları tam olarak açıklığa kavuşturulmalıdır.

17.2.3 - location Nesnesinin replace() Metodu

Bu metot, prensip olarak assign() metodu ile ile aynıdır. Sadece, bu metot uygulanarak yönlendirilmiş olan sitenin daha önceki lokasyonuna, belge çözümleyicinin back düğmesi tıklanarak dönülemez. Burada back butonu, sayfayı bir öncekinden daha önceki lokasyona yönlendirerek, bir önceki sayfada yeniden yönlendirme varsa bu etkiden kurtulunarak, yeniden history siklusuna dahil olunabilmesini sağlar. Özellikle bu etki, bir sayfayı JavaScript işlevselliği olan eşdeğerine yönlendirmekte yararlıdır. Bu konudaki bilgiler, location.href özelliğinin incelenmesinde konu 17.1.1 de tartışılmıştır.

Bu metot, sayfadaki belgeyi, belirtilen adresteki belge ile değiştirir. Kullanımı,

location.replace('URI') 
		

şeklindedir.

Aşağıda, üç tane web sayfası örneği hazırlanmıştır. Bunlardan ilki orjinal sayfadır ve bir başka sayfaya bağlantı sağlamaktadır. Yönlendirilmiş sayfanın görüntülendiği belge çözümleyicisi JavaScript işlevselliğini destekliyorsa, sayfa, JavaScript programının çalıştığı sürüme yönlendirilmekte, aksi halde yönlendirme gerçekleşmemektedir.

Bu programlar, JavaScript işlevselliğini desteklemeyen Amaya gibi bir belge çözümleyicide görüntülenirse, yönlendirme, ilk sayfada tamamlanacak ve JavaScript ile programlanan sürüm hiçbir zaman görüntülenmeyecektir.

Bu programlar, IE 8 gibi JavaScript işlevselliğini destekleyen ve desteği açık olan bir belge çözümleyicide çözümleniyorsa, yönlendirme, JavaScript destekli son sayfaya kadar ilerleyecek ve en son sayfada back butonuna basıldığında yine orijinal sayfaya dönülecektir. Yani back butonu beklendiği gibi çalışacak, kulanıcılar, kullandıkarı belge çözümleyicinin çözümleyecebileceği sürümü göreceklerdir.

İlk sayfanın yönlendirdiği ilk sayfada hiçbir JavaScript kullanımı yoktur. Sadece bu sayfada bir yönlendirme script'i bulunmaktadır. Eğer, belge çözümleyicisi JavaScript işlevselliğini destekliyorsa bu script çalışarak sayfayı aynı sayfanın JavaScript programları olan sürümüne yönlendirecektir. Bu script aşağıda görülmektedir

/* <![CDATA[  */

function başlat() {

window.location.replace('./locationreplace2.htm');
}


// Eğer Belge Çözümleyici FireFox ise (GECKO Motoru)

if (window.addEventListener) {
window.addEventListener('load', başlat , false);
}

// Eğer Belge Çözümleyici Internet Explorer İse

else if (window.attachEvent) {
window.attachEvent('onload', başlat);
}

/* ]]>  */
		

Özetle, eğer sayfanın biri JavaScript kullanılan, diğeri JavaScript kullanılmayan iki paralel sürümü ile çalışılacaksa, yönlendirmenin JavaScript kullanılmayan sayfaya yapılması ve bu sayfadan location.href özelliğinin değil, location.replace() metodunun kullanımı ile, JavaScript kullanılan sayfaya otomatik yönlendirme yapılması gerekir. Bu şekilde, kullanıcılar belge çözümleyicilerinin destekleyebildiği sürümleeri görecekler ve back butonu da gereği gibi sayfayı history siklusuna sevk edebilecektir.