JQuery Öğrenimi

JQuery'ye başlamak sizin HTML, CSS ve JavaScript bilginize göre çok kolay ya da biraz zorlayıcı olabilir.

JQuery hakkında önemli şeylerden biri sadece bir JavaScript kütüphanesi olmasıdır. Bu yüzden JQuery kodlarınızı etkili yazmanız için JavaScript bilginiz oldukça yararlı olacaktır. JavaScript hakkında bilginizi arttırmak isterseniz size Mozilla JavaScript Temelleri sayfasını öneririz.

JQuery Nasıl Çalışır?

Bu bölümde JQuery kütüphanesini nasıl kullanacağınızı anlatacağız. Eğer şimdiye kadar bir test sayfası yapmadıysanız , bir klasör seçip içinde test.html adında bir dosya ekleyin ve dosya içine şu kodları girin.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo</title>
    </head>
    <body>
        <a href="http://jquery.com/">jQuery</a>
        <script src="jquery.js"></script>
        <script>
    
        // Kodunuz buraya gelecek.
    
        </script>
    </body>
</html>

Size kodlama için VSCode uygulamasını kullanmanızı şiddetle tavsiye ederim. Live Server eklentisi ile birlikte kullanırsanız, sayfanızın kodu üzerinde bir yere sağ tıklayıp Open With Live Server seçince, tarayıcınızda sayfanızın bir server'da yayınlanınca nasıl görüneceğini direk test edebilirsiniz.

Gelelim yukarıdaki test sayfası kodumuzun açıklamasına. <script> elemanının src özelliği sayfanızla aynı klasöre bir kopyasını indirdiğiniz jquery.js dosyasını sayfaya dahil ediyor. Bu dosyayı indirmek için JQuery Download sayfasına gidin ve en son sürümün sıkıştırılmış versiyonunu test klasörünüze jquery.js adıyla indirin.

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

Birçok JavaScript kodunda , kodun sayfa yüklenmesi tamamen bittiğinde çalışması için onload() fonksiyonu içine konması tercih edilir.

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

Malesef bu kod sayfadaki tüm resimler dahil yüklenmeden çalışmayacaktır. Ama bizim kodumuz HTML elemanları yüklenip manipüle edilmeye hazır hale geldiğinde çalışabilir. Kodun elemanlar manipüle edilmeye hazır olduğu anda çalışması için JQuery .ready() adlı fonksiyona sahiptir.

$( document ).ready(function() {
 
    // Kodunuzu buraya yazın.
 
});

Not : Jquery kütüphanesi metodlarını ve özelliklerini window nesnesinin iki nesnesine bağlı yayınlar, bunlar jQuery ve $ nesneleri. $ aslında jQuery nesnesinin takma adlı hali, daha kısa olduğu için genelde tercih edilir.

Örneğin ready olayı içinde bir link elemanına tıklanınca olacakları şöyle bir olay işleyici (handler) fonksiyon içinde kodlayabilirsiniz.

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

Yukarıdaki kodu test.html dosyanıza eklerseniz şöyle bir şey olur:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JQuery Öğrenimi</title>
        <script src="jquery.js"></script>
        <script>
            $( document ).ready(function() {
                $( "a" ).click(function( event ) {
                    alert( "Ziyaretiniz için teşekkürler!" );
                });
            });
        </script>
    </head>
    <body>
        <a href="http://jquery.com/">jQuery</a>

    </body>
</html>

Daha düzenli olsun diye <script> elemanını <head> kısmına taşıdım. Burada sayfadaki linke tıkladığınızda bir alarm popup açılarak size teşekkür mesajı verir ve aynı anda http://jquery.com/ adresine gider.

Eğer sadece bizim istediğimiz işi yapsın ve link'in hedefine gitmesin istiyorsak link'in default eylemini engellememiz gerekir. Bu amaçla event.preventDefault() metodu kullanılır. Şöyle ki:

$( document ).ready(function() {
   $( "a" ).click(function( event ) {
      alert( "Gördüğünüz gibi artık link sayfası açılmıyor" );
      event.preventDefault();
   });
});

Tüm Örnek Kodu

test.html dosyamızın son hali şöyle olmalı :

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JQuery Öğrenimi</title>
        <script src="jquery.js"></script>
        <script>
            $( document ).ready(function() {
                $( "a" ).click(function( event ) {
                    alert( "Gördüğünüz gibi artık link sayfası açılmıyor" );
                    event.preventDefault();
                });
            });
        </script>
    </head>
    <body>
        <a href="http://jquery.com/">jQuery</a>

    </body>
</html>

Bİr HTML Sınıfı Eklemek ya da Çıkarmak

Öenmli : Bundan sonra vereceğimiz jQuery kodlarını ready olayı içine yazmalısınız. Böylece kodunuz döküman işlenmeye hazır olduktan sonra çalışır.

Bir diğer önemli görev de elemanlara sınıf adı eklemek ya da çıkarmaktır. Öncelikle sayfamız <head> kısmına bir stil tanımı ekleyerek başlayalım.

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

Şimdi script içinde addClass() metodunu kullanalım.

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

<a> elemanı şimdi koyu yazı olacaktır.

Mevcut bir sınıfı elemandan silmek için removeClass() metodu kullanılır.

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

Özel Efektler

JQuery web sitenizin daha etkileyici olması için birçok animasyo efektleri de sağlar. Örneğin tıklanan elemanın yok olma efekti :

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

Tıklanan paragraf yavaşça yok olur.

Callback'ler ve Fonksiyonlar

Diğer birçok programlama dilinin dışında bir özellik olarak JavaScript size fonksiyonları dilediğiniz bir zamanda çalıştırmak üzere tanımlama imkanı sunar. Callback adı verilen fonksiyon tanımları da, diğer fonksiyonlara parametre olarak verilen ve o diğer fonksiyon içinde belirlenen zamanda çalıştırılan fonksiyonlardır. Callback'ler özeldir, çünkü ana fonksiyonlarının işini yapmasını beklerler. Bu arada tarayıcı diğer fonksiyonları ve işlerini yapmaya devam edebilir.

Callback kullanmak için, onları ana fonksiyona nasıl parametre olarak geçireceğinizi bilmek önemlidir.

Argümanı Olmayan Callback

Eğer bir Callback argüman almayacaksa , ana fonksiyona şöyle geçirilir :

$.get("myhtmlpage.html", myCallBack);

Burada .get() fonksiyonu myhtmlpage.html dosyasını yüklemeyi bitirdikten sonra myCallBack() fonksiyonu çalışır.

Not : Burada ikinci parametre basitçe fonksiyonun adıdır. Tırnak içinde string gibi değil ve parantezleri olmadan.

Argümanı Olan Callback

Callback metodları parametrelerle kullanmak biraz daha zorludur.

Yanlış

Bu kod örneği yanlış çalışır.

$.get("myhtmlpage.html", myCallBack(param1, param2));

Hatanın sebebi myCallBack(param1, param2) fonksiyonu anında çalışır ve ondan dönen değer .get() fonksiyonuna parametre olarak verilir. Halbuki fonksiyonun tanımı verilmeliydi. Peki myCallBack() fonksiyonunu parametreleri ile birlikte .get() fonksiyonuna nasıl verilecek?

Doğru

myCallBack() fonksiyonunu parametreleri ile birlikte hemen çalışmasını engellemek için fonksiyon bir isimsiz fonksiyon tanımı içine konabilir.

$.get("myhtmlpage.html", function() {
    myCallBack(param1, param2);
});

Bir daha üzerinden geçersek, function(){...} deyimi bir bir fonksiyon nesnesi üretir ama myCallBack(param1, param2) deyimi myCallBack fonksiyonunu çalıştırıp ondan geri dönen değeri üretir.

$.get() metodu myhtmlpage.html dosyasına yaptığı isteği tamamlayınca ikinci parametresinde verilen isimsiz fonksiyonu çalıştırır, onun içinde de myCallBack(param1, param2) fonksiyonu çalıştırılır.