Belajar JavaScript Dasar Lengkap

Menggunakan Message Dialog JavaScript

Belajar javascript dasar lengkap untuk pemula – Pemrogramman JavaScript mendukung tiga jenis kotak dialog yang penting. Kotak dialog ini dapat digunakan untuk meningkatkan dan mengingatkan, atau untuk mendapatkan konfirmasi atas input apa pun atau untuk mendapatkan semacam input dari pengguna.

Jendela dialog merupakan jendela yang digunakan untuk berinteraksi dengan pengguna.

Ada tiga macam jendela dialog pada Javascript:

1. Jendela dialog alert();
2. Jendela dialog confirm();
3. Jendela dialog promp();

Ketiga dialog ini memiliki perilaku dan kegunaan yang berbeda-beda.

Alert Dialog JavaScript

Kotak dialog peringatan sebagian besar digunakan untuk memberikan pesan peringatan kepada pengguna. Misalnya, jika satu bidang input mengharuskan untuk memasukkan beberapa teks tetapi pengguna tidak memberikan input 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 ramah. Kotak peringatan hanya memberikan satu tombol “OK” untuk memilih dan melanjutkan.

<html>
<head>
<script type="text/javascript">

function Warn() 
{
alert ("Ini pesan peringatan!!!");
document.write ("Ini pesan peringatan!!!");
}

</script>
</head>
<body>
<p>Klik tombol berikut untuk melihat hasilnya: </p>
<form>
<input type="button" value="Click Me" onclick="Warn();" />
</form>
</body>
</html>

Confirmation Dialog JavaScript

Kotak dialog konfirmasi sebagian besar digunakan untuk meminta persetujuan pengguna pada opsi apa pun. Pesan dialog ini menampilkan kotak dialog dengan dua tombol yaitu OK dan Batal. Jika pengguna mengklik tombol OK, metode jendela confirm() akan mengembalikan nilai true. Jika pengguna mengklik tombol Batal, maka konfirmasi() mengembalikan false.

<html>
<head>
<script type="text/javascript">

function getConfirmation(){
var retVal = confirm("Apakah anda ingin melanjutkan ?");
if( retVal == true )
{
document.write ("Lanjutkan !");
return true;
      }else
{
Document.write ("tidak lanjutkan !");
return false;
}
}

</script>
</head>
<body>
<p> Klik tombol untuk melihat hasil
<form>
<input type="button" value="Click Me" onclick="getConfirmation();" />
</form>
</body>
</html>

Prompt Dialog JavaScript

Kotak dialog prompt sangat berguna ketika kita ingin memunculkan kotak teks untuk mendapatkan input pengguna. Dengan demikian, 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 ditampilkan 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 jendela prompt() akan mengembalikan nilai yang dimasukkan dari kotak teks. Jika pengguna mengklik tombol Batal, metode jendela prompt() mengembalikan null.

<html>
<head>
<script type="text/javascript">
<!--
function getValue(){
var retVal = prompt("Masukan nama anda: ", "nama anda disini");
document.write("Yang anda masukan : " + retVal);
}
//-->
</script>
</head>
<body>
<p> Klik tombol untuk melihat hasil</p>
<form>
<input type="button" value="Click Me" onclick="getValue();" />
</form>
</body>
</html>

Referensi :

• Abdul Qadir, 2013, From Zero to A Pro Javascript & Jquery, Andi Yogyakarta
• Tutorials point, 2015, JavaScript Language Tutorials Point, E-book,com
• www.w3schools.com

<< part 6