Sign in Subscribe
Javascript

Menggunakan Alert, Confirm, dan Prompt untuk Interaksi dengan Pengguna

Menggunakan Alert, Confirm, dan Prompt untuk Interaksi dengan Pengguna
Photo by Christina @ wocintechchat.com / Unsplash

Saat mengembangkan aplikasi web, sering kali kita perlu berkomunikasi dengan pengguna melalui pop-up sederhana. JavaScript menyediakan tiga metode utama untuk menampilkan pesan dan mendapatkan respons dari pengguna, yaitu alert, confirm, dan prompt.

Ketiga metode ini memungkinkan kita untuk menampilkan peringatan, meminta konfirmasi, dan mengumpulkan input dari pengguna tanpa perlu menggunakan elemen HTML tambahan. Artikel ini akan membahas cara menggunakan alert, confirm, dan prompt, serta contoh penerapannya dalam pengembangan web.

1. Menggunakan alert() untuk Menampilkan Peringatan

Apa Itu alert()?

alert() digunakan untuk menampilkan pesan peringatan atau informasi kepada pengguna. Dialog yang muncul hanya memiliki satu tombol "OK", sehingga tidak memungkinkan pengguna untuk memberikan respons selain menutup pop-up.

Contoh Penggunaan alert()

alert("Selamat datang di website kami!");

Kode di atas akan menampilkan pop-up dengan pesan "Selamat datang di website kami!" yang hanya bisa ditutup dengan tombol "OK".

Contoh Implementasi di HTML

<button onclick="tampilkanAlert()">Klik Aku</button>
<script>
    function tampilkanAlert() {
        alert("Anda mengklik tombol ini!");
    }
</script>

Ketika tombol diklik, pop-up akan muncul dengan pesan yang telah ditentukan.

2. Menggunakan confirm() untuk Konfirmasi dari Pengguna

Apa Itu confirm()?

confirm() digunakan ketika kita ingin meminta konfirmasi dari pengguna. Dialog ini memiliki dua tombol: "OK" dan "Cancel", sehingga kita bisa menentukan tindakan berdasarkan respons pengguna.

Contoh Penggunaan confirm()

let hasil = confirm("Apakah Anda yakin ingin menghapus data?");
if (hasil) {
    console.log("Data dihapus.");
} else {
    console.log("Penghapusan dibatalkan.");
}

Jika pengguna menekan "OK", maka hasil akan bernilai true, dan jika memilih "Cancel", maka hasil akan bernilai false.

Contoh Implementasi di HTML

<button onclick="konfirmasiHapus()">Hapus Data</button>
<script>
    function konfirmasiHapus() {
        let konfirmasi = confirm("Apakah Anda ingin menghapus data ini?");
        if (konfirmasi) {
            alert("Data berhasil dihapus!");
        } else {
            alert("Penghapusan dibatalkan.");
        }
    }
</script>

Tombol ini akan meminta konfirmasi sebelum data dihapus.

3. Menggunakan prompt() untuk Mengambil Input dari Pengguna

Apa Itu prompt()?

prompt() digunakan untuk meminta input dari pengguna dalam bentuk teks. Dialog ini memiliki kolom input, serta tombol "OK" dan "Cancel".

Contoh Penggunaan prompt()

let nama = prompt("Masukkan nama Anda:");
if (nama) {
    console.log("Halo, " + nama + "!");
} else {
    console.log("Anda tidak memasukkan nama.");
}

Jika pengguna mengisi nama dan menekan "OK", nama tersebut akan disimpan dalam variabel nama. Jika memilih "Cancel", variabel akan bernilai null.

Contoh Implementasi di HTML

<button onclick="mintaNama()">Masukkan Nama</button>
<script>
    function mintaNama() {
        let nama = prompt("Siapa nama Anda?");
        if (nama) {
            alert("Halo, " + nama + "!");
        } else {
            alert("Anda tidak mengisi nama.");
        }
    }
</script>

Tombol ini akan meminta pengguna memasukkan nama dan menampilkannya dalam pop-up lain.

Perbedaan alert(), confirm(), dan prompt()

Metode Fungsi Tombol
alert() Menampilkan peringatan atau informasi OK
confirm() Meminta konfirmasi pengguna OK, Cancel
prompt() Meminta input dari pengguna OK, Cancel + Input
Catatan: Ketiga metode ini menghentikan eksekusi kode sampai pengguna memberikan respons, sehingga kurang cocok untuk aplikasi yang membutuhkan pengalaman pengguna yang lebih mulus.

Kapan Harus Menggunakan alert(), confirm(), dan prompt()?

✅ Gunakan alert() untuk menampilkan pesan penting seperti notifikasi atau peringatan.
✅ Gunakan confirm() untuk meminta konfirmasi dari pengguna sebelum melakukan tindakan yang tidak dapat dibatalkan (misalnya menghapus data).
✅ Gunakan prompt() untuk mengambil input dari pengguna dengan cara cepat dan sederhana.
❌ Jangan gunakan metode ini jika ingin navigasi yang lebih smooth dan tidak mengganggu pengalaman pengguna, karena pop-up ini menghentikan sementara eksekusi script.

Kesimpulan

  • alert() digunakan untuk menampilkan peringatan atau informasi kepada pengguna.
  • confirm() digunakan untuk meminta konfirmasi pengguna sebelum melakukan aksi tertentu.
  • prompt() digunakan untuk meminta input teks dari pengguna dalam bentuk pop-up.
  • Ketiga metode ini bersifat blocking (menghentikan sementara eksekusi script) dan cocok digunakan dalam situasi tertentu saja.

Dengan memahami cara kerja alert, confirm, dan prompt, kita bisa meningkatkan interaksi pengguna dalam aplikasi web dengan cara yang lebih praktis dan mudah diterapkan!

Read next