Mayıs 18

Prototype.js Kılavuzu - 7

JavaScript & DOM & Hazır Kütüphaneler orhan

Diğer özellikler: Prototype'ın yetenekleri saymakla bitmiyor ancak bu makale dizisinde temel olarak en çok kullanılanlara değinmeye çalıştık. Son olarak birkaç faydalı özellikten de bahsederek seriyi sonlandıralım.

Sayılar

Prototype'ın sayılar konusunda birkaç ufak aracı da mevcut. Aslında çok da spesifik olmayan bu araçlar, çok satır kod ile gerçekleştirilen işlemleri Prototype'ın esnek yapısı ile kolayca yapabilmeye yarıyor.

  • .succ: Daha öncede anlatıldığı üzere bir ObjectRange nesnesinin bir sonraki elemanını verir ki burada ardışık sayı anlamına geliyor.
  • .times: Ruby'deki gibi döngüler yaratmaya yarar. "map" ya da "collect" gibi de düşünülebilir.
  • .toColorPart: Verilen rakamı (0-255 arası), iki haneli hekzadesimal renk koduna çevirir. Bu fonksiyon ile RGB renk kodlarından web için renk kodları üretebilirsiniz.
PLAIN TEXT
JAVASCRIPT:
  1. (5).succ() // -> 6
  2.  
  3. (5).times(function(n) {
  4. // 0′dan 5′e kadar döngü kurar.
  5. // parantezler JavaScript sözdiziminden dolayı konmalıdır. Aksi taktirde hata oluşacaktır.
  6. });
  7.  
  8. ‘#’ + [128, 10, 16].invoke(’toColorPart’).join('’)
  9. // ‘#800a10′

Olay Gözleme (Observe)

Bu metot "addEvent()" fonksiyonu gibi, genel olarak bir DOM ağacına bir olay (event) eklemek için kullanılır. (çoklu tarayıcı desteğine sahiptir)

<h2 id="mydiv">Beni tıkla!</h2>
<script type="text/javascript" language="javascript">

Event.observe('mydiv', 'click', function(e){ alert(Tıkladın dimi!') });
</script>

Eklenmiş bir olayın geçerliliğini sonlandırmak için ise "Event.stopObserving()" fonksiyonunu kullanabilirsiniz. Daha kapsamlı bilgi için "Event" nesnesini inceleyebilirsiniz.

Önceden Tanımlı Ziyaretçi Girdileri

Yine "Event" nesnesine bağlı ön tanımlı ifadeler olan bu durumlar ile olay yönetimlerini kolayca yönetebilirsiniz.

  • KEY_BACKSPACE: Geri boşluk tuşuna basıldığı durumu belirtir.
  • KEY_TAB: Sekme tuşuna basıldığı durumu belirtir.
  • KEY_RETURN: ENTER tuşuna basıldığı durumu belirtir.
  • KEY_ESC: Çıkış tuşuna basıldığı durumu belirtir.
  • KEY_LEFT: Sol ok tuşuna basıldığı durumu belirtir.
  • KEY_UP: Yukarı ok tuşuna basıldığı durumu belirtir.
  • KEY_RIGHT: Sağ ok tuşuna basıldığı durumu belirtir.
  • KEY_DOWN: Aşağı ok tuşuna basıldığı durumu belirtir.
  • KEY_DELETE: Silme tuşuna basıldığı durumu belirtir.
  • KEY_PAGEUP: Page up tuşuna basıldığı durumu belirtir.
  • KEY_PAGEDOWN: Page down tuşuna basıldığı durumu belirtir.
  • isLeftClick(): Sol fare tuşunun tıklandığı anı belirtir
  • pointerX(): Fare imlecinin yatay pozisyonunu belirtir. (piksel olarak)
  • pointerY(): Fare imlecinin dikey pozisyonunu belirtir. (piksel olarak)

Basit bir örnek yaparsak:

<script type="text/javascript">
<!--
function showPosition(e) {

if (Event.KEY_TAB) {
alert("Sekme tuşuna bastınız!");

}
//-->
</script>
<form name="myform" id="myform" method="post" action="">
<p>
<label for="textfield">Metin girdisi :</label>
<input type="text" name="textfield" id="textfield" onchange="showPosition();">
</p>
</form>

Bir diğer örnek:

Event.observe('signinForm', 'submit', checkForm);

Şablon Desteği

Benzer ifadeler ile çalışırken veya ziyaretçiye bir çıktı verirken sadece belli kısımları değiştirmenize olanak tanıyan şablon ihtiyaçlarınızı Prototype'ın güçlü şablon desteği ile giderebilirsiniz. Ruby geliştiricilerinin kolayca adapte olabilecekleri bir sınıf olan bu şablonlarda değiştirmek istediğinizi bölümleri belli değişkenler ile belirtmekteyiz. Değişken isimlerini formatı ise "#{alanAdi}" şeklinde olmakta.

PLAIN TEXT
JAVASCRIPT:
  1. // şablonumuz (formatlama ifademiz)
  2. var myTemplate = new Template(’Televizyon şovu olan #{title}, #{author} tarafından kaleme alınıp #{network} şirketi tarafından yayınlanmaktadır.’);
  3.  
  4. // verimizdeki alanlara yerleştirilecek değişkenler
  5. var show = {title: ‘The Simpsons’, author: ‘Matt Groening’, network: ‘FOX’ };
  6.  
  7. // verimizi formatlayalım
  8. myTemplate.evaluate(show);
  9. // Televizyon şovu olan The Simpsons, Matt Groening tarafından kaleme alınıp FOX şirketi tarafından yayınlanmaktadır.

Böylece önceden formatladığınız verileri ziyaretçiye sunulması aşamasından yeniden yapılandırıp sunabilirsiniz. Çoklu dil desteğine sahip uygulamalar geliştirmek için oldukça kullanışlı bir yöntem olsa gerek. Dikkat etmeniz gereken bir nokta şablonlarınız içerisinde ters bölü (backslash) kullanmamanız gerektiğidir. Örneği inceleyerek ne demek isteğimi daha iyi anlayabilirsiniz.

PLAIN TEXT
JAVASCRIPT:
  1. var t = new Template('#{lang} programlarken şablonlar için \#{variable} sözdizimini kullanırız.');
  2. var data = {lang:’Ruby’, variable: ‘(kullanımayan)’};
  3. t.evaluate(data);
  4. // Ruby programlarken şablonlar için #{variable} sözdizimini kullanırız.

İsterseniz kendi şablonlarınızı da yazarak size özel ifadelerin bulunup verilerle uygun biçimde değiştirilmesini sağlayabilirsiniz.

PLAIN TEXT
JAVASCRIPT:
  1. var syntax = /(^|.|\r|\n)(\<%=\s*(\w+)\s*%\>)/; // '<%= alan %>' şeklindeki kısımları yakalayacaktır
  2. var t = new Template(’<div>İsim: <strong><%= name %></strong>, Yaş: <strong><%=age%></strong></div>’, syntax);
  3. t.evaluate( {name: ‘John Smith’, age: 26} );
  4. // <div>İsim: <strong>John Smith</strong>, Yaş: <strong>26</strong></div>

Sınıf Yaratma İşlemleri (Class creation)

Geliştirme sürecinin tutarlı ve uyumlu bir biçimde ilerlemesi için kendi yazdığımız sınıflarda (class), Prototype'ın güçlü yapısını kullanabiliriz. Yapılandırıcı ve metotları eklemenin oldukça kolay ve basit olduğu "Class.create()" nesnesiyle sizde prototype tabanlı güçlü uygulamalar yazabilirsiniz.

PLAIN TEXT
JAVASCRIPT:
  1. yClass = Class.create();
  2. MyClass.prototype = {
  3.     initialize: function(a, b) {
  4.         this.a = a;
  5.         this.b = b;
  6.         this.secondfunc();
  7.     },
  8.     secondfunc: function(){
  9.         this.t = ’secondlife’;
  10.     }
  11. }
  12.  
  13. var mc = new MyClass("foo", "bar");
  14. alert(mc.t)

Benzer bir biçimde nesne yönelimli gelişmiş programlama dillerindeki gibi alt sınıflar yaratmak için de "Class.extend()" metodunu kullanabilirsiniz.

Prototype eklentileri (add-on) olarak bilinen uygulamalar bu sınıf yaratma yöntemi ile prototype tabanlı yazılmış uygulamalar anlamına gelmektedir.

Konumlandırma işlemleri (Positioning)

Sayfa içerisindeki elementlerin CSS konumlandırma özellikleri ve boyutları üzerinde mutlak hakimiyet için çok kullanışlı metotları bünyesinde barındıran bu araçlar hakkında daha ayrıntılı bilgi için resmi Prototype API dokümantasyonuna göz atabilirsiniz.

  • Position.absolutize
  • Position.clone
  • Position.cumulativeOffset
  • Position.offsetParent
  • Position.overlap
  • Position.page
  • Position.positionedOffset
  • Position.prepare
  • Position.realOffset
  • Position.relativize
  • Position.within
  • Position.withinIncludingScrolloffsets

Örnek kullanım

PLAIN TEXT
JAVASCRIPT:
  1. var element = $('some_positioned_element');
  2.  
  3. Position.cumulativeOffset(element);
  4. // [100, 100] (element üst ve sol kenardan 100px uzakta konumlandırılmış)
  5.  
  6. element.getDimensions();
  7. // { width: 150, height: 150 }
  8.  
  9. Position.within(element, 175, 145);
  10. // true
  11.  
  12. Position.overlap(’horizontal’, element);
  13. // 0.5 (element genişliğini tam ortasındaki nokta)
  14.  
  15. Position.overlap(’vertical’, element);
  16. // 0.3 (element yüksekliğinde 3/10 luk mesafedeki nokta)

...bitirirken

Prototype gibi geliştirme sürecini kısaltan ve yöntem geliştirmek için harcayacağınız zamanı kodu ve yapıyı geliştirmeye harcayarak daha kaliteli ve hatasız uygulamalar yazmanıza olanak tanıyan hazır kod kütüphaneleri her geçen gün daha çok ilgi görmekte. Eğer böyle bir işlevselliğe ihtiyacınız varsa bu tür çalışma ortamlarını kullanmaktan çekinmemeniz gerektiğini önererek bu yazıyı sonlandırmak istiyorum. Sorunlarımız ve çözümlerimiz emsalsiz olmadığı sürece bu tür açık kaynaklı kütüphaneler biz web geliştiricilerini memnun edeceğe benziyor. Herkese iyi çalışmalar ve bol prototype'lı günler diliyorum.

Prototype ile ilgili kaynaklar:

Orhan Veli Firik <info@dw.gen.tr> - Mayıs 2007

Toplamda 11450 kez okunmuş.
Şu an 2 kişi okuyor.
En fazla 8 kişi aynı anda okumuş.
Bugün 8 kez okunmuş.

Etiketler: , , 

1 oy2 oy3 oy4 oy5 oy (12 oy, ortalama 4.75) 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

13 yorum var

  1. # eburhan | 19 Mayıs 2007, 11:01 Gravatar

    Bu yazı dizisi için sana ne kadar teşekkür etsek azdır. Prototype ile ilgili Türkçe olarak güzel bir kaynak kazanmış olduk. Emeğin için teşekkür ederiz …

  2. # orhan | 19 Mayıs 2007, 23:50 Gravatar

    tüm web camiasına hayırlı vede uğurlu olsun.

    sevgiler….

  3. # gokhanweb | 21 Mayıs 2007, 11:41 Gravatar

    Bence bu tür şeyleri öğrenerek boşuna vakit kaybediyorsunuz. JavaScripti adam akıllı öğrenin bu tür şeylere hiç ihtiyacınız olmaz. Zaten bu kadar (7 derslik) çok dersi okuyup öğrenmek için vereceğiniz uğraşla javascript bilginizi geliştirebilirsiniz.

  4. # kılavuz | 21 Mayıs 2007, 13:28 Gravatar

    “klavuz” değil, “kılavuz” olacak…

    iyi çalışmalar.

  5. # orhan | 22 Mayıs 2007, 09:55 Gravatar

    sevgili @gokhanweb bir noktaya açıklık kavuşturmak istiyorum;

    Prototype tek başına öğrenilmesi gereken yada işin temelini teşkil eden bir şey değil. Adından da anlaşılacağı üzere Prototype.js bir “JavaScript geliştirme kütüphanesidir”. Yani prototype ı kullananlar zaten oldukça iyi bir düzeyde JavaScript biliyorlar fakat projelerinde bir tutarlılık ve fonksiyonelliğe ihtiyaçları var. İşte bu eksiği kapatmak için hazır ana çatıları (frameworkleri) kullanmaktalar.

    Tabiki koşmadan önce yürümek ondan öncede emeklemek gerekiyor. Seninde dediğin gibi Ajax ile proje geliştirmeden, Prototype ı kullanmadan önce temel ve hatta iyi düzeyde bir JavaScript bilgisine ihtiyaç var.

    Evet gerçekten “kılavuz” olması gerekiyor :) düzeltme için teşekkürler

  6. # eburhan | 22 Mayıs 2007, 21:40 Gravatar

    Merhaba.
    Bu JavaScript kütüphanelerine bu kadar basit birşeymiş gibi bakmamalısınız. Bu kütüphaneler konularında son derece bilgili kişiler tarafından hazırlanıyorlar.

    Prototype kütüphanesinin içerisine hiç göz gezdirdiniz mi? İçerisinde iyi derecede JavaScript bilgisine sahip pekçok kişinin haberdar bile olmadığı optimizasyonlar, bellek sızıntılarını önleyen kodlar mevcut.

    Ayrıca web tarayıcıları JavaScript konusunda son derece problemliler. Bir web tarayıcısında sorunsuz çalışan kod diğer web tarayıcılarında çalışmayabiliyor. İşte javascript kütüphaneleri bu tür problemlerle boğuşmanızı engelleyen cross-browser çözümler de sunmaktadırlar.

  7. # ayşe | 25 Mayıs 2007, 23:15 Gravatar

    Son iki mesajımı silebilirsiniz. Prototype.js yi temel.js haline getirme yani Türkçeleştirme işinde ki bir iki yanlışımı düzelttim. Linkteki temel.js yi yenisi ile değiştirdim.
    http://vebgelistirme.googlepages.com/temel.js

  8. # gökhan | 30 Mayıs 2007, 19:57 Gravatar

    yerinde bir ders sistemi olmuş.gayet güzel.benimle birlikte istifade eden herkes ve kendi adıma çok teşekkürlerimi iletiyorum.iyi çalışmalar dilerim…

  9. # kemati | 04 Haziran 2007, 12:20 Gravatar

    Gerçektende güzel bi makale olmus bütün 7 yazıyıda okudum gercekten cok isime yaradı…
    Tabiki kimse javascriptin j sini bilmeden burda yazanları uygulayacak değil zaten bişeyde yapamaz.. Ama js bilenlerin cok işine yarayacaktır.. Özellikle profesyonel anlamda yapılmıs bircok kütüphaneninde temelde prototype i kullandığını görünce kesin prototype i ogrenmem gerektiğini düşündüm..
    Emek verenlere tesekkürler …

  10. # orhan | 08 Haziran 2007, 17:16 Gravatar

    evet birçok kütüphane Prototype.js kullanıyor fakat yeni çıkan kütüphaneleri de es geçmeyin derim ben :)

    Zira genç geliştiriciler fonksiyonellik, esneklik ve performansı minimalist bir yaklaşımla yeniden yorumlamaktalar. Uzun lafın kısası alternatifleri de göz ardı etmeyin …

    http://www.cameronolthuis.com/2006/06/top-10-web-developer-libraries/
    http://www.blinklist.com/lunchbox/javascript%20libraries/

    buda Azer Koçulu’nun CivCiv’i :)
    http://civciv.kodfabrik.com/ (made in Turkiye)

  11. # mehmet | 23 Haziran 2007, 03:40 Gravatar

    Eline emeğine sağlık çok güzel ve faydalı bir çalışma olmuş. Çok istifade ettim.

    Teşekkür ederim.

  12. # ayşe | 30 Haziran 2007, 18:16 Gravatar

    http://dttvb.yi.org/dtjs/
    Yukarıdaki linkte de bir javascript kütüphanesi var. Nasıl kullanıldığı anlatılıyor.

  13. # wcell | 14 Ağustos 2007, 19:06 Gravatar

    ellerine sağlık kardeş,sağolasın…

Yorum yazın

sayfa sayacı