Mengenal Jendela Dialog pada JavaScript

Dari materi sebelumnya, sudah membahas materi cara menampilkan output pada JavaScript

Dari salah satu ini dengan menggunakan fungsi alert(), Fungsi ini yaitu sebuah fungsi yang akan menampilkan perintah jendela dialog.

Lalu Bagaimana Cara mengambil input ?

Yaitu ada 2 Cara yang bisa di lakukan :

1. Menggunakan Form
2. Menggunakan Jendela Dialog

dan di sini kita membahas pada no. 2 Yaitu: jendela dialog.

Jendela dialog adalah jendela yang digunakan untuk berinteraksi dengan si pengguna / user.

Ada 3 macam jendela dialog pada Javascript:

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

Dari 3 dialog ini memiliki perilaku dan kegunaan yang berbeda-beda,
yaitu :

1. Dialog Alert
Dialog Alert() yaitu digunakan untuk memunculkan atau menampilkan sebuah pesan informasi atau perintah.

Fungsi alert() berada dalam objek window.

Kalian bisa menggunakannya contohnya seperti ini:

window.alert("Hello World!");

Atau yang seperti ini:

alert("Hello kawan");

Karena objek window bersifat global, kalian boleh tidak menulisnya

Dialog alert() tidak akan mengembalikan nilai apa-apa saat dieksekusi.

silahkan kalian coba pada script di bawah ini:

Hasilnya akan seperti dibawah ini:

2. Dialog Confirm
Dialog confirm() digunakan untuk melakukan konfirmasi dalam melakukan tindakan tertentu.

Contohnya:

Saat kalian menghapus sesuatu, maka ada baiknya menampilkan dialog confirm(). Karena tindakan tersebut cukup berbahaya.

Dialog confirm dapat dibuat dengan fungsi confirm().

Contohnya:

confirm("Apakah anda yakin akan menghapus?");

Dialog confirm() akan mengembalikan nilai true apabila kita memilih tombol OK dan akan mengembalikan nilai false apabila kita memilih Cancel.

Nilai kembalian ini dapat kita tampung dalam variabel untuk diproses.

Contoh:

 <script>
var nama = prompt("Siapa nama kamu?", "");
document.write("<p>Hello "+ nama +"</p>");
</script>
</body>
</html>

Hasilnya:

Dialog prompt() memiliki beberapa parameter yang harus diberikan:

1. Teks yang akan ditampilkan pada form;
2. Nilai default untuk field input.

Pada contoh di atas, kita memberikan nilai default-nya berupa string kosong dengan tanda petik “”.

Kapan Waktu yang Tepat Menggunakan Alert, Confirm, dan Prompt?
Berdasarkan contoh-contoh di atas, kita bisa mengetahui. Kapan waktu yang tepat untuk menggunakan alert(), confirm() dan prompt().

Saat kita hanya ingin menampilkan informasi saja, maka gunakan alert().

Saat kita ingin jawaban konfirmasi dari pengguna, maka gunakan confirm().

dan apabila kita ingin mengambil data teks dari pengguna, maka gunakan prompt().

Apa Selanjutnya?
Itulah tiga macam jendela dialog yang ada pada Javascript.
Selanjutnya, kita akan banyak menggunakan jendela dialog ini untuk membuat aplikasi.
Karena itu, pahami fungsi ketiga dialog ini.

Selanjutnya silahkan pelajari tentang : Operator pada Javascript;

Operator pada Javascript;
Percabangan pada Javascript;
Perulangan pada Javascript;

dan materi selanjutnya bisa masuk ke Kursus Pemrogramman React Js

Tinggalkan Balasan