jQuery : Syntax

Belajar Web Design
Sintak Standard jQuery

Pernyataan jQuery biasanya dimulai dengan tanda dolar ($) dan diakhiri dengan tanda titik koma (;).

Pada jQuery, tanda dolar ($) hanyalah alias untuk jQuery. Mari kita perhatikan contoh kode berikut yang menunjukkan pernyataan paling dasar dari jQuery.

<script type="text/javascript">
    $(document).ready(function(){
        // Some code to be executed...
        alert("Hello World!");
    });
</script>

Contoh di atas hanya menampilkan pesan peringatan “Hello World!” kepada user.

Penjelasan Kode

Jika kalian benar-benar baru dalam menggunakan jQuery, kalian mungkin berpikir sebenarnya tentang apa kode tersebut. OK, mari kita membaca setiap bagian dari skrip ini satu per satu.

  • Elemen <script> – Karena jQuery hanyalah JavaScript library, jadi kode jQuery dapat ditempatkan di dalam elemen <script>. Namun, jika kalian ingin meletakkannya di file JavaScript eksternal, yang mana hal tersebut lebih disukai, maka kalian cukup menghapus bagian ini.
  • $(Document).ready(handler); – Pernyataan ini biasanya dikenal sebagai ready event. Di mana handler pada dasarnya adalah fungsi yang dilewatkan ke metode ready() untuk dieksekusi dengan aman segera setelah dokumen siap untuk dimanipulasi yaitu ketika hirarki DOM telah sepenuhnya dibangun.

Metode jQuery ready() biasanya digunakan dengan fungsi anonim. Jadi, contoh di atas juga dapat ditulis dalam notasi singkat seperti ini:

<script type="text/javascript">
    $(function(){
        // Some code to be executed...
        alert("Hello World!");
    });
</script>

Selanjutnya, di dalam fungsi event handler kalian dapat menulis pernyataan jQuery untuk melakukan tindakan apa pun mengikuti sintaks dasar, seperti: $(selector).action();

Di mana, $(selector) pada dasarnya memilih elemen HTML dari DOM tree sehingga dapat dimanipulasi dan action() menerapkan beberapa tindakan pada elemen yang dipilih seperti mengubah nilai properti CSS, atau mengatur konten elemen, dll. Mari kita perhatikan contoh lain yang menetapkan teks paragraf setelah DOM siap:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Document Ready Demo</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("p").text("Hello World!");
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
</body>
</html>

Pada pernyataan jQuery dari contoh di atas (baris no-10) p adalah jQuery selector yang memilih semua paragraf yaitu elemen <p> dalam dokumen, kemudian metode text() mengatur konten teks paragraf ke dalam teks “Hello World!”.

Teks paragraf dalam contoh di atas diganti secara otomatis ketika dokumen-nya siap. Tetapi bagaimana jika kita ingin user melakukan beberapa tindakan sebelum mengeksekusi kode jQuery untuk mengganti teks paragraf. Mari kita perhatikan contoh berikut:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Click Handler Demo</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("button").click(function(){
                $("p").text("Hello World!");
            });            
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
    <button type="button">Replace Text</button>
</body>
</html>

Pada contoh di atas teks paragraf akan diganti hanya ketika event klik terjadi pada “ReplaceText” <button> yang berarti terjadi ketika pengguna mengklik tombol ini.

Sekarang setelah kalian memiliki pemahaman dasar tentang cara kerja jQuery, dalam bab-bab selanjutnya kalian akan belajar tentang istilah-istilah yang telah kami bahas secara rinci di sini.

No related posts.