- Katılım
- 30 Aralık 2010
- Mesajlar
- 256
- Reaction score
- 3
İlk dersimiz de şu kodları 2 ye ayırıp tek tek anlatacağımı söylemiştim.
2. derste ilk kısmını anlattım. şimdi sıra geldi ikinci kısma.
jQuery de herşey nesneler için. yani nesne yoksa işlevde yok. o yüzden önce seçiciler dersimizdeki gibi nesnemizi seçiyoruz. ama bu nesnenin tek başına bi anlamı yok. yani işlev yoksa nesne de yok.
Nesnemizi seçtik. şimdi bunun üzerinde işlevlerimizi kullanarak bu nesneye birşeyler yaptıralım.
Örneğin daha önceden <body> taglarımız arasında yazdığımız ahmet id li div imizin içine yazı yazdıralım.
Yazı yazdırmak için kullanıcağımız işlev .html('') bunu Javascript teki .innerHTML = ''; gibi düşünebilirsiniz. Şimdi diyebilirsiniz ki jQuery sadece Javascript in kısa hali mi diye. Ama öyle değil. Birazdan jQuery nin kendine özgü yüzlerce işlevini görünce işin rengi değişecek
Burda önce ahmet id li nesneyi seçtik. daha sonra nokta mızı koyduk ve html() diyerek hangi işlevi gerçekleştireceğimizi söyledik. Parametre olayına gelelim html() fonksiyonu ne işe yarıyo ? içine yazı yazdırmaya. tamam yazı yazdırmaya da ne yazdırmaya ? işte fonksiyonların kullandığı yardımcı öğelere parametre diyoruz. parametreler olmasaydı a yazdırmak için htmla() htmlb() gibi sonsuz tane fonksiyon olması gerekirdi her bi yazdırılabilecek kelime için. Ama bu işlevi tıpkı diğer dillerdeki function abc( parametre ){ return islev( parametre ); } gibi düşünebiliriz. bi de bunlar birden fazla olabiliyo. öyle bişe olursa virgülle ayırıyoruz parametre1, parametre2 gibi.
Şimdi biz bu kodu yazdık kaydettik biri geldi sitemizi açtı ve bu kod çalışacak. sırasıyla işleyiş şu şekilde: önce hangi nesne yapacağını görüyo. sonra bu nesne üzerinde hangi işlev i yapacağını. sonra bu işlevin kullanacağı yardımcı öğeyi.
Şimdi gelelim jQuery nin diğer dillerden farklı bi yapısına; Mesela .ready() işlevini görelim. bu işlev normal de kelime anlamına da bakarsan önünde belirttiğin nesneyi hazırlamakla görevli. mesela siteyi hazırlamasını söyleyelim;
Burda document dediğimiz içine yazı yazdığınız dosya. Biz bu kodla dedik dosyayı hazırla diye. jQuery bize diyo ki yapılacak( gelecek zaman ) bi işlevi bu şekilde söyle. ama eğer o işlem yapılmış( geçmiş zaman ) bitmişse araya bi function(){} koy öyle söyle. yani farkı kodlarla görelim;
Bunu başka bi örnekle görelim, bu örnek jQuery ile birlikte en fazla kullanacağınız kodlardan birisidir;
Bu durum çok önemli olduğu için bi örnekle daha görmek istiyorum arkadaşlar. Şimdi mesela bi içine yazı yazılabilir input umuz olsun. birinci işlevde biz istiyoruz ki GoogLe anasayfası gibi siteye giren o yazı kutusuna yazı yazılabilir hale gelsin direk. ikinci işlevde ise eğer bu yazı kutusuna yazı yazılabilir hale gelirse ne yapacağını söylicez;
Bu şekilde bir çok basit düzeyde jQuery nin işlevleri var;
Tüm bunları parantez içlerine function(){ islem(); } koyarak o işlem olduğu anda ne yapacağını söyleyebilirsiniz.
Bu dersimizde işlevlere giriş yapmış olalım.
Bi dahaki dersimizde de işlevler imiz i geliştirerek ilerliyeceğiz.
HTML:
$('#ahmet').html('Yazılacak yazı');jQuery de herşey nesneler için. yani nesne yoksa işlevde yok. o yüzden önce seçiciler dersimizdeki gibi nesnemizi seçiyoruz. ama bu nesnenin tek başına bi anlamı yok. yani işlev yoksa nesne de yok.
Nesnemizi seçtik. şimdi bunun üzerinde işlevlerimizi kullanarak bu nesneye birşeyler yaptıralım.
Örneğin daha önceden <body> taglarımız arasında yazdığımız ahmet id li div imizin içine yazı yazdıralım.
Yazı yazdırmak için kullanıcağımız işlev .html('') bunu Javascript teki .innerHTML = ''; gibi düşünebilirsiniz. Şimdi diyebilirsiniz ki jQuery sadece Javascript in kısa hali mi diye. Ama öyle değil. Birazdan jQuery nin kendine özgü yüzlerce işlevini görünce işin rengi değişecek
HTML:
var parametre = 'Yazdırılacak yazı';
$('#ahmet').html( parametre );Şimdi biz bu kodu yazdık kaydettik biri geldi sitemizi açtı ve bu kod çalışacak. sırasıyla işleyiş şu şekilde: önce hangi nesne yapacağını görüyo. sonra bu nesne üzerinde hangi işlev i yapacağını. sonra bu işlevin kullanacağı yardımcı öğeyi.
Şimdi gelelim jQuery nin diğer dillerden farklı bi yapısına; Mesela .ready() işlevini görelim. bu işlev normal de kelime anlamına da bakarsan önünde belirttiğin nesneyi hazırlamakla görevli. mesela siteyi hazırlamasını söyleyelim;
HTML:
$(document).ready();
HTML:
$(document).ready();
// Anlamı: dosyayı hazırla.
$(document).ready(function(){
$(nesne).islev( parametre );
});
// Anlamı: dosya hazırsa nesne ye islev yap. yaparkende parametre yi kullan.
HTML:
<input type="submit" id="ahmet" value="Gönder" />
$('input#ahmet').click();
// Anlamı: ahmet id li input nesnesine tıkla. tıklayınca ne olması gerekiyosa olsun( şuan umrumuzda değil )
//mesela bu bi <form></form> içindeyse o form u harekete geçirir, gibi.
$('input#ahmet').click(function(){
alert('Butona tıklandı.');
});
// Anlamı: Eğer ahmet id li input a ( buton a ) tıklanırsa Butona tıklandı diye uyarı mesajı ver.
// yani önce bizim istediğimizi bi yap. sonra yine nabıyosan yap.
$('input#ahmet').click(function(){
alert('Butona tıklandı. Form işlemiyecek. Burda duracak kod.');
return false;
});
// Anlamı: Aynı bi önceki ama bizim istediğimizi yaptıktan sonra başka işlem yapmıyacak.
HTML:
<input type="text" id="ahmet" value="Buraya kullanıcı adınızı yazın" />
$('input#ahmet').focus();
// Anlamı: ahmet id li input nesnesini yazı yazılabilir hale getir yani içine mouse la tıkla gibi bişey.
$('input#ahmet').focus(function(){
alert('Yazı alanındasınız. Artık istediğinizi yazabilirsiniz.');
});
// Anlamı: Eğer ahmet id li input a ( yazı kutusu na ) tıklanırsa uyarı mesajı ver
HTML:
click(): tıkla
dblclick(): çift tıkla
mouseover(): mouse ile üzerine gel
mouseout(): mouse üzerindeyse çık
focus(): yazı kutusunun içine tıkla yazılabilir hale gel veya bi checkbox la
ilgileniyosan klavyeden boşluğa tıklandığında onu işaretlicek gibi üzerine gel
blur(): focus un zıttı. eğer bi yazı kutusu yazılabilir haldeyse geri bırak
change(): değerini değiştir
submit(): formu onayla ve gönder
keydown(): klavyeden bi tuşa bas
keyup(): klavyeden bi tuşa basmışsan geri bırakBu dersimizde işlevlere giriş yapmış olalım.
Bi dahaki dersimizde de işlevler imiz i geliştirerek ilerliyeceğiz.