document Nesnesi
Doküman (document) nesnesi HTML dokümanının tamamını ifade etmektedir ve HTML'de kullandığımız , , , vb. gibi tüm komutları içerir. Doküman nesnesini HTML'deki bölümü olarak düşünebilirsiniz
Aslında ilk JavaScript dersinden başlayarak, document.write() komutu ile HTML dokümanlarına yazı eklemeyi öğrenmiştik.
Doküman Nesnesinin İçeriğini Değiştirmek
Doküman nesnenin içeriğini değiştirmek için innerHTML kullanılır. Önce doküman id="..." parametresi ile tanımlanır. Tanımlanan doküman dokümantanımı.innerHTML ile içerik değiştirilir:
<html> <head> <title>InnerHTML</title> <script language="JavaScript"> function cikis() { ilan.innerHTML="Barımızdan çıkış 50 milyon TL!!!" ilan.style.color="blue" } function giris() { ilan.innerHTML="Barımıza giriş bedavadır." ilan.style.color="black" } </script> </head> <body> <h1 id="ilan" onmouseover="cikis()" onmouseout="giris()" >Barımıza giriş bedavadır.</h1> </body> </html>
[Sayfayı göster] [Temizle] [İlk haline getir]
Doküman Başlığını Belirlemek
HTML'de <title> komutu ile sayfa başlığını belirliyorduk. Sayfa başlığını değiştirmek için document.title komutunu kullanacağız.
document.title komutu, sayfa başlığı değerini taşıyor. Bu değeri değiştirdiğimizde sayfa başlığı da değişir.
<html> <head> <title>Sayfa Başlığını Değiştirmek</title> </head> <body> <p>Sayfa başlığı: <b><script language="JavaScript">document.write(document.title)</script></b></p> </body> </html>
[Sayfayı göster] [Temizle] [İlk haline getir]
Bu örnek biraz basit oldu ama document.title komutunun ne işe yaradığını gösteriyor. Form araçları sayfasından sonra sayfa başlığını ziyaretçiye yazdırabiliriz. Veya saat bilgisini başlığa yansıtabiliriz.
Doküman Nesnesini Türünü Belirlemek
Daha önce belirttiğimiz gibi doküman nesnesi HTML'in herhangi bir doküman nesnesi olabilir: <p>, <h1>, <div>, vb. Nesne ne olursa olsun id parametresiyle isimlendirerek o nesne içeriğine dilediğimiz komutları verebiliriz.
Peki elimizde id ile verdiğimiz ismi kullanarak, nesnenin ne olduğunu sayfada gösterebilir miyiz? (Bazen oldukça işe yarıyor.) O nesnenin ne olduğunu bilmek istersek getElementById().tagName komutunu kullanırız.
<html> <head> <title>getElementById() Kullanımı</title> <script language="JavaScript"> function bul(metin) { var x=document.getElementById(metin) alert("Ben bir <" + x.tagName + "> elemanıyım") } </script> </head> <body> <h1 id="eleman1" onclick="bul('eleman1')">Bana tıklarsanız, hangi HTML nesnesi olduğumu görürsünüz!!!</h1> <h2 id="eleman2" onclick="bul('eleman2')">Bana tıklarsanız, hangi HTML nesnesi olduğumu görürsünüz!!!</h2> <h3 id="eleman3" onclick="bul('eleman3')">Bana tıklarsanız, hangi HTML nesnesi olduğumu görürsünüz!!!</h3> <h4 id="eleman4" onclick="bul('eleman4')">Bana tıklarsanız, hangi HTML nesnesi olduğumu görürsünüz!!!</h4> <p id="eleman5" onclick="bul('eleman5')">Bana tıklarsanız, hangi HTML nesnesi olduğumu görürsünüz!!!</p> <div id="eleman6" onclick="bul('eleman6')">Bana tıklarsanız, hangi HTML nesnesi olduğumu görürsünüz!!!</div> </body> </html>
Arka Plan Rengini Değiştirmek
Arka plan rengini değiştirmek için document.bgcolor komutunu kullanırız.
<html> <head> <title>Arka Plan Renkleri</title> <script language="JavaScript"> function renklendir(n) { switch(n) { case 1: document.bgColor="red" break case 2: document.bgColor="yellow" break case 3: document.bgColor="blue" break case 4: document.bgColor="orange" break case 5: document.bgColor="green" break case 6: document.bgColor="crimson" break default: document.bgColor="white" break } } </script> </head> <body> <a href="#" onclick="renklendir(1)">Kırmızı</a><br /><br /> <a href="#" onclick="renklendir(2)">Sarı</a><br /><br /> <a href="#" onclick="renklendir(3)">Mavi</a><br /><br /> <a href="#" onclick="renklendir(4)">Turuncu</a><br /><br /> <a href="#" onclick="renklendir(5)">Yeşil</a><br /><br /> <a href="#" onclick="renklendir(6)">Bordo</a><br /><br /> <a href="#" onclick="renklendir(7)">Beyaz</a><br /><br /> </body> </html>
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.
<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>
[Sayfayı göster] [Temizle] [İlk haline getir]
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.
<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>
[Sayfayı göster] [Temizle] [İlk haline getir]
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>
[Sayfayı göster] [Temizle] [İlk haline getir]
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>
[Sayfayı göster] [Temizle] [İlk haline getir]
Kaynak www.volkanderinbay.net/ders/dersjscr.asp , www.volkanderinbay.net/ders/dersjscr.asp
Doküman Nesnesinin İçeriğini Değiştirmek
Doküman nesnenin içeriğini değiştirmek için innerHTML kullanılır. Önce doküman id="..." parametresi ile tanımlanır. Tanımlanan doküman dokümantanımı.innerHTML ile içerik değiştirilir:
<html> <head> <title>InnerHTML</title> <script language="JavaScript"> function cikis() { ilan.innerHTML="Barımızdan çıkış 50 milyon TL!!!" ilan.style.color="blue" } function giris() { ilan.innerHTML="Barımıza giriş bedavadır." ilan.style.color="black" } </script> </head> <body> <h1 id="ilan" onmouseover="cikis()" onmouseout="giris()" >Barımıza giriş bedavadır.</h1> </body> </html>
[Sayfayı göster] [Temizle] [İlk haline getir]
Doküman Başlığını Belirlemek
HTML'de <title> komutu ile sayfa başlığını belirliyorduk. Sayfa başlığını değiştirmek için document.title komutunu kullanacağız.
document.title komutu, sayfa başlığı değerini taşıyor. Bu değeri değiştirdiğimizde sayfa başlığı da değişir.
<html> <head> <title>Sayfa Başlığını Değiştirmek</title> </head> <body> <p>Sayfa başlığı: <b><script language="JavaScript">document.write(document.title)</script></b></p> </body> </html>
[Sayfayı göster] [Temizle] [İlk haline getir]
Bu örnek biraz basit oldu ama document.title komutunun ne işe yaradığını gösteriyor. Form araçları sayfasından sonra sayfa başlığını ziyaretçiye yazdırabiliriz. Veya saat bilgisini başlığa yansıtabiliriz.
Doküman Nesnesini Türünü Belirlemek
Daha önce belirttiğimiz gibi doküman nesnesi HTML'in herhangi bir doküman nesnesi olabilir: <p>, <h1>, <div>, vb. Nesne ne olursa olsun id parametresiyle isimlendirerek o nesne içeriğine dilediğimiz komutları verebiliriz.
Peki elimizde id ile verdiğimiz ismi kullanarak, nesnenin ne olduğunu sayfada gösterebilir miyiz? (Bazen oldukça işe yarıyor.) O nesnenin ne olduğunu bilmek istersek getElementById().tagName komutunu kullanırız.
<html> <head> <title>getElementById() Kullanımı</title> <script language="JavaScript"> function bul(metin) { var x=document.getElementById(metin) alert("Ben bir <" + x.tagName + "> elemanıyım") } </script> </head> <body> <h1 id="eleman1" onclick="bul('eleman1')">Bana tıklarsanız, hangi HTML nesnesi olduğumu görürsünüz!!!</h1> <h2 id="eleman2" onclick="bul('eleman2')">Bana tıklarsanız, hangi HTML nesnesi olduğumu görürsünüz!!!</h2> <h3 id="eleman3" onclick="bul('eleman3')">Bana tıklarsanız, hangi HTML nesnesi olduğumu görürsünüz!!!</h3> <h4 id="eleman4" onclick="bul('eleman4')">Bana tıklarsanız, hangi HTML nesnesi olduğumu görürsünüz!!!</h4> <p id="eleman5" onclick="bul('eleman5')">Bana tıklarsanız, hangi HTML nesnesi olduğumu görürsünüz!!!</p> <div id="eleman6" onclick="bul('eleman6')">Bana tıklarsanız, hangi HTML nesnesi olduğumu görürsünüz!!!</div> </body> </html>
Arka Plan Rengini Değiştirmek
Arka plan rengini değiştirmek için document.bgcolor komutunu kullanırız.
<html> <head> <title>Arka Plan Renkleri</title> <script language="JavaScript"> function renklendir(n) { switch(n) { case 1: document.bgColor="red" break case 2: document.bgColor="yellow" break case 3: document.bgColor="blue" break case 4: document.bgColor="orange" break case 5: document.bgColor="green" break case 6: document.bgColor="crimson" break default: document.bgColor="white" break } } </script> </head> <body> <a href="#" onclick="renklendir(1)">Kırmızı</a><br /><br /> <a href="#" onclick="renklendir(2)">Sarı</a><br /><br /> <a href="#" onclick="renklendir(3)">Mavi</a><br /><br /> <a href="#" onclick="renklendir(4)">Turuncu</a><br /><br /> <a href="#" onclick="renklendir(5)">Yeşil</a><br /><br /> <a href="#" onclick="renklendir(6)">Bordo</a><br /><br /> <a href="#" onclick="renklendir(7)">Beyaz</a><br /><br /> </body> </html>
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.
<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>
[Sayfayı göster] [Temizle] [İlk haline getir]
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.
<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>
[Sayfayı göster] [Temizle] [İlk haline getir]
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>
[Sayfayı göster] [Temizle] [İlk haline getir]
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>
[Sayfayı göster] [Temizle] [İlk haline getir]
Kaynak www.volkanderinbay.net/ders/dersjscr.asp , www.volkanderinbay.net/ders/dersjscr.asp
Yorumunuzu Ekleyin
