|
Java Script Sayfa Nesnesi
Sayfa nesnesi, hiyerarşide pencereden sonra geliyor. Bir sayfa
nesnesi form, resim gibi birçok başka nesneyi içerir. Eğer başka bir
pencere söz konusu değilse, sayfa komutlarımız document. ile başlar
ama uygulama birden çok pencere içeriyorsa pencere isimlerini de
belirtmek gerekir: yenipencere.document. gibi.
Elemanlar Dizisi
Hiyerarşi sıralamasında sayfaların elemanları olduğunu görmüştük
(DHTML sayfasındaki arakladığım grafiği hatırlayın). Bu elemanlar
(form, resim) sayfa üzerinde bir dizi oluşturur. Örneğin sayfa
üzerindeki formlar document.forms dizisi ile ifade edilir. Aynı
şekilde sayfa üzerindeki resimler document.images dizisi halinde
ifade edilebilir. Aşağıdaki uygulamada sayfa üzerinde kaç tane form
olduğunu bulmak için, diziye length kodu atanıyor. Bu kodu Diziler
sayfamızdan hatırlıyoruz, dizinin eleman sayısını buluyor.
Javascript:
<html>
<head>
<title>sayfa Elemanları,</title>
<script language="JavaScript">
function say()
{
alert("sayfada " + document.forms.length + " tane form vardır.")
}
</script>
</head>
<body onload="say()">
<form name="Form1">
Adı:<input><br>
SoyAdı:<input><br>
</form>
<form name="Form2">
Adresi:<input><br>
Telefonu:<input><br>
</form>
<form name="Form3">
E-mail:<input><br>
URL:<input><br>
</form>
<form name="Form4">
Mesleği:<input><br>
</form>
</body>
</html>
Aynı şekilde forumda kaç resim olduğunu görmek için document.images.length
kodunu kullanabilirdik. Daha önce dediğimiz gibi forms ve images
dediklerimiz, birer dizidir(array). Yaptığımız şey, bu dizinin
eleman sayısını bulmak. Ayrıca istediğimiz elemanların tanımlanmış
parametrelerini bu dizi sayesinde öğrenebiliyoruz. Bunun için
dizinin elemanını ve sonra parametre kodunu yazıyoruz: mesela
document.images[3].src kodu ile 4. resmin kaynak adresini edinmiş
oluruz. Aşağıdaki uygulamada sayfa üzerindeki formların tanımlanmış
bgcolor ve name parametrelerini öğreniyoruz.
Javascript:
<html>
<head>
<title>sayfa Elemanları,</title>
<script language="JavaScript">
function say()
{
var isim,renk
isim = "Birinci formun ismi: "+document.forms[0].name
isim += "n İkinci formun ismi: "+document.forms[1].name
isim += "n Üçüncü formun ismi: "+document.forms[2].name
isim += "n Dördüncü formun ismi: "+document.forms[3].name
renk = "Birinci formun rengi: "+document.forms[0].bgcolor
renk += "n İkinci formun rengi: "+document.forms[1].bgcolor
renk += "n Üçüncü formun rengi: "+document.forms[2].bgcolor
renk += "n Dördüncü formun rengi: "+document.forms[3].bgcolor
alert(isim)
alert(renk)
}
</script>
</head>
<body onload="say()">
<form name="AdSoyad" bgcolor="red">
Adı:<input><br>
SoyAdı:<input><br>
</form>
<form name="AdresTel" bgcolor="green">
Adresi:<input><br>
Telefonu:<input><br>
</form>
<form name="EmailURL" bgcolor="pink">
E-mail:<input><br>
URL:<input><br>
</form>
<form name="Meslek" bgcolor="yellow">
Mesleği:<input><br>
</form>
</body>
</html>
Form ve resim elemanları değil, başka sayfa dizilerimiz de var.
Örneğin anchors dizisi ile sayfa üzerindeki anchor`ları ()
tanımlayabiliyoruz. Veya aynı şekilde links dizisi ile sayfadaki
linklerin dizisini, applets ile sayfadaki applet`lerin dizisini
oluşturabiliyoruz.
Sayfa Bilgileri
Yapacağımız yazılımda, sayfayla ilgili bazı bilgileri
kullanabiliriz. Sayfanın başlığını kodla öğrenmek için title sayfa
kodunu kullanırız. Şöyle kısaca listeleyim:
title Sayfanın başlığını metinsel olarak ifade eder.
document.title
URL Sayfanın URL adresini metinsel olarak ifade eder.
document.URL
referrer Sayfanın refere edilen URL adresini metinsel olarak ifade
eder.
document.referrer
domain Sayfanın domain ismini metinsel olarak ifade eder.
document.domain
cookie Sayfanın cookie`lerini metinsel olarak ifade eder.
document.cookie
body Sayfanın gövde bölümünü metinsel olarak ifade eder.
document.body
Javascript:
<html>
<head>
<title>Sayfa bilgileri,</title>
<style>table {visibility:hidden}</style>
<script language="JavaScript">
function sayfa()
{
tablo.style.visibility="visible"
baslik0.innerHTML=document.title
baslik1.innerHTML=document.URL
baslik2.innerHTML=domain
baslik3.innerHTML=document.cookie
baslik4.innerHTML=document.body
baslik5.innerHTML=document.referrer
}
</script>
</head>
<body>
<form>
<input type="button" value="Sayfa Bilgileri" onclick="sayfa()">
</form>
<table id="tablo" cellpadding="3" cellspacing="0" border="1" bgcolor="#d5c481">
<tr><td>Sayfanın başlığı:</td><td>
<a id="baslik0">Görünmüyor</a></td></tr>
<tr><td>Sayfanın URL adresi:</td><td>
<a id="baslik1">Görünmüyor</a></td></tr>
<tr><td>Sayfanın domain ismi:</td><td>
<a id="baslik2">Görünmüyor</a></td></tr>
<tr><td>Sayfanın cookie`si:</td><td>
<a id="baslik3">Görünmüyor</a></td></tr>
<tr><td>Sayfanın gövdesi:</td><td>
<a id="baslik4">Görünmüyor</a></td></tr>
<tr><td>Refere URL adresi:</td><td>
<a id="baslik5">Görünmüyor</a></td></tr>
</table>
</body>
</html>
Bu uygulamamızda bazı bilgiler "" değerini taşıdığı için tabloda yer
almıyor.
Yeni Sayfa Açma
Aynı pencerede başka sayfa açmak için document.open() sayfa
kodunu kullanırız. Bu bomboş bir sayfa demek, bu sayfayı HTML
kodlarıyla doldurmak için write sayfa kodu veya writeln sayfa
kodundan yararlanırız. Bunu JavaScript derslerimizin başından beri
yapıyorduk zaten. writeln kodunun write kodundan farkı en sona satır
koyması. Kısa bir uygulama geliştirelim.
Javascript:
<html>
<head>
<title>Sayfa bilgileri,</title>
<script language="JavaScript">
function yenisayfa()
{
var x=document.open()
document.writeln("<html><title>Aha Size Beyaz Sayfa!</title></html>")
}
</script>
</head>
<body>
<form>
<input type="button" value="Beyaz Sayfa Açalım" onclick="yenisayfa()">
</form>
</body>
</html>
 |
