Javascript

Popup JavaScript: Cara Membuat Alert dan Codenya

JavaScript memiliki tiga jenis box popup: Alert box, Confirm box, dan Prompt box.

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 >

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 >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 >

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 >

Catur Kurnia Sari

Share
Tags: javascript