JENDELA POPUP DI JAVASCRIPT

Pop up window sangat berguna untuk meningkatkan user experience dan membuat website lebih interaktif. Fitur ini berperan dalam mencegah kesalahan user dengan memberikan peringatan dan konfirmasi sebelum melakukan suatu tindakan

Pada umumnya, ada tiga jenis pop up window dalam JavaScript. Masing-masing memiliki fungsi dan kegunaannya sendiri.

Alert: berfungsi untuk menampilkan pesan kepada user. Jenis ini hanya memberikan informasi dan memiliki satu tombol untuk menutup pesan.
Confirm: menampilkan pesan dengan dua tombol, biasanya “OK” dan “Cancel”. Confirm dipakai untuk meminta konfirmasi dari user sebelum melanjutkan suatu tindakan.
Prompt: mirip dengan confirm, tetapi prompt juga menyediakan kotak input teks agar user bisa memasukkan data atau informasi.

A. Popup Alert

Jendela alert() biasanya digunakan untuk menampilkan sebuah pesan peringatan atau informasi. Fungsi alert() berada dalam objek window. contohnya seperti ini:

window.alert("Hello World!");

1	window.alert("Hello World!");

bisa juga

alert("Hello kawan");

1	alert("Hello kawan");

Karena objek window bersifat global, kita boleh tidak menulisnya. Dialog alert() tidak akan mengembalikan nilai apa-apa saat dieksekusi.

<!DOCTYPE html>
<html>
    <head>
        <title>Dialog Alert</title>
    </head>
    <body>
    <script>
        alert("Selamat datang di tutorial Javascript");
    </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Dialog Alert</title>

</head>

<body>

alert("Selamat datang di tutorial Javascript");

</script>

</body>

</html>

Pada HTML, kita bisa masukan fungsi alert() pada atribut onClick agar nanti ditampilkan saat sebuah elemen diklik.

<!DOCTYPE html>
<html>
    <head>
        <title>Dialog Alert</title>
    </head>
    <body>
        <button onClick="alert('Tombol diklik!')">Klik Saya</button>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Dialog Alert</title>

</head>

<body>

</body>

</html>

B. Popup Confirm

Jendela confirm() digunakan untuk melakukan konfirmasi dalam melakukan tindakan tertentu.
Misalnya:
Saat kita menghapus sesuatu, maka ada baiknya menampilkan dialog confirm(). Karena tindakan tersebut cukup berbahaya. Jendela confirm dapat dibuat dengan fungsi confirm()
Contoh

confirm("Apakah anda yakin akan menghapus?");

1	confirm("Apakah anda yakin akan menghapus?");

Jendela confirm() akan mengembalikan nilai true apabila kita memilih tombol OK dan akan mengembalikan nilai false apabila kita memilih Cancel.

<!DOCTYPE html>
<html>
    <head>
        <title>Dialog Confirm</title>
    </head>
    <body>
    <script>
        var yakin = confirm("Apakah kamu yakin akan mengunjungi website kami...?");

        if (yakin) {
            window.location = "https://www.syaiflash.com";
        } else {
            document.write("Baiklah, tetap di sini saja..,:)");
        }
    </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Dialog Confirm</title>

</head>

<body>

var yakin = confirm("Apakah kamu yakin akan mengunjungi website kami...?");

if (yakin) {

window.location = "https://www.syaiflash.com";

} else {

document.write("Baiklah, tetap di sini saja..,:)");

}

</script>

</body>

</html>

C. Jendela Prompt

Jendela prompt() berfungsi untuk mengambil sebuah inputan dari pengguna. Jendela prompt() akan mengembalikan sebuah nilai string dari apa yang diinputkan oleh pengguna.

<!DOCTYPE html>
<html>
    <head>
        <title>Dialog Prompt</title>
    </head>
    <body>
    <script>
        var nama = prompt("Siapa nama kamu?", "");
        document.write("<p>Hello "+ nama +"</p>");
    </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Dialog Prompt</title>

</head>

<body>

var nama = prompt("Siapa nama kamu?", "");

document.write("<p>Hello "+ nama +"</p>");

</script>

</body>

</html>

Dialog prompt() memiliki beberapa parameter yang harus diberikan:

Teks yang akan ditampilkan pada form;
Nilai default untuk field input.

Pada contoh di atas, kita memberikan nilai default-nya berupa string kosong dengan tanda petik ""

D. Catatan

Berdasarkan contoh-contoh di atas, kita bisa mengetahui Kapan waktu yang tepat untuk menggunakan alert(), confirm() dan prompt().

Jika ingin menampilkan informasi saja, maka gunakan alert().
Saat ingin jawaban konfirmasi dari pengguna, maka gunakan confirm().
apabila ingin mengambil data teks dari pengguna, maka gunakan prompt().

JENDELA POPUP DI JAVASCRIPT

A. Popup Alert

B. Popup Confirm

C. Jendela Prompt

D. Catatan

Be the first to comment

Leave a Reply Cancel reply