Ajax Konusunda Uzmanlaşma, Bölüm 6

0
butch
IBM Türkiye ve Fazlamesai.net işbirliği ile dilimize kazandırılan yeni bir IBM developerWorks makalesi ile karşınızdayız. Diğer makalelere buradan ulaşabilirsiniz.

Makalenin özgün haline bu adresten ulaşabilirsiniz.

Ajax'ta Uzmanlaşma, Bölüm 6: DOM tabanlı Web uygulamaları oluşturma

Yeniden yüklemeye gerek kalmadan bir Web sayfasının kullanıcı arabirimini değiştirmek için, mükemmel Ajax yardımcıları olan DOM ve JavaScript'i birlikte kullanın.

Düzey: Orta

Brett McLaughlin (brett@newInstance.com), Yazar ve Editör, O'Reilly Media Inc.

12 Eylül 2006

Etkileşimli Ajax uygulamaları oluşturmak için Belge Nesne Modeli (DOM) ile JavaScript'i birleştirin. Bu dizinin önceki makalelerinde DOM programlamasıyla ilgili kavramları incelediniz (Web tarayıcısının bir Web sayfasını ağaç olarak nasıl görüntülediği gibi) ve şimdi DOM içinde kullanılan programlama yapılarını anlıyor olmalısınız. Bu makalede, tüm bu bilgileri uygulamaya geçirecek ve bazı hoş etkilere sahip basit bir Web sayfası oluşturacaksınız. Oluşturulan tüm öğeler DOM'yi kullanmak üzere JavaScript ile, sayfanın yeniden yüklenmesini ya da yenilenmesini gerektirmeden oluşturulacak.
 

Belge Nesne Modeli ya da DOM'nin tanıtımıyla ilgili iki tam makale okudunuz; şimdiye kadar DOM'nin nasıl çalıştığını anlamışsınızdır. (İlk iki DOM makalesine ve Ajax dizisindeki önceki makalelere ilişkin bağlantıları görmek için Kaynaklar bölümüne bakın.) Bu makalede, anladıklarınızı uygulamaya geçireceğiz. Kullanıcı işlemlerine göre değişen bir kullanıcı arabirimine sahip, temel bir Web uygulaması geliştireceksiniz -- elbette, bu arabirimi değiştirme işlemi için DOM'yi kullanacaksınız. Bu makaleyi bitirdiğinizde, DOM ile ilgili öğrendiğiniz tekniklerin ve kavramların çoğunu uygulamaya koyacaksınız.

Son iki makaleyi okuduğunuzu varsayıyorum; eğer okumadıysanız, DOM'yi ve Web tarayıcılarının sağladığınız HTML ve CSS'yi Web sayfasını gösteren tek bir ağaç yapısına nasıl dönüştürdüğünü iyice anlamak için bu makaleleri gözden geçirin. Şimdiye kadar sözünü ettiğim tüm DOM ilkeleri bu makalede, DOM tabanlı dinamik bir Web sayfası ,(her ne kadar basit bir örnek olsa da)oluşturmak için kullanılacaktır. Bu makalenin herhangi bir yerinde takılırsanız, durup önceki iki makaleyi gözden geçirebilir ve takıldığınız yere geri dönebilirsiniz.

Örnek uygulamayla başlama

Kod üzerine bir not

Dikkatinizi özel olarak DOM ve JavaScript kodunda tutmak için biraz özensiz davrandım ve HTML'yi yerleşik stil ile yazdım (örneğin, h1 ve p öğelerindeki align özniteliği gibi). Deneme amacıyla bu kabul edilebilir olsa da, zamanınızı ayırıp geliştirdiğiniz üretim uygulamaları için tüm stillerinizi dış CSS stil sayfalarına almanızı öneririm.

Çok temel bir uygulama oluşturup daha sonra biraz da DOM büyüsü ekleyerek iş başlayalım. DOM'nin Web sayfasındaki öğeleri bir form sunmadan hareket ettirebildiği düşüncesini -- bu nedenle de mükemmel bir Ajax yardımcısı olduğunu -- aklınızdan çıkarmadan, yalnızca bir silindir şapka ve Hocus Pocus! etiketli bir düğmenin bulunduğu basit bir sayfa oluşturalım. (Bunun nereye gideceğini tahmin edebiliyor musunuz?)

İlk HTML

Liste 1'de bu sayfaya ilişkin HTML gösterilmektedir; bu yalnızca basit bir resim ve basabileceğiniz bir düğme ile birlikte başlık ve formdan oluşan bir gövdedir.


Liste 1. Örnek uygulamaya ilişkin HTML
<html>
 <head>
  <title>Magic Hat</title>
 </head>

 <body>

  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" />
    <br /><br />

    <input type="button" value="Hocus Pocus!" />
   </p>
  </form>                                                                     
 </body>
</html>

Bu HTML'yi ve bu makalede kullanılan tüm resimleri, bu makalenin sonundaki Yüklemeler bölümünde bulabilirsiniz. Ancak, size yalnızca resimleri yüklemenizi ve daha sonra, ben makalede uygulamayı oluştururken, sizin de örnek üzerinden elinizle HTML'yi yazmanızı öneririm. Bu yöntemle DOM kodunu, yalnızca makaleyi okuyup tamamlanmış uygulamayı açmaktan çok daha iyi anlarsınız.

Örnek Web sayfasının görüntülenmesi

Burada herhangi bir zorluk yok; sayfayı açtığınızda Şekil 1'dekine benzer bir görüntü görmeniz gerekir.


Şekil 1. Biraz sıkıcı görünen bir silindir şapka
Biraz sıkıcı görünen bir silindir şapka

HTML ile ilgili son bir nokta

Burada dikkat etmeniz gereken önemli bir nokta, Liste 1 ve Şekil 1'deki düğmenin button tipinde olduğu, bir gönderme düğmesi olmadığıdır. Bir gönderme düğmesi kullanırsanız, düğmeye basıldığında tarayıcı formu göndermeyi dener; elbette, formda action özniteliği olmadığından (özellikle eklenmemiştir), etkinlik olmayan sonsuz bir döngü başlatır. (Neler olup biteceğini görmek için bunu kendi başınıza denemelisiniz.) Normal bir giriş düğmesi kullanarak -- ve gönderme düğmesi kullanmayarak -- düğmeye bir JavaScript işlevi bağlayabilir ve tarayıcıyla formu göndermeden etkileşime geçebilirsiniz.


Örnek uygulamaya yeni özelliklerin eklenmesi

Şimdi, Web sayfasını biraz JavaScript, DOM ve biraz da resim büyüsüyle güzelleştirelim.

getElementById() işlevinin kullanılması

Açıkçası, tavşan yoksa sihirli bir şapkanın pek bir değeri de olmaz. Bu yüzden, var olan sayfadaki resmi (yeniden Şekil 1'e bakın) Şekil 2'de gösterilen gibi bir tavşan resmiyle değiştirerek işe başlayın.


Şekil 2. Aynı şapka, ancak bu kez bir tavşanla
Aynı şapka, ancak bu kez bir tavşanla

Biraz DOM ustalığı kullanmak için ilk olarak Web sayfasında img öğesini gösteren DOM düğümünü arayın. Genel olarak bunu yapmanın en kolay yolu, Web sayfasını belirten document nesnesindeki getElementById() yönteminin kullanılmasıdır. Bu yöntemi daha önce görmüştünüz; bu yöntem aşağıdaki gibi çalışır:

var elementNode = document.getElementById("id-of-element");

HTML'ye id özniteliğinin eklenmesi

Bu oldukça temel bir JavaScript kodudur, ancak HTML'nizde biraz çalışma gerektirir: Erişmek istediğiniz öğeye bir id özniteliği eklemelisiniz. Örnekte değiştirmek istediğiniz img öğesi olduğu için (tavşanın bulunduğu yeni resim ile değiştirilecek), HTML'nizi Liste 2'de gösterilen şekilde değiştirmeniz gerekir.


Liste 2. Bir id özniteliğinin eklenmesi
<html>
 <head>
  <title>Magic Hat</title>
 </head>

 <body>

  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" id="topHat" />

    <br /><br />
    <input type="button" value="Hocus Pocus!" />
   </p>
  </form>                                                                     
 </body>
</html>


Sayfayı yeniden yüklerseniz (ya da yeniden açarsanız) farklı hiçbir şey görmezsiniz; id özniteliğinin eklenmesi Web sayfasında görsel hiçbir değişikliğe neden olmaz. Ancak, JavaScript ve DOM'yi kullanarak bir öğe üzerinde daha kolay çalışmaya olanak tanır.

img öğesinin kavranması

Artık getElementById() yöntemini kolayca kullanabilirsiniz. İstediğiniz öğenin tanıtıcısına sahipsiniz -- topHat -- ve bunu, yeni bir JavaScript değişkeninde saklayabilirsiniz. HTML sayfanıza Liste 3'te gösterilen kodu ekleyin.


Liste 3. img öğesine erişim
<html>
 <head>
  <title>Magic Hat</title>
  <script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
    }
  </script>

 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">

    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" />
   </p>
  </form>                                                                     
 </body>

</html>

Yine bu noktada, Web sayfasının yüklenmesi ya da yeniden yüklenmesi heyecan verici bir şeyler görmenize neden olmaz. Artık resme erişiminiz olmasına rağmen, onunla ilgili henüz herhangi bir şey yapmadınız.


Resmin değiştirilmesi, zor yol

İstediğiniz değişikliği iki yolla yapabilirsiniz: Zor yol ve kolay yol. Tüm iyi programcılar gibi ben de kolay yolu tercih ederim; ancak, uzun yoldan yürümek sizin için harika bir DOM alıştırması olacaktır ve kesinlikle zaman harcadığınıza değecektir. Önce zor yoldan resmi nasıl değiştirebileceğimize bakalım; daha sonra, aynı değişikliği kolay yoldan nasıl yapabileceğinizi göreceksiniz.

Var olan resmi, tavşanın bulunduğu yeni resimle değiştirmek için yapmanız gerekenler şunlardır:

  1. Yeni bir img öğesi oluşturun.
  2. Var olan img öğesinin ana öğesi (kapsayıcısı) olan öğeye erişin.
  3. Yeni img öğesini, kapsayıcının bir alt öğesi olarak, var olan img öğesinin hemen önüne yerleştirin.
  4. Eski img öğesini kaldırın.
  5. Kullanıcı Hocus Pocus! düğmesini tıklattığında, oluşturduğunuz JavaScript işlevinin çağrılması için gerekli ayarlamaları yapın.

Yeni bir img öğesi oluşturulması

Son iki makalemden de hatırlayacağınız gibi, DOM ile ilgili hemen hemen her şeyin anahtarıdocument nesnesidir. Bu nesne, tüm bir Web sayfasını temsil eder, getElementById() gibi güçlü yöntemlere erişmenizi sağlar ve yeni düğümler oluşturmanıza olanak tanır. Şimdi kullanmak isteyeceğiniz de bu son özelliktir.

Tam olarak söylersek, yeni bir img öğesi yaratmanız gerekir. DOM içinde her şeyin bir düğüm olduğunu, ancak düğümlerin de üç temel gruba ayrıldığını unutmayın:

  • Öğeler
  • Öznitelikler
  • Metin düğümleri

Başka gruplar da vardır, ama bu üçü programlama gereksinimlerinizin %99'unu karşılar. Bu örnekte, img tipinde yeni bir öğeye ihtiyacınız vardır. Dolayısıyla JavaScript'inizde bu kodun bulunması gerekir:

var newImage = document.createElement("img");

Bu, element tipinde, img öğe adıyla yeni bir düğüm oluşturur. HTML'de bu temel olarak şöyledir:

<img />

DOM'nin, iyi hazırlanmış bir HTML oluşturacağını hatırlayın; diğer bir deyişle, öğe, hem başlangıç hem de bitiş biçim imi içerir ve şu an için boştur. Yapılması gereken şey bu öğeye içerik ya da öznitelik eklemek ve daha sonra, bu öğeyi Web sayfasına yerleştirmektir.

İçerik açısından img öğesi, boş bir öğedir. Ancak, bir öznitelik eklemeniz gerekir: Yüklenecek resmi belirten src özniteliği. Burada addAttribute() gibi bir yöntem kullanmanız gerektiğini düşünebilirsiniz, ancak bu doğru değil. DOM belirtimini oluşturanlar, programcılar olarak bizlerinkısayollardan hoşlanacağımızı düşündüler (ki gerçekten kısayolları severiz!) ve yeni öznitelikleri eklemek ve var olanların değerini değiştirmek için tek bir yöntem oluşturdular: setAttribute().

setAttribute() yöntemini çağırır ve var olan bir öznitelik sağlarsanız, değeri sağladığınız değerle değiştirilir. Ancak, setAttribute() yöntemini çağırır ve var olmayan bir öznitelik sağlarsanız, DOM sağladığınız değeri kullanarak sessizce bu özniteliği ekler. Bir yöntem, iki amaç! JavaScript'inize şunları eklemeniz gerekir:

var newImage = document.createElement("img");
newImage.setAttribute("src", "rabbit-hat.gif");

Bu, resmi oluşturur ve kaynağını uygun şekilde ayarlar. Bu noktada, HTML'niz Liste 4'teki gibi görünür.


Liste 4. DOM ile yeni bir resmin oluşturulması
<html>
 <head>
  <title>Magic Hat</title>
  <script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      var newImage = document.createElement("img");
      newImage.setAttribute("src", "rabbit-hat.gif");
    }
  </script>

 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">

    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" />
   </p>
  </form>                                                                     
 </body>

</html>

Bu sayfayı yükleyebilirsiniz, ancak hiçbir hareket beklemeyin; aslında henüz gerçek Web sayfasını etkileyecek hiçbir şey yapmadınız. Ayrıca, yapılacaklar listesindeki adım 5'e bakarsanız, henüz JavaScript işlevinin bile çağırılmadığını fark edeceksiniz!

Özgün resmin üst öğesinin alınması

Artık yerleştirilmeye hazır bir resminiz olduğuna göre, bunun yerleştirileceği yere ihtiyacınız var. Ancak, bunu var olan resme yerleştirmeyeceksiniz; bunun yerine, yeni resmi var olan resmin önüne koymak ve daha sonra var olan resmi kaldırmak isteyebilirsiniz. Bunu yapmak için, tüm bu yerleştirme ve kaldırma işlemlerinde gerçekten anahtar role sahip, var olan resmin üst öğesi gereklidir.

Önceki makalelerden de hatırlayacağınız gibi DOM, bir Web sayfasını gerçekten de bir ağaç gibi, düğüm hiyerarşisi içinde görür. Her düğümün bir üst öğesi (düğümün alt öğe olduğu ağaçtaki bir üst düğüm) ve büyük olasılıkla kendi alt öğeleri vardır. Bu resim örneğindealt öğe yoktur -- resimlerin boş öğeler olduklarını hatırlayın -- ancak kesinlikle bir üst öğe vardır. Üst öğenin ne olduğu hiç önemli değil; yalnızca bu öğeye erişmeniz gerekir.

Bunu yapmak için her DOM düğümünde olan parentNode özelliğini kullanabilirsiniz:

var imgParent = hatImage.parentNode;

Bu kadar basit! Üst öğenin alt öğeleri olabileceğini biliyorsunuz, çünkü zaten bir alt öğesi var: Eski resim. Bunun ötesinde, üst öğenin bir div, p ya da sayfanın body öğesi mi olduğunu bilmeniz gerekmez; bu önemli değildir!

Yeni resmin yerleştirilmesi

Eski resmin üst öğesine eriştiğinize göre, yeni resmi ekleyebilirsiniz. Bu oldukça kolay bir işlemdir; bir alt öğe eklemek için birkaç yöntem kullanabilirsiniz:

  • insertBefore(newNode, oldNode)
  • appendChild(newNode)

Yeni resmin tam olarak eski resimle aynı yerde görünmesini istediğiniz için insertBefore() yöntemini (ve removeChild() yöntemini) kullanmanız gerekir. Yeni resim öğesini var olan resmin hemen önüne yerleştirmek için kullanacağınız JavaScript satırı şöyledir:

var imgParent = hatImage.parentNode;
imgParent.insertBefore(newImage, hatImage);
      

Bu noktada, eski resmin üst öğesinin iki alt resmi vardır: Yeni resim ve hemen ardından gelen eski resim. Bu resimlerin çevresindeki içeriğin değişmediğini ve bu içeriğin sırasının, tam olarak ekleme işleminden önceki sırada kaldığını belirtmek gerekir. Yalnızca üst öğenin artık eski resmin önünde bir ek alt öğesi (yeni resim) daha vardır.

Eski resmin kaldırılması

Web sayfasında yalnızca yeni resmi istediğiniz için şimdi yapmanız gereken eski resmi kaldırmaktır. Eski resim öğesinin üst öğesine erişiminiz olduğu için bu kolay olacaktır. removeChild() yöntemini çağırıp bunu kaldırmak istediğiniz düğüme geçirebilirsiniz:

var imgParent = hatImage.parentNode;
imgParent.insertBefore(newImage, hatImage);
imgParent.removeChild(hatImage);
      

Bu noktada, eski resmi yenisiyle değiştirdiniz. HTML'niz Liste 5'teki gibi görünmelidir.


Liste 5. Eski resmin yenisiyle değiştirilmesi
<html>
 <head>
  <title>Magic Hat</title>
  <script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      var newImage = document.createElement("img");
      newImage.setAttribute("src", "rabbit-hat.gif");
      var imgParent = hatImage.parentNode;
      imgParent.insertBefore(newImage, hatImage);
      imgParent.removeChild(hatImage);
    }
  </script>

 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">

    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" />
   </p>
  </form>                                                                     
 </body>

</html>

JavaScript'in bağlanması

Son -- ve belki de en kolay -- adım olarak, HTML formunuzu, az önce yazdığınız JavaScript işlevine bağlarsınız. showRabbit() işlevinin, kullanıcının Hocus Pocus! düğmesini her tıklatmasında çalışmasını istiyorsunuz. Bunu gerçekleştirmek için HTML'nize basit bir onClick olay işleyicisi ekleyin:

<input type="button" value="Hocus Pocus!" onClick="showRabbit();" />

Bu işlem, JavaScript programlamanızın bu noktasında oldukça rutin olmalı. Bunu HTML sayfanıza ekleyin, sayfayı kaydedin ve daha sonra, sayfayı Web tarayıcınızda yükleyin. Sayfa başlangıçta Şekil 1'deki gibi görünür; Hocus Pocus! düğmesini tıklatın ve sonuçta, Şekil 3'teki gibi görünmesi gerekir.


Şekil 3. Tavşan ortaya çıkar
Tavşan ortaya çıkar

Resmin değiştirilmesi, biraz daha kolay yol

Resmi değiştirmek için uyguladığınız adımlara dönüp bakar ve daha sonra, düğümler üzerinde gerçekleştirebileceğiniz çeşitli yöntemleri gözden geçirirseniz, replaceNode() adlı bir yöntemi fark edebilirsiniz. Bu yöntem, bir düğümü diğeriyle değiştirebilmenizi sağlar. Gerçekleştirdiğiniz adımları yeniden düşünün:

  1. Yeni bir img öğesi oluşturun.
  2. Var olan img öğesinin ana öğesi (kapsayıcısı) olan öğeye erişin.
  3. Yeni img öğesini, kapsayıcının bir alt öğesi olarak, var olan img öğesinin hemen önüne yerleştirin.
  4. Eski img öğesini kaldırın.
  5. Kullanıcı Hocus Pocus! düğmesini tıklattığında, oluşturduğunuz JavaScript işlevinin çağrılması için gerekli ayarlamaları yapın.

replaceNode() yöntemiyle, gerçekleştirmeniz gereken adımların sayısını azaltabilirsiniz. Adım 3 ve 4 birleştirdiğinizde süreç aşağıdaki gibi olur:

  1. Yeni bir img öğesi oluşturun.
  2. Var olan img öğesinin ana öğesi (kapsayıcısı) olan öğeye erişin.
  3. Eski img öğesini, az önce oluşturduğunuz yeni öğeyle değiştirin.
  4. Kullanıcı Hocus Pocus! düğmesini tıklattığında, oluşturduğunuz JavaScript işlevinin çağrılması için gerekli ayarlamaları yapın.

Bu çok büyük bir şey gibi görünmeyebilir, ancak kesinlikle kodunuzu basitleştirir. Liste 6'da, insertBefore() yöntemini kaldırarak ve removeChild() yöntemini çağırarak bu değişikliği nasıl yapacağınız gösterilmektedir.


Liste 6. Eski resmin yenisiyle değiştirilmesi (bir adımda)
<html>
 <head>
  <title>Magic Hat</title>
  <script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      var newImage = document.createElement("img");
      newImage.setAttribute("src", "rabbit-hat.gif");
      var imgParent = hatImage.parentNode;
      imgParent.replaceChild(newImage, hatImage);

    }
  </script>
 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">

   <p align="center">
    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" onClick="showRabbit();"  />
   </p>
  </form>                                                                     
 </body>

</html>

Bu da büyük bir değişiklik değildir, ancak DOM kodlamasındaki oldukça önemli bir noktayı gösterir: Belirli bir görevi gerçekleştirmek için genellikle birden çok yol bulabilirsiniz. Çoğu kez dört ya da beş adımda gerçekleştirebileceğiniz bir işlemi, kullanabileceğiniz DOM yöntemlerini dikkatli bir şekilde gözden geçirir ve bir görevi gerçekleştirebileceğiniz daha kısa yolları görebilirseniz, iki ya da üç adıma indirebilirsiniz.


Resmin değiştirilmesi, (gerçekten) kolay yol

Az önce de belirttiğim gibi bir görevi gerçekleştirmek için hemen her zaman daha kolay bir yol olduğu için, şimdi şapka resmini tavşan resmiyle değiştirmenin çok daha kolay yolunu göstereceğim. Bu makale üzerinde çalışırken bu yaklaşımın ne olduğunu anlayabildiniz mi? Size bir ipucu vereyim: Özniteliklerle ilgili bir şey.

Resim öğesinin büyük oranda, bir yerlerdeki (bir yerel URI ya da bir dış URL) bir dosyaya başvuruda bulunan src özniteliği tarafından denetlendiğini hatırlayın. Şimdiye kadar, resim düğümünü yeni bir resimle değiştirdiniz; ancak yalnızca var olan resmin src özniteliğini değiştirmek çok daha kolaydır! Bu, yeni düğüm oluşturma, üst öğeyi bulma ve eski düğümü değiştirme ile ilgili tüm adımları tek bir adıma indirir:

hatImage.setAttribute("src", "rabbit-hat.gif");

Hepsi bu! Bu çözümü tüm Web sayfası bağlamında gösteren Liste 7'ye bakın.


Liste 7. src özniteliğinin değiştirilmesi
<html>
 <head>
  <title>Magic Hat</title>
  <script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      hatImage.setAttribute("src", "rabbit-hat.gif");

    }
  </script>
 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">

   <p align="center">
    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" onClick="showRabbit();"  />
   </p>
  </form>                                                                     
 </body>

</html>

DOM ile ilgili harika şeylerden biri budur: Bir özniteliği değiştirdiğinizde, Web sayfası hemen değişir. Resim yeni bir dosyayı gösterir göstermez, tarayıcı dosyayı yükler ve sayfa güncellenir. Yeniden yüklemeye gerek yoktur ve yeni bir resim öğesi yaratmanız bile gerekmez! Sonuç yukarıda gösterilen Şekil 3 ile aynıdır -- tek fark kodun çok daha kolay olmasıdır.


Tavşanın gizlenmesi

Şu anda Web sayfası oldukça etkileyici, ancak hala biraz ilkel durumda. Tavşan şapkadan çıkıyor, ancak ekranın altındaki düğmede tavşan çıktıktan sonra da Hocus Pocus! yazmaya ve düğme, showRabbit() işlevini çağırmaya devam ediyor. Bu, tavşan çıktıktan sonra düğmeyi tıklatırsanız, boşuna zaman harcayacağınız anlamına gelir. Daha da önemlisi, bu hiçbir işe yaramaz ve yararsız düğmeler hiçbir zaman iyi bir şey değildir. Birkaç değişiklik daha yapmak ve tavşan ister şapkanın içinde ister dışında olsun düğmenin yararlı olmasını sağlamak için DOM'yi kullanıp kullanamayacağınızı görelim.

Düğme etiketinin değiştirilmesi

Yapılabilecek en kolay şey, kullanıcı düğmeyi tıkladıktan sonra düğmenin etiketinin değişmesidir. Böylece, sihirli başka bir şeyler daha olacağını belirtmez; bir Web sayfası için en kötü şey kullanıcıya doğru olmayan bir şeyin ima edilmesidir. Düğmenin etiketini değiştirmeden önce düğüme erişmeniz ve bunu yapabilmek için önce, düğmeye başvuruda bulunmak için kullanacağınız bir tanıtıcıya (id) sahip olmanız gerekir. Bununeski şapka olması gerekiyordu, değil mi? Liste 8'de düğmeye bir id özniteliği eklenmektedir.


Liste 8. Bir id özniteliğinin eklenmesi
<html>
 <head>
  <title>Magic Hat</title>
  <script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      hatImage.setAttribute("src", "rabbit-hat.gif");
    }
  </script>

 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">

    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" id="hocusPocus" 
           onClick="showRabbit();" />
   </p>
  </form>                                                                     
 </body>

</html>


Artık JavaScript'te düğmenize erişmeniz basittir:

function showRabbit() {
  var hatImage = document.getElementById("topHat");
  hatImage.setAttribute("src", "rabbit-hat.gif");
  var button = document.getElementById("hocusPocus");
}

Elbette, düğme etiketinin değerini değiştirmek için bir sonraki JavaScript'in satırını çoktan yazmış olabilirsiniz. Burada yine setAttribute() yöntemi gündeme gelir:

function showRabbit() {
  var hatImage = document.getElementById("topHat");
  hatImage.setAttribute("src", "rabbit-hat.gif");
  var button = document.getElementById("hocusPocus");
  button.setAttribute("value", "Get back in that hat!");
}

Bu basit DOM çalışmasıyla, tavşan ortaya çıkar çıkmaz düğmenin etiketi değişir. Bu noktada, HTML'niz ve tamamlanmış showRabbit() işleviniz Liste 9'daki gibi görünmelidir.


Liste 9. (Şimdilik) Tamamlanmış Web sayfası
<html>
 <head>
  <title>Magic Hat</title>
  <script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      hatImage.setAttribute("src", "rabbit-hat.gif");
      button.setAttribute("value", "Get back in that hat!");
    }
  </script>

 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">

    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" id="hocusPocus" 
           onClick="showRabbit();" />
   </p>
  </form>                                                                     
 </body>

</html>

Tavşanın şapkaya geri girmesi

Yeni düğme etiketinden de tahmin edeceğiniz gibi, tavşanın şapkaya geri girmesinin zamanı geldi. Aslında bu, tavşanı çıkarmak için yaptığınız işlemleri tersine çevirmenizle aynı süreçtir: Resmin src özniteliği yeniden eski resme değiştirilir. Bunu yapmak için yeni bir JavaScript işlevi oluşturun:

function hideRabbit() {
  var hatImage = document.getElementById("topHat");
  hatImage.setAttribute("src", "topHat.gif");
  var button = document.getElementById("hocusPocus");
  button.setAttribute("value", "Hocus Pocus!");
}

Bu, gerçekten de showRabbit() işlevinin yaptığı her şeyi tersine çevirmektir. Resmi eski, tavşansız şapkaya ayarlayın, düğmeyi alın ve etiketini yeniden Hocus Pocus! olarak değiştirin.


Olay işleyicilerle çalışma

Örnek uygulamanın bu noktada önemli bir sorunu vardır: Düğmenin etiketi değişir, ancak düğmeyi tıkladığınızda gerçekleşen işlem değişmez. Neyse ki, DOM'yi kullanarak kullanıcı düğmeyi tıklattığında gerçekleşen işlemi değiştirebilirsiniz. Dolayısıyla, düğmede Get back in that hat! yazıyorsa, kullanıcı düğmeyi tıkladığında hideRabbit() işlevinin çalışmasını istiyorsunuz demektir. Bunun tersine, tavşan gizlendiğinde, düğme showRabbit() işlevini çalıştırır.

addEventHandler() yöntemini kullanmakta kaçının

onclick özelliğine ek olarak, onClick ya da onBlur gibi bir olay işleyicisi eklemek için kullanılabilecek bir yöntem vardır; bu yönteme çok da şaşırtıcı olmayan bir şekilde addEventHandler() denir. Ne yazık ki, Microsoft™ Internet Explorer™ bu yöntemi desteklemez; bu nedenle, JavaScript'inizde bu yöntemi kullanırsanız, milyonlarca Internet Explorer kullanıcısı sayfanızdan yalnızca bir hata iletisi alır (ve akıllarından şikayetleriyle ilgili düşünceler geçebilir). Bu yöntemi kullanmaktan kaçının; Internet Explorer'da çalışan bu makaledeki yaklaşımı kullanarak aynı sonuçları alabilirsiniz.

HTML'ye bakarsanız, burada çalıştığınız olayın onClick olduğunu görürsünüz. JavaScript'te, bir düğmenin onclick özelliğini kullanarak bu olaya başvuruda bulunabilirsiniz. (HTML'de özelliğe genellikle, büyük C harfiyle onClick, JavaScript'te ise tamamı küçük harfle onclick dendiğine dikkat edin.) Demek ki, bir düğmede çalışan olayı onclick özelliğine yeni bir işlev atayarak değiştirebilirsiniz.

Ancak ufak bir nokta vardır: onclick özelliğinin bir işlev başvurusuyla beslenmesi gerekir -- işlevin dize adı değil, işlevin kendisine bir başvuru gereklidir. JavaScript'te, bir işleve parantez kullanmadan, adıyla başvuruda bulunabilirsiniz. Bir düğme tıklatıldığında çalışan işlevi aşağıdaki şekilde değiştirebilirsiniz:

button.onclick = myFunction;

O zaman, HTML'nizde bu değişikliği yapmak oldukça kolay olacaktır. Düğmenin çalıştırdığı işlevlerin değiştirildiği Liste 10'a bakın.


Liste 10. Düğmenin onClick işlevinin değiştirilmesi
<html>
 <head>
  <title>Magic Hat</title>
  <script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      hatImage.setAttribute("src", "rabbit-hat.gif");
      var button = document.getElementById("hocusPocus");
      button.setAttribute("value", "Get back in that hat!");
      button.onclick = hideRabbit;

    }

    function hideRabbit() {
      var hatImage = document.getElementById("topHat");
      hatImage.setAttribute("src", "topHat.gif");
      var button = document.getElementById("hocusPocus");
      button.setAttribute("value", "Hocus Pocus!");
      button.onclick = showRabbit;                                           
    }
  </script>
 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>

  <form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" id="hocusPocus" 
           onClick="showRabbit();" />

   </p>
  </form>                                                                     
 </body>
</html>

Bu tam, kullanıma hazır bir DOM uygulamasıdır. Deneyin ve kendiniz görün!


Sonuç

Bu noktada, DOM ile rahatça çalışabiliyor olmanız gerekir. Önceki makalelerde, DOM ile çalışmaya ilişkin temel kavramları görmüş ve API'ye ayrıntılı bir şekilde bakmıştınız; şimdi DOM tabanlı basit bir uygulamayla çalıştınız. Bu makale üzerinde durun ve kendiniz çevrimiçi denemeler yapın.

Bu makale, bu dizinin özellikle Belge Nesne Modeli konusuna odaklanan son makalesi olmasına rağmen, DOM ile okuyacağınız son yazı değildir. Aslında, en azından bir dereceye kadar DOM'yi kullanmadan Ajax ve JavaScript dünyalarında fazla bir şey yapmakta zorlanırsınız. İster karmaşık vurgulama ve hareket etkileri oluşturun, ister yalnızca metin blokları ve resimlerle uğraşın, DOM size kullanımı gerçekten kolay bir yöntemle bir Web sayfasına erişim sağlar.

DOM'yi nasıl kullanacağınız konusunda emin olmadığınız noktalar olduğunu düşünüyorsanız, bu dizinin üç makalesini de gözden geçirin; dizinin bundan sonraki makalelerinde DOM, çok fazla açıklama yapılmadan kullanılacaktır ve eminim ki ayrıntılar içinde kaybolmak ve XML ya da JSON gibi diğer kavramlarla ilgili önemli bilgileri kaçırmak istemezsiniz. DOM'yi rahatlıkla kullandığınızdan, kendi başınıza DOM tabanlı birkaç uygulama yazabildiğinizden ve önümüzdeki birkaç ay boyunca anlatacağım bazı veri formatı sorunlarıyla başa çıkmaya hazır olduğunuzdan emin olun.



Yüklemeler

Açıklama Ad Boyut Karşıdan yükleme yöntemi
Yalnızca örnekteki grafikler wa-ajaxintro6/ajax_6-images_download.zip 91 KB HTTP
HTML ve grafiklerin bulunduğu tam örnek wa-ajaxintro6/ajax_6-complete_examples.zip 93 KB HTTP


Kaynaklar

Bilgi Edinme

Ürün ve teknoloji edinme
  • Head Rush Ajax, Brett McLaughlin (O'Reilly Media, 2006): Bu makaledeki fikirleri Head First yöntemiyle öğrenin.

  • Java and XML, Second Edition (Brett McLaughlin, O'Reilly Media, Inc., 2001): Yazarın XHTML ve XML dönüşümleriyle ilgili görüşlerini okuyun.

  • JavaScript: The Definitive Guide (David Flanagan, O'Reilly Media, Inc., 2001): JavaScript ve dinamik Web sayfalarıyla çalışmaya ilişkin kapsamlı yönergeleri inceleyin. Yayınlanacak olan yeni basımda Ajax ile ilgili iki yeni bölüm vardır.

  • Head First HTML with CSS & XHTML (Elizabeth and Eric Freeman, O'Reilly Media, Inc., 2005): Standartlaşmış HTML ve XHTML ve CSS'yi HTML'ye uygulamayla ilgili daha fazla bilgi öğrenin.

  • IBM deneme yazılımı: developerWorks'deki yazılımı doğrudan yükleyerek bir sonraki geliştirme projenizi oluşturun.


Tartışma

Yazar hakkında

Brett McLaughlin'in fotoğrafı

Brett McLaughlin, Logo günlerinden bu yana bilgisayarlarla ilgili çalışmalar yapmaktadır (Küçük üçgeni hatırlıyor musunuz?) Son yıllarda, Java ve XML topluluklarında en çok tanınan yazarlardan ve programcılardan biri oldu. Kendisi, Nextel Communications şirketi için karmaşık kurumsal sistemler uygulaması, Lutric Technologies için uygulama sunucuları yazma görevlerini üstlendi ve en son O'Reilly Media, Inc. için önemli kitaplar yazma ve yayına hazırlama işlerini yürütüyor. Brett'in, yeni kitabı Head Rush Ajax, Ajax'a Head First adlı ödüllü ve yenilikçi bir yaklaşım getiriyor. Son kitabı Java 1.5 Tiger: A Developer's Notebook, Java teknolojisinin en yeni sürümüyle ilgili ilk kitap olma özelliğini taşıyor. Artık bir klasik olan Java and XML adlı kitabı ise, Java dilinde XML teknolojilerinin kullanılması üzerine en açıklayıcı çalışma olmaya devam ediyor.

Görüşler

0
butch
Kimseden makale talebi gelmedeği için Ajax saldırısı devam etmektedir.

Duyurulur.
0
simor
Kısaca bakındım da zamanının geldiğini düşündüğüm,
http://www-128.ibm.com/developerworks/library/os-php-v5migr/index.html

ve

etkileşimli disiplinler için öğretici olabilecek olan ve hatırı sayılır miktarda da popülerliği olan,
http://www-128.ibm.com/developerworks/library/l-robotools/index.html

bağlantılarını önerebilirim.
0
101
Ve bundan çok memnunuz. Ellerinize sağlık.
0
Guardian
gerçekten harika, devamını sabırsızlıkla bekliyorum,

tek isteğim, php ile de ilişkilendirilmesinden de bahsedilmesi, HttpRequest :)

İyi çalışmalar..
0
simor
Bide şunlar sanki güzel gibi. Tabi seçim kriterlerinizi bilmiyorum ama temel bilgilerin pratikçe anlatıldığı makaleler hoşum agidiyor. IBM de güzel yapıyor ne diim :)

https://www6.software.ibm.com/developerworks/education/au-unixtips1/section3.html
http://www-128.ibm.com/developerworks/edu/au-dw-au-unixtips2-i.html?ca=drs-
https://www6.software.ibm.com/developerworks/education/au-unixtips3/section2.html

Gözüme takılanları yine yazarım.
0
simor
Düzeltme:

http://www-128.ibm.com/developerworks/edu/au-dw-au-unixtips1-i.html?ca=drs-
http://www-128.ibm.com/developerworks/edu/au-dw-au-unixtips2-i.html?ca=drs-
http://www-128.ibm.com/developerworks/edu/au-dw-au-unixtips3-i.html?ca=drs-
Görüş belirtmek için giriş yapın...

İlgili Yazılar

Python Web çerçeveleri, Bölüm 1

butch

IBM Türkiye ve Fazlamesai.net işbirliği ile dilimize kazandırılan yeni bir IBM developerWorks makalesi ile karşınızdayız. Diğer makalelere buradan ulaşabilirsiniz.

Makalenin özgün haline bu adresten ulaşabilirsiniz.

developerWorks: Yüksek performanslı Linux kümeleme - 1: Kümelemenin İlkeleri

butch

IBM Türkiye ve Fazlamesai.net işbirliği ile dilimize kazandırılan yeni bir IBM developerWorks makalesi ile karşınızdayız. Diğer makalelere buradan ulaşabilirsiniz.

Makalenin özgün haline bu adresten ulaşabilirsiniz.

GTK+ ile ilgili temel bilgiler, Bölüm 3: GTK+ nasıl yayılır?

butch

IBM Türkiye ve Fazlamesai.net işbirliği ile dilimize kazandırılan yeni bir IBM developerWorks makalesi ile karşınızdayız. Diğer makalelere buradan ulaşabilirsiniz.

Makalenin özgün haline bu adresten ulaşabilirsiniz.

UNIX Dilinde Konuşma, Bölüm 5: Veriler, veriler her yerde!

butch

IBM Türkiye ve Fazlamesai.net işbirliği ile dilimize kazandırılan yeni bir IBM developerWorks makalesi ile karşınızdayız. Diğer makalelere buradan ulaşabilirsiniz.

Makalenin özgün haline bu adresten ulaşabilirsiniz.

UNIX Dilinde Konuşma, Bölüm 3: Her şeyi komut satırından yapın

butch

IBM Türkiye ve Fazlamesai.net işbirliği ile dilimize kazandırılan yeni bir IBM developerWorks makalesi ile karşınızdayız. Diğer makalelere buradan ulaşabilirsiniz.

Makalenin özgün haline bu adresten ulaşabilirsiniz.