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>
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>
Hiç yorum yok:
Yorum Gönder