John Resig tarafından 2006 yılında geliştirilmiş açık kaynak kodlu bir javascript kütüphanesidir (bana göre kütüphaneden çok "smart template engine" gibi bir nevi javascript framework uygulamasıdır).
Bu kütüphanenin şu anki sürümü 1.11.3'dür. Sıkıştırılmış (compressed) ve sıkıştırılmamış (Uncompressed) sürüm olarak sunulmaktadır, jQuery resmi sayfasından son sürümü indirebilirsiniz ya da google API CDN uygulaması gibi CDN (Content Delivery Network-İçerik Dağıtım Ağı) servislerinden birini kullanarak sayfanıza ekleyebilirsiniz.
Çok az yer kaplayan (sıkıştırılmış:92.6kb) bir kütüphanedir. Bu kütüphane MIT (Massachusetts Institute Of Technology) ve GPL (General Public Licence) lisansına sahip olduğu için website uygulamalarında herhangi bir sorun çıkarmamaktadır.
Neden jQuery ?
Küçük Boyut: Yukarda da bahsettiğimiz gibi jQuery sıkıştırılmış versiyonunun şu anki boyutu 92.6 kb'dır, işimizi çok kolaylaştıran bir uygulama olarak küçük bir dosyadır (Websitenizin açılma hızı açısından önemlidir (SEO).).
Bu dosyayı jQuery resmi sayfasından indirip kendi sunucunuza yükleyebileceğiniz gibi, CDN(Content Delivery Network-İçerik Dağıtım Ağı) kullanarak bu iş için hizmet veren adreslerden de sisteminize eklemeniz mümkün, böyle bir uygulamada, dosya her kullanıcının "ip" değerine göre bulunduğu en yakın sunucudan yükleneceği için çok daha hızlı olacaktır, ayrıca sizin bant genişliğinizi (bandwith) kullanmayacağı için de ayrıca bir avantaj sağlayacaktır.
http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery adresinden kullanabileceğiniz CDN adreslerini bulabilirsiniz (Ben, https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js linkini kullanmayı tercih ediyorum).
Cross-Browser Desteği: Tasarımlarınızda javascript kullanımının önemi tartışılmaz (Web 2.0 uygulamalarında hedef, olabildiğince tarayıcı üzerinde çalışan uygulamalar geliştirmektir. Bu sayede sunucunuz üzerinde herhangi bir işlem yapılmadığı için web sitenizin tepkisi çok daha hızlı olacak ve sunucunuz üzerindeki yük hafifleyecektir).
Fakat javascript kullanımında karşılaştığımız en büyük problem, javascript uygulamalarının farklı tarayıcılarda farklı tepkiler vermesi (Web tasarımlarınızda IE için ve diğer modern tarayıcılar için kontrol mekanizmaları oluşturmanız gerekebilir) ve bazı problemlerle karşılaşılmasıdır (internet explorer, 9 sürümünde diğer modern tarayıcılarla aynı desteği vermeye başladı, fakat daha önceki sürümlerinde problemler devam etmektedir). Aynı işlemi yaptırabilmeniz için en azından internet explorer ve diğer modern tarayıcılar için ayrı kontrol mekanizmaları yazmanız gerekmektedir, fakat jquery ile yazdığınız kodlar tüm tarayıcılarda hemen hemen aynı sonucu vermektedir (Kontrol mekanizmaları jQuery'nin ana kodlarında hazır olarak sunulmuştur). Bu sayede, web tasarımlarınızı tamamladığınızda, %100 olmasa da tüm tarayıcılarda aynı sonucu alırsınız.
jQuery'nin sorunsuz çalıştığı tarayıcılar ve sürümleri:
- Internet Explorer 6.0+
- Mozilla Firefox 2.0+
- Safari 3.0+
- Opera 9.0+
- Google Chrome 1+
Ajax uygulamaları: Bugün, önemli birçok web sitesinde ajax uygulamaları kullanılmaktadır (facebook, google, amazon, twitter vb.). Ajax, sayfanın tamamının yenilenmesi yerine istenilen kısımların yenilenmesini sağlayan, javascript gibi tarayıcı taraflı ve PHP gibi sunucu taraflı dillerin birarada etkileşimli olarak çalışmasını sağlayan bir uygulamadır (AJAX yeni bir dil değildir, javascript ve XML yapıları kullanılarak oluşturulmuş bir uygulamadır).
Standart AJAX kodlamasında yukarda bahsettiğimiz sorun devam etmekte ve website tasarımlarınızda Internet Explorer ve diğer tarayıcılar için ekstra kontrol mekanizmaları oluşturmanız gerekmektedir. Yeni başlayanlar için de biraz karışıktır. Oysa jQuery ile ajax uygulamalarının kodlaması çok daha kısa ve anlaşılırdır.
Aşağıdaki örnek ne demek istediğimi daha iyi açıklayacaktır.
Internet explorer 5'den itibaren sorunsuz çalışmasını istediğimiz bir AJAX uygulamasının kontrol mekanizmaları aşağıdaki gibi olmalıdır:
<script type="text/javascript">
var x;
if(window.XMLHttpRequest){
x=new XMLHttpRequest();
}else if(ActiveXObject("Msxml2.XMLHTTP")){
x=new ActiveXObject("Msxml2.XMLHTTP");
}else if(ActiveXObject("Microsoft.XMLHTTP")){
x=new ActiveXObject("Microsoft.XMLHTTP");
}else{
alert("Web tarayıcınız XMLHttpRequest için desteği yok");
}
</script>
Oysa jQuery ile ajax uygulamasında herhangi bir kontrol mekanizması oluşturmanıza gerek yoktur, aşağıdaki kod jQuery ile AJAX uygulamasına başlamanız için yeterlidir:
<script type="text/javascript">
$.ajax()
</script>
Hazır Eklentiler: jQuery açık kaynak kodlu bir kütüphane olduğu için birçok website geliştiricisi kendi eklentilerini oluşturup hizmete sunmuştur. Bu sayede daha önce flash kullanarak yaptığımız slayt gösterisi, küçük animasyonlar gibi birçok uygulamayı çok daha kolay bir şekilde jQuery ve hazır eklentileri kullanarak oluşturabilirsiniz. Siz de kendi eklentileriniz oluşturup kullanabilirsiniz. Bu eklentilere http://plugins.jquery.com adresinden ve diğer birçok siteden ulaşabilirsiniz.
Öğrenim kolaylığı: jQuery felsefesini anladığınızda çok az kodlama ile çok iş yapmaya başlayabilirsiniz (Özü javascript olduğu için javascript kodlamasını iyi bilmek avantaj sağlayacaktır, jQuery içinde salt javascript kodlaması da yapabilirsiniz).
Zincirleme metod uygulaması: jQuery kodlamasında zincirleme bir yapı mevcuttur, bu da yaptığınız yazılımı daha kolay takip edebilmenizi ve kolay uygulama geliştirmenizi sağlamaktadır.
Aşağıdaki örnekle konu daha iyi anlaşılacaktır:
<script type="text/javascript">
$('#id_adi').addClass('class_adi').fadeIn('slow');
</script>
Yukardaki kodlamada "id_adi" adlı "id" ye "class_adi" adlı sınıf (css) eklenmiş ve yavaş bir şekilde görünür hale getirilmiştir.
HTML5 ve CSS3 Uyumu: CSS uygulamaları her geçen gün gelişmektedir. CSS3 ile bir çok yenilik ve uygulama kolaylıkları getirilmiştir. Bu gelişmeler sayesinde daha önce web tasarımında sıkıntı çekilen birçok konu aşılmıştır (Gölge vermek, yuvarlak köşeler (rounded) yapmak vb.) Tüm tarayıcılar bu uygulamalara tam anlamıyla karşılık veremeseler de yeni sürümlerle birlikte tarayıcılar desteklerini artırmaktadır. jQuery ile tüm CSS özelliklerine müdahale edebilirsiniz. CSS2 ve CSS3 için kullanılan yapılar jQuery içinde hazır olarak sunulmuştur.
Diğer Kütüphanelerle kullanımı:"$.noConflict()" metodu ile, jQuery ve diğer javascript kütüphanelerini (Dojo, mootools, YUI, spry vb.) websitenizde rahatça kullanabilirsiniz.
<script type="text/javascript">
$.noConflict();//Diğer kütüphanelerin sorunsuz çalışması için.
$(document).ready(function(){
//jQuery kodları burada olacak.
});
//Diğer kütüphane kodları burada olacak.
</script>
Dökümantasyon Desteği: Çok iyi hazırlanmış dökümantasyon desteği bulunmaktadır. jQuery'nin resmi sitesindeki, http://docs.jquery.com adresinden her türlü bilgiye ulaşabilirsiniz.
Neler Yapılabilir:
- Web tasarımlarınızda sayfanızdaki tüm nesnelere kolayca müdahale edebilirsiniz.
- Nesneler üzerinde etkileşimli olarak stil değişiklikleri yapabilirsiniz.
- Daha önce flashla hazırlamak zorunda kaldığınız küçük ebatlı animasyonları çok kolay bir şekilde oluşturabilir, websitenize kolayce adapte edebilirsiniz.
- Sunucu taraflı dilleri (PHP, ASP, JSP vb.) de kullanarak, ajax uygulamalarıyla, sayfa yenilemeden, sunucunuzdan veri alışverişi yapabilirsiniz.
Sonuç Olarak:
jQuery kullanarak, çok daha esnek ve kullanışlı web siteler hazırlayabilirsiniz. Fakat sadece jQuery kodlamasını öğrenmek yetmez, ilk önce javascript kodlamasında kendinizi geliştirmenizi tavsiye ederim, javascript üzerinde hakimiyetiniz artıkça, jQuery kullanımınız çok daha kolay ve hızlı olacaktır. Şunu da belirtmeden geçmek istemem: Standart javascript kodlamasıyla yapabileceğiniz her şeyi jQuery kullanarak çok daha hızlı ve kolay yapabilirsiniz, jQuery standart javascript kodlarını da sorunsuz çalıştırır..
Görüşmek üzere...
