Tutorial Dasar JQUERY Menggunakan Fungsi Event Click()

Update Terakhir pada

Assalamualaikum Wr. Wb

JQuery merupakan Javascript Library yang mana JQuery ini merupakan kumpulan script-script perintah pada Javascript yang sudah siap untuk dipakai. JQuery digunakan untuk meringkas listing kode Javascript sendiri agar lebih mudah untuk dipakai. JQuery sendiri, memiliki banyak versi dan selalu update. Kalo yang sekarang saya pakai ini adalah Jquery versi v3.2.1, yang mana Jquery ini merupakan versi terbaru dari JQuery saat ini. Hanya saja ada kemungkinan bakal ada lagi muncul versi-versi terbaru dari Jquery yang akan update lagi. Sebenarnya, setiap versi itu tidak jauh berbeda hanya saja versi terbaru masih punya fungsi-fungsi dari versi-versi sebelumnya. Jadi, jikalau kamu nanti downloadnya versi yang lebih baru daripada versi yang saya gunakan saat ini maka tidak masalah.

Oke langsung saja, pada postingan ini saya ingin berbagi sedikit ilmu tentang dasar dari JQuery. Kita akan menggunakan fungsi event click(), yang mana fungsi ini selalu digunakan untuk menghasilkan suatu perintah atau kejadian saat kita mengklik suatu perintah yang terdapat pada Script HTML pada tag <body></body>. Contohnya seperti di bawah ini.

 

 

Pertama, download dulu file JQuery disini. Akan tampil halaman webnya seperti dibawah ini. Langkah selanjutnya tinggal klik aja pada bagian yang sudah digaris merah.

Kedua, setelah klik Download kita akan diarahkan pada halaman seperti berikut. Yang mana pada halaman ini terdapat beberapa versi downloadnya, langsung saja klik pada bagian yang sudah ditandai lingkaran merah.

Ketiga, setelah itu buat folder projectnya dengan nama bebas terserah kita sendiri.

 

Keempat, setelah buat folder selesai langsung copy file Jquery yang tadi kita download dan Paste di dalam folder project kita.

Kelima, langkah selanjutnya kita buat file HTML dengan nama filenya (bebas sesuai kita) dan saya disini memberikan nama “klik.html”. Kemudian buat kode standar HTML seperti di bawah ini.

Coba perhatikan baris ke-5, itu adalah script pemanggilan file JQuery yang sudah berisi kode-kode Javascript.

 

Ke enam, tinggal kita buat script HTMLnya untuk membuat tombol yang nantinya akan menampilkan pesan outputnya. Coba perhatikan baris ke-9 di bawah ini.

 

Terakhir, kita sisipkan kode JQuery seperti berikut ini pada tag <head></head> tepat setelah script pemanggilan file Jquerynya (perhatikan baris ke-5 sampai ke-13).

Adapun, kegunaan fungsi dari source code tersebut adalah sebagai berikut.

<script type=”text/javascript”></script>, sebagai tanda pembuka script Javascript.

$(“document”).ready(function(){ }), berfungsi sebagai penanda suatu dokumen proses Javascript mulai berkerja.

$(‘.tekan’).click(function(){ }), berfungsi saat salah satu dokumen HTML diklik atau ditekan maka di dalam functionnya menghasilkan prosesnya. Selector “.tekan” berarti bahwa fungsi akan bekerja saat salah script HTML yang diberikan tanda selector tersebut ditekan. Pada script HTMLnya sudah kita berikan tanda selector “.tekan” di tag <button></button>.

 

Selanjutnya, saat di browser waktu kita klik tombolnya maka muncul pesan sebagai berikut.

 

Demikianlah, tutorial yang saya posting pada kali ini. Selamat mencoba. Walaikumsalam Wr. Wb.