Tatacara Penulisan (Syntax) pada jQuery

Statement pada jQuery biasanya diawali 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 Statement paling dasar dari jQuery:

<script>
 $(document).ready(function(){
  // Baris kode untuk dijalankan
  alert("Halo Semuanya");
 })
</script>


Contoh kode di atas hanya akan menampilkan pesan Alert "Halo Semuanya" kepada pengguna.


Penjelasan Kode jQuery

Jika kalian benar-benar baru mempelajari jQuery, kalian mungkin berpikir tentang apa maksud dari kode-kode tersebut. OK, mari kita bahas setiap bagian dari kode diatas satu per satu.
  • Elemen <script> - Karena jQuery hanyalah salah satu dari Library JavaScript, maka kode jQuery dapat ditempatkan di dalam elemen <script>.
  • $(document).ready(handler); - Statement tersebut ini dikenal dengan istilah Ready Event di mana handler pada dasarnya adalah fungsi yang dilewatkan ke metode ready() untuk dapat dieksekusi/dijalankan dengan aman langsung setelah dokumen HTML siap untuk dimanipulasi - yaitu ketika DOM telah sempurna.
Metode ready() pada jQuery biasanya digunakan dengan fungsi anonim. Jadi, contoh kode di atas juga dapat ditulis dalam notasi yang lebih singkat seperti berikut:

<script>
    $(function(){
        // Baris kode untuk dijalankan
        alert("Halo Semuanya");
    })
</script>


Tips: Kalian dapat menggunakan Syntax yang kalian sukai karena kedua Syntax diatas itu sama.

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

Di mana $(selector) pada dasarnya digunakan untuk memilih elemen HTML dari DOM sehingga dapat dimanipulasi dan tindakan() akan menerapkan beberapa hal pada elemen yang dipilih seperti mengubah nilai dari properti CSS, mengatur konten elemen, dll. Mari kita perhatikan contoh lain untuk mengubah teks yang ada di dalam paragraf <p> tepat ketika DOM sudah siap sepenuhnya:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tutorial jQuery | EL Creative Academy</title>

    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <p>Memuat...</p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").text("Halo Semuanya");
        })
    </script>
</body>
</html>

Lihat kode di Github | Lihat Live Demo

Pada Statement jQuery di atas (baris 14) p adalah Selector jQuery yang berfungsi untuk memilih semua paragraf yaitu elemen <p> yang ada di dalam dokumen HTML, kemudian metode text() akan mengatur konten berupa teks pada paragraf menjadi "Halo Semuanya".

Teks paragraf pada contoh kode di atas akan diganti secara otomatis ketika dokumen HTML telah siap. Tetapi bagaimana jika kita ingin pengguna melakukan beberapa tindakan sebelum menjalankan kode jQuery untuk mengganti teks paragraf. Mari kita perhatikan satu contoh berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tutorial jQuery | EL Creative Academy</title>

    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <p>Memuat...</p>
    <button type="button">Ubah Teks</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function() {
                $("p").text("Halo Semuanya");
            })
        })
    </script>
</body>
</html>

Lihat kode di Github | Lihat Live Demo

Pada contoh kode di atas, teks paragraf akan diubah hanya ketika pengguna mengklik tombol "Ubah Teks".

Sekarang, setelah kalian memiliki pemahaman dasar tentang cara kerja jQuery, pada bagian selanjutnya kita akan belajar tentang istilah-istilah yang telah kita bahas secara rinci.

0 Komentar