Tutorial JavaScript Pemula Part 10 : Mengenal 3 Kotak Dialog Pada JavaScript
Tutorial JavaScript Pemula Part 10 : Mengenal 3 Kotak Dialog Pada JavaScript - Hello everyone selamat datang kembali diwebsite saya belajarwithib.my.id, pada seri kali ini kita akan membahas Mengenal 3 Kotak Dialog Pada JavaScript.
Pada tutorial sebelumnya kita sudah membahas Property Dan Method Objek Tanggal Dalam Javascript dan sekarang kita akan belajar mengenai 3 Kotak Dialog Pada JavaScript.
Yuk simak materinya!
Mengenal 3 Kotak Dialog Pada JavaScript
Didalam javascript ada 3 Kotak Dialog yang berfungsi untuk melakukan interaksi kepada website/pengguna atau juga sebagai penyampai sebuah pesan dan 3 jenis kotak dialog pada javascript yaitu sebagai berikut ini :
- Kotak dialog alert();
- Kotak dialog confirm();
- Kotak dialog promp();
Tentu saja fungsi dari semua kotak dialog akan berbeda beda pastinya.
Yuk kita bahas.
1. Kotak Dialog Alert
Kotak Alert sering digunakan jika Kamu ingin memastikan informasi sampai ke pengguna.
Saat kotak Alert muncul, pengguna harus mengklik "OK" untuk melanjutkan.
Untuk cara penulisannya cukup simple, perhatikanlah code dibawah ini:
alert("Hai Saya Sedang Belajar");
Untuk contoh program sederhananya perhatikanlah code dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
<button onclick="hallo()">Klik Tombol</button>
</body>
<script type="text/javascript">
function hallo() {
alert("Hai saya sedang belajar");
}
</script>
</html>
Maka hasilnya akan seperti dibawah ini :
Untuk tampilan alertnya setiap web browser bisa beda-beda ya jadi gak mesti sama dengan punya saya yang penting fungsinya tetap sama kok.
Kotak alert hanya memiliki 1 parameter yaitu teks yang nantinya bakalan ditampilkan pada halaman website kamu.
Pada contoh diatas saya juga menambahkan Event OnClick() yang sebelumnya penjelasan event ini sudah saya buat materinya yang berjudul BelajarDan Cara Penggunaan Event Dalam Javascript jadi kamu harus baca itu terlebih dahulu agar jauh lebih mengerti.
2. Kotak Dialog Confirm
Kotak Confirm sering digunakan jika Kamu ingin pengguna memverifikasi atau menerima sesuatu.
Misalnya jika kamu membuat fitur edit atau hapus maka sepertinya kamu harus menambahkan Confirm agar pengguna diperingati terlebih dahulu maka pilihannya tetap lanjutkan atau di cancel untuk jaga jaga saja.
Ketika kotak Confirm muncul, pengguna harus mengklik "OK" atau "Cancel" untuk melanjutkan.
Jika pengguna mengklik "OK", kotak akan mengembalikan nilai true. Jika pengguna mengklik "Cancel", kotak akan menampilkan false.
Contoh penulisannya seperti dibawah ini :
confirm("Ingin tetap lanjutkan?");
Contoh programnya seperti dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
<button onclick="tekan()">Klik Tombol</button>
<p id="demo"></p>
</body>
<script type="text/javascript">
function tekan() {
var b;
if (confirm("Tekan Tombol")) {
b = "Kamu Menekan OK";
} else {
b = "Kamu Menekan Cancel!";
}
document.getElementById("demo").innerHTML = b;
}
</script>
</html>
Maka hasilnya akan seperti dibawah ini :
3. Kotak Dialog Prompt
Kotak prompt sering digunakan jika Kamu ingin pengguna memasukkan nilai sebelum memasuki halaman.
Ketika kotak prompt muncul, pengguna harus mengklik "OK" atau "Batal" untuk melanjutkan setelah memasukkan nilai masukan.
Jika pengguna mengklik "OK" kotak mengembalikan nilai input. Jika pengguna mengklik "Cancel" kotak mengembalikan null.
Contoh penulisannya seperti dibawah ini :
prompt("sometext","defaultText");
Pada default text bisa saja kamu kosongkan Karena itu tidak harus ada dan untuk contoh programnya seperti dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
<button onclick="tekan()">Klik Tombol</button>
<p id="demo"></p>
</body>
<script type="text/javascript">
function tekan() {
var a;
var person = prompt("Masukan nama anda");
if (person == null || person == "") {
a = "Kamu Menekan Cancel";
} else {
a = "Hello " + person + "! Apa kabarmu?";
}
document.getElementById("demo").innerHTML = a;
}
</script>
</html>
Maka hasilnya akan seperti dibawah ini :
Untuk prompt ini parameternya adalah Teks yang akan ditampilkan pada form dan Nilai default untuk field input.
Penutupan
Kotak dialog ini bisa kamu pakai jika ingin menyampaikan sesuatu kepada user atau mengambil data juga bisa dan jika kalian ingin jawaban konfirmasi dari user.
Semoga Bermanfaat!!