JavaScript - Kotak Dialog
JavaScript mendukung tiga jenis kotak dialog penting. Kotak dialog ini dapat digunakan untuk membangkitkan dan mengingatkan, atau untuk mendapatkan konfirmasi atas masukan apa pun atau untuk mendapatkan semacam masukan dari pengguna. Di sini kita akan membahas setiap kotak dialog satu per satu.
Kotak Dialog Peringatan
Kotak dialog peringatan sebagian besar digunakan untuk memberikan pesan peringatan kepada pengguna. Misalnya, jika salah satu bidang masukan perlu memasukkan beberapa teks tetapi pengguna tidak memberikan masukan apa pun, maka sebagai bagian dari validasi, Anda dapat menggunakan kotak peringatan untuk memberikan pesan peringatan.
Meskipun demikian, kotak peringatan masih dapat digunakan untuk pesan yang lebih bersahabat. Kotak peringatan hanya memberikan satu tombol "OK" untuk memilih dan melanjutkan.
Contoh
<html>
<head>
<script type = "text/javascript">
<!--
function Warn() {
alert ("This is a warning message!");
document.write ("This is a warning message!");
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "Warn();" />
</form>
</body>
</html>Keluaran
Kotak Dialog Konfirmasi
Kotak dialog konfirmasi sebagian besar digunakan untuk meminta persetujuan pengguna pada opsi apa pun. Ini menampilkan kotak dialog dengan dua tombol:OK dan Cancel.
Jika pengguna mengklik tombol OK, metode jendela confirm()akan kembali benar. Jika pengguna mengklik tombol Batal, makaconfirm()mengembalikan salah. Anda dapat menggunakan kotak dialog konfirmasi sebagai berikut.
Contoh
<html>
<head>
<script type = "text/javascript">
<!--
function getConfirmation() {
var retVal = confirm("Do you want to continue ?");
if( retVal == true ) {
document.write ("User wants to continue!");
return true;
} else {
document.write ("User does not want to continue!");
return false;
}
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getConfirmation();" />
</form>
</body>
</html>Keluaran
Kotak Dialog Prompt
Kotak dialog prompt sangat berguna ketika Anda ingin memunculkan kotak teks untuk mendapatkan masukan pengguna. Jadi, ini memungkinkan Anda untuk berinteraksi dengan pengguna. Pengguna perlu mengisi kolom dan kemudian klik OK.
Kotak dialog ini ditampilkan menggunakan metode yang disebut prompt() yang mengambil dua parameter: (i) label yang ingin Anda tampilkan di kotak teks dan (ii) string default untuk ditampilkan di kotak teks.
Kotak dialog ini memiliki dua tombol: OK dan Cancel. Jika pengguna mengklik tombol OK, metode jendelaprompt()akan mengembalikan nilai yang dimasukkan dari kotak teks. Jika pengguna mengklik tombol Batal, metode jendelaprompt() kembali null.
Contoh
Contoh berikut menunjukkan cara menggunakan kotak dialog prompt -
<html>
<head>
<script type = "text/javascript">
<!--
function getValue() {
var retVal = prompt("Enter your name : ", "your name here");
document.write("You have entered : " + retVal);
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getValue();" />
</form>
</body>
</html>