|
|
|
|
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.
Ş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
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:
Ş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:
| Göster Gizle Kopar Satır Gizle Satır Göster |
1 <HTML> 2 <HEAD> 3 <SCRIPT LANGUAGE = "JavaScript"> 4 function siziTaniyalim () { 5 var BrowserAdi = "" 6 BrowserAdi += "Browser: " + navigator.appName + "\r" 7 BrowserAdi += "Sürümü:" + navigator.appVersion + "\r" 8 BrowserAdi += "Kod Adı: " + navigator.appCodeName + "\r" 9 BrowserAdı += "userAgent: " + navigator.userAgent + "\r" 10 alert(BrowserAdi) 11 } 12 </SCRIPT> 13 <BODY> 14 <H1>Browser'ınızı Tanıyor Musunuz?</H1> 15 <FORM> 16 <INPUT Type="button" Value="Browser Hakkında Bilgi Ver" OnClick="siziTaniyalim()" 17 </INPUT> 18 </FORM> 19 </BODY> 20 </HTML>
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.
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:
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
| Göster Gizle Kopar Satır Gizle Satır Göster |
1 <html> 2 <head> 3 <title>Dinamik Cerceve</title> 4 <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> 5 </head> 6 <frameset cols="40%,*"> 7 <frame SRC="doc1.htm" NAME="cerceve1"> 8 <frame SRC="doc2.htm" NAME="cerceve2"> 9 </frameset> 10 <noframes> 11 <body> 12 </body> 13 </noframes> 14 </frameset> 15 </html>
Sonra, bu Frameset'in çağrıda bulunduğu "doc1.htm" olarak, şu kodu kaydedin:
| Göster Gizle Kopar Satır Gizle Satır Göster |
1 <html> 2 <head> 3 <title>Cerceve 1</title> 4 <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> 5 <script LANGUAGE="JavaScript1.2"> 6 <!-- Javascript kodunu eski sürüm Browserlardan saklayalim 7 //fonksiyonumuzu tanimlayalim 8 function belgeYazdir() 9 { 10 parent.frames[1].document.clear(); 11 parent.frames[1].document.write("<HTML><HEAD>" + 12 "<TITLE>Dinamik Güncelleme Örnegi</TITLE>"); 13 parent.frames[1].document.write(" </HEAD><BODY BGCOLOR=\"" + 14 document.form1.bginput.value + "\">"); 15 parent.frames[1].document.write("<H1>Güncellenmiş sayfa</H1>"); 16 parent.frames[1].document.write("Bu sayfayı güncelleştiren unsur:" + document.form1.input1.value); 17 parent.frames[1].document.write("</BODY></HTML>"); 18 parent.frames[1].document.close(); 19 } 20 // --> 21 </script> 22 </head> 23 <body> 24 <form NAME="form1"> 25 <input type="hidden" name="bginput" value="white"> 26 <p><input TYPE="text" NAME="input1" size="20"></p> 27 <p>Bir zemin rengi seçiniz:<br> 28 <input TYPE="radio" NAME="radio1" VALUE="white" CHECKED 29 onClick="document.form1.bginput.value="white"">Beyaz<br> 30 <input TYPE="radio" NAME="radio1" VALUE="red" 31 onClick="document.form1.bginput.value="red"">Kırmızı<br> 32 <input TYPE="radio" NAME="radio1" VALUE="blue" 33 onClick="document.form1.bginput.value="blue"">Mavi<br> 34 <input TYPE="radio" NAME="radio1" VALUE="green" 35 onClick="document.form1.bginput.value="green"">Yeşil<br> 36 <br> 37 <input TYPE="button" VALUE="Çerçeve 2'yi güncelle" onClick="belgeYazdir()"> </p> 38 </form> 39 </body> 40 </html>
"doc2.htm" ise oldukça basit:
| Göster Gizle Kopar Satır Gizle Satır Göster |
1 <html> 2 <head> 3 <title>Çerçeve 2</title> 4 </head> 5 <body> 6 <p>Bu sayfa güncellenecek</p> 7 </body> 8 </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.
|
|
