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>

Eğitim DHTML javascript sayfa nesnesi

Hancı Eğitim

Java Script Sayfa Nesnesi

Java Script Dersleri

Ara

Eğitim

Konular

Tags