Web sayfasının Javascript dilinde adı Belge?dir. İster metin, ister sadece Javascript kodu, ister sadece grafik içersin, <HTML> diye başlayan ve </HTML> diye biten herşey, Javascript gözüyle belgedir.
Javascript?in gözüyle dünyaya bakarsanız, dünyayı içiçe kaplardan ibaret görürsünüz. En dış kabın adı, Navigator; içindeki ikinci kabın adı Belge?dir. Belge?nin içinde ise, yine birbirinin içinde olmak şartıyla, HTML ile oluşturulan nesneler vardır. Sayfanızda örneğin faturaForm adlı bir form varsa, bu Javascript için document.faturaForm demektir, ziyaretçinin doldurduğu bilgilerle Server?a gönderilmesi için document.faturaForm.submit() metodunun kullanılması gerekir. Bu bölümde bir belgedeki Javascript kodu ile yeni bir belge oluşturup, ya içinde bulunduğumuz sayfanın yerine, ya da yeni bir pencereye yollama yolunu ve HTML nesnelerinin özelliklerini Javascript aracılığıyla nasıl etkileyeceğimize bakalım.
Javascript, içinde bulunduğu HTML belgesi yerine sizin arzu ettiğiniz başka bir belgeyi görüntülüyebilir. Bu belgenin içeriği, ziyaretçinin bir önceki sayfada yaptığı bazı tercihleri yansıtabilir; ziyaretçinin Browser türünden veya kullandığı bilgisayar işletim sisteminin türünden kaynaklanabilir. Aşadığıdaki örnekte, Javascript ziyaretçinin Browser türünü algılayıp, ona göre bir içerik sunuyor. Bu içerik burada olduğu gibi sadece bir hoşgeldin mesajı olmayabilir, Browser türüne uygun içerik olabilirdi. Bu dosyayı, yenibelge01.htm adıyla kaydedip, Browser?ınızda açarsanız, Browser?ınıza uygun mesajı göreceksiniz:
<html>
<head>
<title>Yeni Belge</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1254″>
</head>
<SCRIPT LANGUAGE = “JavaScript1.2”>
var Browser = navigator.appName
document.open()
if (Browser == “Netscape”) {
document.write(“<h2>Sayın “+
“http://home.netscape.com’>Netscape”+
” kullanıcısı</h2><p><p>”)}
else {
if (Browser == “Microsoft Internet Explorer”) {
document.write(“<h2>Sayın “+
“http://www.microsoft.com’>Microsoft”+
” Internet Explorer kullanıcısı</h2><p><p>”) }
else {
document.write(“<h1>Hoş geldiniz! Ne tür Browser kullandığınızı anlayamadık!</h1><p><p>”)
}
}
document.write(“Sitemize hoş geldiniz.<p><p>”)
document.write(“Kullandığınız Browser türünü anladık diye şaşırdınız mı?”)
document.close()
</SCRIPT>
<body>
</body>
</html>
Burada olduğu gibi, yeni belge mevcut belgenin yerine açılmak yerine, Frameset ile oluşturduğunuz çerçeveli bir sayfada arzu ettiğiniz bir çerçevenin içeriğini de oluşturabilir. Bunun için, yukarıda olduğu gibi document.write() metodu yerine,
parent.form[0].document.write()
metodunu kullanmanız gerekir. Burada, birinci çerçeve için köşeli parantez içine 0, ikinci çerçeve için 1, üçüncü çerçeve için 2 yazmanız gerektiğini daha önce belirtmiştik. Javascript ile oluşturacağınız yeni belge, tamamen başka ve hatta yeni bir Browser penceresi içinde de görüntülenebilir. Bu teknikten, sayfalarınızda açıklayıcı bilgi ve yardım bilgisi vermekte yararlanabilirsiniz; hatta reklam amacıyla bile bu yöntemi kullanabilirsiniz. Aşağıdaki kodu, yenibelge02.htm adıyla kaydederseniz, ziyaretçinin Mouse işaretçisini bağlantılı gibi görünen kelimelerin üzerine getirdiğinde, Javascript anında yeni bir pencere açacak, ve içine arzu ettiğiniz metni yazacaktır:
<html>
<head>
<title>Yeni Belge</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1254″>
<script>
function acYardim01(){
yeniPencere = window.open(“”, “yardim01”, “height=300,width=400”)
yeniPencere.document.write(“<h2>Bu pencerede Konu 1 ile ilgili ek “+
“bilgiler olacak</h2>”)
yeniPencere.document.write(“<p>Tabii birisi zahmet edip, yazarsa!</p>”)
yeniPencere.document.write(“<p><font size=-1>”+
“<a href=\”javascript:self.close()\”>Mevzuya Donmek”+
” Icin Tiklayin</a></font>”)
yeniPencere.document.close()
}
function acYardim02(){
yeniPencere = window.open(“”, “yardim02”, “height=300,width=400”)
yeniPencere.document.write(“<h2>Bu pencerede Konu 2 ile ilgili ek “+
“bilgiler olacak</h2>”)
yeniPencere.document.write(“<p>Tabii birisi zahmet edip, yazarsa!</p>”)
yeniPencere.document.write(“<p><font size=-1>”+
“<a href=\”javascript:self.close()\”>Mevzuya Donmek”+
” Icin Tiklayin</a></font>”)
yeniPencere.document.close()
}
function acYardim03(){
yeniPencere = window.open(“”, “yardim03”, “height=300,width=400”)
yeniPencere.document.write(“<h2>Bu pencerede Konu 3 ile ilgili ek bilgiler “+
“olacak</h2>”)
yeniPencere.document.write(“<p>Tabii birisi zahmet edip, yazarsa!</p>”)
yeniPencere.document.write(“<p><font size=-1>”+
“<a href=\”javascript:self.close()\”>Mevzuya Donmek”+
” Icin Tiklayin</a></font>”)
yeniPencere.document.close()
}
</script>
</head>
<body>
<h1>Sitemizdeki yeni konular aşağıdadır:</h1>
<h2>Konular hakkinda daha fazla bilgi almak icin Mouse isaretcisini
konunun uzerine getirin.</h2>
<p><a HREF=”#” onMouseOver=”acYardim01()”>Yeni konu 1</a></p>
<p><a HREF=”#” onMouseOver=”acYardim02()”>Yeni konu 2</a></p>
<p><a HREF=”#” onMouseOver=”acYardim03()”>Yeni konu 3</a></p>
</body>
</html>
Böyle bir pencerede görüntülemek istediğiniz metin, Javascript fonksiyonu ile yazdırılamayacak kadar uzun ise, yeni pencere açtırma kodunuzda şöyle bir değişiklik yapabilirsiniz:
function acYardim01(){
yeniPencere = window.open(“yardim01.htm”, “yardim01”, “height=300,width=400”)
}
Bu durumda, Javascript, yeni pencerenin içeriğini kendisi document.write() metodu ile kendisi yazmayacak, pencere içeriği olarak örneğin yardım01.htm adlı dosyayı görüntüleyecektir.
Bu konuyu kapatmadan; yukarıdaki örnek kodda, Javascript?in yeni pencerenin içeriğini kendisi yazdığı acYardim01 adlı fonksiyonda kullandığımız şu koda dikkat edin:
yeniPencere.document.write(“<p><font size=-1>”+
“<a href=\”javascript:self.close()\”>Mevzuya Donmek”+
” Icin Tiklayin</a></font>”)
yeniPencere.document.close()
Burada kullandığımız yerel Javascript kodundaki “self.close()” metodu, Javascript?e belgenin içinde bulunduğu kendi penceresini kapattırmaktadır. (self, kendisi anlamına geliyor.)
Kodumuzu biraz daha geliştirebiliriz. Sözgelimi, MouseOver olayı ile açtığımız ikinci penceresi, MouseOut olayı ile kapatabiliriz. Bunun için, tabiî önce yeni pencere açan fonksiyonlarımızdan sonra bir de pencere kapatan fonksiyon yazmamız gerekir:
function kapat() {
yeniPencere.close();
}
Sonra, yardım pencerelerini açtığımız onMouseOver yönlendirisiyle ilgili kodun hemen arkasına, bu kez kapat() fonksiyonunu çağıran onMouseOut yönlendiricisini yazacağız. Bu örnekteki üç satırdan biri, şöyle olabilir:
<p><a HREF=”#” onMouseOver=”acYardim01()”>Yeni konu 1</a></p>
Bu durumda, açılan yeni pencerelerin içindeki kendi kendisini kapatan kodu iliştirdiğimiz satırı tıklama imkanınız hiç olmayacağı için (neden?), bu kodun satırını, acYardim01() diğer fonksiyonlarımızdan çıkartmamız yerinde olur. Bu yeni şekliyle kodunuzu yenibelge03.htm adıyla kaydedebilirsiniz.
Hakkı Öcal Javascript dersleri