Pop up window sangat berguna untuk meningkatkan user experience dan membuat website lebih interaktif. Fitur ini berperan dalam mencegah kesalahan user dengan memberikan peringatan dan konfirmasi sebelum melakukan suatu tindakan
Pada umumnya, ada tiga jenis pop up window dalam JavaScript. Masing-masing memiliki fungsi dan kegunaannya sendiri.
- Alert: berfungsi untuk menampilkan pesan kepada user. Jenis ini hanya memberikan informasi dan memiliki satu tombol untuk menutup pesan.
- Confirm: menampilkan pesan dengan dua tombol, biasanya “OK” dan “Cancel”. Confirm dipakai untuk meminta konfirmasi dari user sebelum melanjutkan suatu tindakan.
- Prompt: mirip dengan confirm, tetapi prompt juga menyediakan kotak input teks agar user bisa memasukkan data atau informasi.
A. Popup Alert
Jendela alert() biasanya digunakan untuk menampilkan sebuah pesan peringatan atau informasi. Fungsi alert() berada dalam objek window. contohnya seperti ini:
window.alert("Hello World!");bisa juga
alert("Hello kawan");Karena objek window bersifat global, kita boleh tidak menulisnya. Dialog alert() tidak akan mengembalikan nilai apa-apa saat dieksekusi.
<!DOCTYPE html>
<html>
<head>
<title>Dialog Alert</title>
</head>
<body>
<script>
alert("Selamat datang di tutorial Javascript");
</script>
</body>
</html>Pada HTML, kita bisa masukan fungsi alert() pada atribut onClick agar nanti ditampilkan saat sebuah elemen diklik.
<!DOCTYPE html>
<html>
<head>
<title>Dialog Alert</title>
</head>
<body>
<button onClick="alert('Tombol diklik!')">Klik Saya</button>
</body>
</html>B. Popup Confirm
Jendela confirm() digunakan untuk melakukan konfirmasi dalam melakukan tindakan tertentu.
Misalnya:
Saat kita menghapus sesuatu, maka ada baiknya menampilkan dialog confirm(). Karena tindakan tersebut cukup berbahaya. Jendela confirm dapat dibuat dengan fungsi confirm()
Contoh
confirm("Apakah anda yakin akan menghapus?");Jendela confirm() akan mengembalikan nilai true apabila kita memilih tombol OK dan akan mengembalikan nilai false apabila kita memilih Cancel.
<!DOCTYPE html>
<html>
<head>
<title>Dialog Confirm</title>
</head>
<body>
<script>
var yakin = confirm("Apakah kamu yakin akan mengunjungi website kami...?");
if (yakin) {
window.location = "https://www.syaiflash.com";
} else {
document.write("Baiklah, tetap di sini saja..,:)");
}
</script>
</body>
</html>C. Jendela Prompt
Jendela prompt() berfungsi untuk mengambil sebuah inputan dari pengguna. Jendela prompt() akan mengembalikan sebuah nilai string dari apa yang diinputkan oleh pengguna.
<!DOCTYPE html>
<html>
<head>
<title>Dialog Prompt</title>
</head>
<body>
<script>
var nama = prompt("Siapa nama kamu?", "");
document.write("<p>Hello "+ nama +"</p>");
</script>
</body>
</html>Dialog prompt() memiliki beberapa parameter yang harus diberikan:
- Teks yang akan ditampilkan pada form;
- Nilai default untuk field input.
Pada contoh di atas, kita memberikan nilai default-nya berupa string kosong dengan tanda petik ""
D. Catatan
Berdasarkan contoh-contoh di atas, kita bisa mengetahui Kapan waktu yang tepat untuk menggunakan alert(), confirm() dan prompt().
- Jika ingin menampilkan informasi saja, maka gunakan
alert(). - Saat ingin jawaban konfirmasi dari pengguna, maka gunakan
confirm(). - apabila ingin mengambil data teks dari pengguna, maka gunakan
prompt().
Leave a Reply