JQuery Dersleri - 1

  • 12.01.2016
  • M.Tayyip Yetiş
  • JQuery

Merhaba, bu makale ile uzun bir JQuery dersler serisini başlatmış bulunuyorum. Bu seri boyunca bildiğim kadarıyla JQuery''nin tüm yönlerini anlatmaya çalışacağım. Önce teorik olarak açıklamak gerekirse; JQuery, John Resig tarfından 2006 yılında geliştirilmiş açık kaynak kodlu istemci(client) taraflı bir javascript kütüphanesidir. Javascript ise 1995 yılında Brendan Eich tarafından C dilinden esinlenerek ilk adı Mocha daha sonra Livescript en sonunda Javascript olarak değiştirilen istemci(client) tarafında yorumlanan bir programlama dilidir.

Javascript, web sayfalarını dinamik hale getirip kullanıcılar ile etkileşim kurabilmek amacıyla geliştirilmiştir. ve bugün Flash kullanımına oranla oldukça yaygın olması da bu amacını fazlasıyla yerine getirdiğini göstermektedir. Javascript adının benzerliği dolayısıyla Java programlama diline benzetilmektedir oysa ki Java ile hiçbir ilgisi yoktur. üreticileri, kullanım alanları ve sözdizimleri(syntax) birbirinden faklıdır. Javascript''in bir diğer avantajı ise server üzerindeki yükü azaltmak ve web sayfalarının yüklenme hızını artırıp gereksiz data trafiğini önlemektedir. javascript teknolojisi ve XML birleşimi ile geliştirilen AJAX (Asynchronous JavaScript And XML) ile sayfa yenilenmesi olmadan istemci ile sunucu arasında programatik işlemler yapılıp veritabanlarından çekilen bilgiler aktarılabilmektedir. AJAX sayesinde ASP.Net teknolojisinin hantal ve yavaş yapısından kurtulup kullanıcı ile anlık etkileşim içinde olan daha hızlı web uygulamaları geliştirebilirsiniz. Buradaki derste AJAX ile veritabanı uygulaması geliştirme örneği verilmiştir fikir sahibi olmak için inceleyebilirsiniz

JQuery ise javaşcipt dilinin bir derlemesi olarak tanımlanabilir. bir nevi kısaltması da denilebilir. Javascript kullanarak yaptığınız bir uygulamayı JQuery ile çok daha az satır ve programlama algorıtması kullanılarak yazabilirsiniz. bu kadar teorik bilgi verdikten sonra yavaş yavaş ilk uygulamalarımıza geçebiliriz. ilk önce JQuery sözdiziminden başlayalım

$(seçilen nesne).fonksiyon() bu kalıp jquery''nin belkemiğidir. diğer dillerin aksine jquery genelde yandaki gibi belli kalıpta yazılır. bu sebeple anlaşılması daha kolaydır. bilinmesi gereken bir diğer önemli kavram ise "seçiciler" kavramıdır. CSS''de olduğu gibi nesne ya da nesnelerin üzerinde işlem yapabilmek için onları belirli işaretlerle seçmek gerekir.seçiciler, basit, hiyerarşik,form vs. olarak gruplara ayrılır. biz bu derste temel seçicilere değineceğiz.

  • $("div") tüm div etiketlerini seçer
  • $("#deneme") id özelliği deneme olan tüm nesneleri seçer
  • $("#deneme p") id özelliği deneme olan tüm p nesneleri seçer
  • $(".örnek") class özelliği örnek olan tüm nesneleri seçer
  • $("div.örnek") div içindeki class değeri örnek olan tüm nesneleri seçer
  • $("img, p, div") img p ve div etiketleri olan tüm nesneleri seçer
  • $("div:first-child") bulunduğu hiyerarşide ilk sıradaki div etiketli elementi seçer
  • $("div:last-child") bulunduğu hiyerarşide son sıradaki div etiketli elementi seçer
  • $("*") bulunduğu hiyerarşideki tüm nesneleri seçer

JQuery''de seçicileri öğrendikten sonra tüm masaüstü ve web programlama dillerinde olduğu gibi event''ları öğreneceğiz. JQuery''de bazı temel olaylar şu şekilde;

  • Click() fonksiyonu &nbsp&nbsp&nbsp bir nesne üzerinde tıklama gerçekleştiğinde tetiklenir
  • Dblçlick() fonksiyonu &nbsp&nbsp&nbsp bir nesne üzerinde çift tıklama gerçekleştiğinde tetiklenir
  • Hover() fonksiyonu &nbsp&nbsp&nbsp imleci bir nesne üzerine getirdiğinizde tetiklenir.
  • Mousedown() fonksiyonu &nbsp&nbsp&nbsp mouse sol tuşu tıklama konumundayken yapılacakları belirtir.
  • Mouseleave() fonksiyonu &nbsp&nbsp&nbsp mouse bir elementin sınırlarından çıktığında tetiklenir
  • Moüsemove() fonksiyonu &nbsp&nbsp&nbsp mouse bir elementin üzerinde gezindiğinde tetiklenir
  • Mouseenter() fonksiyonu &nbsp&nbsp&nbsp mouse bir elementin üzerinde gezindiğinde bir kez tetiklenir
  • Moüşemup() fonksiyonu &nbsp&nbsp&nbsp mouse sol tuşu bir elementin üzerinden kalktığında tetiklenir
  • Keyup() fonksiyonu &nbsp&nbsp&nbsp bir tuşa basılı iken bırakıldığında tetiklenir
  • Keydown() fonksiyonu &nbsp&nbsp&nbsp bir tuşa basılı iken tetiklenir
  • Keypress() fonksiyonu &nbsp&nbsp&nbsp bir input içine ya da focus olan bir nesne üzerinde bir tuşa basıldığında tetiklenir

şimdilik bu kadar olay fonksiyonu temel uygulamalar geliştirebilmek için yeterlidir ileriki derslerde daha fazla seçici ve olay(event) öğreneceğiz. sanırım bugünkü ders ile JQuery konusunda temel bilgileri edinmişsinizdir. yine de aklınıza takılan bir konu olursa İletişim sayfasından bana ulaşabilirsiniz

Herkese faydalı olması dileğiyle

Mustafa Tayyip YETİŞ
Yazılım Geliştirme Uzmanı

Yorum Yap

Diğer Makaleler

Etiketler