Eğer website tasarımı ile ilgileniyor veya ilgilenmek istiyorsanız, öğrenmeniz gereken teknolojilerden bir tanesi de JQuery'dir. JQuery, HTML ve CSS ile beraber temel web tasarım teknolojileri arasındaki yerini almıştır. Şu anki istatistiklere göre bütün web sitelerinin yaklaşık olarak yüzde 73'ünde JQuery kullanılmaktadır. (Kaynak). JQuery, kısaca Javascipt'in basit şeklidir. Bu yüzden öncelikle javascript hakkında bir kaç şeye değinmemiz gerekiyor.

İlk olarak bir karışıklık olmaması için Java ve Javascript'in farklı programlama dilleri olduğunu belirtelim. Javascript 1995'de Netscape firmasında çalışan Brendan Eich tarafından geliştirilen bir programlama dilidir. İlk geliştirildiğinde Mocha ismi verilmiş, sonraki yıllarda LiveScript ve son olarak da Sun firmasının etkisi ile Javascript adını almıştır. Javascript, AOL firmasının desteği ile Netscape firmasının ürettiği bir tarayıcı olan Netscape Navigator'de kullanılmaya başlanmıştır. Bir programala dili komutları ancak compiler (derleyici) denen bir yazılım ile çalıştırılabilir. İşte javascript komutlarının çalışması için gerekli olan bu derleyici, bir yazılım motoru kullanılarak Netscape Navigator ile bütünleşik hale getirilmiştir. Bu durum, Javascriptin popülerliğini artırmış ve diğer tarayıcıları da bu motorları kullanmaya yöneltmiştir. Günümüzde bütün güncel tarayıcıların bir javascript motoru bulunmaktadır (V8, Spidermonkey ,Chakra, Rhino kullanılan javascript motorlarından bazılarıdır ). Böylelikle javascript çok kısa sürede dünyada en fazla kullanılan programlama dillerinden biri haline gelmiştir.

Javascript her ne kadar güçlü bir dil olsa da kodlama açısından karmaşık bir yapısı vardır. Bu nedenle diğer dillere göre oldukça uzun komutlara sahiptir. Bu problem, bazı geliştiriciler tarafından farkedilerek javascripti kolaylaştıran çözümler sunulmuştur. Bu çözümlerin en başarılı ve yaygın olanı kütüphane sistemidir. Geliştiriciler farklı amaçlar için pek çok javascript kütüphanesi oluşturarak kodlamanın daha sade olmasını sağlamışlardır. İşte bu kütüphanelerden bir tanesi de JQuery'dir. JQuery, HTML blokları üzerinde anlık değişiklikler yapabilen javascript kütüphanelerinden biridir. Bu tür kütüphanelerin yanında grafik, kullanıcı arayüzü, web uygulamaları gibi pek çok farklı alanlarda kullanılan javascript kütüphaneleri vardır. Kütüphanelerin 4-5 grup altında toplanması sizi yanıltmasın, şu anda internette kullanıma hazır, binlerce javascript kütüphanesi bulunmaktadır. Sunucu oluşturmadan, oyun yapımına, animasyonlardan, efektlere, kullanıcı işlemlerinden, 3 boyutlu nesne tasarımına, kısacası web tasarımında ihtiyacınız olan herşey için javascript kütüphanelerinden yararlanabilirsiniz. Bu linkten (İngilizce site) popüler kütüphanelere göz atabilirsiniz.

Kütüphanelerin çalışma prensibini bir örnek vererek inceleyecek olursak, örneğin aşağıdaki javascript kodu, paragraf1 isimli kimliğe sahip katmanın yazı rengini mavi yapar. Gördüğünüz gibi bu basit kod bloğu hem uzun, hem de kodlama sırasında kolaylıkla yazım hatasına neden olacabilecek yapıdadır.

document.getElementById("paragraf1").style.color = "blue";

Şimdi teorik olarak kendi javascript kütüphanemizi yaratılım. Örneğin JQuery benzeri bir kütüphane oluşturmaya çalışsaydım bu örnek için şöyle bir kodlama yapardım.

_kimlik(paragraf1).renk = mavi

Elbetteki bu kod bloğunu bir HTML dosyasına eklersem, tarayıcı bu kodlamayı tanımayacak ve istediğim işlem olmayacaktır. Tarayıcının oluşturduğum kodları anlaması için öncelikle, kendime göre yazdığım kodların, javascript karşılıklarının ne olduğunu HTML dosyasına söylemem gerekir. Bunu da bir kütüphane dosyası oluşturarak yapabilirim. Kütüphane dosyama, tamamen kendi mantığıma göre belirlediğim kodların javascript olarak ne anlama geldiklerini kodladıktan sonra bu dosyayı HTML dosyasına ekleyebilirim. Böylece tarayıcı oluşturduğum kodlamayla karşılaştığında kütüphane dosyasının rehberliği ile bunları yorumlayabilir ve kodlarım javascripte dönüştürülerek çalıştırılır.

İşte JQuery'nin çalışma mantığı da tamamen bu şekildedir. JQuery'i geliştirenler basit kodlamalar üretmiş ve bunların javascript karşılıklarını bir kütüphane dosyasına eklemişlerdir. Bu yüzden kodların tarayıcı tarafından yorumlanıp çalıştırılması için hangi javascript kütüphanesini kullanırsak onun kütüphane dosyasını HTML dosyasına eklememiz gerekmektedir. Örneğin JQuery kütüphane dosyasını ya online olarak (Google gibi bazı websiteleri bu tür dosyaları internet üzerinden paylaşır), ya da Jquery.com sitesinden bilgisayarınıza indirdikten sonra HTML dosyanıza ekleyebilirsiniz.

JQuery dezavantajlarından konuşacak olursak, en büyük dezavantaj bütün javascript komutları için hazırlanmış JQuery kodlarının olmamasıdır. Yani JQuery ile Javascriptin yaptığı işin tamamını yapamazsınız. Çünkü hala bazı javascript komutlarının JQuery karşılığı yoktur. Örneğin tarih ile ilgili javascript kodlarına karşılık gelen bir JQuery kod sistemi bulunmamaktadır. Buna rağmen JQuery javascript kütüphaneleri içinde en fazla kullanılan kütüphanedir. Çünkü işleri oldukça kolaylaştırmaktadır. Karşılığı olmayan JQuery kodları yerine Javascript kodlama yapılır.

"Peki, JQuery javascripti kolaylaştırıyor ama neden JQuery kullanmam gerekir?" diyorsanız, hemen bir kaç şey söyleyeyim. Öncelikle JQuery ile anlık HTML değişimleri yapabilirsiniz. Aslında HTML değişimlerinde JQuery kadar başarılı başka bir teknoloji yok. Var olan teknolojilerdeki işlemler oldukça uzun veya JQuery kodlamasına göre oldukça karışık. Peki HTML değişimleri neden önemli? HTML değişimleri ile kullanıcının hareketlerine göre kendini düzenleyen web siteleri oluşturabilirsiniz. Yani JQuery sayesinde, websiteniz kullanıcı ile iletişime geçebilir. Web sitenizi ziyaret eden bir kullanıcının yaptığı çoğu işlem JQuery'de bir olayı (event) tetikler. Örneğin, web sitenizde yer alan bir elemana tıklandığında, üzerine gelindiğinde, çift tıklandığında, sayfa ilk açıldığında, klavyeden bir tuşa basıldığında, pencere boyutu değiştirildiğinde, elemanların ilk değerleri değiştiğinde vs. JQuery'de bir fonksiyon çalışır. İşte bu fonksiyonlara yazacağımız basit JQuery komutları ile kullanıcının hareketlerine göre, kullanıcıyı yönlendiren, bilgilendiren, hatalarını gösteren yapılar rahatlıkla oluşturulur. Bu da günümüz web sitelerinde olması gereken özelliklerdendir.

Son olarak javascript ve JQuery kodlama karşılaştırması yaparak makalemizi bitirelim

//Javascript
document.getElementById("paragraf1").style.color = "blue";
var $sinif = document.querySelector('.katman');
//JQuery
$("#paragraf1").css("color","blue");
var $sinif = $('.katman');