Alert Yes No Javascript

MUAZHAN

7 min read

·

Jun 18, 2024

23

Share

Alert Yes No JavaScript: Konfirmasi Sederhana dan Fleksibel

Alert Yes No merupakan sebuah fitur yang memungkinkan pengguna untuk memilih antara "Ya" dan "Tidak" pada sebuah pertanyaan atau konfirmasi dalam aplikasi web yang dikembangkan dengan JavaScript. Fitur ini sangat berguna dalam berbagai situasi, seperti:

Contoh Penggunaan Alert Yes No:

• Konfirmasi Penghapusan Data: Sebelum menghapus data penting, konfirmasi kepada pengguna dengan menampilkan Alert Yes No untuk memastikan mereka benar-benar ingin menghapus data tersebut.
• Permintaan Persetujuan: Mintalah persetujuan pengguna sebelum melakukan tindakan yang berpotensi mengubah data, seperti mengedit pengaturan atau mengunggah file.
• Peringatan Sebelum Keluar: Cegah pengguna untuk meninggalkan halaman web sebelum menyimpan perubahan dengan menampilkan Alert Yes No.

Implementasi Alert Yes No dengan JavaScript:

JavaScript tidak menyediakan fungsi built-in untuk Alert Yes No. Namun, Anda dapat mengimplementasikannya dengan menggunakan kombinasi fungsi confirm() dan penanganan event.

Berikut adalah contoh kode sederhana untuk Alert Yes No:

function confirmAction() {
  if (confirm("Apakah Anda yakin ingin melanjutkan?")) {
    // Kode yang akan dijalankan jika pengguna menekan "OK" (Ya)
    console.log("Pengguna memilih Ya!");
  } else {
    // Kode yang akan dijalankan jika pengguna menekan "Cancel" (Tidak)
    console.log("Pengguna memilih Tidak!");
  }
}

// Panggil fungsi confirmAction() saat diperlukan
document.getElementById("myButton").addEventListener("click", confirmAction);

Penjelasan:

1. Fungsi confirmAction(): Fungsi ini berisi logika untuk menampilkan Alert Yes No dan menangani hasil dari pilihan pengguna.
2. confirm("Apakah Anda yakin ingin melanjutkan?"): Fungsi confirm() akan menampilkan sebuah dialog kotak dengan pesan "Apakah Anda yakin ingin melanjutkan?". Dialog kotak ini memiliki tombol "OK" (Ya) dan "Cancel" (Tidak).
3. if (confirm(...)): Jika pengguna menekan tombol "OK", fungsi confirm() akan mengembalikan nilai true.
4. else: Jika pengguna menekan tombol "Cancel", fungsi confirm() akan mengembalikan nilai false.
5. Penanganan Event: Kode ini menambahkan event listener pada tombol dengan id "myButton". Ketika tombol diklik, fungsi confirmAction() akan dipanggil.

Menyesuaikan Tampilan dan Fungsionalitas:

Anda dapat menyesuaikan tampilan dan fungsionalitas Alert Yes No dengan menggunakan teknik CSS dan JavaScript.

• Mengubah Pesan: Ubah pesan dalam fungsi confirm() untuk menampilkan pesan yang lebih spesifik sesuai kebutuhan.
• Menambahkan CSS: Anda dapat menambahkan style CSS untuk mengubah tampilan dialog kotak.
• Membuat Fungsi Tersendiri: Anda dapat membuat fungsi tersendiri untuk Alert Yes No yang lebih kompleks, dengan parameter yang dapat disesuaikan.

Contoh Implementasi Lain:

Alert Yes No dengan Custom Dialog Box:

  
  


  Show Alert

  

    
Apakah Anda yakin ingin melanjutkan?
    

      Ya
      Tidak
    
  

  

Penjelasan:

1. Kode HTML mendefinisikan sebuah tombol "Show Alert" dan sebuah div dengan class "alert-box" yang berisi pesan alert dan tombol "Ya" dan "Tidak".
2. Kode JavaScript menambahkan event listener pada tombol "Show Alert" untuk menampilkan alert box dan event listener pada tombol "Ya" dan "Tidak" untuk menangani pilihan pengguna.

Keuntungan Alert Yes No:

• User-Friendly: Alert Yes No memberikan konfirmasi yang mudah dipahami dan memberikan kesempatan kepada pengguna untuk membatalkan tindakan yang tidak diinginkan.
• Flexibilitas: Anda dapat menyesuaikan pesan, tampilan, dan fungsionalitas Alert Yes No sesuai kebutuhan.
• Peningkatan Keamanan: Alert Yes No membantu mencegah tindakan yang tidak disengaja dan meningkatkan keamanan aplikasi web.

Kesimpulan:

Alert Yes No merupakan fitur yang sangat berguna dalam pengembangan aplikasi web dengan JavaScript. Dengan mengimplementasikan Alert Yes No, Anda dapat meningkatkan pengalaman pengguna, meningkatkan keamanan, dan memberikan kontrol yang lebih baik kepada pengguna dalam aplikasi web Anda.