Your Ad Here

Dinamik HTML

26 Kasım 2007

Eskiden olup şimdi olmayanlar ve yeniler

Şimdiye dek katmanların CSS özelliklerine erişimini incelendi. Şimdi bu katmanlara bir şeyler yazma incelenecektir. Tarayıcılara bağlımlı özellikleriyle katmanlara nasıl yazı yazılır?

Netscape 4

NN 4 ilk incelenecek olandır. En kolayı da bu tarayıcıdır. Javascript kullanarak: 

  document.layers[layerID].document.open();
  document.layers[layerID].document.write('Bu yeni içerik');
  document.layers[layerID].document.close()
yazabiliriz. Fakat "with()" işleviyle bunu daha da kısaltabiliriz: 
    with(document.layers[layerID].document){
        open();
        write('Bu yeni içerik');
        close();
    }

Bu oldukça kolaydır. Sayfanın içine "document.write()" ile yazmak gibi...

Internet Explorer 4

Şimdi IE 4 ile sayfaya yazmaya bakalım: 

    document.all[layerID].innerHTML="Bu yeni içerik";

innerHTML gibi IE outerHTML ve "outerText" işlemini destekler.
Farkı belirtebilmek için aşağıdaki kodlama hazırlandı.
Unutmayın ki bu kod NN 4+ da çalışmaz...

  <div id="myLayer1"
          style="position:absolute;
                     visibility:hidden">
        Bu<b>Katmanın</b> İçeriğidir
  </div>

Bu tüm özellikleri gösterdiği için çok iyidir. Unutmayın ki innerText outerText aynı değeri döndürür. Ama aralarında çok büyük fark vardır. Eğer "innerText" için atama yaparsanız katmanın içindeki yazıyı değiştirir. Ama "outerText" tüm katmanı değiştirir (katmanın dışını da). Bu nedenle artık kullanılmuyor, yalnız innerHTML kullanıyoruz...

IE 5 ve NS 6

IE 5 innerHTML, outerHTML, innerText, ve outerText kullanır aynı IE 4 gibi. Ama NS 6 yalnız innerHTML kullanabilir. Şimdilik IE 5 ve NS 6'da kullanabilmek için yalnız "innerHTML" kullanılacaktır: 
    document.getElementById(layerID).innerHTML="Bu yeni içeriktir";

Arayis İşlevi

Eskiden katmanların CSS özelliklerine erişmek için soysal bir işlev tanımlandı. 
  <script>

     function writeLayer(layerID,txt){
        if(document.getElementById){
           document.getElementById(layerID).innerHTML=txt;
        }else if(document.all){
           document.all[layerID].innerHTML=txt;
        }else if(document.layers){
           with(document.layers[layerID].document){
                open();
                write(txt);
                close();
           }
        }
     }
  </script>

Yazıyı nasıl yazarız

Önce bir giriş alanı yaratmak gerekir. Biz de onu yaptık: 
  <form>
        Yazılacak Yazı:
        <input type="text" name="TT" 
                  value="Ryan Rules!">
        &nbsp;
        <input type="button" 
                  value="Type Text"> 

        <input type="button"
                  value="Stop!">

  </form>

Sonra bir katman yaratmalı: 

  <div id="TL"
          style="position:absolute;
                      font-family:Verdana;
                      font-size:24px;
                      text-align:center;
                      color:blue">
  </div>

Ve şimdi koda geçelim: 

  <script>
      var interVal1, i=0;
      function typeIt(layerID,content){
         if(i==content.length){
            i=0;
            writeLayer(layerID,"");
            return false;
         }else{
            i++;
         }
         writeLayer(layerID,content.substr(0,i));
      }
  </script>

Bu kod, yazıyı bir değişkenden alsa ne olur? 

  <script>
    function typeLayer(layerID,content){
       writeLayer(layerID,'');
       i=0;
       interVal1=setInterval("typeIt('"+layerID+"','"+content+"')",300);
    }
  </script>

Bu kod katmanın önceki içeriğini siler ve "i" değişkeninin değerini sıfırlar. Artık bizim giriş alanı aşağıdaki biçimde yazılır: 

  <form>
        Type Text:
        <input type="text" name="TT" 
                  value="Ryan Rules!">
        &nbsp;
        <input type="button" 
                  value="Type Text"
                  onclick="typeLayer('TL',document.forms[0].TT.value)"> 
        <input type="button" value="Stop!" 
                  onclick="clearInterval(interVal1)">
  </form>

Unutmayın ki NN 4'de yeni yazının rengi "mavi 24px Vedana" değildir. NN 4 katmanın CSS özelliğine erişim farklı olabilir. Aşağıdaki örnekte NN 4 için "style" kodunun nasıl korunduğu gösterilmiştir. 

   function typeIt(layerID,content){

      if(i==content.length){

         i=0;

         writeLayer(layerID,"");

         return false;

      }else{

         i++;

      }

      writeLayer(layerID,'<span 
                 style="font-family:Verdana;
                        font-size:24px;
                        text-align:center;
                        color:blue">
                 '+content.substr(0,i)+'</span>');
   }

Çözüm

Bu yazılım artık bitti. Şimdi yeni bir çözümü tanımlama zamanıdır. Bir içeriği katmana yazmak o kadar zor bir iş değildir. Eskiden öğrendiklerimizle yeni öğrenilenleri birleştirip bir slayt gösterisi hazırlayalım. Bu yalnız resimlerden oluşan bir slayt gösterisi olmayacak, Her resim için açıklaya ya da yorum koyabilecek bir katman olacak (bunu katmana dinamik olarak yazacak biçiminde çözeceğiz). Yazılım için "Otomatik" düğmesi olacak ve resim ve yorumları belirli zamanlarda değiştirebilecek ve "bitti" düğmesi de slayt gösterisini bitirecek. "Sonraki" düğmesi bir sonraki slayta, "Önceki" düğmesi bir önceki slayta gidilmesini sağlar. HTML kodunu yeniden yazarak değişik boyutlardaki resimleri de görüntüleyebilme olanağımız olur. Örnek yazılım çok uzun olduğundan tüm kodlama için Örnek-3 tıklayın.

Devam...

Bir katmanın içeriğini yeniden yazma konusunda anlatılacakların hepsi bu. Şimdi görüntülenen bir şeyi fare üzerine gidince "this" anahtar sözcüğüyle değiştirmeyi deneyelim (on mouseover).

Eğer fareyi bu düğmenin üzerine taşırsanız renk değişecektir. 

  <input type="button" value="Button"
            style="color:#2312fa" 
            onmouseover="this.style.color='#da45a3'"
            onmouseout="this.style.color='#2312fa'">

"this" sözcüğü giriş düğmesini bir nesne olarak algılar. Böylece onun CSS stillerine erişebiliriz ve sonra onun CSS renk niteliklerine erişim gerçekleşir. Unutmayın ki yalnız IE 4 ve NS 6'de çalışır (NN 4 yok). O halde NN 4 olduğu zaman düğmenin rengini ".style" olmadan değiştiririz. 

  <input type="button" value="Button"
            style="color:#2312fa" 
            onmouseover="this.color='#da45a3'"
            onmouseout="this.color='#2312fa'">

Bu olmaz. NN 4 CSS özellikleri arasında "color" desteklemez.

Ayrıca "this.className" tüm class bilgilerini değiştirebilir. 

  <input type="button" value="Button"
            class="button1" 
            onmouseover="this.className='button2'"
            onmouseout="this.className='button1'">

Statik (Durağan) Yerleşmiş Öğeler

Statik konumlanmış öğelerde (IE 4+ ve NS 6'da) hemen her öğeyi <p> biçiminden <div> biçimine değin değiştirebilirsiniz. Aşağıdaki <p> kullanarak hemen her tarayıcıda çalışır:

Fareyi üstüme getir!

Bu aşağıdaki kodla gerçekleşebilir:

  <p onmouseover="this.innerHTML='Yapın işte!'"
      onmouseout="this.innerHTML='Fareyi üstüme getir!'">
         Fareyi üstüme getir!</p>

Netscape 4 Katmanları aynı dökümanlar olarak değerlendirir

Aşağıdaki kodumuz olduğunu varsayalım: 
  <div id="myLayer1">
      <img name="myImage" src="imageFile.gif">
  </div>

Şimdi bu resim dosyasına erişmeye çalışalım. Bunun için ilk yapacağımız: 

   document.images["myImage"]

Bu IE 4+ ve NS 6'da doğru bir yaklaşımdır. Ama NN 4'de katmanları döküman olarak yorumlar. Böylece NN 4'de önce "resimin içinde bulunduğu dökümana erişmemiz gerekir. 

     document.layers["myLayer1"].document.images["myImage"]

Şimdi aşağıdaki resim dosyasının kaynağını "someOtherImage.gif" ile değiştirelim 

  <div id="myLayer1">
      <div id="myLayer2">
        <img name="myImage" src="imageFile.gif">
      </div>
  </div>

O halde aşağıdaki kodu kullanabilirsiniz:

if(document.layers){
document.layers["myLayer1"].document.layers["myLayer2"].document.images["myImage"].src="someOtherImage.gif";
}else{
document.images["myImage"].src="someOtherImage.gif";
}

NN 4'de kodlamayı daha da kısalmak için aşağıdaki biçimi kullanırız:

document.myLayer1.document.myLayer2.document.myImage.src="someOtherImage.gif"

DIV ile SPAN

Daha önceki örneklerde mutlak konumlanmış katmanlar kullandık. Özellikler <div> biçimini ele alalım. Şimdi <span> biçiminden söz etmeliyim. Aynı <div> gibidir. Ancak <div> blok tipi stil öğeleridir (üstünde ve altında boşluklar bırakılır, yani bir satır içinde yer alamaz) <span> ise böyle değildir. Ne denmek istendiğini aşağıda belirtelim:

Bu kodu kullanırsak:

Bu <div>Bir</div> yazıdır

Aşağıdaki gibi görünür:

Bu

Bir
yazıdır

Eğer bu kodu kullanırsak:

Bu <span>Bir</span> yazıdır

Aşağıdaki gibi görünür:

Bu Bir yazıdır

Burada koyu renkli gösterdik ki ne denmek istendiği anlaşılsın. Ama kodun kendisi kullanıldığında yazı koyu değildir.

Tarayıcı bağımsız statik konumlu öğeler

IE 4+ ve NS 6'da statik konumlanmış katmanlara istediğinizi yapabilirsiniz (filitreler gibi istisnalar hariç) ama NN 4'de statik konumlanmış <div> ve <span> biçimlerine çok bir şey yapamazsınız. Tersine NN 4'de <layer> biçimi <ilayer> biçimiyle kullanılır. Bu özellikler bize DHTML etkilerini uygulamamızı sağlar. Örneğin IE 4+'da kullandığımız fare üzerine gelince renki değişen uygularsak NN 4'de tablo hücresinin art rengini değiştirme olarak kullanılır. Bir tablo üzerinde mutlak konumlanmış katmanlar kullanmak gerçekçi olmaz. Bu nedenle kodumuz: 
  <table>
    <tr>

       <td style="background-color:purple" 
              onmouseover="this.style.backgroundColor='green'"
              onmouseout="this.style.backgroundColor='purple'">
           <ilayer><layer 
              onmouseover="this.bgColor='green'"
              onmouseout="this.bgColor='purple'">
                    Bu hücrenin içindeki yazıdır
              </layer></ilayer>
       </td>
       <td style="background-color:purple"
              onmouseover="this.style.backgroundColor='green'" 
              onmouseout="this.style.backgroundColor='purple'">
            <ilayer><layer 
              onmouseover="this.bgColor='green'"
              onmouseout="this.bgColor='purple'">
                    Bu hücrenin içindeki yazıdır
              </layer></ilayer>
       </td>
       <td style="background-color:purple"
              onmouseover="this.style.backgroundColor='green'" 
              onmouseout="this.style.backgroundColor='purple'">
             <ilayer><layer 
              onmouseover="this.bgColor='green'"
              onmouseout="this.bgColor='purple'">
                    Bu hücrenin içindeki yazıdır
              </layer></ilayer>
       </td>
    </tr>
  </table>

Ve kod aşağıdakini üretir:

This is the cell's text This is the cell's text This is the cell's text

Bu her tarayıcıda çalışır. Haydi deneyin!

Burada kullanılan teknik (NN4 için <layer>, <ilayer> içindedir ve IE 4+ ve NS 6 için <div> biçimi) ile Statik konumlandırılmış katmanlarının içini bile değiştirmek mümkündür.