jQuery

İçindekiler

  1. jQuery hikayesi
    1. Javascript kavramı
    2. jQuery'nin filizlenmesi
    3. Örnekler
  2. jQuery yapı taşları
    1. Çekirdeği (CORE)
      1. Yerleşim ve ana nesne (jQuery, window, window.jQuery, $)
      2. Seçici (Selector)
      3. Fonksiyonlar ($.fn)
    2. Kullanıcı arabirimleri (UI)
    3. Eklentiler (Plugins)
  3. jQuery ile gelen yaklaşım ve farklılık
    1. Tasarım
    2. Mimari
    3. Örnekler

  1. jQuery hikayesi

    1. Javascript kavramı

      JavaScript programlama dili Java platformunun bir parçası değildir.
      JavaScript programlama dilinin Java programlama diliyle bazı ortak özellikleri vardır, ama bu dilden ayrı olarak geliştirilmiştir.[Kaynak]

      Netscape Navigator 2.0 ile birlikte Brendan Eich tarafından geliştirilen ve önceleri Mocha daha sonra LiveScript olarak adlandırılan ve en sonunda şu anki adını alan JavaScript dili başlangıçta sadece istemci taraflı (client-side) yorumlanan bir web programlama dilidir.[Kaynak]

      1995 yılında piyasaya sürülen JavaScript'e muadil JScript Microsoft tarafından 1996 yılında Internet Explorer 3.0 ile birlikte piyasaya girmiştir.
      Bununla birlikte istemcilerin kullanımın kapsamını geliştiren bu betik dili istemciler arasındaki stil tanımlarının farklı yorumlanması gibi, farklı yorumlanma sıkıntılarınıda birlikte getirmiştir.
      Bu durumdan dolayı yaşanılan sıkıntıları gidermek için 1997 yılının Haziran ayında ilk baskısı yapılan ECMAScript standarlaştırma çalışması başlamıştır.[Kaynak]

      Eski istemcilerin kullanılması ve yeni istemcilerin kendilerine özel yeteneklerinin erişimi konularında geliştiriciler halen bu sıkıntıları yaşanamaktadır.

      Temel olan bu sorunsallar dışında, geliştiricilerin sürekli ihtiyaç duydukları;

      • DOM nesnelerine istemci yorumlamasından bağımsız kodlar ile erişme
      • Olay ve metodları istemciden yorumundan bağımsız kullanabilen kodlar yazabilme
      • Nesne stil ve özelliklerini istemci stil ve özellik yorumlarından bağımsız kodlar ile almak ve değiştirmek
      gibi temel olarak sayılabilecek nedenlerle, geliştiriciler zamanla javascript kod kütüphanelerine sahip olmuş ve bunları açık kaynaklı olarak geliştirilmeye sunmuşlardır.

      Sonuç olarak;

    2. jQuery'nin filizlenmesi

      Javascript kavramında sonuç olarak vurgulanan nedenlerden dolayı bir çok Javascript kütüphanesi ortaya çıkmıştır.
      jQuery'de 26 Ağustos 2006 tarihinde ilk sürümünü yayınlamış olmasına rağmen aslında jQuery'i öne çıkaran gerçek değeri olan Pseudo-CSS tanımlayıcılarda kullanılan seçici yaklaşımının Javascript ile kullanılmasına dair kodlarını 22 Ağustos 2005 tarihinde John Resig kendi günlüğü üzerinden yayımlamıştır.[Kaynak]

      Kendimize soralım...

      Bu fikrini yayımlak ona ne kazandırdı?

      Bu ve benzer bir fikrin hiç çıkmadığını varsayalım. Şimdi nasıl yazılım geliştiriyor olurduk?

      Bir başka açıdan...

    3. Örnekler

      İstemci farklılıkları hakkında örnekler için impressiveweb.com sitesini ziyaret ediniz.

      Bu farklılıklara jQuery ile yaklaşım şu şekilde;
      CSS float değeri

      							$("#alanA").css("float");
							$("#alanA").css("cssFloat");
							$("#alanA").css("styleFloat");
      yukarıdaki tüm stil adları için aynı değer alınır.
      Örneği incelemek için burayı tıklayınız.

      Fare pozisyonu
      							$(document).mouseover
							(
								function(oE)
								{
									$(document).text
									(
										"X:" + oE.pageX 
										+ " Y:"+ oE.pageY
									);
								}
							);
      Daha iyi bir örnek için api.jquery.com/mousemove 'a bakınız.

      Saydamlık
      							$("#hedef").fadeTo("fast", 0.2);
      Daha iyi bir örnek için api.jquery.com/fadeTo 'a bakınız.

  2. jQuery yapı taşları

    1. Çekirdeği (CORE)

      1. Yerleşim ve ana nesne (jQuery, window, window.jQuery, $)

        jQuery'in en basit hali ile yüklenmesi için üç dosya gereklidir.
        Bu dosyalar jqueryui.com/download sayfasından hazırlanıp indirilebilir.
        jQuery kütüphanesi web sayfamızın HEAD tag'ı içinde şu şekilde tanımlanır;

        jQuery çekirdek kütüphanesi kullanım kolaylıkları sağlamak için bazı kısa tanımlar oluşturur.
        Aşağıdaki tanımlar jQuery'e ulaşmak için varsayılan olarak kullanılabilir.

        									window("body").text("jQuery ile erişildi.");
									window.jQuery("body").text("jQuery ile erişildi.");
									jQuery("body").text("jQuery ile erişildi.");
									$("body").text("jQuery ile erişildi.");

        Bazı kütüphanelerdeki genel tanımlamalar ile çalışan durumlar oluşabilir.
        Bu durumlarda jQuery'nin $ gibi kısa ifadelerini aşağıdaki gibi değiştirmemiz gerekir.

        									var emJQ	= jQuery.noConflict(true);
        Örneği incelemek için burayı tıklayın.

      2. Seçici (Selector)

        Hikaye'de de vurgulandığı gibi jQuery'nin kendine özgü değeri Pseudo-CSS tanımlayıcılarda kullanılan seçici yaklaşımının Javascript ile kullanılması ve ek özelliklerinin eklenmedir.
        jQuery seçicileri birlikte kullanıldığı gibi alanlarına göre şöyle sınıflandırılabilir;

        • Nesnesel 
          											$("input").hide("slow");
											$("textarea").hide("slow");
        • Filtresel 
          											/*
											 Aşağıdaki kod çalıştığı sırada animasyon halindeki 
											div'in class'ına "parlak" class'ı eklenir, varsa kaldırılır.
											*/
											$("div:animated").toggleClass("parlak");
        • Özelliksel 
          											//değeri boş olan input nesnelerine kırmızı bir çerçeve atar.
											$("input[value='']").css("border", "1px solid red");
        • Hiyararşik 
          											//DOM içindeki en son DIV içindeki ilk nesnenin yazı tipini kalın yapar.
											$("div:last>:first").css("font-weight", "bold");
        Daha fazla bilgi için api.jquery.com/category/selectors'a bakınız.

      3. Fonksiyonlar ($.fn)

        jQuery.fn sınıfı kendi eklentilerinizi yazabileceğiniz bir araç olarak kullanabilirsiniz.
        Bu sınıfa bir eklenti eklemek için iki yazılım kalıbı kullanılabilir.
        Bunlar; 

        									// A Kalıbı
									jQuery.fn.uyariVer = function(sMesaj)
									{
									  alert("Uyarı" + sMesaj);
									};
								
        									// B Kalıbı (Önerilen; çünkü bu şekilde diğer kütüphanelerdeki $ gibi ifadeler nedeniyle bir karışıklık olmaz.)
									(
										function($)
										{
											$.fn.uyariVer = function(sMesaj)
											{
											  alert("Uyarı" + sMesaj);
											};
										}
									)( jQuery );
        Daha fazla bilgi için docs.jquery.com/Plugins/Authoring'a bakınız.

    2. Kullanıcı arabirimleri (UI)

      Kullanıcı arabirimleri jQuery çekirdeği üzerinde etkileşimler ve css tanımlarını kullanan araçlardan oluşur.

      Etkileşimler

      • Taşınabilirlik (Draggable)
      • Aktarılabilirlik (Droppable)
      • Boyutlandırılabilirlik (Resizable)
      • Seçilebilirlik (Selectable)
      • Sıralanabilirlik (Sortable)

      Araçlar
      • Akordiyon gezinti (Accordion)
      • Otomatik tamamlama (Autocomplete)
      • Düğme (Button)
      • Kaydırma çubuğu (Slider)
      • Sekmeler (Tabs)
      • Tarih seçici (Datepicker)
      • İşlem bildirimi (Progressbar)

      Örnek kodlara jqueryui.com/demos'dan erişebilirsiniz.

    3. Eklentiler (Plugins)

       Dünyanın birçok yerinden jQuery kullanan kişiler plugins.jquery.com aracılığı ile henüz kararlı sürümde yayımlanmayan araçlarını buradan yayımlamaktalar.

      Gridlerden grafik gösterimlere, menü'lerden animasyonlara kadar değişik türde birçok eklentiyi buradan edinebilir, geliştirilmesine katkıda bulunabilirsiniz.

      filamentgroup.com bu alanda jQuery topluluğuna en çok katkıda bulunan yazılım gruplarından biridir.

      Soru : Peki biz olamaz mıyız?
      ...

  3. jQuery ile gelen yaklaşım ve farklılık

    1. Tasarım

      jQuery kullanıcı arabirimleri ile gelen özellikler sayesinde "daha az yazarak, daha çok" içerik sunulması sağlanabilmektedir.
      Temelde prototip kavramlı bu yaklaşım ile var olan tasarıma birkaç jQuery kodu yazılması ile kullanıcı deneyimini arttıran tasarımlar elde etmek mümkün olur.

    2. Mimari

      PHP ve ASP kodlarının kütüphanelerin oluşması ile html kodlarından ayrılması ve .NET gibi platformlarda CodeBehind kavramlarının gelmesi gibi jQuery'de istemci tarafında çalışan betiklerin DOM nesnesinden kısmen ayrılmasını sağlayabilmektedir.
      Bu ham html nesnelerin CSS ile şekillendirilmesinde olduğu gibi istemci kodlamayı tamamen ayrılmasına olanak sağlar.

    3. Örnekler

Hazırlayan
Engin MUTLU

Yararlanılan kaynaklar

  1. Herkesin katkıda bulunabildiği Özgür Ansiklopedi : wikipedia.org
  2. jQuery doküman merkezi : docs.jquery.com
  3. Yeni başlayanlar için plugin (İngilizce)
  4. Kod renklendirici için SyntaxHighlighter

Önerilen kaynaklar

  1. jQuery Türkçe eğitselleri