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
});
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!!");
});
});
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();
});
});
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>
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>
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");
});
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’);
});
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″]
İletişim bilgileriniz hiçbir şekilde 3. parti uygulama ile paylaşılmamaktadır.
Yetersiz bir belge olmuş ama senin suçun değil :)
Es geçmek istediğim argümanlar varsa ne yapacağım
Yanlış çevirmişsiniz.. Parametre olarak göndermek istediğim argümanlar şeklinde olmalı..
tsk ederim çok güzel anlatmıssınız :)