JavaScript memiliki tiga jenis box popup: Alert box, Confirm box, dan Prompt box.
Section Artikel
Alert Box (Kotak Peringatan)
Kotak peringatan sering digunakan jika ingin memastikan informasi sampai ke pengguna.
Saat kotak peringatan muncul, pengguna harus mengklik “OK” untuk melanjutkan.
Sintaks:
| window.alert(“sometext“); |
Metode window.alert () dapat ditulis tanpa awalan window.
Contoh:
<!DOCTYPE html> <html> <body> <h2>JavaScript Alert</h2> <button onclick="myFunction()">Cobalah</button> <script> function myFunction() { alert("Saya adalah kotak peringatan!"); } </script> </body> </html>
Confirm Box (Kotak Konfirmasi)
Kotak konfirmasi sering digunakan jika ingin pengguna memverifikasi atau menerima sesuatu.
Ketika kotak konfirmasi muncul, pengguna harus mengklik “OK” atau “Batal” untuk melanjutkan.
Jika pengguna mengklik “OK”, kotak akan mengembalikan nilai true. Jika pengguna mengklik “Batal”, kotak akan menampilkan false.
Sintals:
| window.confirm(“sometext“); |
Metode window.confirm() bisa ditulis tanpa awalan window.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Confirm Box</h2>
<button onclick="myFunction()">Cobalah</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt;
if (confirm("Tekan tombol!")) {
txt = "Anda menekan OK!";
} else {
txt = "Anda menekan Cancel!";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
Prompt Box (Kotak Prompt)
Kotak prompt sering digunakan jika ingin pengguna memasukkan nilai sebelum memasuki halaman.
Ketika kotak prompt muncul, pengguna harus mengklik “OK” atau “Cancel” untuk melanjutkan setelah memasukkan nilai masukan.
Jika pengguna mengklik “OK” kotak mengembalikan nilai input. Jika pengguna mengklik “Cancel” kotak mengembalikan null.
Sintaks
| window.prompt(“sometext“,”defaultText“); |
Metode window.prompt() bisa ditulis tanpa awalan window.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Prompt</h2>
<button onclick="myFunction()">Cobalah</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt;
var person = prompt("Silahkan masukan nama anda:", "Harry Potter");
if (person == null || person == "") {
txt = "Pengguna membatalkan permintaan.";
} else {
txt = "Hello " + person + "! Apa kabarnya hari ini?";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
Line Break
Untuk menampilkan jeda baris di dalam kotak popup, gunakan garis miring ke belakang diikuti dengan karakter n.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>Line-breaks pada popup box.</p>
<button onclick="alert('Hello\nApa Kabarmu?')">Cobalah</button>
</body>
</html>
