Jquery Giriş
Önceki makalemde, Jquery’nin öz babası olan Javascript’ten bahsetmiştim. Bu mayazımda ise Jquery’e giriş yapmak ve kısaca avantajlarından bahsetmek niyetindeyim.
Jquery Nedir?
Jquery, temel olarak aslında bir Javascript kütüphanesidir. Öyle ki, belli işlevleri yerine getirmesi amacıyla sayfanıza ekleyeceğiniz tüm Javascript fonksiyonlarının baştan yazılarak derlenmiş hali gibi düşünebilirsiniz. Sonucunda ise, yazma ve test aşamasına saatler harcayabileceğiniz Javascript programlarını saniyeler içerisinde tek bir satır kodla bile hazırlayabileceğiniz mükemmel bir kütüphane elde edilmiş oluyor.
Diğer Javascript Kütüphaneleri
-Yahoo User Interface Library (YUI): YUI ekibi, sunduğu webmaster araçlarıyla da zaman zaman kullanılası eklentiler sunuyor, bir göz atmanızı tavsiye ederim.
-Dojo Toolkit: Uzun zamandır kullanılmakta olan bir diğer kütüphane de Dojo. Oldukça geniş bir kütüphane olsa da kullanıcı ağı Jquery kadar geniş değil.
-Mootools: Animasyonları ve görsel efektleri ile zaman zaman kullanılabilecek bir kütüphane.
-Prototype: İlk javascript kütüphanelerinden biri de Prototype. Görsel efekt kütüphanesi olan Scriptaculous ile birlikte sık sık kullanımları ile karşılaşabilirsiniz.
Neden Jquery?
Biz web programcıları, sunucuya yük bindirmemesi ve göze daha hoş gelmesi amacıyla bazı işlemleri tarayıcı tarafından yaptırmak isteriz. Jquery’den önce Javascript ile bir elementi seçmek, sayfaya yeni içerikler eklemek, içerikleri gizlemek ya da görünür yapmak, element özelliklerini değiştirmek, kullanıcı seçimlerine göre sayfanın tepkilerini düzenlemek vb. İşlemler çok uzun zaman almasına ek olarak; tarayıcıdan tarayıcıya farklı yotumlanabiliyor, özetle çileden çıkarabiliyordu.
Jquery ise, yukarıda belirttiğim işlemlerin çok daha fazlasını, çok daha az satır kodla hem daha görsel, hem de problemsiz olarak gerçekleştirmemize olanak sağlamaktadır.
Jquery’nin Avantajları
-Javascript programlarına göre çok daha az yer kaplar. Eğer sunucunuz gzip formatında sıkıştırılmış dosyaları da destekliyorsa, dosya boyutlarını inanılmaz ölçüde azaltabilirsiniz. Html sayfasına ilişkilendirdiğiniz her bir js dosyasının, o sayfanın her talebinde kullanıcı tarafından indirilmesi gerektiğini de düşünürseniz, sayfa açılışınızı birkaç kat artırabileceğiniz bir avantajdan bahsediyorum!
-Kullanımı oldukça kolaydır. Yeni bir programlama dili öğrenmenize (birkaç farklı syntax dışında) gerek bırakmamasına ek olarak, html ve css bilginizi kullanmanıza da olanak tanır.
-Test etmek ya da uyumsuzluk gibi sorunları yoktur, milyonlarca kişi tarafından kullanılmış, test edilmiş ve geliştirilmeye devam etmektedir.
-Jquery, tamamen ücretsizdir. Ancak jquery ile kullanıcılar tarafından hazırlanan bazı eklentilerin ücret karşılığı satılması, jquery’nin tam olarak ne olduğunu bilmeyen insanlar tarafından yanlış olarak anlaşılabilmektedir. Ücretsiz olan Jquery’dir, ama jquery kullanılarak hazırlanan spesifik ürünler tabii ki satılık olabilir. Hem bakarsınız siz de kullanıcılar tarafından talep oluşturabilecek ürünler geliştirebilir ve satabilirsiniz.
-Jquery, çok geniş bir geliştirici topluluğu tarafından düzenlenmeye devam etmektedir. Siz bu makaleyi okurken bile, Jquery project bünyesinde çalışan insanlar tarafından mevcut hatalar giderilmekte ve yeni kütüphaneler ile dökümanları hazırlanmaya devam etmektedir.
-Jquery, tüm programcılar tarafından eklenti hazırlanabilmesini mümkün kılmıştır. Başka kullanıcıların eklentilerini ücretli ya da ücretsiz olarak edinip kullanabileceğiniz gibi; bir ekip olarak ya da kendi başınıza eklentiler de hazırlayabilir, ve hatta satabilirsiniz bile.
Jquery Kullanımı
Jquery’i kullanmak için, harici javascript dosyalarımıza yaptığımız gibi, güncel ya da tercih ettiğimiz Jquery sürümünü html sayfamız ile ilişkilendirmemiz yeterli.
Tavsiye: Jquery o kadar popüler ki; Google, Microsoft ve Jquery sunucularında barındırılarak kullanıcıların bu sayfalardaki kaynaklara erişimleri destekleniyor. Örneğin Google sunucularında saklanan Jquery kütüphane dosyasını kullanarak, sayfanızı ziyaret eden kullanıcının, daha önce Google kütüphanesindeki Jquery dosyasını önbelleğine almış olma olasılığı çok yüksek olduğundan sayfanızın daha hızlı açılmasına olanak sağlamış olursunuz.
Örneğin:
< script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script >
Script etiketini, html sayfanızdaki head etiketi içerisine koymanız yeterlidir.
İpucu: Jquery ve Javascript programlarınızı, her zaman CSS linklerinizden sonrasına yerleştirin. Bunun sebebi ise, Jquery’nin işleme başlayabilmek için stil dosyalarınızı dikkate alabileceğindendir. İyi bir alışkanlık olarak, stil dosyalarınızı <head> etiketinizin başına; script dosyalarınızı da </head> etiketi kapanmadan hemen üzerine yazmaktır.
Jquery İndirmek
Seçiminize bağlı olarak, jquery dosyasını kendi sunucusunda saklamak isteyen kullanıcılar için, Jquery download adresi http://jquery.com/download/. Bu makalenin yazıldığı tarih itibariyle Jquery 2.0 sürümü yeni yayınlanmış ancak tarafımca henüz test edilme imkanı bulunmadığından 1.9.1 sürümü dikkate alınmıştır.
Jquery İlk Uygulaması
< script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script >
< script >
$(document).ready(function () {
alert("ilk jquery programim");
});
< / script >
Bu ilk örneğimizde, öncelikle Jquery kütüphanesini sayfamıza ekliyor, ve daha sonra sayfamız açılınca “ilk jquery programim” çıktısını alıyoruz.
$(document).ready() Fonksiyonu
Bu kısacık kodu büyüleyici kılan ise aslında $(document).ready() fonksiyonu. $(document).ready(), Jquery içerisinde yerleşik bir fonksiyon olup; çalışmak için HTML sayfasının yüklenmesini bekleyen akıllı mı akıllı bir fonksiyondur. İşlemi gerçekleştirmek için HTML sayfasının yüklenmesini beklemesini sebebi ise, Jquery ve Javascript programcılığının zaten içeriğin değiştirilmesi/düzenlenmesi ile ilgili olmasındandır. İçerik yüklensin ki düzenleyebileyim diye de düşünülebilir.
İpucu: html sayfasına yazacağınız tüm kodlar (html, css, script) sayfanın boyurunu artırır ve sayfanın açılışını geciktirir. Bu yüzden tarayıcılara derdinizi ne kadar az kodla anlatırsanız, sitenizin performansı o derece artacaktır. Sıklıkla kullanacağınız $(document).ready() fonksiyonu yerine aşağıdaki kodları kullanmanız halinde de tarayıcınız bu kodları, $(document).ready() ile aynı yorumlayacaktır.
$(function() {
alert("ilk jquery programim");
});
Jquery’e giriş niteliğindeki bu makaleyi, bir sonraki yazımda html sayfalarının jquery ile nasıl çalışma zamanında düzenlenebileceği konusunu yazmak üzere noktalıyorum.
Saygılarımla