Alert, Prompt, dan Confirm Box didalam JavaScript

Alert, Prompt, dan Confirm Box didalam JavaScript

Bagi sobat yang sering melakukan browsing kesana kemari didunia internet, menjelajah berbagai website. Pasti pernah mendapati ketika membuka sebuah website kemudian tiba-tiba muncul sebuah kotak dilayar. Itu adalah kotak atau box dialog. Beberapa bahasa pemrograman mungkin dapat digunakan untuk membuat box dialog, tetapi kebanyakan box dialog dibuat menggunakan JavaScript.

Kotak dialog atau Box dialog adalah sebuah jendela yang muncul dari browser untuk melakukan dialog dengan pengguna. Tentu saja itu sesuai dengan namanya yaitu Kotak Dialog, berfungsi untuk melakukan interaksi dialog dengan user. Ada 3 jenis box dialog didalam JavaScript yang sangat populer dan sangat sering digunakan. 

3 Box Dialog didalam JavaScript yaitu:

1. Alert Box
2. Prompt Box
3. Confirm Box

Alert Box (Kotak Peringatan)

Seperti namanya, alert box digunakan untuk menampilkan sebuah dialog peringatan kepada user. Alert box sering digunakan untuk melakukan debugging oleh programmer, membuat dialog ucapan selamat datang pada sebuah website dan lainnya. Didalam alert box terdapat satu tombol yaitu "OK", kenapa hanya satu tombol?. Sesuai dengan namanya, dialog ini hanya menampilkan sebuah peringatan dan user hanya butuh meng klik OK untuk mengkonfirmasi peringatan tersebut.

Cara membuat alert box didalam JavaScript sangat mudah, yaitu seperti contoh dibawah ini.

<script language="text/javascript"> 

alert ("Halo Sobat Akawebster, Selamat datang di www.akawebster.com");
</script>

Sintak diatas adalah contoh kode JavaScript untuk menampilkan kotak peringatan atau alert box. Kita hanya tinggal menuliskan sintak alert dan diikuti dengan tanda kurung, data yang ada didalam tanda kurung itulah yang akan ditampilkan sebagai pesan peringatan. Data dapat berisi berbagai tipe, juga dapat diganti dengan variabel. Dari contoh sintak diatas akan menghasilkan peringatan seperti pada gambar dibawah ini.

Gambar diatas menunjukkan sebaris kalimat sesuai dengan kalimat yang ada didalam tanda kurung pada fungsi alert yang kita tulis. Untuk membuat break line atau baris baru, sobat dapat menggunakan tanda backslash diikuti huruf n (\n). Ketika JavaScript menemukan tanda itu, ia tidak mencetaknya sebagai teks, tetapi tanda itu sebagai perintah untuk ganti baris. Contoh seperti sintak dibawah ini: 

<script language="text/javascript"> 

alert ("Halo Sobat Akawebster, \n Selamat datang di www.akawebster.com");
</script>

Perlu di ingat bahwa kotak peringatan ini akan muncul sebelum halaman website dimuat, dan setelah pengguna menekan tombol "OK" barulah browser akan memuat halaman websitenya. Jadi berhati-hatilah dalam menggunakannya, karena jika pengguna tidak menekan tombol OK atau enter, maka halaman website tidak akan pernah termuat.

Prompt Box (Kotak Saran)

Prompt box atau Kotak Saran didalam JavaScript yang dimaksud adalah sebuah kotak dialog yang muncul membawa formulir atau kotak inputan yang disediakan untuk diisi oleh pengguna. Prompt Box sering digunakan untuk meminta informasi pengguna seperti nama atau yang lainnya sebelum pengguna tersebut masuk ke halaman website.

Ada 2 hal yang harus diperhatikan dalam membuat Prompt Box:

1. Label serta form harus dibuat terlebih dahulu, sebagai tempat pengguna menginputkan informasi yang diminta.
2. String atau sebuah variabel yang digunakan untuk menyimpan informasi yang telah di isi oleh pengguna, yang mana string atau variabel ini sebagai bahan untuk menampilkan data atau dapat juga disimpan kedalam database.

Dibawah ini mari kita buat sebuah contoh kasus membuat prompt box untuk mengambil informasi nama pengguna. Berarti kita membuat satu label dan satu variabel atau string.

<script language="text/javascript"> 

var nama  = prompt("Nama Anda?");document.write("Nama Anda adalah " + nama);
</script>

Dari sintak diatas, ketika kita memuat halaman websitenya maka akan muncul sebuah kotak dialog yang dinamakan Prompt Box seperti gambar dibawah ini.

Setelah pengguna mengisi nama pada form itu, kemudian menekan tombol Oke atau enter maka halaman website akan dimuat dan menghasilkan nama yang telah diinputkan. Dalam contoh diatas saya memberikan perintah document.write untuk mencetak hasil data yang di inputkan, pada prakteknya sobat bisa meneruskan data tersebut untuk disimpan dalam database atau untuk keperluan lain. Jika pengguna tidak mengisi form tersebut atau menekan tombol cancel/Batal, secara default JavaScript akan memberikan nilai Null.

Confirm Box (Kotak Konfirmasi)

Seperti namanya, Confirm Box atau Kotak Konfirmasi adalah sebuah jendela yang muncul dan menampilkan dua pilihan sebagai dialog konfirmasi kepada pengguna, tombol tersebut yaitu: "Konfirmasi" dan "Batal". Biasanya Confirm Box digunakan ketika kita melakukan penghapusan data. Saat kita melakukan penghapusan, biasanya akan muncul kotak konfirmasi apakah kita akan melanjutkan penghapusan, atau akan membatalkannya. Selain itu, Confirm Box juga sering dipakai untuk dialog konfirmasi ketika kita meninggalkan sebuah halaman website. Jika kita pengguna menekan tombol Konfirmasi maka keluar dari halaman akan dilakukan, tetapi jika menekan tombol Batal maka tidak jadi keluar dari halaman.

Logikanya, pada kotak konfirmasi jika pengguna menekan tombol "Konfirmasi" maka akan memberikan nilai True, karena pengguna menyetujuinya. Jika pengguna menekan tombol "Batal" maka akan bernilai False, karena pengguna tidak menyetujui apa yang dikonfirmasikan.

Dibawah ini adalah contoh penulisan sintak Confirm Box didalam JavaScript.

<script type="text/javascript">

var result = confirm ("Apakah yakin akan menghapus data ini?");
if (result == true) {
  document.write ("Data berhasil dihapus...");
}
else {
  document.write ("Data tetap ada...");
}

</script>

Contoh diatas akan menghasilkan sebuah kotak konfirmasi seperti gambar dibawah ini.

Pada contoh kasus diatas, saya mencontohkan kotak konfirmasi saat pengguna melakukan penghapusan data. Jika pengguna menekan tombol Oke atau Konfirmasi, maka pada kode blok yang bernilai true akan dijalankan. Jika pengguna menekan tombol Batal maka blok kode yang bernilai false yang akan dijalankan.

Baiklah sobat akawebster, demikian tulisan ini tentang penggunaan Alert, Prompt, dan Confirm Box didalam JavaScript. Semoga tulisan ini dapat memberikan manfaat untuk kita bersama.