banditz-cyber: Mengenala JQuery

Apa sih JQuery itu ? Jquery adalah suatu “javascript library”. Tujuannya adalah supaya developer website dapat menggunakan javascript dengan lebih mudah dan cepat. Dengan menggunakan JQuery, developer “dimanjakan” dengan suatu pemrograman javascript yang sangat sederhana jika dibandingkan dengan “native” javascript. Karena banyak sekali manfaatnya, saya akan coba sharing bagamana cara membuat website sederhana dengan memanfaatkan library ini.

Saya harap anda telah memahami pembuatan website sederhana dengan html maupun css. Jika belum, Anda dapat mengakses http://www.w3schools.com untuk belajar terlebih dahulu

source code : (nanti di rename jadi .rar aja)

Outline (atau harapan) yang akan dipelajari :

Bersahabat dengan sintaks JQuery
Fungsi ready di JQuery
Mengubah Css dengan JQuery
Event Handler dengan JQuery
Animasi sederhana dengan JQuery

Langkah-langkahnya sebagai berikut :

Download terlebih dahulu jquery.js yang ada di http://jquery.com/ di link ini http://code.jquery.com/jquery-1.4.2.min.js atau http://code.jquery.com/jquery-1.4.2.js. Perbedaan antara link pertama dan kedua adalah link pertama “yang jquery-1.4.2.min.js” merupakan versi compress dari yang versi development “jquery-1.4.2.js”. Jadi pada dasarnya Anda hanya membutuhkan satu jenis saja untuk digunakan. Saran saya, gunakanlah yang versi development (yang kedua) supaya lebih mudah untuk dibaca (jika ingin ).
Setelah itu persiapkan editor yang sering anda gunakan, seperti notepad, notepad++, scite, netbeans, ataupun eclipse. Kali ini saya akan menggunakan notepad++ saja ahh
Buatlah file baru berekstensi .html dan jangan lupa file jquery-1.4.2.js ada pada satu folder ya seperti dibawah ini :

kali ini, saya memberi nama filenya jquery-latihan.html. kemudian buka jquery-latihan.html tersebut dengan editor anda dan buat template code html biasa (tag html, head, body) seperti pada gambar dibawah :

Selanjutnya kita harus meload javascript yang akan kita gunakan. Dalam hal ini yaitu jquery-1.4.2.js. Tambahkan di dalam tag headnya

<head>

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

</head>
Tahap persiapan telah selesai, sekarang saatnya kita masuk tahap main2 dengan jquery
Selanjutnya tambahkan script di bagian head seperti dibawah ini :

<head>

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

    <script>

        //code ini akan dieksekusi ketika halaman ini di load pertama kali

         $(document).ready(function(){

            //kode-kode lainnya

        });

    </script>

</head>

Source code “$(document).ready(function(){});” pada jquery sama halnya seperti code window.onload pada javascript biasa. Fungsi ini akan dipanggil ketika halaman html ini di load oleh browser. Nah, nantinya kode-kode jquery kita akan diletakan di dalam situ deh.
$(document).ready(function(){ //disini});. “disini” –> tempat dimana anda dapat menambahkan script-script lainnya. Sekarang saya akan coba mengambil text dari body. Sebelumnya, tambahkan di dalam tag <body> sebuah kalimat apa saja. Contoh :

<body>

    Hello World!

</body>

Kemudian tambahkan di tag scriptnya sehingga menjadi seperti ini :

<script type="text/javascript">

        //code ini akan dieksekusi ketika halaman ini di load pertama kali

         $(document).ready(function(){

            //kode-kode lainnya

            var text = $("body").text(); //deklarasi dan inisialisasi variable text

            alert(text); //menampilkan windows alert

        });

    </script>

Cukup mudah bukan . Sekarang coba anda save dan jalankan jquery-latihan di browser anda. Ketika di load pertama kali, maka akan muncul windows alert yang menampilkan “Hello World!”.

Perhatikan baris $(“body”).text(), $(“body”) merupakan salah satu contoh “Selector” terhadap suatu tag html (body). Keterangan lebih lengkap mengenai selectors di jquery ada disini : http://docs.jquery.com/Selectors. Kemudian .text() bermakna mengambil semua text dalam suatu “selectors” tertentu, dalam hal ini adalah body. Kemudian hasilnya (bertipe string) disimpan dalam variable bernama text dan ditampilkan kelayar dengan fungsi alert bawaan javascript. “alert” bukan fungsi jquery tapi fungsi “native” javascript. Cobalah anda load halaman html anda, maka akan muncul alert yang isinya text dalam tag body anda. Sekarang kita akan mencoba mengubah css dari body dengan jquery. Referensi, silakan baca http://api.jquery.com/css/. Ubah code menjadi seperti berikut.

<script type="text/javascript">

        //code ini akan dieksekusi ketika halaman ini di load pertama kali

         $(document).ready(function(){

            //kode-kode lainnya

            var text = $("body").text();

            alert(text);

            $("body").css("background-color","black");

            $("body").css("color","white");

        });

    </script>

Tambahkan yang di bold ya. Sebetulnya sama konsepnya seperti yang awal. Hanya saja kali ini kita mengubah cssnya. Dalam contoh kali ini saya mengubah warna background belakang dari body dan warna tulisan yang ada di body. Maka sourcenya akan seperti yang ditunjukkan seperti yang diatas. Source code lengkapnya sebagai berikut.

Maka akan muncul perubahan ketika anda meload htmlnya. Silakan dicoba

Maksud dari $(“body”).css(“background-color”,”black”); adalah mengubah background-color dari tag body dengan warna “black”. Pengertian yang sama dengan $(“body”).css(“color”,”white”);
Sekarang kita akan latihan event handler di jquery. Kalau di javascript itu contohnya seperti .onclick, onload, onblur, dll. Referensi : http://docs.jquery.com/Events Source codenya.

<html>
<head>
    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    <script type="text/javascript">
        //code ini akan dieksekusi ketika halaman ini di load pertama kali
         $(document).ready(function(){
            //kode-kode lainnya
            var text = $("body").text();
            alert(text);
            $("body").css("background-color","black");
            $("body").css("color","white");
            $("#idButton").click(
                function()
                {
                    alert("button dengan id di click");
                }
            );
            $(".clsButton").click(
                function()
                {
                    alert("button dengan calss di click");
                }
            );
        });
    </script>
</head>
<body>
    hello world
    <button id="idButton"> coba klik saya</button>
    <button class="clsButton"> coba klik saya</button>
</body>
</html>  

Screen shotnya

hasilnya

Hal yang perlu diperhatikan : selectors untuk class dan id. Untuk class –> $(“.[classname])….., ada ‘titik’ di depan nama kelasnya, untuk id –> $(“#……”)…. Ada ‘pagar’ didepan nama idnya. Sebetulnya konsepnya sama seperti css bukan –>. Untuk event di jquery anda dapat melihatnya di http://docs.jquery.com/Events
Salah satu yang menarik dari jquery adalah fungsi animasi yang disediakan. Anda dapat melihatnya di http://docs.jquery.com/Effects untuk panduan dokumentasinya. Berikut contoh source codenya.

<html>

<head>

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

    <script type="text/javascript">

        //code ini akan dieksekusi ketika halaman ini di load pertama kali

         $(document).ready(function(){

            //kode-kode lainnya

            var text = $("body").text();

            alert(text);

            //mengubah css

            $("body").css("background-color","black");

            $("body").css("color","white");

            //event handler

            $("#idButton").click(

                function()

                {

                    //event jika button di klik

                    alert("button dengan id di click");

                }

            );

            //event handler

            $(".clsButton").click(

                function()

                {

                    //event jika button di klik

                    alert("button dengan calss di click");

                }

            );

            //event handler

            $("#hide").click(

                function()

                {

                    //hilangkan div id animated secara perlahan2

                    $("#animated").fadeOut('slow', function() {

                        alert("udh selesai animasinya");

                    });

                    //atau (tanpa ada pesan selesainya :) )

                    //$("#animated").fadeOut('slow');

                }

            );

        });

    </script>

</head>

<body>

    hello world

    <button id="idButton"> coba klik saya</button>

    <button class="clsButton"> coba klik saya</button>

    <div id="animated">

        lorem ipsum lorem ipsum

        lorem ipsum lorem ipsum

        lorem ipsum lorem ipsum

        lorem ipsum lorem ipsum

    </div>

    <button id="hide"> sembunyikan saya</button>

</body>

</html>

Perhatikan source code yang saya tambahkan (di bold). Saya menambahkan suatu div dan suatu button yang jika di klik maka div akan perlahan-lahan hilang (fadeout). Untuk itu saya menambahkan event handler pada button dengan id “hide” yaitu $(“#hide”).click(function () { …. dan menghilangkannya dengan fungsi fadeOut(‘slow’, function() { ….. atau fadeOut(‘slow’) saja. Keterangan lebih rinci mengenai fadeout, dan animasi-animasi lainnya anda dapat liat di dokumentasi.

Selasa, 13 Maret 2012

Mengenala JQuery

Posting Komentar

Trending Topic

Entri Populer

Mengenai Saya