Mart 3

Prototype.js Kılavuzu - 1

Hazır Kütüphaneler orhan

Temel Metot ve Fonksiyonlar

Prototype’ın temelini teşkil eden bu fonksiyonlar ile geleneksel yöntemlerle yapıldığında fazla zahmet ve kod gerektiren işlemleri kolayca ve tek satıra indirgenmiş ifadeler şeklinde yapabilmekteyiz.

$() Fonksiyonu

Prototype’ın belki de en çok kullanılan ve bilinen fonksiyonlarından biri olan bu dolar fonksiyonu; eski teknikler ile "document.getElementById()" fonksiyonunu kullanarak nesnelere ID‘leri aracılığı ile ulaşmamızı sağlayan ve durumdan duruma değişiklik gösterebilen bu fonksiyonu oldukça pratik bir hale getiren, DOM tabanlı element yakalama fonksiyonudur. Bir örnek vermek gerekirse:

var node = document.getElementById("elementID");

Olarak kullandığımız kod artık şu hale geliyor:

var node = $("elementID");

Evet, gördüğünüz gibi oldukça pratik. Fakat $() fonksiyonu "getElementById()" fonksiyonundan farklı olarak ayrıca bir dizi şeklindeki çoklu nesneleri yakalayabilme özelliğine de sahiptir. 

allNodes = $("firstDiv", "secondDiv");
for(i = 0; i < allNodes.length; i++) {
alert(allNodes[i].innerHTML);
}

Bu kullanımda fonksiyondan dönen değer bir dizi değişken (array) olup örnekteki gibi bir döngü ile erişilebilmektedir. $() fonksiyonu aynı zamanda parametre olarak sadece ID değil, doğrudan element objelerini de kabul edebilmektedir.

getElementsByClassName()

JavaScript’in kendi yapısında bulunmayan fakat birçok geliştiricinin şiddetle olmasını arzuladığı bir fonksiyon olan "getElementsByClassName()", tıpkı "document.getElementsByTagName()" metodu gibi çalışan fakat ondan farklı olarak doğrudan "className" (nesneye uygulanmış CSS stili ismi) üzerinden nesneleri yakalamanızı sağlayan oldukça kullanışlı bir fonksiyondur.

TumElemanlar = document.getElementsByClassName("StilAdi");
for(i = 0; i < TumElemanlar.length; i++) {
    alert(TumElemanlar[i].innerHTML);
}

Örnekte de görüldüğü üzere fonksiyon çağrıldığında dokümandaki tüm "StilAdi" isimli stil uygulanmış nesneleri bir dizi değişken şeklinde döndürmektedir. DOM modeli ile çalışan her geliştiricinin elinin altında olması gereken bir fonksiyon olsa gerek.

$$() Fonksiyonu

Doküman içerisindeki bir nesneye ID, stil ismi ya da etiket ismi ile veya bunların çeşitli kombinasyonları ile erişme olanağı sağlayan DOM temelli element yakalama fonksiyonudur. Aslında bu fonksiyona Prototype’ın "$()" fonksiyonu ile JavaScript’in olağan bir fonksiyonu olan ".getElementByTagName()" metodunun kombinasyonuna, yine Prototype’ın ".getElementByClassName()" metodunun da eklenmesi ile oluşan çok amaçlı bir fonksiyondur diyebiliriz. Temel kullanımı ve alınan sonuçları şu şekilde listeleyebiliriz:

Bu fonksiyonun kullanımı ile ilgili dikkatli olunması gereken bazı noktalar bulunmaktadır. Eğer spesifik bir CSS stili uygulanmış elementlere ulaşmak istiyorsanız bu fonksiyon yerine ".getElementByClassName()" metodunu kullanmanız önerilmektedir. Aksi takdirde tarayıcıya gereksiz yük bindirilmesi ve performans kaybına yol açılabilmektedir.

Fonksiyonda kullanılan geçerli CSS stil yazım kuralları şu şekildedir:

  • Doğrudan HTML element ismi (div, li, a gibi).
  • Seçici isimleri aralarda boşluklar olacak şekilde hiyerarşik yapı ile yazılmalıdır.
  • Parametre seçiciler CSS 2.1 kullanımında olduğu üzere, [attr], [attr=value], [attr~=value] ve [attr|=value] geçerlidir. Aynı zamanda [attr!=value] ifadesi de kullanılabilmektedir.
  • Sınıf seçisi isimlerin ".highlighted" veya ".example.wrong" şeklinde kullanımları yanlıştır
  • ID seçiciler "#item1" şeklinde kullanılmalıdırlar.
$$('div')
// Dokümandaki tüm DIV elementleri. document.getElementsByTagName('div') ile  aynı

$$('#contents')
// $('contents') ile aynı, fakat her halükârda bir dizi değişken (array) döndürür.

$$('li.faux')
// Dokümandaki "faux" isimli stil uygulanmış bütün LI (liste maddesi)  elementleri.

$$('#contents a[rel]')
// ID'si "contents" olan element içindeki bütün "rel" parametresi  olan linkler.

$$('a[href="#"]')
// "href" (link adresi) parametresi "#" olan bütün linkler.

$$('#navbar li',  '#sidebar li')
// ID'si "navbar" veya "sidebar" olan elementler içindeki  bütün LI elementleri.

Sayfalar: 1 2 3

Toplamda 15249 kez okunmuş.
Şu an 1 kişi okuyor.
En fazla 9 kişi aynı anda okumuş.
Bugün 1 kez okunmuş.

Etiketler: , , , , , , 

1 oy2 oy3 oy4 oy5 oy (38 oy, ortalama 4.37) Oylanıyor ... Oylanıyor ...

  1. PHP ve Yerleşik DOM Sınıfları
  2. Javascript Sanal Klavye Yapalım
  3. Ajax Olmasaydı Ne Yapardık ? :)

Trackback Yorumları takip et Baskı Önizleme

9 yorum var

  1. # yakuter | 03 Mart 2007, 14:27 Gravatar

    Orhan, bu mükemmel kaynak ve rehber için sana ne kadar teşekkür etsek azdır. AJAX denildiği zaman akla ilk gelen js kütüphanesinin böyle açıklayıcı bir şekilde anlatılması büyük bir emek ister. Ellerine sağlık ve aramıza hoşgeldin :)

  2. # grkn | 03 Mart 2007, 18:36 Gravatar

    gerçekten de çok müthiş bir makale, çok teşekkür ederim : )

  3. # kiirpi | 05 Mart 2007, 11:25 Gravatar

    çok güzel bir kaynak olmuş ellerinize sağlık..

  4. # caner | 05 Mart 2007, 11:29 Gravatar

    Merhabalar.

    Gerçekten güzel bir yazı olmuş. Tebrik ederim.

    Birşey sormak istiyorum. Acaba bu Form.Serialize formdan gelen verilerin karakter kodlamasını değiştiriyor mu ? Bir de Türkçe için illaki Latin5 mi kullanmak lazım.

  5. # ayşe | 05 Mart 2007, 16:26 Gravatar

    Orhan,
    Senin verdiğin koddaki last yerine first yazdım. Acaba birinciyi gösterir mi diye merak ettim. Birinciyi gösterdi. Diğer paragrafları göstermedi.

    1. paragraf. Görülecek.
    2. paragraf.
    3. paragraf.

    var paras = $A(document.getElementsByTagName(’p'));
    paras.each(Element.hide);
    $(paras.first()).show();

    ………………………………………………….

    Dizilerle ilgili diğer örneğine mesaj ekledim. Mesaj kutusu 0 dan 5 e kadar olan sayıları gösterdi.

    var dizi = $A($R(0, 5)).join(’, ‘)
    // ‘0, 1, 2, 3, 4, 5′

    alert(dizi); // 0, 1, 2, 3, 4, 5

    ………………………………………………
    Diğer bir örneğe de mesaj ekledim. Çalışıyor.

    var dizi = $A($R(’a', ‘h’)).join(’, ‘)

    // ‘a, b, c, d, e, f, g, h’

    alert(dizi);

    …………………………………………
    Meyveli kod hoştu. Mesaj ekledim. Her defasında mesaj kutusu başka bir meyvenin yenmek istendiğini söyledi.

    $w(’elma armut kivi çilek’).each(function(fruit){
    var message = ‘Canım ‘ + fruit + ‘ yemek istiyor’;

    alert(message); // Mesaj kutusu aşağıdakileri gösteriyor.
    /* Canım elma yemek istiyor.
    Canım armut yemek istiyor.
    Canım kivi yemek istiyor.
    Canım çilek yemek istiyor.
    */
    // diğer işlemleri yap
    })

    …………………………………………….
    Mesaj eklediğim bir diğer kod ise 10 kere mesaj kutusu gösterdi ve her defasında sayı 1 sayı arttı.

    var dizi = $R(0, 10, true).each(function(value) {
    // 0′dan 9′a 10 defa istenen değer

    alert(value);

    });

    ……………………………………………………
    İd’i verilen elemanların gizlenmesini de yapabildim.

    Bunun id’i reklamAlani. Gizlenecek.
    Bunun id’i AnaMenu. Gizlenecek.
    Bunun id’i YorumLinkleri. Gizlenecek.
    Bunun id’i katman. Gizlenmeyecek.

    $w(’reklamAlani AnaMenu YorumLinkleri’).each(Element.hide);
    // boşluk şeklinde verilen ID’lere sahip elementleri gizler

    ………………………………………………………
    Bunlar çalışınca verdiğin kaynak sitedeki bir kodunda nasıl çalıştığını anladım.

    .active { color:red; }

    1. Bunun id’i comments. Görülecek.
    1. Bunun id’i comments2. Görülmeyecek.

    $(’comments’).addClassName(’active’).show()
    $(’comments2′).addClassName(’active’).hide()

    ………………………………………………………

    Yazıların devamını bekliyorum. Herkese teşekkürler…

  6. # Orhan | 06 Mart 2007, 11:07 Gravatar

    arkadaşlar öncelikle yazdıklarınız için çok teşekkürler. Yazının amacına ulaştığını görmek güzel bir duygu :)

    form.serialize e gelince: bildiğim kadarıyla Prototype btünü talep işlemlerinde encoding olarak UTF-8 kullanıyor ama serialize de böyle bir işleme gerek yok yaptığı tek şey form verilerini uçö uca eklemek. Muhtemelen metinleri olduğu gibi bırakıyordur. Yaptığı tek işlem urlencode den geçirmek. Buda genelde sunucu tarafından geri de-encode edildiğinden sorun olmasa gerek ama her ihtimale karşı karşıda bi url_decode işleminden geçirilebilir tabi. Onun dışında birşey gelmiyor aklıma.

    Bu arada yazıların devamı gelecek arkadaşlar merak etmeyin daha yazılacak ve yayınlanacak çok şey var Prototype hakkında, biraz sabır …

    herkese iyi çalışmalar.

  7. # Omer | 09 Mart 2007, 14:49 Gravatar

    Site de harika içerik de. Arkadaşların dediğine göre harikaymış :) JavaScript’i öğrenebilirsem ajax beni bekle :) ))

  8. # ogalican | 17 Nisan 2007, 07:59 Gravatar

    Merhaba , Moo.Fx ‘e değinecekmisiniz? Prototype ile bir karşılaştırma yaparsak ikisi arasında avantajları nelerdir.

    Teşekkürler ve İyi Günler.

  9. # AJAX-TR.COM » AJAX Puanlama Uygulaması | 15 Temmuz 2007, 17:43 Gravatar

    […] Ajax-Tr sitesinde yazıların her birinin altında görebileceğiniz, yazıyı puanlama mekanizmasının benzerini kendi sitenizdeki; yazılar, makaleler, haberler gibi her türlü metin içerikli bölüme uygulamak istiyorsanız AJAX sizin için çok iyi bir çözümdür. Bu yazıda elimden geldiğince bu mekanizmanın AJAX ile nasıl yapılabileceğini göstereceğim. Bunu yaparken de prototype.js’nin hazır AJAX fonksiyonlarından faydalanacağım. Tabii siz isterseniz aynı uygulamayı kendi kütüphanenizi, eyceks kütüphanesini ya da bir başka kütüphaneyi kullanarak yazabilirsiniz. […]

Yorum yazın

sayfa sayacı