Pada materi sebelumnya, kamu sudah belajar bagaimana caranya menampilkan output pada pemrograman Javascript/
Salah satunya yaitu dengan menggunakan fungsi alert(). Fungsi alert() adalah sebuah fungsi yang bisa menampikan ouput pada jendela dialog.
Sebelum mengeluarkan output pasti ada input, ada dua cara yang bisa kita lakukan untuk mengambil inputnya :
- Cara yang pertama : Menggunakan form.
- Cara yang kedua : Menggunakan jendela dialog.
Pada materi ini kita akan membahas cara yang kedua yaitu dengan menggunakan jendela dialog.
Jendela dialog adalah jendela yang dapat digunakan untuk berinteraksi dengan pengguna.
Ada tiga macam jendela dialog pada Javascript:
- Jendela dialog alert();
- Jendela dialog confirm();
- Jendela dialog promp();
Ketiga dialog ini mempunyai cara dan kegunaan yang berbeda masing-masing.
Mari kita bahas satu persatu.
Jendela Dialog Alert
Dialog alert() biasanya digunakan untuk menampilkan sebuah pesan peringatan atau informasi yang muncul pada browser berupa pop up.
Fungsi alert() berada dalam objek window.
Kita bisa menulisnya unutk dapat menggunakannya seperti ini:
window.alert("Javascript FajarYusuf.com");
Atau seperti ini:
alert("Javascript FajarYusuf.com");
Karena objek awal yaitu window merupakan objek yang berisfat global, kita boleh tidak menulisnya.
Dialog alert() tidak akan mengembalikan nilai apapun saat dieksekusi.
Silakan coba coding berikut, kalian boleh menulisnya dengan membuat file .html, atau bisa coba melalui Editor HTML FajarYusuf.com :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Dialog Alert</title>
</head>
<body>
<script>
alert("Selamat datang di tutorial Javascript FajarYusuf.Com");
</script>
</body>
</html>
Hasilnya:
Dialog alert() memiliki sarat perameter yang harus diberikan, yaitu berupa teks yang akan ditampilkan pada dialog yang muncul pada jendela pop up.
Pada contoh di atas, kita memberikan teks "Selamat datang di tutorial Javascript FajarYusuf.Com".
Dan jika anda bertanya bagaimana caranya menampilkan dialog alert() pada event-event tertentu, misalnya pada event klik atau saat sebuah tombol diklik?
Ini bisa dilakukan dengan cara menambahkan fungsi dialog pada event listener.
Pada HTML, kita bisa memasukan fungsi alert() pada atribut onClick agar nanti ditampilkan saat sebuah elemen yang ada didalam onClick diklik.
Contoh Coding:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Dialog Alert</title>
</head>
<body>
<button onClick="alert('Kamu sudah menekan Tombolnya!')">Klik Ini</button>
</body>
</html>
Hasilnya:
 |
| Jendela dialog dari alert akan tampil saat tombol diklik |
Jendela Dialog Confirm
Dialog confirm() sangat diperlukan untuk melakukan konfirmasi dalam melakukan tindakan tertentu.
Misalnya disaat kita menyetujui sesuatu akan tindakan yang kita lakukan, maka akan lebih baik jika kita menampilkan dialog confirm(). Karena jika tidak tindakan tersebut akan berbahaya.
Dialog confirm dapat dibuat dengan fungsi confirm().
Contoh Penulisannya :
confirm("Apakah anda yakin menghapus status anda?");
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 didalam variabel untuk diproses.
Contoh Codingnya:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Dialog Confirm</title>
</head>
<body>
<script>
var yakin = confirm("Apakah kamu yakin ingin pergi ke halaman utama FajarYusuf.Com?");
if (yakin) {
window.location = "https://www.fajaryusuf.com";
} else {
document.write("Ok, kamu masih mau disini :)");
}
</script>
</body>
</html>
Hasilnya:
 |
Jendela Dialog Prompt
Dialog prompt() bisanya berfungsi untuk mengambil sebuah inputan dari pengguna.
Dialog prompt() akan mengembalikan sebuah nilai string dari apa yang diinputkan oleh pengguna.
Contoh Codingnya:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Dialog Promp</title>
</head>
<body>
<script>
var nama = prompt("Siapa nama kamu?", "");
document.write("<p>Hello "+ nama +"</p>");
</script>
</body>
</html>
Hasilnya:
Dialog prompt() memiliki 2 syarat untuk parameter yang harus diberikan:
- Teks yang akan ditampilkan pada form.
- Nilai default untuk field input.
Pada contoh coding di atas, kita memberikan nilai default-nya berupa string kosong dengan tanda petik "".
Kesimpulan
Kapan waktu yang pas untuk menggunakan Dialog Alert, Confirm, dan Prompt?
Berdasarkan contoh-contoh yang sudah diterangkan di atas, kita bisa mengetahui kapan waktu yang tepat untuk menggunakan alert(), confirm() dan prompt().
Saat kita hanya ingin menampilkan informasi saja tanpa mengharapkan balasan pengguna, maka gunakan alert().
Saat kita ingin mendapatkan jawaban konfirmasi dari pengguna, maka gunakan confirm().
Dan apabila kita ingin mengambil data inputan teks dari pengguna, maka gunakan prompt().
Comments