Tutorial Belajar jQuery Part 3: Cara Menjalankan Kode jQuery (event ready)

Dalam tutorial sebelumnya, kita telah membahas cara menginput file jQuery ke HTML, baik dengan mendownload file jQuery (untuk dijalankan secara offline) atau dari CDN.

Kali ini saya akan lanjut dengan membahas cara menjalankan kode jQuery. Kode jQuery umumnya diletakkan didalam event ready().


Cara Menjalankan Kode jQuery

Seperti yang sudah kita bahas, jQuery sebenarnya adalah JavaScript. Dengan demikian, kode yang ditulis pun adalah kode JavaScript. jQuery hanya ‘memudahkan’ penulisan JavaScript dengan berbagai fungsi-fungsi bawaan.

Untuk menginput kode JavaScript dengan ‘rasa’ jQuery, cara paling umum adalah menempatkannya setelah tag <script> yang digunakan untuk memanggil file jQuery, seperti contoh berikut:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar jQuery Duniailkom</title>
  <script src="jquery-2.1.4.js"></script>
  <script>
    // kode JavaScript dan jQuery disini
    // kode JavaScript dan jQuery disini
    // kode JavaScript dan jQuery disini
    // kode JavaScript dan jQuery disini
  </script>
</head>
<body>
</body>
</html>

Dengan ‘template’ diatas, sebenarnya kita sudah bisa langsung menjalankan fungsi-fungsi jQuery. Namun terdapat 1 fungsi yang selalu disertakan dalam setiap kode jQuery, yakni event ready().


Pengertian Event ready() atau The Document Ready Event

Untuk memahami fungsi ready() jQuery atau secara formal disebut sebagai The Document Ready Event, kita harus paham bagaimana JavaScript bekerja.

Secara sederhana, JavaScript digunakan untuk memanipulasi objek HTML seperti paragraf, tombol, form, gambar, dll. Jika kita menempatkan kode JavaScript di awal (pada bagian <head>), besar kemungkinan objek HTML ini belum tersedia. Ini terjadi karena bagian <body> baru diproses setelah bagian <head>.

Salah satu solusi untuk hal ini adalah dengan meletakkan kode javaScript di bagian penutup halaman, yakni sebelum tag penutup </body>. Namun jQuery memiliki solusi yang lebih elegant, yakni event ready().

Jika anda kurang paham tentang penjelasan ini, bisa membaca tutorial JavaScript Duniailkom: Posisi Terbaik Meletakkan kode JavaScipt di dalam HTML.

Event ready() jQuery men-simulasi efek dari event Onload JavaScript, tapi lebih efisien. Dengan menggunakan fungsi ready() jQuery, kode program JavaScript baru akan dijalankan setelah web browser selesai memproses tag HTML, tapi sebelum file external seperti gambar. Dengan demikian, kode JavaScript diproses dengan lebih awal daripada event Onload bawaan JavaScript.

Penulisan fungsi ready() jQuery adalah sebagai berikut:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar jQuery Duniailkom</title>
  <script src="jquery-2.1.4.js"></script>
  <script>
    $(document).ready(function() {
      // Kode jQuery dan JavaScript disini
      // Kode jQuery dan JavaScript disini
      // Kode jQuery dan JavaScript disini
    });
  </script>
</head>
<body>
</body>
</html>

Kode JavaScript yang berada didalam fungsi $(document).ready(function()) akan dijalankan setelah seluruh tag HTML diproses oleh web browser. Dengan demikian, kita bisa menghindari error yang terjadi kerena objek yang ingin dimanipulasi belum tersedia.

Jika anda melihat tutorial-tutorial tentang jQuery, hampir dipastikan seluruh kode akan berada di dalam event ready() ini.

Sebagai contoh, saya akan membuat sebuah kode program sederhana, dimana ketika tombol HTML di klik, akan tampil sebuah kalimat. Berikut kode programnya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Duniailkom</title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
     $("#tombol").click(function() {
         $(this).after('<p>Sedang Belajar jQuery di Duniailkom</p>');
     });
   });
   </script>
</head>
<body>
  <h1>Belajar jQuery di Duniailkom</h1>
  <button id="tombol">Click Me!</button>
</body>
</html>

Cara Menjalankan Kode jQuery (event ready)

Penjelasan maksud kode diatas, akan saya bahas dalam tutorial selanjutnya. Disini kita hanya fokus agar anda bisa menjalankan kode jQuery.

Agar bisa berjalan, simpanlah kode program diatas di folder yang sama dengan file jquery-2.1.4.js. Sebagai contoh, saya akan menyimpannya ke dalam file semangat.html di folder belajar_jquery, seperti berikut ini:

Tempat file semangat.html agar bisa mengakses jQuery

Berikut hasil akhir kode diatas (silahkan klik tombol Click Me!):

See the Pen Cara Menjalankan Kode jQuery by duniailkom (@duniailkom) on CodePen.10206

Selamat! anda sudah menjalankan sebuah kode jQuery. Dalam tutorial jQuery duniailkom selanjutnya, saya akan membahas Aturan Dasar Penulisan jQuery.


Tutorial Terkait:

13 Comments

  1. Rusman
    20 Mar 16
    • Andre
      21 Mar 16
  2. sariyanto
    21 Mar 16
    • Andre
      21 Mar 16
  3. Rahmat
    24 Apr 16
  4. Sahabat Musik
    16 Sep 16
    • Andre
      17 May 17
  5. Rhekyluhur
    15 May 17
    • Andre
      17 May 17
  6. Achmad Ponjer
    25 Sep 17
    • Andre
      26 Sep 17
  7. Achmad Ponjer
    21 Oct 17
    • Andre
      22 Oct 17

Add Comment