JQUERY NEDİR?

Web Programlama Teknolojileri

Teknolojilerin neredeyse günübirlik değiştiği ve geliştiği günümüzde yeni çalışmalar da etkisini göstermeye devam etmektedir. Aslına bakılırsa temel olarak aynı yapıda olan bilgisayar teknolojisi gün geçtikçe daha çok kullanıcı bazlı ilerleme göstermektedir.

0-1’lerden oluşan yapısıyla bizleri farklı dünyalara götüren bilgisayar teknolojisi çok farklı gelişmelerle karşımıza çıkmaktadır. İlk başlarda daha çok makine diliyle yapılan bilgisayar uygulamaları zaman geçtikçe daha çok ileri düzeyli yapılara dönüşmüştür. Bunda uygulama geliştirmenin hızlanmasının gerekliliği ve daha az hata yapma isteği de önemlidir.

Geçişin deneyimiyle birlikte geliştirmiş olan birçok uygulama geliştirme platformu vardır ve halen popüler bir şekilde kullanılmakta olan web programlama teknolojilerinden bazıları aşağıda maddeler halinde verilmektedir.

HTML5
Javascript
CSS3
JQuery
AJAX
Bootstrap
XML

Bu yazımızda JQuery nedir sorusuna cevap arayacağız. Web programlama teknolojilerinden olan jQuery ile animasyon ve hız konusundaki talepler karşılanmaktadır ve görünüşe göre hayli de başarılı bir görüntü ortaya çıkmıştır. Yazının ilerleyen aşamalarında detaylara ulaşabilirsiniz.

jQuery Nedir Nasıl Kullanılır?

JQuery, 2006 yılında geliştirilen açık kaynak bir Javascript kütüphanesidir. Farklı bir söylemle ifade edersek, bir Javascript framework’ü olduğunu belirtebiliriz. Yakın bir geçmişe sahip olmasına rağmen günümüzde oldukça popüler bir kullanıma kavuşan bu yapıyla birbirinden güzel foto galeriler, slayt geçişleri ve oldukça farklı görünümlere sahip menüler oluşturmak mümkündür.

jQuery nedir sorusu için bir başka cevap,

Hızlı
Küçük
Özellik bakımından zengin

Javascript kütüphanesidir. Ayrıca kolay kullanımlı API, çok daha basit HTML doküman geçişi, olay işleme, animasyon ve AJAX gibi teknolojiler kullanılabilir. jQuery milyonlarca insanın Javascript yazmasıyla, çok yönlü ve genişletilebilir bir kombinasyonla oldukça değişmiştir.

Bu aşamada AJAX nedir, CSS nedir gibi sorular aklımıza takılabilir. Fakat bu yazımızda yalnızca jQuery örnekleri üzerinden konu anlatımı yapmayı planladığımız için daha çok jQuery odaklı anlatım yapılacaktır.

jQuery nedir nasıl kullanılır sorusunun ikinci cevabını vermek için özellikle web uygulamaları geliştirenlerin alışkın olduğu yöntemlerden bahsetmek gerekecektir. Bunun için öncelikle jQuery kütüphanesinin kullanılacağını belirtelim. Hatırlanacağı gibi jQuery bir Javascript kütüphanesi olduğu için, sahip olduğu bileşenleri kullanabilmek için hazır kütüphane dosyalarını bilgisayarımıza indirmek gerekecektir.

jQuery Nasıl Kullanılır?

jQuery kullanımı için yapılabilecek iki yöntem bulunmaktadır. Bu yöntemlerden ilki için jQuery web sayfasından hazır kütüphanenin indirilmesi gerekmektedir. Kütüphane adı ve uzantısı ‘jquery.js’dir. İndirilen dosya çalışma dosyasına yüklenir ve kullanılacak olan web sayfasındaki ‘head’ tag’leri arasına aşağıdaki gibi eklenir:

<script src=”jquery.js”></script>

Burada bahsedilmesi gereken bir diğer nokta, indirilecek dosyanın iki halinin bulunduğudur. Bunlar,

Sıkıştırılmış

Sıkıştırılmamış

dosyalardır. Bunların farkı nedir diyecek olursanız, sıkıştırılmamış dosya üzerinde daha kolay değişiklik yapılabilen türdür. Bu sayede kendiniz de bir takım değişiklikler katabilirsiniz. Tavsiye edilen, eğer değişiklik yapma düşünceniz yoksa her zaman için sıkıştırılmış dosyayı kullanmanız yönünde olacaktır.

İkinci yöntem ise jQuery kütüphanesini indirmeye gerek kalmadan direk olarak CDN ( Content Delivery Network – İçerik Yayınlama Ağı) ile projeye dahil etmektir. İlgili kütüphaneyi projeye aşağıdaki komutu kullanarak ekleyebiliriz.

<script src=”//code.jquery.com/jquery-1.11.1.min.js”></script>

Bu işlemleri yaptıktan sonra artık jQuery hazırlayacağımız web sayfalarında kullanıma açılmış olacaktır. Artık jQuery’nin ilginç ve bir o kadar da mükemmel dünyasına giriş yapabilirsiniz.

jQuery Dersleri

Yazımıza jQuery’nin önemli bazı özelliklerinden bahsederek devam edelim. Bu özellikler basit kullanım, uyumluluk, eklentiler, efektler, AJAX, zincirlenebilirlik olarak sıralanabilir. Şimdi kısaca bu özellikleri açıklayalım.

Basit Kullanım: jQuery ile basit bir kullanım bizleri beklemektedir. Buna kısa bir örnek verecek olursak, örneğin class özniteliği ‘metin’ olan ‘ div’ etiketleri, $(‘div.metin’) komutu ile yakalanabilmektedir. Görüldüğü gibi oldukça kısa bir kod satırı ile geniş bir işlem yapılabilmektedir. Zaten jQuery’nin ana mantığı daha az yazarak daha fazlasını yapmaktır.

Uyumluluk: jQuery Şu anda popüler olarak kullanılan hemen bütün web tarayıcılarıyla uyumlu olarak çalışmaktadır. Aşağıda bulunan tarayıcı sürümleri dahil daha sonraki versiyonlarla da uyum gösteren jQuery oldukça ilgi çekicidir.

Internet Explorer 6.0+
Firefox 1.5+
Opera 9.0+
Safari 2.0+

Eklentiler: jQuery sahip olduğu eklentilerle web programcılarına büyük kolaylıklar sağlamaktadır. Bu eklentilerden bazıları ‘jqUploader, Tabs, jMP3’ olarak örnek verilebilir.

Efektler: jQuery yine eklentileriyle de öne çıkmaktadır. Bu efektler sayesinde oldukça hoş geçişlerle web sayfalarımıza hareketlilik gelmektedir. Böylece flash benzeri uygulamalarla kullanıcılara canlı ve ilgi çekici ara yüzler tasarlanabilmektedir.

Efektler temel, karartma, slayt ve özel olmak üzere 4 temel kategoride incelenmektedir. Bu efektlerle ilgili detaylara girilmeyecektir.

AJAX: Web programlama teknolojilerinden en önemlileri arasında AJAX gelmektedir. Bu yapı sayesinde bir sayfanın tamamı tekrar yüklenmeden sadece istenilen kısımların yüklenmesi sağlanmaktadır. Böylece oldukça hızlı ve pratik sayfalar ortaya konulabilmektedir.

Bu konuda birkaç noktadan bahsetmek gerekirse, klasik web sayfalarında her istek gönderme işlemi sırasında sayfanın tamamı sunuculardan tekrar yüklenmektedir. Bu da haliyle sayfalarda yavaşlama ve performans sorunlarına neden olmaktadır. AJAX teknolojisi ile ilgili sayfada, sayfanın tamamı yerine sadece istenilen alanla ilgili veriler tekrar yüklenmektedir.

Böylece son kullanıcıların yaşadıkları hız ve performans sorunları önemli düzeyde aşılmış olmaktadır.

Zincirlenebilirlik: Tahmin edileceği üzere bu özellik sayesinde jQuery’de yer alan metotlar birbiri ardına yazılıp işlem yapılabilmektedir. Bu özelliğe İngilizce olarak ‘ The Magic of jQuery’ denmektedir. Örnek olarak “$(‘a’).addClass(‘Sinif1’).click(metot);” verilebilir.

jQuery Mobile Nedir?

Konumuza biraz jQuery mobile nedir sorusuna cevap arayarak devam edelim. jQuery mobile, günümüzün bütün popüler mobil cihazlarında kullanımı bulunan ve özellikle dokunmatik ekranlar için geliştirilmiş bir framework olarak karşımıza çıkmaktadır.

jQuery mobile , altyapı olarak ‘jQuery’ ve ‘jQuery UI’ framework’lerini kullanır. Çok fazla detaya girmeden jQuery mobile’ın da jQuery gibi kolay bir kullanıma sahip olduğunu belirtelim, yine oluşturacağımız uygulamamıza link vererek ilgili kütüphaneleri kullanabilmemiz mümkündür.

Son olarak jQuery mobile kullanabilmek için 3 dosyaya ihtiyacımız olduğunu belirtelim. Bunlar jQuery.js, jQuery.mobile ve jQuery.Mobile.css. Bu ifadelerde ayrıca sayılar yer alır. Dosya adlarında belirtilen sayılar ilgili dosyanın versiyonu olarak ifade edilmektedir.

Bu kadar teorik bilgiden sonra bir örnek üzerinden anlatıma devam edersek sanırım konu biraz daha anlaşılır olacaktır.

jQuery Örnekleri

Günümüz web sayfalarında jQuery slider tarzı kullanımlar yaygın olarak kullanılmaktadır. Bu uygulamalarla güzel ve dikkat çekici efektler uygulanabilmektedir.

Yazımızda bahsedeceğimiz örnek konunun temelini baz alacak şekilde temel yöntemlerle yapılacaktır. Bu örneğimiz için oldukça basit yöntemler kullanacağız. Öncelikle çalışmanızı kaydedeceğiniz bir klasör açabilirsiniz. Ardından ‘Notepad’i açarak içerisine bildiğimiz HTML kodları yazacağız. Tabi ki ufak tefek farklar olmak kaydıyla.

İlk olarak HTML, head ve body tag’leri oluşturulur. Bu aşamayı bildiğiniz varsayılarak anlatılmayacaktır. Bu aşamaları bitirdikten sonra head tag’i içerisine aşağıdaki komutlar eklenir.

<style>

P{ color: “white” background: “gray” }

</style>

<script src=http://code.jquery.com/jquery-latest.js></script>

Dikkat ederseniz jQuery kütüphanesine yukarı bahsettiğimiz ikinci yöntem olan CDN ile eriştik. Şimdi kodlamaya devam edelim. Sıradaki komutları body tag’i arasında yazıyoruz.

<button>Gizli nesneyi göster</button>

<p style=”display: none”>Gizli nesne gösterildi</p>

<script>

$(“button”).click(function() {

$(“p”).show(“fast”);

});

</script>

Bu işlemler sonlanınca yapmamız gereken işlem ‘Notepad’i farklı kaydet diyerek ‘Kayıt Türü’nden ‘Tüm Dosyalar’ı seçmek ve dosya adını ‘DosyaAdi.html’ olarak değiştirmek olacaktır. Buradaki ‘DosyaAdi’ni istediğiniz bir şey yapabilirsiniz.

jQuery Eğitimi

Bu yazımızda web programlama konusunda bilgi ve deneyim sahibi çoğu kimsenin tereddüt etmeden kullandığı jQuery teknolojisinden bahsettik. jQuery nedir sorusuyla başladığımız yazımızı biraz teorik bilgiyle beraber bir örnekle bitirdik. Böylece bu yazı ilgili konuda bilgi sahibi olmak ve bu durumunu daha da ileri taşımak isteyenler için bir giriş kapısı olarak görülebilir.

Web programlama dünyasında etkin ve tercih edilebilir uygulamalar yapabilmek için artık jQuery kullanmak tartışılmaz bir öğe olarak karşımızda durmaktadır. Bundan dolayı daha fazla geç kalmadan bu eğlenceli ve kolay web programlama dünyasına girerek birbirinden güzel ve kullanıcı dostu web sayfaları tasarlamak kaçınılmazdır. Siz de jQuery eğitimi ile jQuery'e başlangıç yapın ve bilgi seviyenizi ileri seviyelere taşıyın.