Loading...
Beranda
Java

Membuat Jendela Dialog Menggunakan Javascript

Sebelumnya kita sudah membahas cara menampilkan output salah satu caranya ialah dengan menggunakan fungsi alert().  Ada tiga jenis jendela dialog pada javascript yaitu

  1. Jendela dilog prompt().
  2. Jendela dialog confirm().
  3. Jendela dialog alert().
Ketiga jendela dialog di atas memiliki fungsi yang berbeda-beda. Berikut adalah penjelasannnya.

1. Kotak Dialog prompt 

Kotak dialaog prompt berfungsi untuk mengambil inputan dari user dan akan mengembalikan nilai sebuah string yang telah di input oleh pengguna.
<!DOCTYPE html>
<html>
    <head>
        <title>Dialog Promp</title>
    </head>
    <body>
    <script>
        var nama = prompt("Siapa nama kamu?", "");
        document.write("<p>Hello "+ nama +"</p>");
    </script>
    </body>
</html>
Contoh di atas merupakan kotak dialog prompt dan memiliki beberapa parameter yang harus di berikan.
  1. Nilai default untuk file input.
  2. Teks yang akan di tampilkan pada from.

2. Kotak Dialog confirm

Kotak dialog confirm di gunakan untuk melakukan confirmasi untuk tindakan tertentu. Conthnya kamu ingin menghapus suatu file dan perlu melakukan confirm. Dialog confirm dapat di buat dengan menggunakan connfirm()contohnya seperti di bawah ini.
confirm("Apakah kamu ingin menghapus file ini?");
Kotak dialog akan memberikan nilai true apabila kita memilih oke dan akan memberikan nilai false jika memilih cencel. Nilai tersebut dapat di tampung dengan memberikan variabel.
<!DOCTYPE html>
<html>
    <head>
        <title>Dialog Confirm</title>
    </head>
    <body>
    <script>
        var yakin = confirm("Apakah kamu yakin akan mengunjungi hidayatcode?");

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

3. Kotak dialog alert

Dialog alert di gunakan untuk menampilkan sebuah pesan yang berisi peringatan atau informasi, penulisan dialog alert dapat menggunakan window namun karena window bersifat global kamu bisa tidak menggunakannya.
window.alert("Hello World!");
atau bisa juga menggunakan seperti di bawah ini.
alert("Hello kawan");
Untuk mengemplementasikannya kamu bisa mengikuti contoh di bawah ini.
<!DOCTYPE html>
<html>
    <head>
        <title>Dialog Alert</title>
    </head>
    <body>
    <script>
        alert("Selamat datang di tutorial Javascript");
    </script>
    </body>
</html>
Demikian pembahasan kotak dialog javascript 

IT Enthusiast

Posting Komentar