Ana sayfa » Programlama » JavaScript » jQuery Nasıl Çalışır?
JavaScript Programlama

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.

[box type=”note”]

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

[/box] [toggle title_open=”Konu Başlıklarını Gizle” title_closed=”Konu Başlıklarını Göster” hide=”no” border=”yes” style=”default” excerpt_length=”0″ read_more_text=”Read More” read_less_text=”Read Less” include_excerpt_html=”yes”]

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

[/toggle]

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:

[code lang=”xhtml”] <!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>
[/code]

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:

[code lang=”xhtml”]

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

[/code]

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:

[code lang=”js”]window.onload = function(){ alert("hosgeldiniz"); } [/code]

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.

[code lang=”js”]

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

[/code]

Ready event içerisine click handler ekliyoruz:

[code lang=”js”]

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

[/code]

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.

[code lang=”js”]

$(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();
});
});

[/code]

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.

[code lang=”xhtml”]

<!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>

[/code]

HTML Class Ekleme ve Silme

[box type=”note”]Ö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. [/box]

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:

[code lang=”css”]

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

[/code]

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

[code lang=”js”]

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

[/code]

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

[code lang=”js”]

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

[/code]

(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:

[code lang=”js”]

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

[/code]

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:

[code lang=”js”]

$.get(‘mehmettahta.html’, ornekCallBack);

[/code]

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!)

[code lang=”js”]

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

[/code]

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

[code lang=”js”]

ornekCallBack(‘foo’, ‘bar’)

[/code]

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.

[code lang=”js”]

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

[/code]

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

[hr]

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.

[related_posts limit=”5″]

Yazar hakkında

Mehmet Tahta

Egenin gözbebeği İzmir'de yaşıyor, Dokuz Eylül Üniversitesi Yönetim Bilişim Sistemleri yüksek lisans öğrencisi. DMOZ, GNU, WordPress, jQuery ve Ubuntu projelerine katkıda bulunur; ayda yılda bir de bu blog sayfasını günceller.

3 Yorum

Yorum eklemek ister misiniz?

Yazılar E-posta Adresinize Gelsin

Abone olmak için aşağıdaki forma e-posta adresinizi yazıp gönderilen onay e-postasını onaylamanız yeterlidir.

İletişim bilgileriniz hiçbir şekilde 3. parti uygulama ile paylaşılmamaktadır.