JQuery Entegrasyonu ve Yazım Stilleri
Uzun bir süreden sonra JQuery derslerimize, daha doğrusu ilk dersimizden merhabalar olsun sizlere :)
Önceki JQuery tanıtım dersimizde JQuery hakkında bilgilerden,nerelerde neden kullanıldığına dair kısa bilgiler öğrenmiştik.Bugünkü makalemizde ise JQuery'nin kendine has yazım stillerini öğreneceğiz.
Jquery, Javascript tabanlı bir kütüphane olmasına karşın sanki yeni bir web diliymiş gibi birkaç farklı syntax şekline sahiptir ve her türlü yazımı yine aynı sonucu doğurmaktadır.
Peki,Jquery nasıl kullanılır?
JQuery kütüphanesini projeye dahil etmek için http://jquery.com/download adresinden son kararlı sürüm linkini bulmalısınız.Jquery kaynak kodları 2'ye ayrılmaktadır,bunlardan birincisi üretim(production) diğeri ise geliştirme(development) sürümleridir.Projenizde Jquery kaynak kodlarında değiştirme ve uyarlama yapmak istemiyor ve klasik biçimde Jquery kütüphanesi kullanmak istiyorsanız sıkıştırılmış sürüm olan üretim seçeneğini öneririm.
Hangi sürümü indireceğiniz konusunda karar verdiyseniz projenize eklemek için 2 seçeneğimiz daha var:
Birincisi, JQuery http linkini kopyalayıp doğrudan head etiketleri arasına yazmak,diğeri ise linklere sağ tıklayıp farklı kaydet ile indireceğin ".js" uzantılı dosyayı kullanmak.Genellikle web sayfanızın hızı ve işlerliği konusunda JQuery kaynak kodlarını http ile harici olarak vermek yerine ".js" uzantısıyla indirip projenize dahil etmenizi öneririm.
JQuery'yi sayfanıza dahil etmek için head etiketleri arasına
şeklinde harici kullanım ile ya da
ile yerel dosya olarak kullanabilirsiniz.
JQuery'yi projenize bu şekilde dahil ettikten sonra makalenin devamında anlattığım gibi hemen kullanabilirsiniz.
Jquery'yi etkin bir şekilde kullanabilmek için ise en az temel düzey Javascript bilmemiz gerekmektedir,bunun dışında ise Jquery nesne odaklı bir çalışma sistematiği barındırmaktadır ancak burada nesne tabanlıdan kastım nesne tabanlı programlama değildir.Nesne kısmı Jquery'nin dahil edildiği web sayfasının kendisi ve içeriğindeki DOM nesneleridir,dolayısıyla bir sonraki makalemizde DOM nesnelerini JQuery'de kullanabilmek adına "selector" (seçici) kavramını öğreneceğiz.
Şimdi ise Jquery nasıl yazılır görelim:
Öncelikle Jquery kodlarımızın yazıldığı alanın HTML belgesindeki head tagı olduğunu bilmeliyiz,ardından bilmemiz gereken kısım herhangi bir yere Jquery kodu yazmamız gerektiğinde dolar($) ya da "JQuery" deyimini yazarız.
Örneğin;
Jquery("seçici").Text(); metodu ile $("seçici").Text(); metotlarının işlevleri bire bir aynıdır ve her iki kullanımı seçmekte özgürsünüz.
Ardından bilmemiz gereken ikinci özellik, çok sık kullandığımız Javascript fonksiyonlarıyla ilgili..JQuery ile bir Javascript fonksiyonu oluşturmak için aşağıdakilerden herhangi birini kullanabilirsiniz:
1.Yol:
$(function(){
//kodlar
};
veya
JQuery(function(){
//kodlar
};
2.Yol:
(function($){
//kodlar
})(JQuery);
3.Yol:
$.fonksiyonAdi=function(){
//kodlar
});
4.Yol:
$.fonksiyonAdi={
altFonksiyon: function(){
//kodlar
},
altFonksiyon2: function(){
//kodlar
}};
şeklinde 4 farklı yazım şekli vardır.Uzun süredir JQuery kütüphanesi ile çalıştığım için en kolay yazım biçimi olarak 1.yolu
tavsiye ederim!
Jquery syntaxı ile ilgili olarak başlangıç için bu kadar yeterlidir diye düşünüyorum,bir sonraki makalemizde seçiciler konusunu öğrenip yeni bir HTML sayfası oluşturarak JQuery ile içeriğinde küçük ama önemli uygulamalar gerçekleştireceğiz.
Bir sonraki makalemizde görüşmek dileğiyle hoşçakalın :)
Önceki JQuery tanıtım dersimizde JQuery hakkında bilgilerden,nerelerde neden kullanıldığına dair kısa bilgiler öğrenmiştik.Bugünkü makalemizde ise JQuery'nin kendine has yazım stillerini öğreneceğiz.
Jquery, Javascript tabanlı bir kütüphane olmasına karşın sanki yeni bir web diliymiş gibi birkaç farklı syntax şekline sahiptir ve her türlü yazımı yine aynı sonucu doğurmaktadır.
Peki,Jquery nasıl kullanılır?
JQuery kütüphanesini projeye dahil etmek için http://jquery.com/download adresinden son kararlı sürüm linkini bulmalısınız.Jquery kaynak kodları 2'ye ayrılmaktadır,bunlardan birincisi üretim(production) diğeri ise geliştirme(development) sürümleridir.Projenizde Jquery kaynak kodlarında değiştirme ve uyarlama yapmak istemiyor ve klasik biçimde Jquery kütüphanesi kullanmak istiyorsanız sıkıştırılmış sürüm olan üretim seçeneğini öneririm.
Hangi sürümü indireceğiniz konusunda karar verdiyseniz projenize eklemek için 2 seçeneğimiz daha var:
Birincisi, JQuery http linkini kopyalayıp doğrudan head etiketleri arasına yazmak,diğeri ise linklere sağ tıklayıp farklı kaydet ile indireceğin ".js" uzantılı dosyayı kullanmak.Genellikle web sayfanızın hızı ve işlerliği konusunda JQuery kaynak kodlarını http ile harici olarak vermek yerine ".js" uzantısıyla indirip projenize dahil etmenizi öneririm.
JQuery'yi sayfanıza dahil etmek için head etiketleri arasına
şeklinde harici kullanım ile ya da
ile yerel dosya olarak kullanabilirsiniz.
JQuery'yi projenize bu şekilde dahil ettikten sonra makalenin devamında anlattığım gibi hemen kullanabilirsiniz.
Jquery'yi etkin bir şekilde kullanabilmek için ise en az temel düzey Javascript bilmemiz gerekmektedir,bunun dışında ise Jquery nesne odaklı bir çalışma sistematiği barındırmaktadır ancak burada nesne tabanlıdan kastım nesne tabanlı programlama değildir.Nesne kısmı Jquery'nin dahil edildiği web sayfasının kendisi ve içeriğindeki DOM nesneleridir,dolayısıyla bir sonraki makalemizde DOM nesnelerini JQuery'de kullanabilmek adına "selector" (seçici) kavramını öğreneceğiz.
Şimdi ise Jquery nasıl yazılır görelim:
Öncelikle Jquery kodlarımızın yazıldığı alanın HTML belgesindeki head tagı olduğunu bilmeliyiz,ardından bilmemiz gereken kısım herhangi bir yere Jquery kodu yazmamız gerektiğinde dolar($) ya da "JQuery" deyimini yazarız.
Örneğin;
Jquery("seçici").Text(); metodu ile $("seçici").Text(); metotlarının işlevleri bire bir aynıdır ve her iki kullanımı seçmekte özgürsünüz.
Ardından bilmemiz gereken ikinci özellik, çok sık kullandığımız Javascript fonksiyonlarıyla ilgili..JQuery ile bir Javascript fonksiyonu oluşturmak için aşağıdakilerden herhangi birini kullanabilirsiniz:
1.Yol:
$(function(){
//kodlar
};
veya
JQuery(function(){
//kodlar
};
2.Yol:
(function($){
//kodlar
})(JQuery);
3.Yol:
$.fonksiyonAdi=function(){
//kodlar
});
4.Yol:
$.fonksiyonAdi={
altFonksiyon: function(){
//kodlar
},
altFonksiyon2: function(){
//kodlar
}};
şeklinde 4 farklı yazım şekli vardır.Uzun süredir JQuery kütüphanesi ile çalıştığım için en kolay yazım biçimi olarak 1.yolu
tavsiye ederim!
Jquery syntaxı ile ilgili olarak başlangıç için bu kadar yeterlidir diye düşünüyorum,bir sonraki makalemizde seçiciler konusunu öğrenip yeni bir HTML sayfası oluşturarak JQuery ile içeriğinde küçük ama önemli uygulamalar gerçekleştireceğiz.
Bir sonraki makalemizde görüşmek dileğiyle hoşçakalın :)