X-Bootcamp

Pembahasan Materi Pemrograman :

Pada artikel ini, membahas tentang membuat notifikasi menjadi interaktif yang didalamnya include dengan kelas badge-counter dan dropdown serta event.preventDefault().

event.preventDefault() merupakan sebuah metode dalam pemrograman JavaScript yang digunakan untuk mencegah perilaku bawaan (default) dari suatu event yang terjadi pada sebuah elemen HTML, Ketika sebuah event (seperti mengklik sebuah tautan atau mengirim formulir) terjadi pada halaman web,

browser secara default akan mengeksekusi perilaku bawaan yang terkait dengan event tersebut. Misalnya, jika Anda mengklik tautan (<a> tag), browser secara normalnya akan mengarahkan Anda ke URL yang ditentukan dalam atribut href dari tautan tersebut.
Namun, terkadang Kita ingin mengontrol perilaku ini. Maka di sinilah event.preventDefault() berguna. Saat dipanggil, metode ini menghentikan perilaku default dari event yang terjadi yang mana ada 2 tugas bersamaan namun salah satunya kita cegah.

Seperti contoh dibawah ini:

 document.getElementById("myLink").addEventListener("click", function(event) {
  event.preventDefault();
  // Mencegah perilaku bawaan dari mengikuti tautan
  // Lakukan sesuatu di sini tanpa mengarahkan ke URL yang ditentukan di href
});
                            

Dalam contoh di atas, event listener ditambahkan ke elemen dengan ID "myLink". Ketika tautan ini diklik, fungsi yang dijalankan akan mencegah perilaku bawaan (mengarahkan ke URL yang ditentukan dalam href) dengan memanggil event.preventDefault().

Hal ini sering digunakan dalam pengembangan web untuk mengontrol perilaku elemen HTML, seperti tautan, formulir, dan lainnya, agar dapat menyesuaikan perilaku defaultnya sesuai dengan kebutuhan aplikasi web yang sedang dibangun.

Menggunakan event.preventDefault() dalam skrip JavaScript di dalam tag HTML, kita dapat melakukannya dengan menambahkannya ke dalam atribut event pada elemen tersebut. Misalnya, jika ingin mencegah tautan dari mengarahkan pengguna ke halaman lain saat diklik, maka kita bisa melakukannya seperti ini:

<a href="https://www.contoh.com" id="myLink">Tautan</a>

<script>
document.getElementById("myLink").addEventListener("click", function(event) {
event.preventDefault(); 
// Mencegah perilaku bawaan dari mengikuti tautan
// Lakukan sesuatu di sini tanpa mengarahkan ke URL yang ditentukan di href
  });
</script>
                            

Dalam contoh ini, saat tautan (<a> tag) dengan ID "myLink" diklik, skrip JavaScript yang terdapat di dalam tag <script> akan mencegah perilaku bawaan dari tautan tersebut menggunakan event.preventDefault().

Anda bisa melanjutkan materi melalu kelas X-Bootcamp secara online maupun offline bagi yang offline dapat langsung mendaftar di sekretariat Software engineering Sindangsari atau di Kantor Pemrograman Sindangsari dan Makroman Kecamatan Sambutan Samarinda yang dibimbing langsung dengan Instruktur Ahli Pemrograman, dengan memahami Fungsi-Fungsi Pemrograman, saat ini pembelajaran sedang berlangsung dengan para peserta berasal dari wilayah Makroman, Sindangsari, Samarinda, Balikpapan, Bontang, Berau dan beberapa peserta dari Propinsi Kaltim serta dari pulau Kalimantan khususnya Sumatera, Jawa dan Sulawesi yang mengikuti Pelatihan Pemrograman.