Belajar JavaScript : Dialog Boxes

posted in: Tutorial Pemrograman | 0

JavaScript mendukung tiga jenis kotak dialog. Kotak dialog dapat digunakan untuk menampilkan dan memberi peringatan, atau untuk mendapatkan konfirmasi masukan atau mendapatkan berbagai jenis masukan dari pengguna.

Alert Dialog Box

Sebuah kotak dialog Alert biasanya digunakan untuk memberikan pesan peringatan kepada pengguna.

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>

Confirmation Dialog Box

Sebuah kotak dialog Confirmation biasanya digunakan untuk mengambil persetujuan pengguna pada pilihan. Dialog ini akan menampilkan kotak dialog dengan dua tombol: Cancel

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>

Prompt Dialog Box

Kotak Prompt Dialog ini sangat berguna ketika Anda ingin pop-up text box untuk mendapatkan input pengguna. Dengan demikian, memungkinkan Anda untuk berinteraksi dengan pengguna. Pengguna dapat mengisi kebutuhan pada field dan kemudian klik OK.

Contoh

Contoh berikut menunjukkan bagaimana 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>

Leave a Reply