bahasa pemrograman berbasis web

Chapter 5: Belajar bahasa pemrograman berbasis web – Jquery Event

Pada chapter-chapter terdahulu dalam seri belajar bahasa pemrograman berbasis web sebelumnya kita telah mempelajari tentang Javascript dan jQuery. Kita juga sedikit-sedikit belajar tentang penggunaannya di dalam file HTML untuk membuat halaman web dinamis.

Secara umum penggunaan Javascript bergantung kepada situasi kapan harus digunakan. Kita memprediksi dan memanipulasi pola pengguna, kapan dan bagaimana dia mengarahkan mouse, dan sebagainya. Untuk itu dibutuhkan sebuah fitur penanganan Event agar informasi dari dokumen bisa diolah menjadi sesuatu yang lain.

Berkenalan dengan Event – Jquery Event

Seluruh aktivitas di dunia menghasilkan kejadian atau peristiwa, dan dunia ini dipenuhi oleh acara. Misalnya acara ulang tahun, acara pernikahan, acara wisuda,dan sebagainya. Dari sekian banyak acara yang memenuhi jadwal dan waktu kita pasti akan memilah mana acara yang bisa saya ikuti, mana acara yang boleh saya ikuti , mana acara yang tidak ingin saya ikuti.

Demikian pula halnya dengan aplikasi komputer yang tujuannya adalah mensimulasikan aktivitas manusia ke dalam bentuk aktivitas terkomputerisasi termasuk dengan aplikasi bahasa pemrograman berbasis web. Ada banyak event yang muncul pada saat terjadi interaksi antara pengguna aplikasi dengan aplikasi, dalam kasus aplikasi web interaksi terjadi antara pengunjung dengan halaman web.

Ketika pengunjung menggerakkan mouse, mengklik mouse, mengetik untuk mengisi formulir halaman web itu adalah acara. Kunci untuk aplikasi web dinamis yang sukses adalah mendeteksi event yang anda butuhkan dan mengabaikan yang tidak anda butuhkan.

Pada chapter-chapter sebelumnya, kita membuat beberapa program contoh yang sifatnya prosedural atau biasa disebut Pemrograman Prosedural. Pada pemrograman prosedural dalam bahasa pemrograman berbasis web, proses eksekusi kode dijalankan secara berurutan baris-per-baris.

Ketika menangani Event, pemrograman yang digunakan adalah Pemrograman berbasis Event. Dengan pemrograman jenis ini, aktivitas eksekusi kode dijalankan menurut kejadian. Kita mendefinisikan event-event mendatang, kemudian ketika kejadian tersebut terjadi, browser akan mengeksekusi kode perintah yang telah dibuat. Itulah kelebihan dari bahasa pemrograman web berbasis client side.

Penanganan aktivitas mouse

Sebagian besar aktivitas manusia menggunakan komputer, termasuk salah satunya browser menggunakan antar-muka I/O (Input/Output) bernama Mouse.

Bahasa pemrograman berbasis web
Mouse Komputer – Photo by Emiliano Cicero on Unsplash

JQuery event memiliki beberapa event-event yang khusus untuk menangani aktivitas mouse.

EventDeskripsi
onclickTombol utama mouse diklik / klik kiri
oncontextmenuTombol sekunder mouse / klik kanan
ondblclickTombol utama mouse diklik dobel / double click kiri
onmousedownTombol mouse diklik-tahan
onmouseenterPointer mouse masuk area tertentu pada jendela
onmouseleavePointer mouse meniggalkan area tertentu di jendela
onmousemovePointer mouse bergerak
onmouseoverPointer mouse melewati sebuah objek
onmouseoutPointer mouse keluar dari area tertentu di jendela
onmouseupTombol utama mouse dilepas
List jQuery event

Penanganan tombol keyboard – bahasa pemrograman berbasis web

Seperti halnya mouse, keyboard juga memiliki event.

EventDeskripsi
onkeydownSalah satu tombol keybard ditekan
onkeypressSalah satu tombol keyboard diketuk atau ditekan lalu dilepas
onkeyupTombol keyboard dilepas
Event jquery pada keyboard

Perhatikan perbedaan halus di antara ketiga event dalam tabel di atas. Event onkeydown hanya memicu saat pengguna aplikasi menekan tombol. Sedangkan onkeypress dan onkeyup memicu ketika pengguna melepaskan tombol. Memang, untuk sebagian besar situasi pengetikan, perbedaannya sangat kecil, tetapi untuk beberapa aplikasi (misalnya, game), dapat berguna untuk mengetahui berapa lama tombol ditekan, yang hanya bisa kita dapatkan dari event onkeydown.

Istilah penekanan tombol mungkin sedikit membingungkan. Ada beberapa tombol pada keyboard standar yang tidak menghasilkan penekanan tombol itu sendiri, seperti tombol Shift, Alt, dan Ctrl pada keyboard Windows. Tombol ini adalah pengubah untuk tombol lain yang menghasilkan penekanan tombol.

Penanganan event pada halaman – Bahasa pemrograman web berbasis client side

Bahkan halaman web itu sendiri memiliki event yang dapat ditangkap oleh program JavaScript dan jQuery Anda. Sebelum HTML5, hanya ada beberapa kejadian halaman yang dapat kita manfaatkan. Standar HTML5 yang lebih baru telah mendefinisikan lebih banyak event pada halaman untuk dikerjakan.

Event halamanDeskripsi
onafterprintMemicu event setelah pengunjung mencetak halaman web
onbeforeprintMemicu event sebelum pengunjung mencetak halaman web
onbeforeunloadMemicu event sebelum halaman web ditutup pada jendela browser
onerrorMemicu ketika ada kesalahan dalam memuat file yang diperlukan untuk halaman web
onhaschangePemicu ketika alamat server URL telah berubah
onloadPemicu ketika isi halaman web dimuat
onmessagePemicu saat pesan dikirim ke jendela browser
onofflineMemicu ketika pengunjung situs mengatur browser untuk melihat halaman web secara offline
ononlinePemicu ketika pengunjung situs mengatur browser untuk melihat halaman web secara online
onpagehidePemicu ketika pengunjung situs menavigasi jauh dari halaman web
onpageshowPemicu saat halaman web muncul di jendela browser
onpopstatePemicu saat riwayat browser berubah
onresizePemicu ketika pengunjung situs Anda mengubah ukuran jendela browser
onstoragePemicu saat area penyimpanan web diperbarui
onscrollPemicu saat pengguna menggerakkan scrollbar jendela browser
onunloadPemicu ketika halaman web dihapus dari jendela browser
Event halaman – bahasa pemrograman web berbasis client side

Event halaman web memungkinkan kita untuk melacak kapan halaman web pertama kali muncul di browser pengguna dan ketika ia meninggalkan browser (dan bahkan tepat sebelum ia meninggalkannya). Ini memberi pada kita kesempatan untuk memuat hal-hal tepat di depan ketika halaman muncul, atau melakukan beberapa operasi saat halaman akan menghilang dari jendela browser.

Penanganan Event oleh Javascript

Kombinasi antara JavaScript dan HTML menyediakan cara untuk menangkap event dan melakukan beberapa jenis tindakan ketika terjadi. Kode elemen HTML mendaftarkan fungsi JavaScript untuk dijalankan browser ketika peristiwa pada elemen tertentu terjadi.

Elemen HTML yang berbeda menghasilkan peristiwa yang berbeda berdasarkan bagaimana mereka berinteraksi dengan pengunjung situs di halaman web.

Contoh program event onload

Buat sebuah file, beri nama bebas misalnya javascriptLoad.html. Masukkan kode seperti berikut ini:

<!DOCTYPE html>
<html>
<head>
  <title>Latihan Event Halaman</title>
  <script>
    function welcome() {
      alert("Selamat datang di website saya!");
    }
  </script>
</head>
<body onload="welcome()">
  <h1>Ini Judul halaman</h1>
  <p>Ini paragraf halaman website</p>
</body>
</html>

Menangani Event Mouse

Untuk memicu fungsi JavaScript untuk event mouse, kita perlu menentukan event sebagai atribut dalam elemen HTML.

Klik Mouse

Ketika pengguna mengklik (tombol kiri) mouse di mana saja pada halaman web, itu memicu event mouse.

<button onclick="fungsiKlik()">

Untuk lebih jelasnya kita buat sebuah file program contoh bernama klikMouse.html

<!DOCTYPE html>
<html>
<head>
  <title>Latihan Event Klik Mouse</title>
  <script>
    function klik(pilihan) {
      if (pilihan == "makan") {
        alert("Anda ingin makan?");
      } else if (pilihan == "minum") {
        alert("Anda ingin minum?");
      } else if (pilihan == "tidur") {
        alert("Anda ingin tidur");
      }
    }
  </script>
</head>
<body>
  <h1>Pilihan aktivitas</h1>
  <p>Pilih salah satu aktivitas di bawah ini:</p>
  <button onclick="klik('tidur')">Tidur</button>
  <button onclick="klik('minum')">Minum</button>
  <button onclick="klik('makan')">Makan</button>
</body>
</html>
bahasa pemrograman berbasis web jquery event
Bahasa pemrograman web berbasis client side

Melewatkan Pointer Mouse

Aktivitas event ini menggunakan onmouseover dan onmouseout

Buat sebuah file bernama hoverMouse.html

<!DOCTYPE html>
<html>
<head>
  <title>Event Mouse</title>
  <style>
    #test {
      background-color: blue;
      width:400px;
      height: 300px;
    }
  </style>
  <script>
    function gantiwarna(state) {
      if (state == "in") {
        document.getElementById("test").style.backgroundColor="red";
      } else if (state == "out") {
        document.getElementById("test").style.backgroundColor="yellow";
      }
    }
  </script>
</head>
<body>
  <h1>Latihan menangani event mouse</h1>
  <p id="test" onmouseover="gantiwarna('in')" onmouseout="gantiwarna('out')">
    Warna latar belakang akan berganti ketika mouse masuk dan keluar area!
  </p>
</body>
</html>
bahasa pemrograman web berbasis client side
Mouse in-out

Membaca ketukan keyboard

Elemen yang menerima entri data, seperti kotak teks dan area teks, dapat memicu peristiwa penekanan tombol saat pengunjung situs mengetik. Ini memungkinkan Anda untuk memantau data apa yang masuk pengunjung situs anda ke bidang formulir saat mereka mengetik.

Anda akan sering menemukan diri Anda dalam situasi di mana Anda perlu menghitung karakter yang dimasukkan ke dalam kotak teks atau area teks dalam formulir. Anda dapat menggunakan peristiwa onkeyup untuk memicu penghitung yang menghitung penekanan tombol.

Kita buat sebuah contoh program dengan nama keyboard.html

<!DOCTYPE html>
<html>
<head>
  <title>Latihan event ketikan keyboard</title>
  <script>
    function bacaTuts() {
      var jumlahkarakter =document.getElementById("text").value.length;
      var hasil = "Jumlah karakter: " + jumlahkarakter;
      document.getElementById("status").innerHTML=hasil;
    }
  </script>
</head>
<body>
  <h1>Menghitung jumlah karakter pada textarea</h1>
  <p>Masukkan teks ke dalam kotak teks</p>
  <textarea id="text" cols="50" rows="20" onkeyup="bacaTuts()"></textarea><br>
  <p id="status"></p>
</body>
</html>
bahasa pemrograman berbasis web
Contoh menghitung karakter dalam kotak teks

Proses penghitungan karakter pada contoh di atas menggunakan fungsi document.getElementById(“text”).value.length;

Penanganan event oleh jQuery

JQuery menggunakan pendekatan yang sedikit berbeda untuk menangani event. Ketimbang mengandalkan atribut event HTML dalam elemen, ia memantau peristiwa di browser dan memungkinkan kita untuk mengetuknya secara langsung. Ini membantu menyederhanakan berbagai hal, karena kita tidak perlu memisahkan antara kode HTML dan kode jQuery. Semua yang kita butuhkan ada dalam kode jQuery.

Event-event jQuery

jQUery menyederhanakan penanganan event pada HTML. Dampak paling besar adalah kita tidak perlu lagi menentukan atribut elemen pada HTML, semuanya sudah ditangani langsung oleh jQUery.

Sebagai contoh, penanganan sebuah event onclick padabutton kita tinggal menggunakan kode seperti ini:

$("button").click(function() {
 kode
});

Fungsi di atas untuk menangani event klik button yang apabila ditulis dalam bentuk HTML seperti ini :

<button>Klik di sini</button>

Sebagian besar, fungsi event jQuery mencerminkan atribut event HTML, tetapi meninggalkan bagian dalam nama event. Namun, ada beberapa fungsi event yang tersedia. Tabel berikut memperlihatkan daftar event jQuery yang kemungkinan besar akan sering gunakan.

EventDeskripsi
blur()Memicu ketika elemen kehilangan jendela fokus
change()Memicu ketika elemen berubah
click()Memicu ketika mouse diklik
dblclick()Memicu ketika mouse di-dobel klik
focus()Memicu ketika sebuah elemen mendapat fokus
focusin()Memicu ketika sebuah elemen atau anak elemen mendapat fokus
focusout()Memicu ketika elemen atau elemen turunan kehilangan fokus jendela
hover()Mendefinisikan dua fungsi โ€” satu untuk saat penunjuk mouse berada di atas elemen
dan satu lagi untuk ketika ia pergi
keydown()Memicu ketika tombol keyboard ditahan
keypress()Memicu ketika tombol ditekan dan dilepaskan
keyup()Memicu ketika kunci dilepaskan
mousedown()Memicu ketika tombol mouse utama ditahan
mouseenter()Memicu ketika kursor mouse memasuki area elemen
mouseleave()Memicu ketika kursor mouse meninggalkan area elemen
mousemove()Memicu ketika kursor mouse bergerak
mouseout()Memicu ketika kursor mouse meninggalkan area elemen
mouseover()Memicu ketika kursor mouse berada di atas area elemen
mouseup()Memicu ketika tombol mouse utama dilepaskan
ready()Memicu ketika pohon DOM terisi penuh
resize()Memicu ketika jendela browser telah berubah ukurannya
scroll()Memicu saat pengguna menggunakan bilah gulir (scroll) mouse
select()Memicu ketika item dipilih
submit()Pemicu ketika tombol kirim / submit telah diklik
Tabel event mouse

Salah satu fitur yang sangat berguna adalah fungsi hover(). Fitur ini memungkinkan kita untuk menentukan dua fungsi terpisah pada saat yang sama – satu untuk ketika mouse melayang di atas elemen dan yang lain ketika keluar area elemen.

Mari kita coba bereksperiman dengan fitur ini. Buat sebuah file dengan nama hoverEvent.html, lalu isi dengan kode berikut

<!DOCTYPE html>
<html>
<head>
  <title>Event Mouse</title>
  <style>
    .kuning {
      background-color: yellow;
      width: 400px;
    }
    .merah {
      background-color: red;
      width: 400px;
    }
  </style>
  <script src="jquery-3.5.1.min.js"></script>
  <script>
    jQuery(document).ready( function() {
      $("p").hover( function() {
        $(this).addClass("merah");
      },
      function() {
        $(this).removeClass("merah");
      });
    });
  </script>
</head>
<body>
  <h1>Latihan Event Mouse</h1>
  <p class="kuning">Ini adalah bagian konten yang berubah warna!</p>
  <p>Ini juga bagian konten yang mengalami perubahan warna!</p>
</body>
</html>

Contoh event hover mouse

Pada program di atas, eksekusi dijalankan pada bagian

jQuery(document).ready( function() {
      $("p").hover( function() {
        $(this).addClass("merah");
      },
      function() {
        $(this).removeClass("merah");
      });
    });

Anda tentunya sudah mengenali baris pertama, yang memberi tahu jQuery untuk menunggu sampai browser memuat dokumen sebelum menjalankan kode fungsi. Kode fungsi memilih semua elemen p lalu menetapkan fungsi peristiwa hover() kepada mereka. Dalam contoh ini, kita membuat dua elemen p untuk menunjukkan fitur rapi lainnya di jQuery.

Ketika kita mengarahkan mouse ke atas setiap elemen p, hanya elemen p yang berubah warna latar belakangnya! Kunci untuk itu adalah objek $(this) di jQuery. Obyek $(this) ini merepresentasikan obyek yang saat ini dipilih. Dengan menggunakan itu, elemen p mana pun yang memicu peristiwa adalah elemen addClass() yang diterapkan, sementara elemen p lainnya diabaikan. Itu menghemat banyak kode dari ke harus secara unik mengidentifikasi setiap elemen p di halaman web! Gambar 4-5 menunjukkan hasil dari program yang sedang beraksi.

Contoh di atas menunjukkan betapa mudahnya untuk membuat kode event dengan jQuery. Salah satu tujuan utama jQuery adalah untuk membuat pengkodean untuk menangani event lebih mudah, dan mereka berhasil dengan baik!

Event handler jQuery

Library jQuery juga menyediakan cara untuk membuat kode Event Handler. Dengan jQuery, fungsi event handler dipanggil on(). Berikut format untuk fungsi on():

$(selector).on("event", "filter", data, function() {
 kode
});

Bagian selector yang harus kita pahami sekarang. Selector menentukan elemen mana yang melekat pada penanganan event. Parameter event menentukan event jQuery untuk dilampirkan ke elemen.

Parameter filter sedikit berbeda. Ini mendefinisikan pemilih anak ke pemilih utama yang kita tentukan. Misalnya, jika kita hanya ingin menangkap klik peristiwa pada tombol di dalam bagian elemen artikel, Anda akan menggunakan cara berikut:

$("artikel").on("click", "button", function() {

Contoh program eventHandler.html :

<!DOCTYPE html>
<html>
<head>
  <title>Latihan menggunakan event mengetik jQuery</title>
  <script src="jquery-3.5.1.min.js"></script>
  <script>
    jQuery(document).ready( function() {
      $("textarea").on("keyup", function() {
        var jumlah = $(this).val().length;
        var hasil = "Jumlah karakter: " + jumlah;
        $("#status").text(hasil);
      });
    });
  </script>
</head>
<body>
  <h1>Latihan mengetik</h1>
  <p>Silakan mengetikkan teks ke dalam kotak teks berikut ini</p>
  <textarea cols="50" rows="10"></textarea><br>
  <p id="status"></p>
</body>
</html>

Jalankan program eventHandler.html di atas menggunakan browser untuk melihat hasilnya. Apabil tidak ada aral melintang, seharusnya menghasilkan seperti pada gambar di bawah

pemrograman berbasis web
jQuery event handler

Satu hal yang harus kita akui tentang kode jQuery: Ini jauh lebih bersih terlihat daripada versi JavaScript! Perhatikan bahwa sekarang kita tidak perlu mendefinisikan atribut event di tag. Semua hal itu sudah dibereskan oleh jQuery.

Seperti biasa, proses dimulai dengan menunggu dokumen DOM dimuat lalu menetapkan penanganan event ke elemen area teks di halaman web. Penanganan event mencari event keyup; ketika terdeteksi, fungsi handler mengambil panjang teks di area teks (sekali lagi, menggunakan $(this) lalu menampilkannya ke area elemen status p.

Untuk menentukan penangan kejadian yang hanya memicu sekali dan hilang, gunakan fungsi one() alih-alih fungsi on(). Untuk menghapus penanganan kejadian yang telah Anda tentukan untuk pemilih, gunakan fungsi off().

Leave a Reply