Cara Membuat Alert, Confirm, Dan Prompt Dengan JavaScript
Pada seri ini kita akan belajar cara membuat alert, confirm, dan prompt dengan JavaScript, ketiga nama tersebut juga bisa disebut dengan Message Box. Pada seri sebelumnya kita sudah pernah membuat alert dengan JavaScript, namun pada seri ini akan dijelaskan secara mendetail. Karena message box tidak hanya alert saja seperti yang sudah dijelaskan diatas. Kemudian pada seri ini akan dibagi menjadi 3 poin utama sebagai berikut.
Cara Membuat Alert Dengan JavaScript
Apabila kamu mengikuti seri tutorial belajar JavaScript dasar di Cara Kode pasti kamu di seri ini sangat mudah untuk membuat alert, namun saya ingin mengulang supaya kamu lebih paham, dan mungkin ada pengunjung yang baru menemukan seri JavaScript ini melalui tulisan ini.
Untuk membuat alert dengan JavaScript cukup mudah kamu cukup menuliskan kode seperti ini :
Pada potongan kode diatas “Pesan Alert” dapat kamu ganti tulisannya sesuai pesan yang kamu inginkan, selama masih berada didalam tanda kutip. Supaya lebih jelas silakan lihat contoh kode lengkapnya seperti ini :
Pada contoh kode diatas kode alert terdapat pada baris nomor 11 yang kodenya alert(“Selamat Datang Di Website Kami”);. Dari kode tersebut akan menampilkan sebuah alert (message box) dengan pesan didalamnya “Selamat Datang Di Website Kami”, seperti gambar dibawah ini :
Selain itu kamu juga bisa membuat alert yang pesannya disimpan didalam variabel, kemudian nama variabel itulah yang dimasukkan didalam kode alert. Contohnya seperti ini :
Cara Membuat Confirm Box Dengan JavaScript
Confirm box atau juga bisa disebut confirm saja pada JavaScript yaitu sebuah message box yang didalamnya terdapat dua pilihan Ok atau Cancel (mungkin setiap browser menampilkan tulisan pilihan yang berbeda). Biasanya ini digunakan saat ingin menghapus sebuah data pada website yang sebelum menjalankan script hapus data dimunculkan confirm (konfirmasi) Ok atau Cancel. Tujuannya untuk menghindari apakah tombol hapus tidak sengaja diklik atau memang ingin menghapusnya. Namun pada seri ini kita tidak membuat kode menghapus data, karena ini seri tutorial JavaScript dasar kita akan belajar dasarnya terlebih dahulu supaya kamu lebih mudah memahaminya.
Nilai yang dihasilkan dari Confirm Box boolean yaitu true atau false, jika user klik Ok maka akan menghasilkan nilai true, dan apabila user klik Cancel maka akan menghasilkan nilai false. Untuk lebih jelasnya silakan lihat contoh kode dibawah ini :
Pada contoh kode diatas contoh kode confirm box terdapat pada baris nomor 15, yang dibungkus dalam function bernama konfirmasiDulu. Function konfirmasiDulu akan dijalankan apabila tombol bernama Keluarkan Confirm Box di klik.
Ketika tombol Keluarkan Confirm Box di klik maka function konfirmasiDulu akan dijalankan. Didalam function tersebut terdapat kode confirm box yang kodenya confirm(“Silakan Klik Tombol Salah Satu Tombol”) yang ketika dijalankan nilainya akan disimpan kedalam variabel konfirmasi, apabila user memilih Ok maka variabel konfirmasi akan bernilai true, atau apabila memilih Cancel variabel konfirmasi akan bernilai false.
Kemudian pada baris nomor 17 sampai 21 terdapat logika if else. Apabila variabel konfirmasi bernilai true maka akan mengisi variabel text dengan nilai “Kamu memilih Tombol OK”, atau apabila tidak true (false) akan mengisi variabel text dengan nilai“Kamu memilih Tombol Cancel”. Selanjutnya pada baris nomor 23akan mengisi tag paragraf HTML yang memiliki id hasil dengan nilai yang ada di variabel text.
Dari contoh kode diatas apabila dibuka pada browser akan tampil seperti berikut :
Sekarang silakan klik tombol Keluarkan Confirm Box maka akan muncul confirm box seperti dibawah ini :
Apabila kamu klik Ok maka akan muncul tulisan “Kamu klik Tombol OK”, atau apabila kamu klik Cancelmaka akan muncul tulisan “Kamu klik Tombol Cancel” pada halaman web.
Cara Membuat Prompt Box Dengan JavaScript
Prompt box tampilanya mirip seperti alert namun memiliki sebuah input yang berfungsi untuk memasukkan text atau tulisan dari pengunjung website. Misalnya memasukkan sebuah nama saat pengunjung mengunjungi website. Sehingga pada website terdapat tulisan ucapan selamat datang beserta nama pengunjungnya. Prompt Box ditulis dengan kode seperti berikut :
Prompt box bisa memiliki 2 parameter yang berisi judul pesan dan value input yang otomastis akan muncul saat prompt box ditampilkan. Namun apabila kamu hanya ingin menampilkan dengan value input kosong kamu bisa dengan tidak menulis value inputnya (tulis kode prompt dengan 1 parameter). Contohnya seperti ini :
Untuk lebih jelasnya silakan lihat contoh kode dibawah ini :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<head>
<title>Cara Kode - Belajar JavaScript Dasar</title>
</head>
<body>
<p id="name"></p>
<script>
var nama = prompt("Masukan nama kamu:");
if(nama != ""){
document.getElementById("name").innerHTML = "Selamat datang " + nama;
}
</script>
</body>
</html>
|
Dari contoh kode diatas contoh kode promp box terdapat pada baris nomor 11 yaitu prompt(“Masukan nama kamu:”), ketika promp box ini dijalankan maka nilai (value) yang dimasukan user akan disimpan kedalam variabel nama. Dan di bawahnya terdapat kode logika if, kode tersebut apabila variabel nama tidak kosong (sudah diisi) maka akan menampilkan tulisan “Selamat datang ” + nama pada tag paragraf yang memiliki yang memiliki id name (baris nomor 8). Dan berikut adalah gambar hasil dari kode diatas :
Setelah prompt box muncul dan diisi nama kemudian klik Ok maka akan muncul tulisan seperti ini :
Demikian untuk seri belajar cara membuat alert, confirm, dan prompt dengan JavaScript, apabila kamu memiliki pertanyaan seputar seri ini silakan sampaikan di kolom komentar dibawah. Serta apabila kamu baru menemukan seri ini silakan kunjungi halaman seri belajar JavaScript dasar supaya kamu mengetahui list seri belajar JavaScript yang ada di Cara Kode secara berurutan yang mungkin dapat menambah wawasan kamu tentang bahasa pemrograman JavaScript.
Komentar
Posting Komentar