Cara Menjalankan Kode jQuery

belajar javascript

Dalam tutorial sebelumnya, kita sudah mendiskusikan cara memasukkan file jQuery ke HTML, baik dengan mendownload file jQuery (untuk dijalankan secara offline) atau dari CDN.

Saat ini saya akan lanjut dengan mendiskusikan cara menjalankan kode jQuery. Kode jQuery umumnya ditaruh didalam event ready().

Cara Menjalankan Kode jQuery

Seperti yang telah kita bahas, jQuery sebetulnya ialah JavaScript. Dengan begitu, kode yang ditulis pun ialah kode JavaScript. jQuery cuma ‘mempermudah’ penulisan JavaScript dengan beragam fungsi-fungsi bawaan.

Untuk memasukkan kode JavaScript dengan ‘rasa’ jQuery, cara paling umum ialah menempatkannya sesudah tag <script> yang dipakai untuk memanggil file jQuery, seperti contoh berikut:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar jQuery Infanthree</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, sebetulnya kita telah dapat segera menjalankan fungsi-fungsi jQuery. Tetapi terdapat 1 fungsi yang sering dilampirkan dalam setiap kode jQuery, yaitu 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 mesti paham bagaimana JavaScript bekerja.

Secara simpel, JavaScript dipakai untuk memanipulasi objek HTML seperti paragraf, tombol, form, gambar, dll. Bila kita menempatkan kode JavaScript pada awal (di bagian <head>), besar peluang objek HTML ini belum tersedia. Ini terjadi sebab bagian <body> baru diproses sesudah bagian <head>.

Salah satu jalan keluar untuk hal ini yaitu dengan menaruh kode javaScript pada bagian penutup halaman, yaitu sebelum tag penutup </body>. Tetapi jQuery mempunyai solusi yang lebih elegant, yaitu event ready().

Bila kamu kurang paham tentang penjelasan ini, dapat membaca tutorial JavaScript Infanthree: Posisi Terbaik Menaruh kode JavaScipt di dalam HTML.

Event ready() jQuery men-simulasi dampak dari event Onload JavaScript, namun lebih efisien. Dengan memakai fungsi ready() jQuery, kode program JavaScript baru akan dijalankan sesudah web browser selesai memproses tag HTML, namun sebelum file external seperti gambar. Dengan begitu, kode JavaScript diproses dengan lebih awal ketimbang event Onload bawaan JavaScript.

Penulisan fungsi ready() jQuery yaitu sebagai berikut:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar jQuery Infanthree</title>
  <script src="jquery-2.1.4.js"></script>
  <script>
    $(document).ready(function() );
  </script>
</head>
<body>
</body>
</html>

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

Bila kamu melihat tutorial-tutorial tentang jQuery, hampir dipastikan semua kode akan berada di dalam event ready() ini.

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

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

Penjelasan maksud kode diatas, akan saya bahas dalam tutorial berikutnya. Disini kita cuma fokus supaya kamu dapat menjalankan kode jQuery.

Supaya dapat berjalan, simpanlah kode program diatas di folder yang sama dengan file jquery-2.1.4.js.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

WhatsApp chat