Sayın Yazılımcı, ‘Neden Jquery?’

Jquery, javascript ile geliştirilmiş bir frameworktür.  Sayfanın tümünü yeniden yüklemeden veri alışverişi yapabiliyor olması en büyük avantajıdır. Birçok framework gibi jquery de daha az kodlama ile daha çok iş yapmamızı sağlar. Zaten resmi sitelerinin ana sayfasında  ‘jQuery: The Write Less, Do More, JavaScript Library’ ibaresi yer almaktadır.

Jquery web sitesi dünyasına girdikten sonra, karmaşık yapısı nedeniyle uygulanmakta güçlük çekilen bir çok javascript uygulaması kullanılmaya başlanmış ve böylece daha interaktif web siteleri oluşmaya başlamıştır.

Jquery’nin sayfanın tümünü yüklemeden server side çalışabilen kısmının çalışma mantığıyla çalışan kütüphanelerin genel ismine AJAX denilmektedir ki AJAX facebook gibi büyük yapılara sahip siteler için kurtarıcı pozisyondadır. Sayfanın tamamını yüklemeden sadece itenilen bölümü yükleyerek ciddi bir zaman ve data tasarrufu sağlamakta ve kullanının sayfa yüklenmesi için beklediği zamanı azaltarak kullanıcı memnuniyetini arttırmaktadır. Google, Dell gibi dev markalarda Jquery kullanmaktadır.

Jquery kullanmak için DOM mantığına sahip olmak gerekir. DOM ile ilgili yazımı okumak için buraya tıklayabilirsiniz.

Jquery kütüphanesi sadece sayfa yüklenme sonrasında veri alışverişi değil, daha bir çok görsel amaç içinde kullanılabilir.

Sayfa içerisinde Jquery kullanabilmek için tarayıcının Javascript desteğinin açık, aynı zamanda sayfada Jquery kütüphanesinin yüklenmiş olması gerekir.

Jquery web sitesinden aldığım aşağıdaki örnek :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <title>jQuery demo</title>
 </head>
 <body>
   <a href="http://jquery.com/">jQuery</a>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
   <script>
     $(document).ready(function(){
       $("a").click(function(event){
         alert("Bir linke tıkladınız");
         event.preventDefault();
       });
     });
   </script>
 </body>
 </html>
1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

satırı Jquery kütüphanesini yüklediğimiz satır.

1
$(document).ready(function(){

satırı sayfanın tamamen yüklendikten sonra kodun tetiklenmesini sağlar.

1
$("a").click(function(event){

satırı ise sayfada herhangi bir link elamının  click eventine atanacak fonksiyondur.

1
alert("Bir linke tıkladınız");

satırı ile sayfadaki herhangi bir elemana tıklandığında ‘Bir linke tıkladınız uyarısı alacaksınız.’

1
event.preventDefault();

satırı ile event’in default hareketi tetiklenmez. Örneğin bu olayda linkin normalde jquery sayfasını açması beklenir. Yukardaki satır sayesinde bu işlem durdurulur.

Jquery ile ilgili bu giriş yazısını Jquery sorunları ve çözümleri ile ilgili yazılarla devam ettireceğim.

Jquery resmi sitesi için: www.jquery.com

Bir Cevap Yazın

Your email will not be published. Name and Email fields are required.

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>