jQuery Nasıl Çalışır?

jQuery Dersleri

jQuery kullanabilmek için ihtiyacınız olan temel bilgileri içeren, John Resig tarafından yazılan How jQuery Works başlıklı eğitseli sizler için çevirmeye çalıştım. Umarım faydalı olur.

Yazar: John Resig, Çeviri: Mehmet Tahta, Sponsor: Hosting, Kaynak: jQuery Nasıl Çalışır?

Konu Başlıklarını Gizle

1. jQuery: Temel Öğeler

2. Sayfa Yüklendiğinde Kodu Çalıştırmak

3. Komple Örnek

4. HTML Class Ekleme ve Silme

5. Özel Efektler

6. Callback ve Fonksiyonlar

6.1 Argümansız Callback

6.2 Argümanlı Callback

6.2.1 Yanlış

6.2.2 Doğru

jQuery: Temel Öğeler

Bu temel bir eğitseldir, jQuery kullanmaya başlamanıza yardımcı olmak için hazırlanmıştır. Eğer henüz bir test sayfası oluşturmadıysanız aşağıdaki içeriğe sahip yeni bir HTML sayfası oluşturun:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
  </head>
  <body>
    <a href="http://www.alastyr.com/">Alastyr</a>
    <script src="jquery.js"></script>
    <script>

    </script>
  </body>
</html>

src özniteliğini düzenleyerek jquery.js dosyanızın yolunu girin. Örneğin, eğer jquery.js dosyanız oluşturduğunuz HTML dosyası ile aynı dizindeyse aşağıdaki kodu kullanabilirsiniz:


<script type="text/javascript" src="jquery.js"></script>

Kendi jQuery kopyanızı jQuery web sitesinden indirebilirsiniz.

Sayfa Yüklendiğinde Kodu Çalıştırmak

Çoğu Javascript programcısının yaptığı ilk şey aşağıdakine benzer bir kodu programına eklemektir:

window.onload = function(){ alert("hosgeldiniz"); } 

Bu kod sayfa yüklendiğinde hangi kodu çalıştıracağını gösterir. Problem ise Javascript kodunun bütün imajların (Banner vs.)  indirilmesi tamamlanmadan çalışmamasıdır. Kodunuzu ilk defa çalıştırmayı denediğinizde ilk olarak window.onload kullanılmasının sebebi ise HTML dosyasının henüz yüklenmeyi tamamlamamasıdır.

Bu iki problemi aşmak için ise jQuery basit bir komuta sahip, bu komutla document statüsü kontrol ediliyor, kod dosya kullanılmaya uygun olana kadar bekliyor, bu ayrıca ready event olarak da biliniyor.


$(document).ready(function(){
 // Kodunuz buraya
 });

Ready event içerisine click handler ekliyoruz:


$(document).ready(function(){
 $("a").click(function(event){
 alert("Ziyaret ettiğiniz için teşekkürler!!");
 });
 });

Hazırlamış olduğunuz HTML sayfasını kaydedin ve tarayıcınızda açın. Sayfadaki bağlantıya tıkladığınızda tarayıcınız Alastyr’a yönlenmeden evvel pop-up olarak bu uyarı mesajı çıkacak.

Click ve çoğu event‘de olduğu gibi event.preventDefault() ile öntanımlı davranışı engelleyen bir handler ekleyebilirsiniz.


$(document).ready(function(){
 $("a").click(function(event){
 alert("Gördüğünüz gibi bağlantı artık sizi Alastyr.com'a yönlendirmiyor. ");
 event.preventDefault();
 });
 });

Komple Örnek

Komple HTML dosyasının nasıl olacağına dair bir örnek aşağıda verildi. Lütfen Google CDN‘e giden bağlantıların jQuery core dosyasını yüklediğine dikkat edin.


<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <title>jQuery demo</title>
 </head>
 <body>
 <a href="http://www.alastyr.com/">Alastyr</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("Gördüğünüz gibi bağlantı sizi artık Alastyr.com'a yönlendirmiyor.");
 event.preventDefault();
 });
 });
 </script>
 </body>
 </html>

HTML Class Ekleme ve Silme

Önemli: jQuery örneklerimizin geri kalanı yukarıda belirtilen ready eventi içerisine eklenecektir. İsterseniz tekrar Sayfa Yüklendiğinde Kodu Çalıştırmak bölümüne göz atabilirsiniz.

Bir diğer yaygın iş ise class ekleyip silme işlemidir.

İlk olarak dosyanızın <head> bölümüne biraz stil ekleyin, aşağıdaki gibi:


<style>
 a.test { font-weight: bold; }
 </style>

Daha sonra, addClass ekleyerek scriptinize çağırın:


$("a").addClass("test");

Artık bütün a elementleriniz kalın gözükecek. class silmek için ise removeClass kullanabilirsiniz.


$("a").removeClass("test");

(HTML elementlere birden fazla class eklemenize olanak sağlıyor.)

Özel Efektler

jQuery işinize yarayabilecek birkaç tane yararlı efekte olanak sağlıyor. Test etmek için daha önce eklemiş olduğunuz click’de aşağıdaki değişikliği yapın:


$("a").click(function(event){
 event.preventDefault();
 $(this).hide("slow");
 });

Artık, herhangi bir bağlantıya tıkladığınızda bağlantı kendisini yavaşça görünmez hale getirecek.

Callback ve Fonksiyonlar

Callback, fonksiyona gönderilen argüman adını fonksiyon olarak çalıştırmaya olanak tanır.

Argümansız Callback

Argümansız callback için aşağıdaki gibi kullanıyorsunuz:


$.get('mehmettahta.html', ornekCallBack);

Dikkat ederseniz burada ikinci parametre fonksiyon adıdır. (String gibi değil, parantezsiz.)

Argümanlı Callback

Es geçmek istediğim argümanlar varsa ne yapacağım?” diye kendinize soruyor olabilirsiniz.

Yanlış

Yanlış yol (bu şekilde yaparsanız çalışmayacaktır!)


$.get('mehmettahta.html', ornekCallBack('foo', 'bar'));

Çünkü bu aşağıdakini çağırıyor:


ornekCallBack('foo', 'bar')

ve geri dönen değeri ikinci parametre olarak $.get()  ‘e atıyor.

Doğru

Aşağıdaki kullanımda, anonim bir fonksiyon oluşturuluyor (sadece bir ifade bloğu) ve callback fonksiyonu olarak kaydediliyor. function(){ kullanımına dikkat edin, bu anonim fonksiyon sadece bir şeyi yapıyor: foo ve bar değerleriyle birlikte ornekCallBack ‘i çağırıyor.


$.get('mehmettahta.html', function(){
 ornekCallBack('foo', 'bar');
 });

ornekCallBack burada  $.get sayfayı getirmeyi tamamladığında çağırıyor.

Elimden geldiğince bozmadan çevirmeye çalıştım, yazı hakkındaki fikir ve önerilerinizi yorum olarak ekleyebilirsiniz, yazıyı beğendiyseniz sol taraftaki ikonları kullanarak paylaşabilirsiniz.

Özellikle değinmemi istediğiniz bir konu olursa lütfen belirtin, gerekli araştırmaları yapıp faydalı bir yazı hazırlamaya çalışabilirim.

, , ,

  • Yetersiz bir belge olmuş ama senin suçun değil :)

  • Alpaslan

    Es geçmek istediğim argümanlar varsa ne yapacağım

    Yanlış çevirmişsiniz.. Parametre olarak göndermek istediğim argümanlar şeklinde olmalı..

  • memduh

    tsk ederim çok güzel anlatmıssınız :)

Powered by WordPress. Designed by WooThemes

%d blogcu bunu beğendi: