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

Posted on

Di panduan sebelumnya, kita telah membahas cara menginput file jQuery ke HTML, bagus dengan mengunduh 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 telah kita bahas, jQuery sesungguhnya yaitu JavaScript. Dengan demikian, kode yang ditulis pun yaitu kode JavaScript. jQuery hanya ‘mempermudah’ penulisan JavaScript dengan beraneka fungsi-fungsi bawaan.

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

Dengan ‘theme’ diatas, sesungguhnya kita telah dapat seketika menjalankan fungsi-fungsi jQuery. Namun terdapat 1 manfaat yang selalu disertakan di setiap kode jQuery, yakni event ready().


Pengertian Event ready() atau The Document Ready Event

Untuk memahami manfaat ready() jQuery atau secara formal disebut selaku The Document Ready Event, kita mesti paham bagaimana JavaScript bekerja.

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

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

Sekiranya kamu kurang paham mengenai penjelasan ini, dapat membaca panduan 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 manfaat 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 manfaat ready() jQuery yaitu selaku berikut:

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

Sekiranya kamu melihat tutorial-tutorial mengenai jQuery, hampir dipastikan seluruh kode akan berada di di event ready() ini.

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

Penjelasan maksud kode diatas, akan saya bahas di panduan berikutnya. Disini kita hanya fokus agar kamu dapat menjalankan kode jQuery.

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

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


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

Selamat! kamu telah menjalankan sebuah kode jQuery. Di panduan jQuery duniailkom berikutnya, saya akan membahas Aturan Dasar Penulisan jQuery.


Sumber https://www.duniailkom.com/