1986, İstanbul doğumluyum. İlköğretim’i Öğretmen Salih Nafiz Tüzün Okulunda okuduktan sonra kazandığım Özel Kasımoğlu Fen Lisesini 2004 yılında bitirdim. Aynı yıl girdiğim Karadeniz Teknik Üniversitesi Bilgisayar Mühendisliği Bölümünden 2009 yılında mezun oldum.
İlköğretim yıllarından beri bilgisayara olan ilgim beni bilgisayar mühendisliği seçmeye yönlendirdi. Lisans öğrenimimin ilk yıllarından itibaren yazılım geliştirme alanında sürekli kendimi geliştirdim. Dil bilmenin vazgeçilmez haline geldiği iş hayatına daha iyi başlamak için Work&Travel programı aracılığıyla New York’ta bulundum. Burada kaldığım süre de İngilizcemi geliştirme ve birbirinden farklı kültürleri de tanıma fırsatı buldum. Lisans boyunca Veri Yapıları, Programlama Dilleri, Sayısal İşaret İşleme, Bilgisayar Grafikleri, Yapay Zeka, Veritabanı Programlama ve Web Programlama gibi konularda projeler geliştirdim.
Hobi olarak gezmekten, tenis oynamaktan, satranç oynamaktan, sinemaya gitmekten, yüzmekten hoşlanırım. Galatasaray maçlarını Ali Sami Yen’de izlemek en büyük özel zevklerim arasındadır.

CETURK Ekibi’nde PHP Forum Sorumlusu olarak görev yapmaktadır.
CETURK’teki yazılarına erişmek için : http://www.ceturk.com/etiket/bilal-sagir
CETUK Forumu’undaki prifline erişmek için : http://www.ceturk.com/forum/uyeler/bilal-sagir/

Daha önceki yazının devamı niteliğindeki başka bir derlemeye hoşgeldiniz. jQuery’nin popüler olmasının nedeni, şahsi blogculardan tutunda, büyük şirketlere kadar her alanda birçok kullananının olması. Çünkü bizim ve çoğu insanın, henüz haberdar olmadığı birçok işlevselliği ve bunun yanında bir de kullanım kolaylığı sağlaması büyük etkenler olarak gösterilebilir. Umuyorum jQuery kullanıcılarının büyük bir çoğunluğu, problemlerini çözmek için doğru stratejiyi kullanarak gerekli eklentileri kullanıyorlardır. Ama hazır çözümlerin yetersiz kaldığı yerde, lazım olanı kendinizin de yapabilir olduğunuzu bilmenizde fayda var. İşte bu sebepden ötürü şimdi birkaç öneri ve örnek uygulamaya başlıyoruz:

#1 – jQuery Seçicilerinizi Test Edin ve Geliştirin

jQuery selector Lab adlı araç gerçekten harika ve bedava bir uygulama, isterseniz download ederek çevrimdışı mod’da da çalışabilmeniz mümkün. Birçok HTML elementinin kombinasyonundan oluşan bir sayfa var ve ekranın sol tarafındaki uzunca listede yer alan hazır seçicilerle hangi seçicinin hangi elementi işaret ettiğini görebiliyorsunuz. Sol tarafdan seçtiğiniz bir seçici aktif olduğunda, HTML elementleri renk değiştirerek size sonucu gösteriyorlar. İsterseniz en üst kısıma kendi seçicinizide yazabilirsiniz.

#2 – Eğer jQuery Koleksiyonu En Az Bir Element İçeriyorsa: Test Edin

Eğer seçicilerin çalıştırılması sonucu oluşan jQuery koleksiyonunuzda bir element olup olmadığını yani sonucun boş olup olmadğını kontol etmek isterseniz, koleksiyonun ilk elemanına erişmeyi deneyebilirsiniz.

if($(selector)[0]){...}

//veya

if($(selector).length){...}

Bir örnek verecek olursak:

<ul id="Urunler">

<li><input class="Stokta" name="item" type="radio" value="Urun 1" />Urun 1</li>

<li><input class="Bilinmiyor" name="item" type="radio" value="Urun 2" />Urun 2</li>

<li><input class="Stokta" name="item" type="radio" value="Urun 3" />Urun 3</li>

</ul>

<pre escaped="true" lang="javascript">...

// Aşağıdaki if bloğu true değeri döndürür çünkü,
// jQuery ile seçim işlemi sonucu elimizde 2 nesne olmuş oluyor
// Böylelikle <kodlar> yazan kısımdaki kodlar çalıştırılacaktır.

if($('#Urunler input.Stokta')[0]){<Kodlar>}

#3 – jQuery.org’dan En Güncel Sürümün Çekilmesi

Aşağıdaki kod satırı ile jQuery’nin en güncel sürümünü sayfanıza ekleyebilirsiniz:

<script src="http://code.jquery.com/jquery-latest.js"></script>

Eğer aklınıza gelen bir fikri çabukcak en son sürüm üzerinde denemek isterseniz kullanışlı bir yöntem.

#4 – Efektlerinizi Senkronize Bir Hale Getirmek için CallBack Fonksiyonlarını Kullanın

Eğer bir iş bittikden sonra, başka bir fonksiyonun çalıştırılmasını istiyorsanız Callback fonksiyonları denemelisiniz. JavaScript, fonksiyonların sonuna Callback  fonksiyonları eklemeyi mümkün kılar. Örnek bir çalışmayla anlatacak olursak:

<style>

div.button    { background:#cfd; margin:3px; width:50px;

text-align:center; float:left; cursor:pointer;

border:2px outset black; font-weight:bolder; }

#sliding      { display:none; }

</style>

<script>

$(document).ready(function(){

//Button CSS sınıfına bağlı bir div'e tıklandığı zaman,
// "sliding" ID'sine ait div aşağıya doğru kayar.

$("div.button").click(function () {

//bu noktaya kadar; div basılı düğme şeklini almış olmalı.

$(this).css({ borderStyle:"inset", cursor:"wait" });

//buradan itibaren callback fonksiyonu çalışacak ve aynı şekilde div'i eski haline geri getirecektir.

$('#sliding').slideDown('slow', function(){

$('#sliding').slideUp('slow', function(){

//div eski haline geldiğinde buton işlevini gören div'i eski haline getiren fonksiyon çalışacak.

$('div.button').css({ borderStyle:"outset", cursor:"auto" });

});

});

});

});

</script>

Kodun canlı örneğine buradan erişebilirsiniz.

#5 – Özel Nesneleri ve DOM Nesnelerini Kontrol Etmek için Olayları Kullanın

jQuery’nin en çok kullanılan özelliklerinden bir tanesi de, Web sayfanızdaki elementlere olaylar atayabilmeniz. jQuery çok geniş kapsamlı bir olay mekanizmasını destekler ve bunların haricinde kendi olayınızı yazmanıza da olanak verir. Elementlere olay atamak pek kolay gibi görünmüyor olabilir. Hemen bir örnek yapalım:

// Sayfadaki bütün paragraf nesnelerinin click olayına: imlecin koordinatlarını ekran yazan fonksiyonu ata.

$("p").bind("click", function(e){

var str = "( " + e.pageX + ", " + e.pageY + " )";

$("span").text("Şu koordinatlara tıklandı: " + str);

});

//Birden fazla olaya aynı anda fonksiyon atanması.

$("p").bind("mouseenter mouseleave", function(e){

//toggleClass; bir css sınıfı, seçili elemente bağlanmışsa o sınıfı elementten ayırır

//eğer belirtilen sınıf, elemente bağlı değilse; sınıfı elemente bağlar.

$(this).toggleClass("mouse-over");

});

jQuery ile yukarıdaki gibi sadece DOM nesnelerinin standart olaylarını değilde, kendi yazdığınız bir fonksiyonu da bir olay olarak tanıtabilirsiniz.

}

function SepeteEkle() {

// Buraya kendi kodunuzu yazın...

};

var Sepetim = new SepeteEkle('Bilgisayar');

jQuery(Sepetim).bind('UrunEkle', function() {

// Özelleştirilmiş olay.

});

// Yukarıda tanımlanan olayı aşağıda tetikle.

jQuery(Sepetim).trigger('UrunEkle');

);

#6 – Özel Seçicileri Kullanmayı Öğrenin

jQuery en çok kullanılan seçme işlemlerine alternatif olarak kendi seçici fonksiyonunuzu yazmaya olanak tanır.

$.expr[':'].OzelSecici= function(element, index, meta, stack){

// element- DOM elementi

// index - Seçim işlemi sonrasında dönen yığının içindeki sıra numarası

// meta - seçiciniz hakkında extra bilgi.

// stack - Bütün nesneleri barındıran sığın

// Eğer aranan nesneyi içeriyorsa true döndür.

// aranan bulunamadıysa en son aktif olanı gönder.

};

// Özel seçicinin kullanımı.

$('.CSS_Sinifi:test').BirseylerYap();

Şimdi bir de aşağıdaki örneğe bakalım. Bu örnek nitelikleri arasında “rel” olan bütün nesneleri döndürür:

$.expr[':'].withRel = function(element){

var $this = $(element);

//Basitçe: attr fonksiyonu ile gelen elementin nitelikleri arasında dolaşılır ve "rel" bulunduğu anda nesne geri gönderilir.

return ($this.attr('rel') != '');

};

$(document).ready(function(){

//Görüldüğü üzere seçicinin kullanımı gayet basittir ve ekleyelim, daha öncede bahsettiğimiz zincirleme kod yazımını kendi seçicinizle de kullanabilirsiniz.

// "rel" niteliğini taşıyan nesneler bulunduğunda, arkaplan renklerini yeşil olarak ayarla.

$('a:withRel').css('background-color', 'green');

});

...

<ul>

<li>

<a href="#">rel yok</a>

</li>

<li>

<a rel="İşte Burada" href="#">rel var</a>

</li>

<li>

<a rel="" href="#">rel yok</a>

</li>

<li>

<a rel="Bir tane daha" href="#">rel var</a>

</li>

</ul>

#7 – Nesnelerin Tümünü Tıklanabilir Hale Getirin

Çoğu menü ul – li HTML taglarının CSS ile kullanımıyla oluşturulur. Sadece li etiketinin içindeki a etiketi yerine bütün li etiketinin tıklanabilir olup, yine de içindeki linke yönlendirme yapılabilmesi hoş bir özellik olurdu. jQuery bunu kolaylıkla yapar; ilk önce içinde a etiketi olan li elementleri bulunur ve li elementinin click olayına, a‘nın href niteliğinde yer alan adrese yönlendirme işlemini yapan fonksiyon yazılır. Karmaşık gibi göründü sanırım. Bir örnek yapalım:

<ul>

<li><a href="home">home</a></li>

<li><a href="home">about</a></li>

<li><a href="home">contact</a></li>

</ul>

...

//ul elementi içindeki tüm li elementlerini tıklanabilir hale getiriyor.

$("ul li").click(function(){

//li elementinin içindeki a elementi bulunuyor ve href niteliğindeki değer okunarak,
//sayfanın o adrese yönlendirilmesi sağlanıyor.

window.location=$(this).find("a").attr("href"); return false;

});

#8 – Resimlerin Önyüklenmesi

JavaScriptle birlikte kullanılacak resimlerin önceden sayfaya yüklenmesi yerine güzel bir fikir olabilir.

//Listesi gönderilen resimleri sayfaya yükleyen fonksyion
//arguments > gönderilen dosya listesini temsil eder.
jQuery.preloadImages = function(){

//Sayfadaki resim elementleri arasında dolaş.

for(var i = 0; i<arguments.length; i++){

jQuery("<img>").attr("src", arguments[i]);

}

}

// fonksiyonu aşağıdaki şekilde kullanabilirsiniz.

$.preloadImages("images/logo-1.png", "images/logo-2.png", "images/logo-3.png");

#9 – Sağ Tuş Menüsünü Pasif Yapın

JavaScript ile yıllardır yaptığmız bu işlemi jquery daha kolay bir hale getiriyor. Üstelik bu sefer, sağ tuş menüsünü pasifleştirmek yerine başka türlü işlemler yapmak içinde kullanabilirsiniz.

$(document).ready(function(){

$(document).bind("contextmenu",function(e){

return false;

});

})

#10 – Seçicileri Gruplandırarak Kodunuzu Basitleştirin

Kodunuzu basitleştiren ve okunmasını kolaylaştıran bir diğer yöntemde, aynı işlevi yapan birden fazla elementin gruplandırılarak tek bir fonksiyon içerisinde kullanılmalarıdır.

// Aşağıdaki gibi bir kod yazımı boş yere zamanınızdan çalacak ve daha fazla yer işgal edecektir.

$('div.close').click(Birseyler_yap);

$('button.close').click(Birseyler_yap);

$('input.close').click(Birseyler_yap);

// Aşağıdaki yazım, en uygun olanıdır: Aynı işlemi yapan bütün elementler tek bir alanda toplanmıştır ve aynı anda hepsine birden aynı iş yüklenmiştir.

$('div.close, button.close, input.close')

.click(Birseyler_yap);

#11 – Kodunuzu Test Edin

jQuery, kendine has bir Test Kütüphanesi olan QUnit kütüphanesini kullanır. Test blokları yazmak kolaydır ve size kodunuzu hala çalışır biçimde tutup, üzerinde güvenle değişiklik yapabilmenizi sağlar. Bir örnek:

//Testleri modüller halinde gruplara ayır.

module("Module B");

test("Test Başlığı", function() {

//Ne kadar testin çalışacağını belirle (Asserts)

expect(2);

//Örnek bir karşılaştırma testi; JUnit'deki assertEquals'a karşılık gelir.

equals( true, false, "Test Başarısız" );

equals( true, true, "Test Başarılı" );

});

Kurtman Çelik
kurtmancelik.wordpress.com
Kaynak: http://www.tripwiremagazine.com/ajax/developer-toolbox/more-jquery-and-general-javascript-tips-to-improve-your-code.html

Eğer jQuery’i sıklıkla kullanıyor veya başlamayı planlıyorsanız, inanıyorum ki yapılacak birkaç dakikalık ufak örnekler ile yazdığınız kodu daha kaliteli hale getirmek mümkün. Daha hızlı kod yazmanızı sağlayacak ve kodunuzun kalitesini arttırmanıza yardımcı olacak birkaç yöntemden bahsedelim.

#1 – jQuery Kütüphanesini Google’dan Çekin.

Google, sadece jQuery değil daha birçok JavaScript Kütühanesini kendi sunucularında Google Code kütüphanesi adı altında barındırmakta. jQuery’i kendi sunucunuza yüklemektense doğrudan Google’ın sunucularından çekmeyi deneyebilirsiniz.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

#2 – Veri Saklama Yöntemi.

DOM içerisinde veri saklamaktansa, jQuery’nin Data () metodunu kullanın. HTML elemanlarını veri tutucu olarak kullanmak çoğu web programcısının huyudur. Örnek vermek gerekirse:

$('selector').attr('alt', 'saklanacak veri');

// yukarıdaki komutla 'alt' niteliğine yollanan değer, aşağıdaki metodla çekilebilir.

$('selector').attr('alt');

HTML nitelikleri (attributes), veri saklamak amacıyla kullanılmamalıdır. Yukarıdaki örnekde görüldüğü gibi “alt” niteliği veri saklamanın dışında başka bir amaca hizmet etmektedir.

En doğru alternatif, jQuery’nin Data() metodunu kullanmaktır. Bu metod; size, sayfanızdaki herangi bir elemente bir veri ilişkilendirebilmenizi sağlar.

$('selector').data('parametre_adi', 'saklanacak veri');

$('selector').data('parametre_adi'); // saklanan veriyi çekelim

Bu tür bir kullanım, kullanılan isimler ve esneklik açısından daha anlamlıdır, sayfa üzerindeki istediğiniz elemente istediğiniz veriyi anlamlı bir başlık vererek ilişkilendirebilirsiniz. Data() ve RemoveData() metodları hakkında daha çok bilgi almak için jQuery dökümantasyonuna (İngilizce) bakabilirsiniz.

Klasik bir kullanım olarak aşağıdaki kod bloğunu gösterelim. Sayfa yüklendiği sırada istediğimiz veriyi doğrudan bir elemente atıyoruz ve o element aktif hale geldiğinde (focus) veriyi elementden kaldırıyoruz:

<form id="testform">

<input type="text" class="clear" value="Sürekli temiz" />

<input type="text" class="clear once" value="Sadece bir defa temiz" />

<input type="text" value="Normal yazı" />

</form>

$(function() {

//"each" fonksiyonunu kullanarak "clear" css sınıfına bağlı olan her input elementine uğra

//"clear once" etiketleri o nesnenin iki css sınıfına bağlı olduğnu gösterir.

$('#testform input.clear').each(function(){

//data(9 metodunu kullan ve verileri elementlere ata.

$(this).data( "txt", $.trim($(this).val()) );

}).focus(function(){

// Element aktif hale geldiğinde, varsayılan veri ile yenisi aynı değilse elementin içini temizle

if ( $.trim($(this).val()) === $(this).data("txt") ) {

$(this).val("");

}

}).blur(function(){

// elementin tekrar pasif olduğunda varsayılan değerleri geri yükle.

// ama "once" ("bir defa" demek) css sınıfı aktif ise elemente dokunma.

if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) {

//Veriyi elementte sakla.

$(this).val( $(this).data("txt") );

}

});

});

Örnek

#3 – Özet Dökümanlarını Kullanın (Cheats Sheets).

Çoğu insan, -hele ki programcılar-, unuttukları bilgiye çabuk erişmek adına çok çaba gösteriyolar. Yazıcıdan çıktısı alınıp monitorun yanında bir yere yerleştirilmiş birkaç özet döküman, size hem zamandan kazanç sağlayacak hem de kodunuzu kalitesini arttıracaktır.

Oscarotero jquery 1.3 ve duvar kağıdı boyutundaki hali

jQuery 1.3 Özet Dökümanı

jQuery 1.3 sürümünün tüm fonksiyon ve özelliklerinin gösterildiği özet dökümanıdır. Yalnız jQuery UI’i kapsamamaktadır.

#4 – İndirme Süresini Minimuma İndirin.

Bazı Web tarayıcıları sayfayla birlikte aynı anda tek bir script dosyasını indirirler. Eğer birden fazla script dosyanız varsa bu, sayfanızın indirilme ve derleme sürelerini etkileyecektir.

Buna alternaitf olarak: Dean Edward’ın “Packer” adlı ücretsiz servisini kullanabilirsiniz. Kodlarınızdaki gereksiz boşlukları ve yorum satırlarını silerek size daha az boyutta ve daha hızlı indirilebilecek bir sürüm oluşturur. Tabi yorum satırlarınız kaybolacağı için scriptinizin bir programcı sürümünü yine elinizin altında bulundurmak gerekir, zira bu işlemi gerçekleştirdikden sonra kodunuz kolay kolay okunamaz bir duruma geliyor. Uygulamaya buradan erişebilirsiniz.

#5 – jQuery ile Firebug Konsoluna Mesaj Göndermek (Logging)

Firebug, içerisinde; sayfanızın CSS, HTML, JavaScript kodları üzerinde hata ayıklama ve düzeltme işlemlerini yapabileceğiniz bür sürü araç barındıran bir Firefox eklentisi. Mükemmel bir denetim işlevi sayesinde sayfaların HTML ve CSS kodları içinde rahatça dolaşıp, hangi elementin hangi kod tarafından kontrol edildiğini görsel olarak izleyebilirsiniz.

Firefox, bir jQuery/JavaScript programcısına, kod içerisinden Firebug’a mesaj göndermeyi uygun hale getiriyor. En basit haliyle gösterecek olursak:

console.log("hello world")

Daha ayrıntılı bilgiyi burada bulabilirsiniz. (İngilizce)

Birden fazla değeri aynı anda göndermek de mümkün, böyle her mesaj arka arkaya gelen satırlarda gösterilir.

console.log(2,4,6,8,"foo",bar)("hello world")

Dominic Mitchell adlı programcının yazdığı ufak bir eklenti ile istediğiniz hernagi bir jQuery nesnesini Firebug konsoluna mesaj olarak yazdırabiliyorsunuz.

jQuery.fn.log = function (msg) {

console.log("%s: %o", msg, this);

return this;

};

Kullanımı ise şu şekilde:

$('#some_div').find('li.source > input:checkbox')

.log("İşareti kaldırılacak nesneler")

.removeAttr("checked");

#6 – Mümkünse Öncelikle Nesne ID’lerini Seçici Olarak Kullanın.

jQuery ile çalışırken DOM neslerini ID’leri ile seçmek her zaman en kullanışlı yöntemdir. Nedeni ise bir nesneyi ID’si ile seçmek, diğer özellikleri ile aramakdan daha hızlı sonuçlanır (Internet Explorer’da CSS Sınıf seçicisinin bütün DOm nesneleri üzerinde dolaşarak aram yaptığı bilinir). Seçim işlemlerinde ID kullanmak hızlıdır çünkü bütün tarayıcılar kendi içlerinde getElementByID() (ID’ye göre seç) fonksiyonunu barındırırlar, jQuery’de bu fonksiyondan yararlanır. CSS sınıflarına göre seçim yapmak ise arkaplanda çaprazlama halinde yapılır ve eğer DOM yapınız geniş ise performansa etki eder.

Ufak bir örnek:

<div id="main">

<form method="post" action="/">

<h2>Selectors in jQuery</h2>

...

...

<input class="button" id="main_button" type="submit" value="Submit" />

</form>

</div>

...

//Gönder düğmesini css sınıfı ile seçiyoruz. 

var main_button = $('#main .button');

//Gönder düğmesini doğrudan, ID bilgini vererek seçiyoruz.

var main_button = $('#main_button');

#7 – CSS Sınıflarından Önce HTML Etiketlerini Belirtin.

Eğer HTML etiketlerine göre arama yaparsanız, jQuery tarayıcınızın kendi içindeki getElementbyTagName() fonksiyonunu kullanır. I’Dye göre arama yapmak nu yöntemde hala hızlıdır fakat, CSS sınıfına göre seçim yaparken sınıfın önünne HTML tagını getirerek aram yapmak, sadece CSS sınıfını belirtmekden hızlıdır.

<ul id="Urunler">

<li><input class="Stok" name="item" type="radio" value="Urun 1" /> Urun 1 </li>

<li><input class="Yok" name="item" type="radio" value="Urun 2" /> Urun 2 </li>

<li><input class="Bilinmiyor" name="item" type="radio" value="Urun 3" /> Urun 3 </li>

</ul>

Burada önemli olan CSS sınıfının ait olduğu elementin, HTML etiketini seçim sorgusuna eklemek, bu seçim işleminin tüm nesneler arasında dolaşma süresini azaltacaktır.

var in_stock = $('#Urunler input.stok');

Görüldüğü üzere; Seçim işlemine Urunler ID’sine sahip listeden başladık, sonra input.stok ile stok css sınıfında tanımlanmış bütün input nesnelerini seçmesini istedik. Eğer #Urunler yazmış olmasaydık, arama işlemi bütün sayfayı kapsıyacak ve sonucun bulunma süresini etkileyecekti. Aynı şekilde sadece CSS sınıfını yazmış olsaydık, sayfadaki bütün nesneler incelenecek ve stok css sınıfına ait olan nesne döndürülecekti.

#8 – jQuery Nesnelerini Arabelleğe Alın (Caching).

Bir nesnenin üzerinde işlem yapmadan önce onu tanımlamak ve gerekli değişiklikleri yaptıkdan sonra sahneye almak, performans açısından etkili bir yöntemdir. Örneğin: aşağıdaki gibi bir kod yazmak yerine:

<li>Description: <input type="text" name="description" value="" /></li>

...

$('#shopping_cart_items input.text').css('border', '3px dashed yellow');

$('#shopping_cart_items input.text').css('background-color', 'red');

$('#shopping_cart_items input.text').val("text updated");

Nesne doğrudan bir değişken olarak tanımlanıp, özellikleri belirlenebilir.

var input_text = $('#shopping_cart_items input.text');

input_text.css('border', '3px dashed yellow');

input_text.css('background-color', 'red');

input_text.val("text updated");

//yukarıdakinin aynısı, sadece komutlar zincirleme yazılmış.

var input_text = $('#shopping_cart_items input.text');

input_text

.css('border', '3px dashed yellow')

.css('background-color', 'red')

.val("text updated");

#9 – Bazı jQuery Fonksiyonlarınızı $(window).load Olayı İçerisine Yazın.

Birçok jQuery örneği ve açıklaması bizi kodumuzu $(document).ready olayı içerisine yazmaya yöneltir. Çoğu zaman bu hareket doğrudur fakat bu olay sadece nesneler oluşturulduğunda ve muhtemelen sayfa içeriğinin hala sunucudan indirildiği sırada meydana gelir. Bu nedenle animasyon, sürükle-bırak, gizli resimlerin çekilmesi gibi bazı, görsele dayalı fonksiyonlar doğru çalışmayabilir. $(window).load olayı, bazı şartlara bağlı olan bu nesnelere erişmeye garanti verdiği için kullanılması faydalı olabilir.

$(window).load(function(){

// Sayfa yüklendikden sonra çalışacak kod bloğunu buray yazın.

});

#10 – Kodunuzu Daha Okunabilir Kılmak, Şık Göstermek ve Seçicileri Sınırlandırmak için Zincirleme Kod Yazımını Deneyin.

Çünkü JavaScript zincir gibi, peşpeşe gelen ve hatta ayrı satırlara yazılmış, birbirinin devamı niteliğinde olan kodları anlayabilir ve çalıştırabilir.

Örnek olarak; aşağıdaki kod bir element’den bir CSS sınıfını kaldırıp, hemen arkasından aynı elemente başka bir CSS sınıfı bağlar.

$('#Urunler input.stok')

.removeClass('stok')

.addClass('Yok');

Eğer gerekli olursa, jQuery bu zincirleme fonksiyonları tek bir fonksiyon haline getirmenizi de destekler.

$.fn.YokYap = function() {

return $(this).removeClass('stok').addClass('yok');

}

$('#Urunler input.stok').YokYap().log();

Kurtman Çelik
kurtmancelik.wordpress.com
Kaynak: http://www.tripwiremagazine.com/tutorials/tutorials/jquery-and-general-javascript-tips-to-improve-your-code.html

Öncelikle

Tekrar merhaba, Nesne Yönelimli PHP dizisinin, son bölümüne hoşgeldiniz. Daha öncede bahsettiğim gibi eğer kendinizi bu konuda hazır hissetmiyorsanız, bölüm 1 ve bölüm 2 yazılarını tekrar etmenizi ısrarla tavsiye ediyorum. Temeller, bu konudaki en önemli parça.

Bu Yazıda

Bu yazıda, sürekli bahsettiğimiz MySQLi Veritabanı Sınıfını inşa edeceğiz ve bunu yaparken daha önceki konulardan öğrendiğimiz herşeyi kullanmaya çalışacağız.

1. Değişkenler ve Yapıcı Metod,
2. Temel Fonksiyonlar.

Başlıklarıyla ilglileneceğiz.

1. Değişkenler ve Yapıcı Metod

class.db.php adında yeni bir dosya oluşturun ve içine aşağıdaki kod bloğunu girin:
Açıklama satırlarını okumadan önce kodlara bakarak ne yapıldığını çözmeye çalışabilirsiniz.

<?php

/*
* class db
* @param Host
* @param User
* @param Password
* @param Name
*/
class db
{

var $host;       //MySQL Host
var $user;       //MySQL User
var $pass;       //MySQL Password
var $name;       //MySQL Name

var $mysqli;     //MySQLi Object

var $last_query; //Last Query Run

/*
* Class Constructor
* Creates a new MySQLi Object
*/
function __construct($host, $user, $pass, $name)
{

$host = $this->host;
$user = $this->user;
$pass = $this->pass;
$name = $this->name;

$this->mysqli = new mysqli($this->host, $this->user, $this->pass, $this->name);

}

}

$db = new db('localhost', 'root', '', 'blog');

?>

Öncelikle, Nesne Yönelimli PHP’nin en önemli meselelerinden birini tamamlamış bulunıyoruz: Organiazyon!. İlk önce, bir veritabanına bağlanmak için gereken tüm bilgileri birer değişken olarak tanımladık ve ardından yapıcı (constructor) metod yardımı ile kullanıcıdan bu bilgileri girmesini istedik. Veritabanı bilgilerini yapıcı metod ile almamızın sebebi; biz daha sonradan bu sınıfı kullanmaya başladığımız sırada veritabanı bilgilerinin girilmesine gerek kalmamasının sağlanmasıdır. Böylelikle kullanıcı, bizim sınıfımızı ilk çağırdığında bir kereye mahsus, veritabanı bilgilerini girecek ve daha sonraki kullanımlarda bu bilgilere ihtiyaç duymayacaktır.

En son satırda ise bu sınıfımızın bir nesnesini tanımlayarak, örnek veritabanı bilgileri giriyoruz.

2. Temel Fonksiyonlar

Select

Şimdi, yukarıdaki kod bloğu sayesinde veritabanı bağlantısını kurmuş olduk, sıra geldi; gönderdiğimiz “SELECT” sorgu cümlesini veritabanı üzerinde çalıştıran fonksiyonun yazımına.

Aşağıdaki kod bloğunu sınıfımızın sonuna ekleyin:

/*
* Function Select
* @param fields
* @param from
* @param where
* @returns Query Result Set
*/
function select($fields, $from, $where)
{

$query = "SELECT " . $fields . " FROM `" . $from . "` WHERE " . $where;
$result = $this->mysqli->query($query);

$this->last_query = $query;

return $result;

}

Böylelikle, bir MySQL tablosu üzerinde gönderdiğimiz sorguyu çalıştırıp, sonuçları bize geri getiren bir fonksiyon yazmış olduk.

Kullandığımız değişkenler; $fields >alanlar, yani tablodan hangi alanların okunup geri döndürüleceği, $from > tablo adı, yani sorgu cümlesinin hangi tablo üzerinde çalıştırılacağı, $where > nereden, yani tablodan okunacak bilgilerin hangi kritere göre filtreleneceği.

Son olarak, sorgu çalıştırılır ve geri dönen değerler $result adındaki değişkende tutulur ve return komutu ile uygulamamıza geri gönderilir.

Insert

Veritabanına yeni veri kaydı göndermek istediğimizde kullanacağımız fonksiyonumuzu yazalım:

/*
* Function Insert
* @param into
* @param values
* @returns boolean
*/
function insert($into, $values)
{

$query = "INSERT INTO " . $into . " VALUES(" . $values . ")";

$this->last_query = $query;

if($this->mysqli->query($query))
{
return true;
} else {
return false;
}

}

En basit fonksiyonlardan bir tanesi. Kullanıcıdan sadece 2 değişken almamız yeterli; Tablo adı ve eklenecek değerler. Bu fonskyionda diğerine göre; geriye tablo kayıtları döndürmek yerine şöyle bir yol izledik: Sorguyu çalıştır, eğer kayıt ekleme başarılı olursa geriye true değeri döndür, eğer kayıt eklemede sorun çıkarsa geriye false değeri döndür.

Delete

En basit haliyle veritabanından kayıt giren fonksiyonumuz:

<?php

/*
* Function Delete
* @param from //Silinecek kayıdın hangi tablodan silineceği.
* @param where //Silme filtresi, hangi koşul uyuyorsa ona göre silme yap.
* @returns boolean //Eğer silme işlemi düzgün tamamlanmışsa geriye true döndür, hata oluşmuşsa geriye false döndür.
*/
function delete($from, $where)
{

$query = "DELETE FROM " . $from . " WHERE " . $where;

$this->last_query = $query;

if($this->mysqli->query($query))
{
return true;
} else {
return false;
}

}

?>

Birkaç öneri

Muhtemelen yazdığımız her fonksiyondaki $last_query (son sorgu) değişkenini, dikkatinizde kaçmamışdır. Sınıfımızın en başında tnımladığmız bu değişken, sınıfımız aracılığı ile çalıştırılmış en son sorguyu hafızada tutmak için kullanılıyor. Nedeni ise: son derece hayati önem kazanan sorguların, hata ayıklama işlemlerinin yapılmasına yardımcı olmasıdır. Bir hata meydana geldiğinde aynı sorguyu tekrar çalıştırmakdansa bu değişkene bakarak hatayı bulmaya çalışabilirsiniz. Diğer bir değişken ise $last_error (son hata), yazmış olduğumuz fonksiyonlardaki hata olma olasılıklarına karşı, kullanıcıyı bilgilendirmek amacıyla kullanılabilir. Bir hata meydana geldiğinde, hata mesajını bu değişkene aktarıp return komutu ile kullanıcıyı haberdar edebilirsiniz.

Update sorgusunu ise size bırakıyorum, ne kadar öğrendiğinizi ispatlamak adına update fonksiyonunu siz kendiniz yazmaya çalışabilirsiniz.

Sonuç

Bu yazıyla birlikte, Nesne Yönelimli PHP”de giriş seviyesinde bilgi birikimine sahip olmuş olduk. Umarım öğrendiğimiz bu temel bilgiler üzerine kendinizi daha çok geliştirir ve ileri konular hakkındada bilgi sahibi olursunuz. Takip ettiğiniz için teşekkürler, iyi çalışmalar.

Kurtman Çelik
kurtmancelik.wordpress.com
Kaynak: http://buildinternet.com/2009/07/an-introduction-to-object-oriented-php-part-3/

Giriş

Bundan önceki yazımızda nesne yönelimli PHP’ye giriş yapmıştık. Bu yazımızda ise önceki yazıdaki örnekler üzerinden; ilerlemeye devam ediyoruz. Eğer başlangıç seviyesinde bilgiye sahip değilseniz, öncelikle 1. yazıyı okumanızı tavsiye ediyorum.

Bu Yazıda

1. Yapıcı (Constructors) ve Yıkıcı (Destrucktors) Metodlar,
2. Fonksiyonlardan değer döndürme,
3. Düzeni sağlama.

Konularını işliyoruz.

1. Yapıcı ve Yıkıcı Metodlar

Yapıcılılara, bir binanın yapımına başlanılması eylemi olarak bakabiliriz; yani bir sınıfın kullanıma hazır olması için gereken işlemler olarak tanımlanabilir. Yıkıcılar ise binanın yani sınıfın yok edilmesi olarak tanımlanabilir.

Daha iyi anlaşılması için yapıcılara bir örnek verelim:

<?php
class MyClass
{
function __construct()
{
echo "MyClass Loaded!";
}
}
$MyClass = new MyClass();
?>

Bu örnekde; basitçe bir sınıf tanımladık ve içinde yapıcı bir metod yerleştirdik. Kodumuzda bu sınıfımızı çağırdığımız zaman hiç bir işlem yapmasak bile yapıcı metod çalışacak ve ekrana “Sınıf kullanıma hazır” mesajını yazıcaktır.
Yıkıcı metodlara gelecek olursak; PHP’de sınıflarımızın her zaman bir yıkıcı metoda ihtiyacı yoktur. Zira siz bir nesne ile birkaç işlem yapıp o nesneyi yok ettiğinizde içindeki fonksiyon ve değişkenlerde yok olacaktır.

2. Fonksiyonlardan değer döndürme

Basit örneklerin dışında, gerçek projelerden bahsedecek olursak fonksiyonlarınızın her zaman ekrana birşey yazdırması gerekmez. Çoğu zaman geriye bir değer döndürülür ve bu değer ana programda istenilen yerde kullanılır.

Fonksiyonlardan geriye bir değer döndürmek için “return” anahtar kelimesi kullanılır ve formatı “return Geri Döndürülecek Değer” şeklindedir.

<?php

class Sinifim
{

var $mysqli;

function __construct()
{

$this->mysqli = new mysqli('localhost', 'root', '', 'blog');

}

function get_latest_posts()
{

//Do some database selection
$query = "SELECT * FROM `yazilar` ORDER BY `id` DESC";
$result = $this->mysqli->query($query);

return $result;

}

}

php?>

Yukarıdaki örnekde; en basitinden bir veritabanı bağlantısı kurduk ve ardından veritabanındaki “yazilar” tablosundaki verileri azalan sıra ile çekip, PHP uygulamamıza gönderdik. Bu noktadan itibaren veritabanından gelen bilgileri istediğimiz yerde kullanabiliriz.

3. Düzeni Sağlama

Yukarıdaki resim “sınıf” terimine iyi bir örnek. Birbiri ile bağımsız her kutuya bir sınıf olarak bakacak olursak, kutuların içindekilerde o sınıfa ait fonksiyonlar ve değişkenlerdir.

Sınıfların en büyük avantajı, içindekileri kolay okunabilir ve düzenlenebilir şekilde tutmasıdır. Wordpress’in veritabanı işlemlerini gerçekleştirmek için kullandığı sınıfına bakacak olursanız demek istediğimi daha iyi anlayacaksınız.

Gördüğünüz gibi her sınıf tanımının, fonksiyonun, değişkenin, yapıcının üst kısmında; ne işe yaradığını anlatan açıklama satırları mevcut. Bu, o sınıfı kullanan diğer programcılar için çok büyük bir avantaj sağlamaktadır.

Şimdi bu yapıyı kendi sınıfımıza da uygulayalım:

<?php

/*
* @name Sinifim
* @params none
* Bu sınıf, veritabanına bağlantıyı ve yeni kayıt ekleme işlemlerini gerçekleştirir.
*/
class Sinifim
{

/*
* MySQLi Bağlantısı
*/
private $mysqli;

/*
* __Yapıcı
* Yeni bir MySQL bağlantısı kurar.
*/
function __construct()
{

$this->mysqli = new mysqli('localhost', 'root', '', 'buildinternet');

}

/*
* Veri ekle
* @params Kullanici_Adi, Sifre
* @returns bool
*/
function Veri_ekle($Kullanici_Adi, $Sifre)
{

//Gelen bilgileri veritabanına kaydet.
if(success)
{
return true;
} else {
return false;

}
}
}
php?>

Gördüğünüz üzere, sınıfımızın ne olduğunu, hangi iş için yazıldığını belirtmiş olduk. Hangi fonksiyonun hangi parametrelere ihtiyaç duyduğunu ve yaptığı işlemden sonra geriye nasıl bir değer döndürdüğünü yazdığımı açıklama satırlarında belirttik.

Bundan sonraki yazımız için gerekli bilgiyi topladığımıza inanıyorum, 3. yazımızda veritabanı işlemleri yapmak için kullanacağımız basit bir sınıf yazacağız.

Kurtman Çelik
kurtmancelik.wordpress.com
Kaynak: http://buildinternet.com/2009/07/an-introduction-to-object-oriented-php-part-2/

Makaleler Hakkında

3 Bölümden oluşacak makale dizisinde, Object Oriented (Nesne Yönelimli) PHP’nin temellerini; kodunuzu yönetmeyi, bileşenleri birbirinden ayrı tutmayı ve gerektiğinde bunlara kolaylıkla erişebilmeyi konu alacağız.

3. makale ile birlikte; genel veritabanı işlemlerini gerçekleştirmek üzere basit bir MySQLi (MySQL Improved) sınıfı yazacağız.

Bu Yazıda

1. Nesneler(Objects) ve Sınıflar (Classes) nedir?
2. İlk sınıfımızı yazalım.
3. Sınıfların kullanımı.
4. Sınıfların kişiselleştirilmesi (Dinamizm eklenmesi)

1. Nesneler ve Sınıflar

Sınıflar, basitçte; fonksiyonlar deposu olarak tanımlanabilir. Başka türlü beznetmek gerekirse; Masaüstünüzdeki bir klasör sınıf ise o klasörün içindeki dosyalarda fonksiyonlardır.

Bir de klasik bir örnek üzerinden anlatalım:

Resimde de gördüğünüz gibi köpek sınıfının, koşmak, yürümek, oyun oynamak, havlamak gibi fonksiyonları mevcut. Bu yapı bir sınıfın en genel tanımıdır.

Şimdi, sınıfın ne olduğunu az çok öğrendik. Peki bu sınıfı kodlarımızda nasıl kullanacağız. İşte bu noktada işin içine Nesneler giriyor. “Köpek” adındaki bir sınıfı kullanmak için bir bir değişken tanımlamamız gerekir.

Daha bağlantılı olması için sınıf yazımından itibaren kodumuza başlayalım:

2. İlk sınıfımızı yazalım.

İlk kodumuz olduğu için, olabildiğince basit ilerleyelim; Favori kod editörünüzü açın, myClass.php adına boş bir dosya oluşturun ve içine aşağıdaki kod bloğunu yazın:

<?php
class myClass
{
 function Merhaba()
 {
 echo "Merhaba!";
 }
}
?>

Eğer bu dosyayı sunucunuzda çalıştırmaya kalkarsanız, ekrana hiçbirşey yazmayacaktır. Çünkü yapmış oldumuz şey sadece bir sınıf tanımlamak, sınıfın içindekileri çalıştırmak adına şu an için birşey yapmadık.

Devamında yine boş bir dosya olışturup myClass.php ile aynı klasörün içine index.php adıyla kaydedin.

3. Sınıfların kullanımı.

index.php içinde, myClass.php içindeki sınıfımıza erişmek için, ilk önce sayfamıza myClass.php‘nin referansını eklememiz gerek. Aşağıdaki kodda bunun nasıl yapıldığı gösterilmiştir:

<?php

 require_once('myClass.php');

 $myClass = new myClass();

 $myClass->Merhaba();

?>

Eğer bu sefer index.php’yi tarayıcınızda çalıştırırsanız ekranda “Merhaba dünya!” yazdığnı göreceksiniz. Şimdi yaptığımız çalışmanın üzerinden geçelim. Öncelikle “require_once(‘myClass.php’)” satırı ile index.php sayfamıza, içinde sınıfımızın bulunduğu myClass.php sayfamızı çağırdık. Bir sonraki satırda bu sınıfımızı bir değişken gibi kullanabilmemiz için gerekli olan nesne tanımlamasını yaptık, bu sayede $myClass nesnesi üzerinden sınıfımız içerisindeki “Merhaba()” fonksiyonuna erişebiliyoruz. Son olarak tanımladığımız nesnenin Merhaba() fonksiyonunu çağırdık ve belirlediğimiz metin ekrana yazdırıldı.

4. Sınıfların kişiselleştirilmesi

Şimdi, elimizdeki hazır sınıfımızı kişiselleştirmek adına şöyle bir değişiklik yapalım: sitemize kullanıcı adı ve şifresiyle giriş yapmış birine adıyla hitap ederek merhaba diyelim. bunu yapmak için myClass.php’ye geri dönüp aşağıdaki değişiklikleri yapın:

<?php
class myClass
{
function Merhaba($kullanici)
{
echo "Hello " . $kullanici . "!";
}
}
?>

Bütün yaptığımız, ekrana “Merhaba dünya” yazan fonksiyona bir parametre eklemekten ibaret. Bu sayede fonksiyonumuza index.php‘den istediğimiz kullanıcı adını göndererek, o kişiye özel merhaba yazdırabiliriz. index.php sayfasına geri dönün ve aşağıdaki değişiklikleri uygulayın:

<?php

require_once('myClass.php');

$myClass = new myClass();

$myClass->Merhaba('Ali');

?>

index.php sayfasını tarayıcınızda açtığınızda ekranda “Merhaba Ali!” yazdığını görürsünüz.

Bu çalışma ile de sınıflarımızı nasıl kişiselleştirip, dinamizm katabileceğimizi gördük.

Kurtman Çelik
kurtmancelik.wordpress.com
Kaynak: http://buildinternet.com/2009/07/an-introduction-to-object-oriented-php-part-1/

CETURK Ekibi’nde Haber Editörü olarak görev yapmaktadır.
CETURK’teki yazılarına erişmek için : http://www.ceturk.com/etiket/inci-bilgin
CETUK Forumu’undaki prifline erişmek için : http://www.ceturk.com/forum/uyeler/bilinginci/

1. Hazırlık

İşe Raphael JavaScript Kütüphanesini indirerek başlayalım. Açılan pencerede, ekranın sağ üst köşesindeki sıkıştırılmış ve sıkıştırılmamış seçeneklerinden sıkıştırılmamış olanı indirin. Başlangıç olarak sıkıştırılmamış versiyonu indirmekle, dökümantasyondan daha net şekilde faydalanabilirsiniz.

İndirdiğimiz dosya ile birlikte basit bit HTML dosyası oluşturalım ve Raphael.js dosyasını kodlara dahil edelim. Ayriyetten “our_script.js” (dosya isimlerini orjinal halde geçiriyorum) adında bir boş dosya daha oluştup onuda sayfamıza dahil edelim. Örnek kodlarımızı bu boş sayfa içine yazp çalıştıracağız. HTML dosyasının gövdesi olarak “canvas_container” ID’sine sahip bir DIV oluşturup, en minimal olacak şekilde bir CSS şablonu atayalım. Çalışmalarımız bu DIV’in içinde oluşturulacaktır.

<html>
<head>
<title>Raphael Play</title>
// <![CDATA[
javascript" src="path/to/raphael.js">
// ]]>
// <![CDATA[
javascript" src="path/to/our_script.js">
// ]]>
<style type="text/css">
#canvas_container {
width: 500px;
border: 1px solid #aaa;
}
</style>
</head>
<body>
<div id="canvas_container"></div>
</body>
</html>

Önemli Not: Raphael JS kütüphanesinin 1.0, en güncel sürümü 7 Ekim 2009 tarihinde yayınlanmıştır. Eğer elinizde daha önceki sürüm bulunuyorsa, en güncel sürümü indirmenizde fayda var. Zira çizim araçlarında önemli değişiklikler olmuş durumda.

2. Kendi Çizim Alanımızı Oluşturalım

Raphael JS ile çizim yaparken bir çizim alanına ihtiyacımız olacak. Bu alanı sayfamızda “Raphael()” nesnesiyle oluşturduğumuz “paper” referansıyla kullanacağız. Bu çizim alanının genişlik ve yüksekliğini belirlememiz gerek, ayriyetten isteğe bağlı olarak bu alanın bağımsız (absolute) bir pozisyona mı sahip olacağını veya bir elemente bakılarak mı konumlandırılacağını da belirleyebiliriz.

var paper = new Raphael(x, y, width, height); //option (a)
var paper = new Raphael(element, width, height); //option (b)

Biz 2. seçenek olan, bir elementi örnek alma yöntemini kullanacağız. Hali hazırda sayfamızda yer alan “canvas_container” DIV’ini kullanarak 500 x 500 boyutlarında bir çizim alanı oluşturalım. (Aşağıdaki kodu “our_script.js” içerisine yazıyoruz.)

window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
}

Bu şekilde; içinde çizim yapabileceğimiz bir alan ve bu alanı referans eden “paper” adında bir değişkenimiz oldu.

3. Yerleşik Şekiller

Şimdi, alanımıza birkaç şekil çizdirelim. Alanımızın orijin (origin) noktası, yani başlangıç noktası, sol üst köşedir. Yani çizim yaparken belirleyeceğimiz her X ve Y koordinatı, sol üst köşeye göre çizilir.

İlk olarak daire çizimi ile başlayalım:

window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var circle = paper.circle(100, 100, 80);
}

Bu kod ekrana, yarıçapı 80 piksel olan ve merkezi X ve Y koordinatlarında 100. piksellere gelen bir daire çizer ve bu daireyi “circle” değişkenine referans eder. Yaptığmız çizimleri illa ki bir değişkene referans vermemiz de gerekmez. Doğrudan çizim fonksiyonunu çağırarak da ekrana çizim yaptırabilirsiniz.

for(var i = 0; i < 5; i+=1) {
var multiplier = i*5;
paper.circle(250 + (2*multiplier), 100 + multiplier, 50 - multiplier);
}

Sırada kare çizimi var: ekrana kare çizdirmek için “rect()” fonksiyou kullanılır. Sırasıyla, X ve Y koordinatlarını ve karenin genişlik-yükseklik değerlerini parametre alır.

var rectangle = paper.rect(200, 200, 250, 100);

Son olarak elips çizimi: dairenin parametrelerine benzer olarak; X ve Y koordinatlarının, yarı çapın veya dikey-yatay yarıçapların belirtilmesi gereklidir.

var ellipse = paper.ellipse(200, 400, 100, 50);

Bu kod ekrana; X=200, Y=400 koordinatlarına yatayda yarı çapı 100, dikeyde yarıçapı 50 olan bir elips çizer.

Bu 3 çizim tekniğin uyguladıkdan sonra, “our_script.js” dosyamız şu şekilde olmalı.

window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var circle = paper.circle(100, 100, 80);
for(var i = 0; i < 5; i+=1) {
var multiplier = i*5;
paper.circle(250 + (2*multiplier), 100 + multiplier, 50 - multiplier)
}
var rectangle = paper.rect(200, 200, 250, 100);
var ellipse = paper.ellipse(200, 400, 100, 50);
}

Eğer “index.html” dosyasını, tarayıcınızda açarsanız görüntü aşağıdakine benzer bir şekilde olacaktır.

4. Çizim Yolları

Tümleşik şekilleri kullanmak çoğu zaman kullanışlı fakat esas serbest çizim rahatlığını sağlayan şey “yollar” (paths). Bir yol çizerken kalem veya fırçanızın ekrana iz bıraktğını hayal edersek; Çizim alanımızı ilk oluşturduğumuzda kalem/fırça varsayılan olarak ekranın sol üst köşesine konumlandırılır. Yapmamız gereken ilk şey kalemimizi çizim yapacağımız alana konumlandırmak.
Örnek olarak kalemimizi, XY=0 noktasından X=250, Y=250 noktasına taşıyalım:

Bu hareket “yol bildirimi” (path string) olarak adlandırılmış.

Yol bildirimi, birden fazla metin formatında değerin, sıralı bir halde birbiri ardına yazılarak çalıştırılmasıyla yapılır. Örneğimizde kalemi X=250, Y=250′ye taşıma istiyoruz, öyleyse:

"M 250 250"

“M” harfi, “Move” yani taşımak anlamına gelir, bizim kodumuzda “Çizim yapma, sadece yerini değiştir” anlamında kullanılıyor. Sonraki “250 250” ise sırasıyla X ve Y koordinatlarıdır.

Şimdi, kalemimiz istediğmiz koordinatlarda olduğuna göre bir çizgi çalışması yapalım. Bunun için “l” (Küçük L) yani Line komutunu kullanıyoruz, ve her zaman ki gibi XY koordinatlarını veriyoruz.

"M 250 250 l 0 -50"

Bu kod sadece Y koordinatında yukarıya doğru 50 piksellik çizgi çizer. Biraz daha komplike olması açısından aşağıdaki satırı da yazabiliriz. Tetris oyunundan bir nesnenin çizimi.

"M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z"

Satırın sonundaki “z” çizim işleminin bittiğini gösterir. Son çizgi nerede olursa olsun “z“‘den sonra, çizgi “M” ile belirttiğimiz noktaya tamamlanır.

Bu yol bildirimi satırlarını HTML sayfasında çalıştırmak için ise, Raphel JS’nin “path()” fonksiyonunu kullanırız. Örneği çalıştırmak için “our_script.js” dosyamızın aşağıdaki gibi olması lazım.

window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");
}

Kodları çalıştırdığınızda sayfanın görüntüsü aşağıdaki gibi olmalı.

Path() fonksyionu ve yol bildirimi (path string) yönteminin kullanımı, Curve ve Arc (Kavis ve Yay) komutları kullanılarak daha da karmaşıklaştırılabilir. Bu tür komutların devamını ve açıklamalarını SVG Path Specification (Yol Tanımları) sayfasında bulabilirsiniz.

5. Nitelikler ile Stil Verme

Yukarıda çizdiğimiz tetris parçası, ilk çizim için güzel görünebilir ama hiç estetik durmuyor mu?. Bunun çözümü ise nitelikler yardımı ile çizime stil vermekten geçiyor.
Attr() fonksiyonu, nesnenin niteliklerini “başlık-değer” şeklinde ele alıp, bu değerleri değiştirebilmemizi sağlar. Yukarıdaki çizimimizi “tetronimo” adlı bir değişkende tutuyorduk, bu demektir ki, biz bu değişkene dolayısıyla çizime attr() ile yeni değerler verebiliriz. Attr() fonksiyonunu Path() ile birlikte kullanıp, yol bildirimi yaptığımız satırın sonuna ekliyoruz.

window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");tetronimo.attr({fill: '#9cf', stroke: '#ddd', 'stroke-width': 5});
}

Sonuç:

Daha anlaşılır bir kod bloğu:

window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");tetronimo.attr(
{
gradient: '90-#526c7a-#64a0c1',
stroke: '#3b4449',
'stroke-width': 10,
'stroke-linejoin': 'round',
rotation: -90
}
);
}

Raphael JS’nin kendi dökümanları arasında Attr() fonksiyonu, oldukça geniş olarak anlatılmış. Nesnelerin diğer nitelikleriyle oynayarak daha farklı çalışmalar yapılabilir.

6. Animasyonlar

“Animate()” fonksiyonu, Raphael’in en güzel özelliklerinden bir tanesi. Bize jQoery’nin esque kütüphanesini (bir animasyon kütüphanesi) kullanarak nesnelerin nitelikleri ile animasyonlar oluşturmamızı sağlıyor ve istersek Easing denilen, animasyonun hızını, yönünü vb. değerleri değiştirmemizi sağlayan yardımcı yöntemleride kullanabiliriz. (Nesneler diyorum çünkü bahsi geçen nesneler doğdurdan çizimlerimize bağlı).
Örnek olarak yine yukarıda çizdiğimiz “tetronimo” nesnesini kullanalım ve “rotation” yani rotasyon niteliğini değiştirerek 360 derece dönmesini sağlayalım. “our_script.js” dsoyasına yazacağımız kod:

window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");
tetronimo.attr(
{
gradient: '90-#526c7a-#64a0c1',
stroke: '#3b4449',
'stroke-width': 10,
'stroke-linejoin': 'round',
rotation: -90
}
);tetronimo.animate({rotation: 360}, 2000, 'bounce');
}

Koddaki 2000 değeri, animasyonun 2000 milisaniye(2 saniye)’de tamamlanacağını gösterir. Son olarak “bounce” ile de animasyonun nasıl bir ek-efektle tamamlanacağını belirtiyoruz.
Yukarıdaki kodun canlı bir örneğini görmek için buraya tıklayın.

Ayriyetten animasyonumuz bittikden sonra çalıştırılmak üzere bir fonksiyon belirleyebiliriz, buna “callback” denir.
Örnek olarak yukarıdaki animasyonumuz çalıştıkdan sonra “tetronimo“‘yu eski haline geri getiren bir “callback” fonksiyonu tanımlayalım:

tetronimo.animate({rotation: 360, 'stroke-width': 1}, 2000, 'bounce', function() {
/* callback after original animation finishes */
this.animate({
rotation: -90,
stroke: '#3b4449',
'stroke-width': 10
}, 1000);
});

Buradaki “this” komutu, o an animasyonun içinde bulunan “tetronimo” nesnesini gösterir.
Canlı örnek burada.

Animasyonun Yönü ve Tipi

Raphael, Flash’daki gibi; çizdiğiniz şekilleri eğip bükmek gibi olayların aynısı olmasada bezner türde olayları yapabilir (shape tweening). Bu yöntemi “animate()”‘in içinde “path()” kullanarak gerçekleştiriyoruz. Bu sefer ki örneğimizde yine tetris’den bir örnek olarak “Z” şeklinde bir çizim yapıp onun üzerinde çalışacağız.
İlk önce şeklimizi çizelim:

"M 250 250 l 0 -50 l -50 0 l 0 -50 l -100 0 l 0 50 l 50 0 l 0 50 z"

Aşağıdakine benzer bir görüntü olması lazım:

Şimdi bu minimal düzeyde stillendirilmiş nesnemizi kullanarak “animate()” fonksiyonunu çağıracağız ve parametre olarak yeni bir “path()” nesnesi göndereceğiz.

tetronimo.attr(
{
stroke: 'none',
fill: 'blue'
}
);tetronimo.animate({
path: "M 250 250 l 0 -50 l -50 0 l 0 -50 l -100 0 l 0 50 l 50 0 l 0 50 z"
}, 5000, 'elastic');

Kodu çalıştırıp baktğınızda, orjinal şeklin eğilip bükülerek vermiş olduğumuz yeni path nesnesine dönüştüğünü görürsünüz.
Canlı örnek burada.

7. DOM’a Erişebilirlik

Eğer HTML sayfamızdaki DOM elementlerine erişmek istiyorsak, bunu Raphael’in “Node” özelliği ile kolaylıkla yapabiliriz. bunu kullanarak çizimlerimize kullanıcı ile etkileşim geçecek olay fonksiyonları yazabiliriz.
Örnek için ilk önce bir daire çizelim:

window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);var circ = paper.circle(250, 250, 40);
circ.attr({fill: '#000', stroke: 'none'});
}

Şimdi, dairenin ortasına “Raphael Js” yazdıracak fonksiyonu hazırlayalım:

var text = paper.text(250, 250, 'Raphael JS')
text.attr({opacity: 0, 'font-size': 12}).toBack();

“Opacity=0” yani varsayılan olarak sayfa ilk açıldığında, yazımız ekranda görünmeyecektir. Bu satırın hemen arkasından gelen “.toBack()” komutu ekrana yazdırığmız yazıyı, çizim alanındaki her nesnenin arkasına itecektir. Yani bu örnekde dairenin üzerine yazdırdığımız yazı aslında .toBack ile dairenin arkasına yerleştirilmiştir. Benzer şekilde “.toFront()” komutuda nesneyi diğer nesnelerin önüne getirmekte kullanılır.
Çizmiş olduğumuz dairede “MouseOver” olayını yakalamak için “node” özelliğini kullanarak bir fonksiyon yazalım ve fare’nin daire üzerine geldiğinde el işareti olmasını sağlayalım:

circ.node.onmouseover = function() {
this.style.cursor = 'pointer';
}

Kodumuzun HTML tarafındaki karşılığı aşağıdaki gibidir:

<circle cx="250.5" cy="250.5" r="40" fill="#000000" stroke="none" style="fill: #000000; stroke: none; cursor: pointer">
</circle>

Son olarak daire nesnemize fare ile tıklandığında çalışacak bir kod bloğu yazalım:

circ.node.onclick = function() {
text.animate({opacity: 1}, 2000);
circ.animate({opacity: 0}, 2000, function() {
this.remove();
});
}

Kodda da görüldüğü üzere, daireye tıkladığımızda ilk önce görünmez olan yazımız 2 saniye içerisinde görünür olacak ve hemen ardından daire 2 saniye içinde görünmez olacaktır. Tanımladığımız callback fonksiyonu sayesine 2 saniye sonunda görünmez olan daire, “this.remove()” kodu ile sayfadan tamamen silinir.
Canlı örnek burada.

8. Örnek Uygulama: Beğeni Ölçme Bileşeni

Buraya kadar ki öğrendiklerimizi, tek bir uygulamada hep birlikte uygulamak adına ufak bir beğendimbeğenmedim bileşeni yapalım:
Yapacağımız çalışmanın sonucu buradaki gibi olacak.

Başlangıç için kod bloğumuz aşağıdaki gibidir:

window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var circ = paper.circle(250, 250, 20).attr({fill: '#000'});
var mood_text = paper.text(250, 250, 'My\nMood').attr({fill: '#fff'});
}

bu kod yarıçapı 20 piksel ve XY koordinatları 250 olan siyah bir daire çizer. Daha sonra içine “My \nMood” yazısı yazılır (My Mood’un kelime anlamı “Benim düşüncem”‘e denk gelmektedir). Kodların arasındaki “\n” ise özel karakterdir ve bir alt satıra geçmek anlamına gelir. Yani “My”‘dan sonra bir alt satıra geçilir ve “Mood” yazılır.
Şimdi, sıra geldi değerlendirme bilgilerini hazırlamaya; Kullanıcının seçebileceği her seçeneğe karşılık bir metin ve renk hazırlayalım.

moods = ['Çöplük', 'Güzel Değil', 'Orta', 'İyi Sayılır', 'Harika'];
colors = ['#cc0000', '#a97e22', '#9f9136', '#7c9a2d', '#3a9a2d']; //varsayılan olarak 1. seçeneği aktif yap.
var my_mood = 1;

Şimdi kullanıcının seçtiği değere göre yukarıdaki dizilerden, uygun olanları seçip ekranda gösterecek fonksiyonu yazalım:

function show_mood() {
for(var i = 0; i < my_mood; i+=1) {
(function(i) {
setTimeout(function() {
paper.circle(250, 250, 20).attr({
stroke: 'none',
fill: colors[my_mood - 1]
}).animate({translation: '0 ' + (-42 * (i+1))}, 2000, 'bounce').toBack();
}, 50*i);
})(i);
}
paper.text(250, 300, moods[my_mood - 1]).attr({fill: colors[my_mood - 1]}); mood_text.node.onclick = function() {
return false;
}
circ.node.onclick = function() {
return false;
}
}

“show_mood()” fonksiyonu içerisinde, kullanıcının seçtiği değeri her 50*i milisaniyede çizime dönüştüren anonim bir fonksiyon var. Her yeni daire oluşturulduğunda fonksiyon kendini çalıştırarak en son çizilen dairenin hemen üstüne yeni bir daire çiziyor ve bunu seçilen değer kadar tekrarlıyor. Her daire 2 saniye içerisinde bir öncekinin Y ekseninde üzerine ve görüntü olarak arkasına yerleştiriliyor.
son olarak ekrana çizilen dairelerin ve yazıların click olayları kaldırılarak her tıklamada yukarıdaki kodun tekrar çalışmasının önüne geçiliyor.

Son olarak fonksiyonumuzu sayfaya entegre edelim, aşağıdaki kod ile yukarıda yazmış olduğumuz fonksiyonu ekrana ilk çizdirdiğimiz siyah daire ve içindeki yazıya bağlayalım:

circ.node.onclick = show_mood;
mood_text.node.onclick = show_mood;

Bu örneğimizi modifiye ederek ekolayzır benzeri bir bileşende yapabilirsiniz.

Kapanış

Umuyorum ki şimdiden Raphael JS’yi ve birbirinden ilginç çizim araçlarını kurcalamaya biraz daha meraklısınız.
Hepinize iyi günler, iyi çalışmalar.

Kurtman Çelik
kurtman.celik@hotmail.com
http://kurtmancelik.wordpress.com/
Kaynak: http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/

Liseyi Muğla / Fethiye Lisesi‘nde, Lisans eğitimini İstanbul Teknik Üniversitesi Bilgisayar Mühendisliği Bölümü (1994),  İstanbul Bilgi Üniversitesi İşletme Yönetimi (Yüksek Lisans – 1999) ve Işık Üniversitesi Sosyal Bilimler Fakültesinde (2003) almıştır. 1996′da TekstilBank Bilgi İşlem bölümünde Veritabanı ve Sistem Yöneticisi olarak görev almıştır. 2000 yılından bu yana Turkcell’de ORACLE geliştiricisi olarak birçok görev almıştır ve 2009 Eylül ayında Turkcell – Gelir Odaklı İş Zekası takımında göreve başlamıştır. 2008′den beri Turkcell  Veri madenciliği departmanında Oracle ETL geliştiricisi olarak görevine devam etmektedir.

CETURK Ekibi’nde Oracle Forum Sorumlusu olarak görev yapmaktadır.
CETURK’teki yazılarına erişmek için : http://www.ceturk.com/etiket/hasan-tonguc-yilmaz
CETUK Forumu’undaki prifline erişmek için : http://www.ceturk.com/forum/uyeler/tonguc/

Sadullah Keleş 13 Ağustos 1980 de Zonguldak’ta doğdu. ilk ve orta okulu Zonguldak’ta, liseyi Kocaeli’de bitirdi. 1999 yılında Uludağ Üniversitesi Bilgisayar Programcılığı bölümüne giderek bilgisayar ile tanıştı. Bu bölümün ardından Kocaeli Üniversitesi Bilgisayar Mühendisliği bölümünü bitirdi. Askerlik görevini İstanbul’da bitiren Sadullah halen İstanbul’da özel bir şirkette Yazılım Uzman Yardımcısı olarak iş hayatına devam etmektedir. Birçok bilişim topluluğunda yöneticilik görevlerini üstlenmektedir. Bu doğrultuda projeler geliştirmektedir.

CETURK Ekibi’nde C#(CSharp) Forum Sorumlusu olarak görev yapmaktadır.
CETURK’teki yazılarına erişmek için : http://www.ceturk.com/etiket/sadullah-keles
CETUK Forumu’undaki prifline erişmek için : http://www.ceturk.com/forum/uyeler/sa_keles/