CSS

DHTML

Giriş-DOM CSS Katman DOM Olaylar

Dinamik HTML

26 Kasım 2007

GİRİŞ/DOM (Document Object Modelling)

DHTML konusunda bir şeyler yapabilmek için öncelikle DOM (Belge Nesne Modellemesi) konusunda bilginiz olmalıdır. DOM, temelde formlar, resimler, düzeyler gibi görüntülenen nesnelerin çerçevesini oluşturur. Üreticiler bu yapıyı kullanarak ekrandaki değişiklikleri gerçekleştirirler. Aşağıdaki örneklerde bir formda yer alan bilgi alanlarının nasıl tanımlandığı incelenir.

  document.form-adi.input-adi

biçiminde bir tanımda "form-adi" kullanılan formun adını, "input-adi" ise giriş alanının adını belirtir.

ya da

  document.form-adi.elements[i]

tanımında "form-adi" kullanılan formun adını, i ise o formdaki bilgi alanının sıra numarasını belirtir.

ya da

  document.forms[i].input-adi

tanımında, i formun sıra numarasını, input-adi ise o formdaki bilgi alanını tanımlar.

Bu tanımda bilgi alanına erişmeden onun öncesideki öğeye (formun kendisine) erişmek gerekir. Javascript nesnel tabanlı bir yazılım olduğundan bu iş için "." (nokta) kullanılır.

Bir forma erişim

Şimdi bir form tanımını inceleyelim:

<form name="myForm">

<input type="text" name="textBox1">

</form>

Ekranda görünüş biçimi şöyledir: Bu giriş alanına bir çok biçimlerde erişmek olanağı vardır.
Bu biçimde yazılınca, bir çok nesneye erişilmiş olunur. Daha sonra döküman (belge) nesnesine erişilir. Bunun içindeki "myForm" nesnesine, daha sonra onun altındaki "textBox1" nesnesine erişilir.

Image of DOM hierarchal structure

Bir kez textBox1 nesnesine ulaşıldığında, onun özelliklerini kullanabilme olanağı doğar.

Bir resime erişim

Aşağıdaki gibi tanımlarla resimlere erişebiliriz:

   document.images[i]

ya da 

   document.images['image-adi']

ya da

   document.image-adi

DOM, Belge Nesne Modellemesi tarayıcıya çok bağımlıdır. Bu nedenle Netscape ile Microsoft arasında tutarsızlıklar ya da uyumsuzluklar vardır. Bazen bir ürünün değişik sürümlerinde bile farklılık olabilir.

Bu nedenle W3C standartları geliştirmiştir. Yeni tarayıcılarda öğelere erişmek için kullanılan yöntem daha sonra ele alınacaktır.

"form" ve "resim" gibi temel öğelere erişim oldukça sıradandır. Katmanlara erişim aşağıda anlatılmıştır:

Katman (layer) için DOM

Tüm sorunların altında tarayıcı uyumsuzlukları yatar. Her birimin katmanlara erişimi farklıdır. Netscape Navigator (NN 4) ilk DHTML tarayıcısıydı. Daha o zaman DOM standartı bile yoktu. Daha sonra çıkan IE 4 (Microsoft Internet Explorer 4) daha gelişkin DOM özellikleri içeriyordu. Neredeyse her HTML öğesi programlanabilir durumdaydı. W3C standartlarıyla NS 6 ve IE 5 çıktı. Artık DHTML daha güçlü ve daha kullanışlı olmuştu. Artık yazılan sayfalar hemen her tür tarayıcıda görüntülenebilir olmuştu.

Aşağıdaki örnek ele alındığında önce mutlak konumlu katmanlar incelenir. Daha sonra göreceli katmanların konumları incelenir.

  <div id="myLayer1" style="position:absolute;top:100;left:150;z-index:3"></div>

Netscape 4

NN 4 de, katmalara erişim şöyledir:

    document.layers[i]
 ya da
    document.layers[layerID]
 ya da 
    document.layers.layerID
 ya da
    document.layerID

Burada daha çok document.layers[layerID] kullanma biçimine odaklanılır. örneklerde ele alınan katman için kullanılan kod: document.layers["myLayer1"] olacaktır.

Internet Explorer 4

IE 4 kullanıldığında:

   document.all[layerID]
ya da
   document.all(layerID)
ya da
   document.all.layerID
ya da
   layerID

Burada daha çok ilk metod kullanılır. Örneklerdeki kodlama: document.all["myLayer1"] biçimindedir.

W3C DOM (Internet Explorer 5 and Netscape 6)

Sonuçta W3C DOM önerileriyle IE 5 ve NS 6'daki tanımlar:

  document.getElementById(layerID)
  Yani:
  document.getElementById("myLayer1")

biçimindedir.

Bu yöntemlerin hepsinde tarayıcı seçimi yapılarak uygun kodlama kullanabilir. Aşağıdaki kodlama ayrımın nasıl olacağını kısaca gösterir.

  if(document.getElementById){
        // Netscape 6 and IE 5 kodu buraya girer

  }else if(document.all){
        // IE 4 kodu buraya girer

  }else if(document.layers){
        //Netscape 4 kodu buraya girer

  }

Eskiye uyumluluk

Burada not alınması gereken en önemli özellik IE 5 eskiye uyumludur. Yani:

  document.getElementById ve document.all

sayfaya erişmek için uygundur:

  if(document.all){

  // IE 4 and IE 5 için geçerlidir

  }

Daha önceki örnekte IE 5 ve IE 4 if-else kodları yerine tek if komutu kullanmak yeterlidir. Burada NS 6 için söylenmesi gereken bir özellik, NS eskiye uyumlu değildir. Yani:

  document.layers

NS 6'da kullanılamaz.

İlk zamanlar CSS, içerikten kalıplama komutlarını ayırmak için yaratıldı. Aslında WEB sayfası üretiminde ve bakımında çok büyük kolaylıkları vardır. Bu olanağın bir başka güzel tarafı ise güçlü CSS olanaklarından bazılarının DHTML içinde de kullanılabiliyor olmasıdır. Bunlar göreceli olarak daha tarayıcı uyumludurlar.

Sıradan bir örnek

Bir resim kaynağına erişme konusunda şu sıradan örnekle başlayalım:

  <img src="someImage.gif" name="myImage">

Bu resim kaynağına DOM altında şu biçimde erişebiliriz:

  document.images['myImage'].src

Bir kez öğeye erişince, onu değiştirebiliriz, bir değişkende saklayabiliriz, uyarı mesajında görüntüleyebiliriz v.b...

Bir katmandaki CSS'ye erişim

Katmanlardaki CSS özelliklerine de aynı şeyi yapabiliriz. Resim kaynağına erişmek kadar kolay olmasa da (tarayıcı uyumsuzluklarından) katmanlara erişim olabilmektedir.

Bir katmanda CSS özelliklerini tanımlayabilmek için

   style="*properties*"

kullanmaktayız. Bizim örneğimizdeki nitelik için kodlama şöyledir:

  <div id="myLayer1" style="position:absolute;top:100;left:150;z-index:3"></div>

Değişiklik yapabilmek için önce erişim tamamlanmalı daha sonra katman

  .style.propertyName (NN 4 hariç).

ile kullanılmalıdır.

Bu yöntemler aşağıdaki tabloda gösterilmiştir:

Tarayıcı	CSS Özelliği	Örnek
Netscape 6 and IE 5 (W3C)	document.getElementById(layerID).style.propertyName	document.getElementById("myLayer1").style.top
Internet Explorer 4 (IE 5 dahil)	document.all[layerID].style.propertyName	document.all["myLayer1"].style.top
Netscape 4	document.layers[layerID].propertyName	document.layers["myLayer1"].top

Tireli Stiller

Tabi ki burada bazı tuhaflıklar var. Örneğin "z-index" biçimindeki bir CSS özelliğinin bilgisine erişmek için tire ("-") kaldırılmalı sonraki harf büyük harfe çevrilmelidir (z-index için zIndex kullanılır).

Aşağıda katmanın z-index değerini belirleyen kodlama vardır.

  
  <script language="javascript" type="text/javascript">
    function alertFF(){
         if(document.getElementById){
            alert(document.getElementById("myLayer1").style.zIndex);
       }else if(document.all){
            alert(document.all["myLayer1"].style.zIndex);
       }else if(document.layers){
            alert(document.layers["myLayer1"].zIndex);
       }
  }
  </script>

  <form><p><input type="button" onclick="alertFF()" 
  value="Click Here to alert the layer's z-index"></p></form>

Konum

Katmanların koordinatlarını ayarlarken de tuhaflık olmaktadır. Bazı tarayıcılarda "sol" ve "üst" "px" türünde değer döndürür ("300px." de olduğu gibi) . Eğer bu değere ekleme yapmak istenirse değeri parseInt() işleminden geçirilip "px" değeri düşürmelidir. Sonra ekleme yapmalıdır. Yani bu değere bir sayı eklenecekse, önce değeri sayısal yapılmalıdır.
Bazıları pixelLeft ya da pixelTop kullanırlar. Ama tarayıcı uyumsuzluklarından olduğu için top ve left özelliklerini parseInt() ile kullanılması önerilir.

Aşağıdaki örnekte konu anlatılmıştır:

  
       if(document.getElementById){
            document.getElementById("myLayer1").style.left = 
              parseInt(document.getElementById("myLayer1").style.left) +3;
            document.getElementById("myLayer1").style.top =
              parseInt(document.getElementById("myLayer1").style.top) +3;
       }else if(document.all){
            document.all["myLayer1"].style.left = 
              parseInt(document.all["myLayer1"].style.left) +3;
            document.all["myLayer1"].style.top = 
              parseInt(document.all["myLayer1"].style.top) +3;
       }else if(document.layers){
            document.layers["myLayer1"].left = 
              parseInt(document.layers["myLayer1"].left) +3;
            document.layers["myLayer1"].top = 
              parseInt(document.layers["myLayer1"].top) +3;
       }

Şu ana değin yazılanların tümü DHTML konusunda gerekenlerin sıradan özetidir. Bu bilgi istediklerinizi yapmaya yeter. Doğal öğrenmenin sonu yoktur. Ama en azından bu kadarcık bilgi bile DHTML anlatımı için yeterli olabilir.