Belki tam bir jQuery uzmanısınız. Ya ne olacak canım, John Resig’in tam kendisisiniz belki de… Ya da Bildirgeç üzerinde “Prototip”, “jQuery“, ve “Mootools” gibi kelimeleri görüp “Bunlar da ne ola ki?” diye hayıflanıp duruyorsunuz… Åžimdi tüm bunları öğrenmenin zamanı geldi.

Bu endüstride, -özellikle günümüzde daha önce hiç olmadığı kadar-, tasarımcılar kodculara, kodcular da tasarımcılara dönüşüyor… Bir geliÅŸtiricinin görevi SADECE ön ya da arkaplan iÅŸlerini yürüten kod yazmak olmaktan çıkıyor. jQuery iÅŸte bu aradaki mesafeyi kapatmaya yardımcı olan bir JavaScript kütüphanesi. JavaScript eriÅŸilemez bir yetenek deÄŸil. Daha önce yayımladığım size sıfırdan PHP öğretecek 25 kaynak yazısının site kullanıcıları tarafından çok tutulan bir yazı olduÄŸunu gördükten sonra nettuts üzerindeki benzer bir yazıyı da jQuery dersleri için yayımlamayı uygun gördüm. Bu makalede daha önce hiç jQuery üzerinde çalışmamış geliÅŸtiricilere jQery kütüphanesini öğrenmelerine olanak saÄŸlayacak 15 kaynağı listeleyecek ve ilgili kaynaklar hakkında bilgi vereceÄŸim. EÄŸer bugüne kadar bu kütüphaneye herhangi bir nedenden ötürü korkup yaklaÅŸmamışsanız, ÅŸimdi ona yaklaÅŸmanın tam zamanı. Ne kadar kolay olduÄŸuna inanamayacaksınız.

jQuery de ne ola ki?
jQuery.com’a göre jQuery hızlı ve öz bir JavaScript kütüphanesi olup HTML belgelerinizi olayları iÅŸleyebilecek, animasyonlar yürütebilecek ve web sayfalarınıza Ajax etkileÅŸimleri dahil edebilmenizi kolaylaÅŸtırır. jQuery, bugüne kadar JavaScript yazma ÅŸeklinizi geliÅŸtirmek için tasarlanmıştır.

Daha basit anlamı ile jQuery, daha önce 10 satır yazdığınız JavaScript kodunu iki satırda yazmanıza olanak saÄŸlayan bir kütüphane! Geriye kalan sekiz satırın en verimli ÅŸekilde baÅŸkaları tarafından halihazırda yazıldığını ve bu kodun da JavaScript çalıştırabilen tüm modern tarayıcılarda yürütülebildiÄŸini düşünün. Daha jQuery’i derinlemesine öğrenmeden bile zengin formlardan Flash gibi menüler oluÅŸturabileceksiniz. Bir baÅŸka iskeleti daha öğrenmek istemiyorum demeyin. AÅŸağıdaki kaynaklar size bu yolda adım adım rehberlik edeceklerdir.

Neden diğerlerini değil de bu kütüphaneyi kullanmalıyım?
Sonuç olarak bu sizin seçimiz. Her bir iskeletin (framework) kendine özgü avantajları vardır. Ancak jQuery’nin günümüzün en popüler JavaScript iskeleti olmasının ardında bazı nedenler yatıyor.

Birden fazla tarayıcı ile uyum. Her bir JavaScript ikmali sırasında web geliştiricilerinin önemli bir zamanını, geliştirdikleri betiğin farklı tarayıcılar üzerinde beklendiği gibi çalışıp çalışmadığını test etmesi beklenir. Ne şans ki jQuery kütüphanesi bu tarayıcı uyumsuzluklarını gideriyor ve geliştiricilere kendi kodları üzerinde daha fazla zaman harcayabilmelerine olanak sağlıyor.

CSS Seçicileri. CSS sözdizimlerini kullanarak, geliştiriciler halihazırda kullandıkları bilgilerini belgelerine kolayca dahil edebilirler. CSS 3 ve XPATH seçicilerinin de desteği ile, jQuery sayfanızdaki elementleri kullanmak için mükkemel bir mekanizma sunuyor.

Zincirleme. jQuery kendi metodları için “zincirleme” (chaining) adı verilen bir yöntem kullanır. Bir jQuery nesnesi üzerinde bu yöntemi çalıştırdığınız her zaman, ilgili yöntem aynı jQuery elementini çalıştırır. Bu nedenle de her bir yöntem için seçicilerinizi yeniden yazmanız gerekmez. Tıpkı “.NET” tarzındaki bir özelliÄŸi kullanarak daha küçük dosya boyutlarına sahip ve kolay okunabilen kodlar yazabilmenizi saÄŸlar.

Eğer merakınız iyice arttıysa, çok güzel! Hemen başlayalım.

Adım 1: Kütüphaneyi İndirin
Bu yolculuktaki ilk durağınız kütüphaneyi bilgisayarınıza indirmek olacaktır. jQuery.com‘u ziyaret edin ve “Download jQuery” bölümüne gidin. Listedeki baÄŸlantılardan birine tıklayarak kütüphaneyi bilgisayarınıza indirin. Daha sonra indirdiÄŸiniz .js dosyasını HTML belgenize dahil etmeniz gerekecek.

• CSS-Tricks.com: jQuery’e GiriÅŸ: Bu jQuery eÄŸitim videosunda, CSS-Tricks websitesinden Chris Coyier, jQuery’i web sayfanıza nasıl dahil edebileceÄŸinizi ve birkaç özelliÄŸi nasıl yazabileceÄŸinizi gösterecek.
• Digital-Web.com: jQuery: BaÅŸlangıç Kursu: Kod yazmayı bilen web tasarımcıları için jQuery’e giriÅŸ kursu.
• Slideshare.net: “30 Dakikada jQuery Öğrenmek”: EÄŸer slayt gösterilerinden hoÅŸlanıyorsanız, bu ders size jQuery kullanarak nasıl slayt gösterileri oluÅŸturabileceÄŸinizi ve aynı zamanda size jQuery öğretmeyi hedefliyor.

Adım 2: İlk Fonksiyonunuzu Oluşturun
jQuery’i öğrenme aÅŸamanızın daha ilk birkaç dakikasında kendi fonksiyonlarınızı oluÅŸturmaya baÅŸlayacaksınız. Ä°lk durağınız John Resig’in giriÅŸ maklesi “jQuery Nasıl Çalışır?” olmalı. Resig, web uygulamalarınız üzerinde kullanacağız pek çok kolay anlaşılır yöntemi anlatacak. Anlatacakları arasında sınıf ekleme ve kaldırma, zincirleme ve “document.ready” yöntemini çağırmak yer alıyor.

• jQuery.com: “jQuery Nasıl Çalışır?”: Bu giriÅŸ makalesinde John Resig (jQuery’nin yaratıcısı) sizi animasyon oluÅŸturmanın temellerine götürecek. EÄŸer jQuery’e yeniyseniz bu makaleyi kesinlikle okumanız önerilir.
• 15DaysOfJquery.com: 1. Gün: jQuery’nin tüm özelliklerini iki haftada kavramak gibi cesur bir giriÅŸimde bulunan “15 Days of jQuery” (jQuery ile 15 Gün) web sitesi her gün bir konuyu iÅŸliyor. Bu makalede “document.ready” yöntemini nasıl kullanmanız gerektiÄŸini öğreneceksiniz.
• VisualJquery.com: “jQuery Sözlüğünüz”: VisualjQuery.com web sitenizi dijital sözlüğünüz olarak düşünün. Site, kullanılabilen her bir jQuery yönteminin sözdizimini ve açıklamasını içeriyor. Bu siteyi yer imlerinize eklemeyi unutmayın.

Adım 3: Elementlerinizi Canlandırın

Bu pek çok geliÅŸtirici için tartışmalı bir konudur. Birinci grupta “sıfır animasyon”da ısrar eden insanlar bulunur. Bunlar kullanıcının istediklerine mümkün olan en hızlı ÅŸekilde cevap verilmesine ve aradan çekilmesini tercih ederler. Onlara, bir sonraki uÄŸraşı için bekleyen bir zombi gibi davranmayın. Ä°kinci grupta da bazı insanlar vardır. Onlar, göze hoÅŸ görünen animasyonlar içeren bir siteye, kendi kullanıcıları için uygun bir site gibi bakarlar. Bu animasyonlar uygun kullanıldığında animasyonların kullanılırlığı önemli ölçüde arttırdığına inanırlar. Siz, hangi grupta olduÄŸunuza karar vermelisiniz. Hangi grupta olursanız olun jQuery’nin sayfanızdaki elementleri hareket ettirebilme görevini mümkün olan en kolay ÅŸekilde yerine getirebildiÄŸini unutmayın.

• jQuery.com: “Animasyonlar jQuery’nin animasyon yeteneklerini öğrenirken burası uÄŸramanız gereken ilk yer olmalı. Makale, bu yöntemi kullanırken ihtiyacınız olacak parametreleri detaylandırıyor.
• Detached Designs: jQuery’nin Animasyon Yeteneklerini Öğrenmek: Konu animasyona geldiÄŸinde hiç deneyiminiz yok mu? Bu makale özellikle animasyon konusunda hiç deneyimi olmayan kullanıcıları hedef alıyor. Makalenin içerdeÄŸi baÅŸlıklar arasında metin boyutunu deÄŸiÅŸtirmek, elementleri hareket ettirmek, animasyonları zincirlemek gibi her jQuery kullanan geliÅŸtiricilerin iÅŸine yarayacak konuları içeriyor.
• Web Designer Wall: Tasarımcılar İçin jQuery Dersleri: Halen jQuery’nin gücü kafanızı mı karıştıryor? Bu site menülerden imaj deÄŸiÅŸtirmeye kadar 10 adet örneÄŸi detaylandırarak bu muhteÅŸem kütüphanenin yetenekleri hakkında sizi bilgilendirmeyi hedefliyor.

Adım 4: Eklentiler
jQuery ile ilgili güzel olan bir şey var ki o da kütüphane geliştirilirken, John Resig ve ekibi kütüphanenin özelliklerini eklentiler kullanarak geliştirmenin sadece birkaç satır kod ekleyerek mümkün kılmak üzerine çalışmış olmaları. Kendinize özgü yöntemleri çok kısa süre içerisinde yazabileceksiniz! Bu eklentileri ana kütüphaneden ayrı tutarak (bu arada jQuery kütüphanesinin sadece 16KB olduğunu da hatırlatalım), bu özel eklentileri sadece gerektiği zaman sayfalarımıza dahil edebileceğiz. Bunun sonucunda JavaScript dosyalarınızın boyutu mümkün olan en küçük seviyede kalacaktır.

• jQuery Corner Gallery
  Elementlerinize yuvarlatılmış köşeler eklemek için CSS3′ün tüm tarayıcılar tarafından desteklenmesini beklemek istemiyor musunuz? O zaman jQuery kullanarak elementlerinize kolayca yuvarlatılmış köşeler ekleyebilirsiniz. Sadece yuvarlatılmış köşeler ile de sınırlı kalmayın, zira eklenti çeÅŸit çeÅŸit köşe tiplerini de bünyesinde barındırıyor. Bu eklenti araç kutunuzda kalıcı bir yer bulabilir.
• Kullanıcı Deneyimini GeliÅŸtirin: 10 Kullanışlı jQuery Eklentisi Bu makalede James Padolsey, kendince en iyi jQuery eklentilerini listelemiÅŸ.
• jQuery.com: “Eklentiler”: Her zaman olduÄŸu gibi jQuery.com deÄŸerli bir kaynak olmaya devam ediyor. Bu makale ilk eklentinizi oluÅŸturmak için size adım adım rehberlik ediyor.

Adım 5: AJAX Özelliğini Dahil Etmek
Åžu ana kadar öğrendiÄŸiniz jQuery yetenekleri ile kendinizi güvende mi hissediyorsunuz? Yeteneklerinizi bir sonraki seviyeye yükseltmeye hazır mısınız? Neden betiklerinize biraz Ajax özelliÄŸi dahil ederek baÅŸlamıyorsunuz? Her ne kadar “load()” ve “.get()” yöntemlerinin kullanımı ile jQuery veri yüklemeyi inanılmaz derecede kolaylaÅŸtırıyor. AÅŸağıdaki kaynaklar eÄŸitiminiz için hayati önem taşıyor.

• Sitepoint.com: jQyery ile Kolay AJAX: Akash Mehta’nın Sitepoint için hazırladığı bu makalede web uygulamalarınıza AJAX eklemenin jQuery kullanılarak ne kadar da basit bir iÅŸlem olduÄŸu anlatılıyor.
• Tasarımcılar için jQuery: AJAX Kullanarak Form DoÄŸrulama: Bu makalenin yazarı Remy, bizlere jQuery kütüphanesinin yanında AJAX kullanarak bizlere, web tabanlı formlara nasıl sunucu taraflı doÄŸrulama özelliÄŸini ekleyebileceÄŸimizi gösteriyor.
• Nettuts.com: jQuery Kullanarak İçerik Nasıl Yüklenilir ve Hareket Ettirilir?: jQuery dersleri ararken NETTUT’un “Javascript” kategorisine bir gözatmayı unutmayın. Bu derste NETTUTS ekibi jQuery kullanılarak bir verinin nasıl yüklenebileceÄŸini ve ardından onu taşıyan elementin nasıl hareket ettirilebileceÄŸini göstermiÅŸ.