Youtube Channel
javascript nesneler
Nesneler
Javascript ile yazacağımız programlar, Netscape veya Internet Explorer programlarının belge nesne modeli (Document Object Model) denen kurallar içinde hareket etmek zorundadır. Daha yüksek programlama dillerine, örneğin C++, Delphi veya Java gibi dillerle program yazmışsanız, programcı olarak başka bir programın modeli ile sınırlı olmadığınızı, hatta işletim sisteminin programlar için sağladığı arayüzle (API) kendinizi sınırlı hissetmeyebileceğinizi bilirsiniz. Fakat Javascript dahil tüm Script dilleri, Browser’ın sunduğu hiyerarşik nesne modeli ile sınırlıdır. Aşağıda Netscape’in modelini görüyorsunuz. Gerçi Internet Explorer çok daha fazla nesneyi kontrol etmenize imkan veriyor; fakat IE’nin geniş alanına giren nesnelere yönelik Javascript programı, Netscape kullanan ziyaretçilerin bilgisayarında işleyemeyebilir:Javascript’te “document” nesnesi kavramını öğrenirken, ilk kavranması gereken unsur, “container” (içinde tutan, kap) meselesidir. Hatırlayacağınız gibi, yukarıdan beri Javascript’e ekrana bir şey yazdıracağımız zaman, şuna benzer bir komut veriyoruz:
document.write(“<H1>Merhaba Dünya!</H1>”
Burada kullandığımız write()metodu, “document” nesnesine, o da Browser’ın “window” (pencere) nesnesine aittir. “window” nesnesini zikretmiyoruz; çünkü zaten onun içindeyiz. Ama yeni bir Browser penceresi açtırmak istersek, bunu da açıkça belirtmemiz gerekir. Aşağıdaki kodu, düz yazı programınızda yazarak, yenipencere.htm adıyla kaydederseniz ve Browser’ınızda açarsanız, size yeni bir “window” nesnesi oluşturma imkanı verecektir:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>Javascript'te Yeni Pencere</TITLE>
<SCRIPT LANGUAGE = "Javascript1.2">
<!-- Javascript kodunu eski sürüm Browserlardan saklayalım
var windowNesnesi
function yeniPencere()
{
windowNesnesi = window.open("", "YeniPencere", "toolbar=0, width=300, height=150, resizable=1")
windowNesnesi.document.write("<H2>İşte yeni Pencereniz.. Tebrikler!</H2>")
}
function kapaPencere()
{
windowNesnesi.close()
}
// -->
</SCRIPT>
<BODY OnUnload="kapaPencere()">
<H1>Bu düğmeyi tıklarsanız, yeni pencere açılır.</H1>
<FORM>
<INPUT Type="button" Value="Yeni Pencere Aç" OnClick="yeniPencere()" </INPUT>
</FORM>
</BODY>
</HTML>
Burada “windowNesnesi” adlı değişkinin değerine dikkat ediyor musunuz: Browser’ın kendi içinde bulunan “window.open()” metodunu kullanarak, araç çubuğu bulunmayan, eni 300 yüksekliği 150 piksel ve ziyaretçi tarafından ölçüleri değiştirilebilen bir yeni Browser penceresi açıyor. Aslında bu noktada windowsNesnesi adlı değişken, bu nesnenin buradaki temsilcisi sayılır; yeni nesneye ne yaptırtmak isterseniz, burada, windowNesnesi değişkinini kullanarak yapabilirsiniz. Bir başka dikkat edilmesi gereken nokta, yeni Window nesnesini oluşturduktan sonra bir daha “window” nesne adını kullanmıyoruz, sadece document adlı container’in (kabın) adına referans yapıyoruz.
Yukarıdaki şemada gördüğümüz nesnelerin HTML karşılıkları şöyledir:
Javascript Nesnesi HTML Karşılığı
Pencere (Window) Yok
Çerçeve (Frame) <FRAME>
Belge (Document) <BODY>
Form <FORM>
Düğme <INPUT TYPE=”button”>
İşaretleme Kutusu <INPUT TYPE=”checkbox”>
Gizli (Hidden) <INPUT TYPE=”hidden”>
Dosya Çıkart (file upload) <INPUT TYPE=”file”>
Parola (password) <INPUT TYPE=”password”>
Radyo düğmesi (Radio) <INPUT TYPE=”radio”>
Başa dön (Reset) <INPUT TYPE=”reset”>
Seç (Select) <SELECT>
Gönder (Submit) <INPUT TYPE=”submit”>
Metin (Text) <INPUT TYPE=”text”>
Metin Alanı (Textarea) <TEXTAREA>
Bağ (Link) <A HREF=””>
Bağlantı (Anchor) <A NAME=””>
Applet <APPLET>
Resim (Image) <IMG>
Plugin <EMBED>
Alan (Area) <MAP>
Bu nesneleri ve metodları ile yanıt verdikleri Window olayları (event) konusuna geçmeden önce bir iki noktayı belirtelim:
Window nesnesinin HTML karşılığı bulunmamakla birlikte BODY etiketinin onLoad ve unonLoad olaylarında işleyen bir fonksiyonla yeni window nesnesi oluşturmanız (yukarıdaki örnekte olduğu gibi) daima mümkündür. Ayrıca, içinde bulunduğunuz veya yeni açmak istediğiniz bir Browser penceresinin alt çervesindeki Status (durum) mesajı alanına istediğiniz mesajı yazdırabilirsiniz:
window.status = ’Benim sayfama hoş geldiniz!’
Internet, HTML sayfası ve bağlı belgelerle bilgisayar dosyalarını alıp vermek demektir. Mahal (Location) nesnesi, Browser’ın görüntülediği belgenin nereden geldiğini gösterir. Gerçi, HTML size görüntülediği belgenin nereden geldiğini bildirmez, ama Browser, bunu “window.location.protocol” nesnesi olarak tutar. Bu değer ya “http:” ya da “file:” (ikisi de küçük harf ve sonlarında iki nokta üstüste var) olur. Örneğin:
if (window.location.protocol == “http:” {
alert (“Bu belge Internet’ten geliyor.”) }
Else { alert (“Bu belge sabit diskten geliyor.”)}
şeklinde bir kodla, belgenin mahallini araştırmak mümkündür.
Tarih (History) nesnesi ise, her iki Browser’ın, ziyaret edilen siteler ve sayfalar listesinde ileri veya geri gitmekte kullandığı nesnedir. HTML’de bu listeye erişmeyi sağlayan etiket bulunmamakla birlikte Javascript bu listeyi kullanabilir. Örneğin:
function gerigit() { window.history.go(-1) }
şeklindeki bir fonksiyon ve bu fonksiyonu çağıran bir düğme (onClick=gerigit() gibi) Tarin nesnesinden yararlanmasını sağlayabilir.
Etiketler: javascript nesneler, history, function, javascript function , script