dom sınıfları
JavaScript, DOM, XML … AJAX’i sıfırdan öğrenmek isteyen herkesin ilk karşılaştığı terimlerdir bunlar ve birçoğu için bunların birbirleriyle ve AJAX ile ilişkisi oldukça kafa karıştırıcı bir hal almıştır. Gerçekten de bunlar AJAX teknolojisini oluşturan ana öğelerdir ve birbirlerini tamamlayıcı niteliktedirler. Bu yazıda sizlere bunlarla ve başka kavramlarla ilgili bazı temel bilgileri sunacağım ve eğer varsa kafa karışıklıklarını gidermeye çalışacağım. Ayrıca yazının sonunda benim de yararlanmış olduğum bazı kaynaklar bulacaksınız; bu kaynaklara erişerek bu konu hakkındaki bilgilerinizi genişleterek daha sağlam bir temele oturtabilirsiniz.
dom nedir... haktan yapma
Document Object Model’in kısaltılmışı olan DOM’un dilimize çevirisi Belge Nesne Modeli olarak yapılmaktadır. Asla bir dil olmayıp, dilleri barındıran bir platform olarak tanımlanmaktadır. Başka bir deyişle dilden bağımsız bir standarttır. Aslında tanım kısmı çok da önemli değil, küçük örneklerle anlattığımda çok net kavrayacaksınız.
DOM’u ilgilendiren iki dil grubu vardır. Birincisi temel dil olup, verinin başkalarıyla paylaşılması için kullanılır. İkincisi ise işleme dili’dir ve temel dille yapılandırılmış bir belgeyi işlemeye yarar. Burada dikkat edilmesi gereken nokta bu isimlendirmelerin evrensel bir nitelik taşımadığıdır; yani mantığı size daha kolay anlatabilmek amacıyla bu şekilde ben sınıflandırdım.
Çok göze çarpan örnekler vermek gerekirse, temel diller HTML ve XML, işleme dilleri ise JavaScript ve PHP, ASP, JSP gibi sunucu tabanlı dillerdir.
DOM’da bir temel dil ile hazırladığınız sayfa, belge olarak adlandırılır. Bu belgenin içine yerleştirdiğiniz her türlü öğe ise nesne olarak adlandırılır. Nesnelerin birer öğe (element) olarak kullanılabilmesi için hiyerarşik bir düzen izlenerek çağrılmaları gerekir. Örneğin HTML içerisine yerleştirilmiş öğeleri çağırmak için, içinde bulunduğu diğer öğelerin çağrılması bir yöntemken, bir öğeye bir id vererek bu id üzerinden çağırmak da bir başka yöntemdir. Aşağıdaki örneği ele alalım :
Görüldüğü gibi bir temel dil ile (HTML), bir işleme dili (JavaScript) aynı sayfa içerisinde kullanıldı ve istenilen sonuçlar elde edildi. Bu sayfayı tarayıcımızla açtığımızda alt alta iki metin kutusu içerisinde Gökhan Öztürk ve Türkiye yazıları çıkacaktır. JavaScript kodumuzun ilk satırında metin kutusunun değeri hiyerarşik olarak çağrılmış ve değiştirilmiştir. İkinci satırda ise hiyerarşik yapı daha az önemsenerek JavaScript içindeki DOM’un temellerinden olan getElementById metodu kullanılmıştır.
Bütün bunların hepsi aslında bize DOM’un nesne yönelimli (object oriented) yapıyı getirdiğini gösteriyor.
Temel dil olarak HTML ve işleme dili olarak JavaScript’in kullanımını Ajax-Tr sitesindeki uygulama örneklerinde çokça gördük.
dom nedir... haktan yapma
Document Object Model’in kısaltılmışı olan DOM’un dilimize çevirisi Belge Nesne Modeli olarak yapılmaktadır. Asla bir dil olmayıp, dilleri barındıran bir platform olarak tanımlanmaktadır. Başka bir deyişle dilden bağımsız bir standarttır. Aslında tanım kısmı çok da önemli değil, küçük örneklerle anlattığımda çok net kavrayacaksınız.
DOM’u ilgilendiren iki dil grubu vardır. Birincisi temel dil olup, verinin başkalarıyla paylaşılması için kullanılır. İkincisi ise işleme dili’dir ve temel dille yapılandırılmış bir belgeyi işlemeye yarar. Burada dikkat edilmesi gereken nokta bu isimlendirmelerin evrensel bir nitelik taşımadığıdır; yani mantığı size daha kolay anlatabilmek amacıyla bu şekilde ben sınıflandırdım.
Çok göze çarpan örnekler vermek gerekirse, temel diller HTML ve XML, işleme dilleri ise JavaScript ve PHP, ASP, JSP gibi sunucu tabanlı dillerdir.
DOM’da bir temel dil ile hazırladığınız sayfa, belge olarak adlandırılır. Bu belgenin içine yerleştirdiğiniz her türlü öğe ise nesne olarak adlandırılır. Nesnelerin birer öğe (element) olarak kullanılabilmesi için hiyerarşik bir düzen izlenerek çağrılmaları gerekir. Örneğin HTML içerisine yerleştirilmiş öğeleri çağırmak için, içinde bulunduğu diğer öğelerin çağrılması bir yöntemken, bir öğeye bir id vererek bu id üzerinden çağırmak da bir başka yöntemdir. Aşağıdaki örneği ele alalım :
Görüldüğü gibi bir temel dil ile (HTML), bir işleme dili (JavaScript) aynı sayfa içerisinde kullanıldı ve istenilen sonuçlar elde edildi. Bu sayfayı tarayıcımızla açtığımızda alt alta iki metin kutusu içerisinde Gökhan Öztürk ve Türkiye yazıları çıkacaktır. JavaScript kodumuzun ilk satırında metin kutusunun değeri hiyerarşik olarak çağrılmış ve değiştirilmiştir. İkinci satırda ise hiyerarşik yapı daha az önemsenerek JavaScript içindeki DOM’un temellerinden olan getElementById metodu kullanılmıştır.
Bütün bunların hepsi aslında bize DOM’un nesne yönelimli (object oriented) yapıyı getirdiğini gösteriyor.
Temel dil olarak HTML ve işleme dili olarak JavaScript’in kullanımını Ajax-Tr sitesindeki uygulama örneklerinde çokça gördük.
