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 formlardocument.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, diziyelength kodu atanıyor. Bu kodu Diziler sayfamızdan hatırlıyoruz, dizinin eleman sayısını buluyor.
Â
<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: meseladocument.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.
<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ı (<a>) 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 |
Â
<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.
<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>Â
Bu sayfalık da bu kadar.
Yorumlar
Yorum Yok
Yorumunuzu Ekleyin
Yorum eklemek için giris yapmalısınız.