Mart 3

Prototype.js Kılavuzu - 1

Hazır Kütüphaneler orhan

JavaScript geliştiricilerinin işlerini inanılmaz bir biçimde kolaylaştırarak, geliştirme sürecini büyük ölçüde kısaltan ve kendi kulvarında oldukça özel bir yere sahip olan Prototype.js kütüphanesini yakından inceleyeceğiz. Nedir, ne işe yarar, neler yapabilir? Hepsi bu yazı dizisinde …

Prototype.jsPrototype.js’nin ne olduğunu anlamak için öncelikle ne işe yaradığını bilmemiz gerekiyor. Hepimizin bildiği gibi Web 2.0 ile gündemimize oturan ve kullanıcı odaklı, erişilebilirliği yüksek, küçük web uygulamalarında (widgets), ziyaretçiye konforlu bir ortam sunmak amacıyla istemci tarafında (client-side) çalışan ve temelini JavaScript uygulamalarının oluşturduğu çalışmalar için bir çok kütüphane ve geliştirme ortamı (framework) yazılmış durumda. Bunlar arasında belki de birçoğuna ilham kaynağı olan ve aynı zamanda ilk örneklerden biri olma özelliğini de taşıyan Prototype.js; Sam Stephenson ve arkadaşları tarafından geliştirilen, açık kaynaklı ve nesne yönelimli bir kod kütüphanesidir. Tutarlı ve stabil bir yapıya sahip olan bu kütüphane özellikle Ajax geliştiricileri için oldukça pratik çözümler sunmakla beraber, standart bir geliştirme sürecinde kullanılan birçok rutin işlevi ve metodu da bünyesinde barındırması açısından incelemeye değer bir çalışma olarak karşımıza çıkıyor.

Bu sebepten olacak ki bir çok hazır uygulama ve hatta diğer kütüphaneler de kendi projelerinde “prototype.js” kullanma ihtiyacı duymaktadır. Bunlar arasında en tanınan ve ilgi çekeni; JavaScript tabanlı bir efekt kütüphanesi olan script.aculo.us‘dır. Neyse bu kadar hikâye yeter sanırım biraz daha derine girerek asıl konumuza dönebiliriz.

Başlarken

Öncelikle resmi web sitesi aracılığıyla “prototype.js” dosyasını indirip uygun gördüğünüz bir konuma kopyalayın. Bu işlemin ardından “.js” dosyasını sayfamıza dahil etmemiz gerekmekte.

<script src="/scripts/prototype.js" type="text/javascript"></script>

… şeklinde kütüphaneyi sayfamıza dahil ettikten sonra artık “prototype.js”nin tüm nimetlerinden faydalanabiliriz.

Bu doküman yazıldığı sıralarda resmi 1.5 sürümü yayınlanmıştı ve makale bu sürüm baz alınarak kaleme alınacaktır. Şimdi ana hatlarıyla kütüphane incelemeye başlayalım.

Prototype işlev olarak farklı kısımlara ayrılabilen bir yapıya sahiptir. Bu kısımların her biri, belli elementler üzerine yoğunlaşarak bu element veya element grubu ile ilgili fonksiyon ve metotları içerirler. Prototype’ın sahip olduğu kısımlar şu şekilde özetlenebilir.

  • Ajax
  • Array
  • Class
  • Element
  • Enumerable
  • Event
  • Form
  • Form.Element
  • Function
  • Hash
  • Insertion
  • Number
  • Object
  • ObjectRange
  • Position
  • String
  • Template
  • TimedObserver

Bu bölümlerden belli başlılarına bu makale içerisinde deyinmeye çalışacağız. Fakat yazamadığımız bölümler kalacak şüphesiz. Prototype API ve fonksiyonları hakkında örnekler ve açıklayıcı bilgiler içeren Prototype API Dokümantasyon sayfalarından ilgilendiğiniz kısım ile ilgili detaylı bilgiler elde edebilirsiniz.

Sayfalar: 1 2 3

Toplamda 15250 kez okunmuş.
Şu an 1 kişi okuyor.
En fazla 9 kişi aynı anda okumuş.
Bugün 2 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ı