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

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 ), besar kemungkinan objek HTML ini belum tersedia. Ini terjadi karena bagian baru diproses setelah bagian .

Salah satu solusi untuk hal ini adalah dengan meletakkan kode javaScript di bagian penutup halaman, yakni sebelum tag penutup . 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:

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:

  
Belajar jQuery di Duniailkom
  

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:

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.

Sumber wk.com