Skip to content Skip to sidebar Skip to footer

Memahami dan Cara Penggunaan POPUP BOX Pada Javascript

Memahami dan Cara Penggunaan POPUP BOX Pada Javascript
Jendela Dialog atau yang sering disebut popup box dalam javascript berfungsi untuk melalakukan sebuah dialog pada user dalam halaman web atau program. Yakni dengan popup box, akan memudahkan user untuk memberikan sebuah perintah pada sebuah program.

Javascript memiliki 3 (tiga) jenis fungsi untuk memunculkan popup box atau dialog box yakni popup box alert(),confim(), dan prompt(). Ketiga jenis jendela dialog ini memiliki fungsi dan kegunaan yang berbeda-beda.

Untuk lebih jelasnya, berikut saya berikan ulasan lengkap mengenal ke-3 jenis Jendela Dialog atau Popup Box pada javascript.


Popup Box Alert Pada Javascript

Jendela dialog alert() berguna untuk memberikan parameter sebuah pesan pemberitahuan atau peringatan. Ada dua cara penggunaan alert dalam javscript, yakni
  • alert() - tidak mengembalikan nilai apapun.
  • window.alert() - merupakan objek yang bersifat global, boleh tak perlu menggunakaannya.
Fungsi dari keduanya sama saja, popup alert harus diberikan parameter berupa teks untuk ditampilkan pada jendela dialog.

Contoh penggunaan pop up box alert() di javascript :

  • alert()
<script>
       alert("Selamat datang Hardifal.com !");
</script>

Hasil :
Gambar Penggunaan popup box alert di javascript

  • window.alert()
<script>
 window.alert("Selamat datang Hardifal.com !");
</script>

Akan menghasilkan tampilan pop up box yang sama.


Popup Box Confim Pada Javascript

Jendela dialog confirm() merupakan popup box pada javascript yang berguna untuk menentukan tindakan tertentu. Misalnya ketika kita melakukan tindakan menyimpan atau menghapus, alangkah baiknya gunakan popup box conifirm karena tindakan tersebut cukup penting dan berbahaya.

Nah cara penggunaanya sama sepert popup alert() dengan mengisi parameter sebuah pesan yang ingin ditampilkan, hanya saja popup box memiliki 2 (dua) opsi yakni opsi tersebut berisi nilai boolean TRUE atau FALSE baca artikel sebelumnya tentang memahami penggunaan type data boolean dalam javascript.

Cara Penggunaan Popup Box Confirm() di Javascript :

  • Confirm()
<script>
 confirm("Yakin ingin mengunjungi Hardifal.com ?");
</script>

Hasil :
Gambar Pengguaan popup box confirm di javascript
Terdapat sebuah nilai pada jendela dialog confirm() yakni, Ok = TRUE dan Batal = FALSE.

Nah, kita juga bisa memberikan aksi atau tindakan pada nilai True / false sebagai berikut.

Contohnya saya ingin memberikan sebuah tindakan ketika memilih OK, maka akan beralih ke halaman https://www.hardifal.com. Dan jika memilih Batal, akan menampilkan pesan "Baik, Anda tetap disini".

Contoh :
<script>
 var yakin =confirm("Yakin ingin mengunjungi Hardifal.com ?");

 if (yakin == true) {
  location.assign("https://www.hardifal.com");
 }else{
  document.write("Baik, Anda tetap disini");
 }
</script>

Hasil :

Gambar Gif Contoh penggunaan popup box confirm di javascript
Note : jika anda perhatikan program diatas, location.assign() berfungsi untuk mengarahkan menuju ke sebuah halaman lain. Baca lebih lanjut memahami penggunaan windows location (mengarahkan halaman).


Popup Box Prompt pada Javascript

Jendela dialog prompt() berfungsi mengambil sebuah input dari user/pengguna. Kemudian prompt akan mengembalikan nilai input menjadi String.

Cara Penggunaan Popup Box Prompt di Javascript

<script>
 var nama = prompt("Masukan nama anda : ");
 document.write(nama);
</script>

Hasil :
Gambar Gif Contoh penggunaan popup box prompt di javascript
Apabila anda memasukan nilai number atau angka (0,1,2, dst) pada prompt di javascript akan dianggap sebagai nilai String, yakni tidak bisa dijumlahkan.

Apabila anda ingin melakukan aritmatika menggunakan prompt yakni penjumlahan dsb. Harus mengubah nilai kembali dari prompt (string) menjadi (integer). Boleh menggunakan parseInt() baca lebih lanjut memahami cara penggunaan parseInt() dalam javascript.

Kesimpulan:
Popup box alert() digunakan untuk menampilkan informasi.
Popup box confirm() digunakan untuk membuat dialog.
Popup box prompt() digunakan untuk menginput nilai pada javascript.

Post a comment for "Memahami dan Cara Penggunaan POPUP BOX Pada Javascript"