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.
|
Ç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?)
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
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
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.
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:
- Yeni bir
imgöğesi oluşturun. - Var olan
imgöğesinin ana öğesi (kapsayıcısı) olan öğeye erişin. - Yeni
imgöğesini, kapsayıcının bir alt öğesi olarak, var olanimgöğesinin hemen önüne yerleştirin. - Eski
imgöğesini kaldırın. - 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");
|
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!
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.
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>
|
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
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:
- Yeni bir
imgöğesi oluşturun. - Var olan
imgöğesinin ana öğesi (kapsayıcısı) olan öğeye erişin. - Yeni
imgöğesini, kapsayıcının bir alt öğesi olarak, var olanimgöğesinin hemen önüne yerleştirin. - Eski
imgöğesini kaldırın. - 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:
- Yeni bir
imgöğesi oluşturun. - Var olan
imgöğesinin ana öğesi (kapsayıcısı) olan öğeye erişin. - Eski
imgöğesini, az önce oluşturduğunuz yeni öğeyle değiştirin. - 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.
Ş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>
|
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.
Ö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.
|
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!
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.
| 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 |
Bilgi Edinme
- Exploiting
DOM for Web response (Web yanıtı için DOM'yi kullanma) ve Advanced
requests and responses in Ajax (Ajax'ta gelişmiş istekler ve yanıtlar): DOM programlamasıyla ilgili bu dizinin birinci ve ikinci makalelerini okuyun ya da Mastering Ajax (Ajax'ta Uzmanlaşma) dizisinin tamamına bakın.
- "Build
dynamic Java applications" (Philip McCarthy, developerWorks,
Eylül 2005): Java™ bakış açısıyla Ajax'a sunucu tarafından bir bakış.
- "Java
object serialization for Ajax" (Philip McCarthy,
developerWorks, Ekim 2005): Ağ üzerinden nesne gönderme ve Ajax ile etkileşimde bulunma konularını Java bakış açısıyla inceler.
- "Call
SOAP Web services with Ajax" (James Snell, developerWorks,
Ekim 2005): Ajax'ın var olan SOAP tabanlı Web hizmetleriyle bütünleştirilmesine ilişkin bu ileri düzey makaleyi inceleyin; Ajax tasarım şablonunu kullanarak Web tarayıcısı tabanlı SOAP hizmetleri istemcisini nasıl uygulayacağınızı gösterir.
- World Wide Web Consortium'daki DOM Ana Sayfası: DOM ile ilgili her şeyin başlangıç noktasını ziyaret edin.
- DOM
Level 3 Core Specification (DOM Düzey 3 Çekirdek Belirtimi): Çeşitli dillerden Belge Nesne Modeli'nin kullanabileceği tipleri ve özellikleri kullanarak çekirdek DOM'yi tanımlayın.
- ECMAScript
language bindings for DOM (DOM için ECMAScript dil ilişkilendirmeleri): Bir JavaScript programcısıysanız ve kodunuz için DOM kullanmak istiyorsanız, Düzey 3 Belge Nesne Modeli Çekirdeği tanımlarına ilişkin bu ek ilginizi çekecektir.
- "Ajax:
A new approach to Web applications" (Jesse James Garrett , Adaptive
Path, Şubat 2005): Ajax moniker teriminin ilk kez kullanıldığı bu makaleyi okuyun -- tüm Ajax geliştiricileri bu makaleyi okumalıdır.
- developerWorks
Web mimarisi alanı: Web oluşturma becerilerinizi makaleler, senaryolar, forumlar, vb. araçlarla genişletin.
- developerWorks
teknik etkinlikleri ve Web yayınları: Teknik geliştiricilere yönelik bu yazılım brifinglerini takip edin.
Ü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
- developerWorks
Web günlükleri: DeveloperWorks topluluğuna katılın.
- Ajax forum on developerWorks: AJAX'ı yeni öğrenen ya da etkin olarak kullananWeb geliştiricilerinden oluşan bu forumda yeni bilgiler öğrenin, düşüncelerinizi tartışın, bildiklerinizi paylaşın.
|
|
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. |
|
Duyurulur.