JavaScript Browser Nesneleri

JavaScript' de browser (tarayıcılar) ile ilgili özellikleri ayarlayabilmemiz için bazı özellikler vardır.Bunların en çok kullanılanlarını seçtim.

Browser Nesneleri

Browser’ın Javascript dilinde adı Navigator’dır. Ziyaretçinin Browser programı ister Netscape Navigator olsun, isten Internet Explorer olsun, Javascript için Navigator’dır; nesnelerine de Navigator Nesneleri denir. Bunların başında, Browser’ın pencereleri ve Çerçeveler gelir.

Pencere (window)

Şu ana kadar yazdığımız bir çok Javascript kodunda Navigator penceresinin bazı özelliklerini kullandık: width (genişlik), height (yükseklik), toolbar (araç çubuğu) gibi. Şimdi bu özellikleri toplu olarak sıralayalım:

width                      Navigator’ın sayfanın görüntülenmesi için ekrandaki temiz alanının piksel olarak genişliği.

height                     Navigator’ın sayfanın görüntülenmesi için ekrandaki temiz alanının piksel olarak yüksekliği.

toolbar                    Navigator’ın araç çubuğunun gösterilmesi (=1) veya gizlenmesi (=0).

menubar                 Navigator’ın menü çubuğunun gösterilmesi (=1) veya gizlenmesi (=0).

scrollbars                Navigator’ın sağ ve alt kenardaki kaydırma çubuklarının gösterilmesi (=1) veya gizlenmesi (=0).

resizable                 Navigator penceresinin büyütülebilir-küçültülebilir olması (=1) veya olmaması (=0).

status                     Navigator penceresinin alt kenarındaki mesaj çubuğunun gösterilmesi (=1) veya gizlenmesi (=0).

location                   Navigator penceresinin URL adres çubunun gösterilmesi (=1) veya gizlenmesi (=0).

directories               Netscape’de ikinci araç çubunun gösterilmesi (=1) veya gizlenmesi (=0).

copyhistory              Mevcut Navigator penceresinin history kaydının (daha önce ziyaret edilen URl adreslerinin tutulduğu çizelgenin) yeni pencereye de kopyalanması.

outerWidth              Navigator penceresinin piksel olarak genişliği.

outerHeight              Navigator penceresinin piksel olarak yüksekliği.

left                        Navigator penceresinin ekranın sol kenarından piksel olarak uzaklığı.

top                         Navigator penceresinin ekranın üst kenarından piksel olarak uzaklığı.

alwaysRaised           Navigator penceresinin masaüstünde açık bütün pencerelerin üzerinde kalmasını sağlar. (Sadece Windows ve MacOS’de işler.)

z-lock                     Navigator penceresinin içi tıklansa bile masaüstünde açık bütün pencerelerin altında kalmasını sağlar. (Sadece Windows ve MacOS’de işler.)

(Evet-Hayır anlamına değer alan özellikleri 1 ve 0 ile belirtebileceğiniz gibi yes (evet) ve no (hayır) ile de belirtebilirsiniz.)

Javascript’in yeni Navigator penceresi açma metodu, window.open() şeklinde yazılır:

yeniPencere = window.open(“yenisayfa.htm”, “YeniPencereninAdı”, “toolbar=1, menubar=yes, resizable=no”)

Burada, yeni pencereye vermek istediğiniz adın tek kelime olduğuna, özelliklerin bir çift-tırnak içinde toplandığına dikkat edin.

Navigator pencereleri, xxxx.close() metodu ile kapatılır. xxxx yerine açık pencerenin adını yazmanız gerekir. Aksi taktirde Javascript komutunu icra ettiğiniz pencerenin kendisi (yani Browser) kapanır. (Bazı Browser’ların bazı sürümleri Javascript tarafından açılmamış Navigator pencerelerinin Javascript ile kapatılmasına izin vermezler.)

Bu nesnenin ve her iki metodun da kullanımını daha önce gördük. Mevcut bir HTML belgesinin adını vermeden, yeni pencereyi açtırıp, içine Belge nesnesini kullanarak HTML komutları yazdırmayı, aşağıda Belge Nesnesi bölümünde ele alacağız.

Bu arada, Browser’ın kendisinin bazı özellikleri ile Javascript açısından nesne olduğunu tekrarlayalım. Bu açıdan Browser’ın Javascript için şu özellikleri vardır:

appname                 Browser’ın adı

appVersion              Browser’ın sürümü

appCodeName                   Browser’ın kod adı

userAgent               Browser’ın Server’a kendisini tanıtırken verdiği isim.

Şu kısa kodu browser.htm adıyla kaydeder ve farklı Browser’larla açarsanız, Netscape ve IE hakkında bilgileri bir kutu içinde görebilirsiniz:

<html>
<head>
<script language = "JavaScript">
	function siziTaniyalim () {
		var BrowserAdi = ""
		BrowserAdi += "Browser: " + navigator.appName + "r"
		BrowserAdi += "Sürümü:" + navigator.appVersion + "r"
		BrowserAdi += "Kod Adı: " + navigator.appCodeName + "r"
		BrowserAdı += "userAgent: " + navigator.userAgent + "r"	
		alert(BrowserAdi) 		
	}
</script>
<body>
<h1>Browser’ınızı Tanıyor Musunuz?</h1>
<form>
<input 	type="button" 	Value="Browser Hakkında Bilgi Ver" 	OnClick="siziTaniyalim()"</input>
</form>
</body>
</html>

Mesaj Kutuları

Navigator penceresi, üç tür mesaj kutusu açabilir. Bunlar basit bilgi verme kutusu (alert), doğrulama kutusu (confirm) ve kullanıcının bilgi girme kutusudur (prompt).

Bunların genel yazım kuralı şöyledir:

window.alert(mesaj)

return window.confirm(mesaj)

return window.prompt(mesaj, varsayılanCevap)

Bu üç kutunun çeşitli kullanım şeklini, başka vesilelerle, daha önceki örneklerde gördük.

Çerçeve Nesnesi

Bir Navigator penceresinde birden fazla HTML belgesi görüntüleme imkanı veren çerçeve (Frame) tekniği, tasarım açısından kolaylık sağlar. Bununla birlikte halâ bazı Web ziyaretçilerinin çerçeveden hoşlanmadıkları da gerçektir.

Çerçevelerin, Navigator açısından nasıl bir hiyerarşı işlediğini daha önce gördük. Javascript açısından her bir çerçeve bir pencere sayılır; bunlara atıfta bulunurken şu adlandırma uygulanır:

                                     top               En üst pencere. yani Browser’ın kendisi.

parent           Herhangi bir Frame’i oluşturan Frameset. Çerçeve çerçeve içinde ise, bir çerçevenin içinde bulunduğu çerçeve parent sayılır. Sayfada bir Frameset varsa, bütün çerçeveler için “top” aynı zamanda “parent” sayılır.

self              Çerçevenin kendisi.

Daha önce de belirttiğimiz gibi, Javascript, bir parent (ebeveyn) Frameset’in yavru çerçevelerini 0’dan itibaren numaralar. Yani, sayfanızda iki çerçeveniz varsa, birincisi “parent.frames[0]” ikincisi ise “parent.frames[1]” adıyla bilinir. Herhangi bir çerçevenin içeriğini dinamik biçimde belirlemenin bir örneğini yukarıda gördük. Burada write() metodunu kullanarak, aynı işi nasıl yapabileceğimizi ele alalım.

Şimdi, iki çerçeveli bir Frameset için şu HTML kodunu “anacerceve.htm” adıyla kaydedin:

<html>
<head>
<title>Dinamik Cerceve</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</head>
<frameset cols="40%,*">
<frame SRC="doc1.htm" NAME="cerceve1">
<frame SRC="doc2.htm" NAME="cerceve2">
</frameset>
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>

Sonra, bu Frameset’in çağrıda bulunduğu “doc1.htm” olarak, şu kodu kaydedin:

<html>
<head>
<title>Cerceve 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<script language="JavaScript1.2">
<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
//fonksiyonumuzu tanimlayalim
function belgeYazdir()
	{
	parent.frames[1].document.clear();
	parent.frames[1].document.write("<HTML><HEAD>" +
		"<TITLE>Dinamik Güncelleme Örnegi</TITLE>");
	parent.frames[1].document.write(" </HEAD><BODY BGCOLOR="" +
		document.form1.bginput.value + "">");
	parent.frames[1].document.write("<H1>Güncellenmiş sayfa</H1>");
	parent.frames[1].document.write("Bu sayfayı güncelleştiren unsur:" + document.form1.input1.value);
	parent.frames[1].document.write("</BODY></HTML>");
	parent.frames[1].document.close();
	}
// -->
</script>
</head>
<body>
<form name="form1">
<input type="hidden" name="bginput" value="white">
<p><input type="text" name="input1" size="20"></p>
<p>Bir zemin rengi seçiniz:<br>
<input type="radio" name="radio1" value="white" CHECKED
onClick="document.form1.bginput.value=&quot;white&quot;">Beyaz<br>
<input type="radio" name="radio1" value="red"
onClick="document.form1.bginput.value=&quot;red&quot;">Kırmızı<br>
<input type="radio" name="radio1" value="blue"
onClick="document.form1.bginput.value=&quot;blue&quot;">Mavi<br>
<input type="radio" name="radio1" value="green"
onClick="document.form1.bginput.value=&quot;green&quot;">Yeşil<br>
<br>
<input type="button" value="Çerçeve 2'yi güncelle" onClick="belgeYazdir()"> </p>
</form>
</body>
</html>

“doc2.htm” ise oldukça basit:

<html>
<head>
<title>Çerçeve 2</title>
</head>
<body>
<p>Bu sayfa güncellenecek</p>
</body>
</html>

Burada, document.write() metoduyla, hedef çerçevemiz olan iki numaralı çerçevenin (parent.frames[1]) birinci çerçevedeki formdan aldığımız unsurları kullanarak, zemin rengini ve içeriğini değiştiriyoruz. Buradaki örnekten hareketle, çerçevelerinizin içeriğini, bir diğer çerçevede yapılan tercihlere, yapılan arama sonuçlarına veya veri-yönlendirmeli sonuçlara ayırabilir ve dinamik olarak değiştirebilirsiniz.  

Kolay gelsin...

Oğuz Karaçar
Merhaba ben Oğuz, Hacettepe Üniversitesi Bilgisayar ve Öğretim Teknolojileri Eğitimi (Böte) bölümü 3. Sınıf öğrencisiyim. Genel olarak HTML, CSS, Javascript,JQuery (Front-End) web teknolojileriyle ilgileniyorum.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git