AJAX-TR.COM » Prototype.js Kılavuzu

Prototype.js yazı dizisine kaldığımız yerden devam ediyoruz. Bu üçüncü bölümde Prototype’ın element işlemlerine yardımcı olan fonksiyonlarını inceliyoruz.

Element İşlemlerine Yardımcı Fonksiyonlar

JavaScript kullanarak DOM modeli ile nesnelere erişerek çeşitli özelliklerini (konum veya boyut gibi) değiştirebiliyoruz. Prototype bu işlemleri oldukça pratik hale getiren yardımcı fonksiyonlar ile onlarca satır kodu basit bir betik haline getirebilmekte. Örneğin prototype yardımcı fonksiyonlar olmadan bir nesnenin yüksekliği elde edebilmek için şu kodu kullanabilmekteyiz:

$("first").offsetHeight

Bu işlemi yardımcılar ile Element.getHeight("first") şeklinde yapabilmemiz mümkün. Benzer şekilde birçok fonksiyon ile elementlere hükmedebilmekteyiz.
Yine başka bir örnekte bir dokümandaki nesnelere uygulanmış stillerden birini silmek istersek şu kodu kullanabiliriz:

PLAIN TEXT

JAVASCRIPT:

var element = $(element);
if (!element)
return;
var newClassName = '';
var a = element.className.split(' ');
for (var i = 0; i <a> 0)
newClassName += ' ';
newClassName += a[i];
}
}
element.className = newClassName;

Bu oldukça uzun bir yol oldu. Bu işlemi Prototype ile yapmak istersek şu tek satır yeterli:

Element.removeClassName("elementID", "SilinecekStil");

Gördüğünüz gibi onca kodu tek satır haline dönüştürebilmekteyiz. Böylece işlevsellik açısından yüksek verimli kodlar yazabiliyoruz. Element fonksiyonları ile ilgili Prototype API dokümantasyonundan ve script.aculo.us Prototype wiki dokümantasyonundan kapsamlı bilgiye ulaşabilirsiniz.

Diğer element fonksiyonları şu şekilde sıralanabilmekte:

Element.addClassName

Elemente bir CSS stili uygular.

$('mutsu').addClassName('food') $('mutsu').className // 'apple fruit food' $('mutsu').classNames() // ['apple', 'fruit', 'food']

Element.addMethods

Elementlere kendi metotlarımızı eklemenize olanak tanır. Böylece kendi metotlarınız ile Element nesnesini birleştirerek daha yekpare bir yapı elde edebilir ve istediğiniz özellikte metotlar oluşturabilirsiniz. Metotlarınızı bir "Hash" nesnesi formatında yazmanız gerekmektedir. Böylece Prototype’ın sizin için yetersiz kaldığı noktalarda da bir çözüm yolu yaratmış olursunuz. Burada bir uyarı yapmak gerekiyor; Element.AddMethods() kendi içinde, olağan JavaScript metotlarını (getAttribute veya innerHTML gibi) ve Prototype metotlarını iptal etmenizi engelleyen bir güvenlik mekanizmasına sahiptir.

Örneğin belirtilen etiketlerin etrafını başka bir etiket ile kaplamak için neden "wrap('etiketAdi')" şeklinde bir metot yazmayalım?

Önce:

<p id="first">Some content...</p>

PLAIN TEXT

JAVASCRIPT:

Element.addMethods({
wrap: function(element, tagName) {
element = $(element);
var wrapper = document.createElement('tagName');
element.parentNode.replaceChild(wrapper, element);
wrapper.appendChild(element);
return Element.extend(wrapper);
}
});
$(element).wrap('div');
// HTMLElement (div);

Sonra:

<div><p id="first">Some content...</p></div>

Gördüğünüz gibi metot çağrıldıktan sonra yeni oluşturulan div elementinin objesini döndürmektedir. Bu da kendi metotlarınız ile zincirleme metotlar kullanabileceğiniz anlamına geliyor.

$(element).wrap('div').setStyle({ backgroundImage:'url(images/rounded-corner-top-left.png) top left' });

Element.ancestors

Bir elementin üst elementlerini (parentNode) dizi değişken halinde döndürür.

<html> [...] <body> <div id="father"> <div id="kid"></div> </div> </body> </html>

PLAIN TEXT

JAVASCRIPT:

$('kid').ancestors();
// [div#father, body, html] //Bunu aklınızdan çıkarmayın
// `body` ve `html` elementleri de dahil edilir!
document.getElementsByTagName('html')[0].ancestors();
// []

Element.classNames

Elemente uygulanmış olan CSS stil ismini/isimlerini verir.

PLAIN TEXT

JAVASCRIPT:

$('mutsu').classNames()
// ['apple', 'fruit', 'food']
// stil isimlerini değiştir:
$('mutsu').className = 'fruit round'

Element.cleanWhitespace

Elementin içerdiği boş ve değer içermeyen alt etiketleri siler.

<ul id="apples"> <li>Mutsu</li> <li>McIntosh</li> <li>Ida Red</li> </ul>

PLAIN TEXT

JAVASCRIPT:

var element = $('apples');
element.firstChild.innerHTML;
// ”undefined” olarak döner çünkü html kodunda arada yeni satır gibi beyaz boşluklar vardır
element.cleanWhitespace();
element.firstChild.innerHTML;
// 'Mutsu'