CARA MEMBUAT DIALOG PESAN DI JAVASCRIPT

Halo sobat Skodev! Dalam membuat website, pastinya kita ingin berinteraksi langsung dengan user agar mereka dapat memahami bagaimana menjalankan website yang telah kita buat, bukan?

Nah, dalam JavaScript, kita bisa membuat dialog pesan untuk berinteraksi dengan user atau biasa disebut sebagai jendela pop-up.

Terdapat 3 jenis dari dialog bawaan JavaScript ini, yakni alert, prompt dan confirm yang masing-masing punya kegunaan berbeda-beda. Pada artikel kali ini, kita akan membahas lebih dalam mengenai cara membuat dialog pesan di JavaScript.

Yuk kita bahas!

1. Alert – Ngepop-up Pesan Sederhana ke User

Kegunaan dari dialog alert() untuk memberikan informasi kepada user. Pesan yang disampaikan singkat dan sederhana, serta tombol yang bisa diklik oleh adalah “OK”.

Contoh penggunaan: alert("Halo! Selamat datang di Skodev!");

atau bisa juga ditulis dengan menggunakan objek window: window.alert("Halo! Selamat datang di Skodev!");

Jadi ketika kode tersebut dijalankan, akan muncul pop up dengan teks “Halo! Selamat datang di Skodev” seperti berikut:

Selain digunakan untuk menampilkan pesan di layar, kamu juga bisa menambahkan pesan alert ke dalam event atau tombol tertentu. Kamu bisa menggunakan event listener pada kasus kali ini. Contoh: Login

Sebelum tombol diklik, tampilannya akan seperti ini:

Nah, jika tombol login sudah diklik, maka akan muncul pop-up seperti ini:

2. Prompt – Untuk bertanya dengan User

Pada dialog prompt() digunakan saat kamu ingin meminta jawaban atau sebuah input. Misalnya nih saat kamu membuat form pendaftaran, kamu bisa menggunakan kode seperti ini:

let nama = prompt("Siapa nama kamu?");
alert("Hai, " + nama + "! Senang kenalan sama kamu!");

Sebelum dijalankan, tampilannya seperti ini:

Jika user telah menulis namanya, dan mengklik “Ok”, maka akan menghasilkan seperti berikut:

Input yang diberikan oleh user akan disimpan di dalam variabel nama. Jika user tidak mengisi apapun lalu mengklik “Cancel”, maka nilai dari variabel nama akan menjadi null.

3. Confirm – Agar user memilih antara Yes atau No

Penggunaan dialog confirm() bertujuan untuk melakukan konfirmasi saat user akan melakukan suatu tindakan tertentu. Contohnya saat user akan menyimpan atau menghapus sesuatu, tentunya kamu bisa menambahkan dialog ini untuk memastikan atau mengkonfirmasi tindakan tersebut.

Contoh penggunaan: confirm("Apakah kamu yakin untuk menghapus akun?");

Jika user memilih “Yes”, dialog akan mengembalikan nilai true, sedangkan jika memilih “No”, akan mengembalikan nilai false.

Contoh lengkap:

let yakin = confirm("Apakah kamu yakin untuk menghapus akun?");
if (yakin) {
  alert("Ya!");
} else {
  alert("Tidak.");
}

Kamu bisa menggunakan kondisi if-else pada kondisi ini untuk menyesuaikan respons berdasarkan pilihan user.

Kekurangan dari Dialog Bawaan JavaScript

Terlihat mudah penggunaan ketiga dialog bawaan dari JavaScript ini, tapi ada kekurangannya, yakni tampilan dari dialog ini sangat sederhana yang tentunya tidak bisa di-styling. Biasanya juga akan dianggap mengganggu user experience.

Kesimpulan

Belajar tentang dialog JavaScript kali ini bisa memberikan modal awal yang penting dalam mempelajari interaksi user pada website kamu. Yuk bisa praktek langsung di projek kamu!

Selamat belajar sobat Skodev!