Membuat Dialog Menggunakan Javascript

lebakcyber.net – Membuat Dialog Menggunakan Javascript. Oke jadi pada kesempatan kali ini kita akan mempelajari mengenai bagaimana cara untuk membuat suatu dialog dengan menggunakan Javascript.

Pada Javascript sendiri ada tiga buah dialog yang bisa kita gunakan, yaitu jendela dialog confirm(), jendela dialog alert() dan juga jendela dialog promp().

Adapun ketiga dialog pada Javascript tersebut memiliki fungsi dan juga kegunaan yang berbeda antara satu dengan lainnya. Biar lebih jelas, ada baiknya kita bahas satu persatu fungsi dari masing-masing dialog pada Javascript tersebut.

Dialog Confirm di Javascript

Pada Javascript, dialog confirm() biasanya digunakan untuk melakukan suatu konfirmasi untuk sebuah tindakan tertentu. Misalnya pada saat kita ingin menghapus file, maka sebaiknya kita menggunakan dialog confirm() tersebut karena proses penghapusan sebuah file cukup berbahaya.

Untuk lebih jelasnya silahkan buat sebuah file dengan nama index.html baru, lalu masukan perintah seperti dibawah ini :

<!DOCTYPE html>
<html>
    <head>
        <title>Contoh Dialog Confirm di Javascript - Lebakcyber.net</title>
    </head>
    <body>
    <script>
        var yes = confirm("Yakin kamu ingin mengunjungi situs lebak cyber?");

        if (yes) {
            window.location = "https://www.lebakcyber.net";
        } else {
            document.write("Oke, kita masih dihalaman ini karena kamu tidak ingin berkunjung ke lebak cyber");
        }
    </script>
    </body>
</html>

Nanti hasilnya akan seperti pada gambar dibawah ini :

Perhatikan pada perintah diatas ada sebuah fungsi confirm() yang kita buat, tepatnya pada bagian :

var yes = confirm("Yakin kamu ingin mengunjungi situs lebak cyber?");

Nantinya dialog confirm() tersebut akan mengembalikan sebuah nilai true jika kita menemkan tombol OK yang akan membawa kita menuju halaman website lebakcyber.net, dan dialog confirm() akan mengembalikan sebuah nilai false kalau kita memilih tombol cancel.

Dialog Alert di Javascript

Pada Javascript, Dialog Alert() biasanya digunakan untuk menampilkan sebuah pesan yang berupa informasi ataupun bisa juga digunakan untuk menapilkan pesan peringatan.

Untuk lebih jelasnya, silahkan buat sebuah file index.html baru lalu masukan perintah dibawah ini untuk mencoba dialog alert pada Javascript :

<!DOCTYPE html>
<html>
    <head>
        <title>Contoh Dialog Alert di Javascript - Lebakcyber.net</title>
    </head>
    <body>
    <script>
        alert("Selamat datang di website lebakcyber.net");
    </script>
    </body>
</html>

Perhatikan pada perintah diatas kita menuliskan fungsi alert() didalam objek window yang beradal didalam tag<body>. Dan karena objek window bersifat global maka dialog alert() tidak akan mengembalikan nilai apa-apa pada saat diajalankan.

Dan hasil output yang kita tuliskan diatas akan nampak seperti pada gambar dibawah ini :

Dialog Prompt di Javascrtip

Pada Javascript, dialog Prompt() memiliki fungsi untuk mengambil hasil input yang dilakukan oleh pengguna atau user.

Dialog prompt() sendiri akan mengembailkan nilai string berdasarkan apa yang dimasukan atau diinputkan oleh user atau pengguna.

Untuk lebih jelasnya, silahkan buat sebuah file index.html baru lalu masukan perintah seperti dibawah ini :

<!DOCTYPE html>
<html>
    <head>
        <title>Contoh Dialog Promp di Javascript - Lebakcyber.net</title>
    </head>
    <body>
    <script>
        var tanya = prompt("Hai, Kamu sedang apa?", "");
        document.write("<p>Hallo aku sedang "+ tanya +"</p>");
    </script>
    </body>
</html>

Nanti hasilnya akan seperti gambar dibawah ini :

Dialog prompt() pada Javascript sendiri memiliki parameter-parameter yang harus kita berikan, yaitu :

Nilai default yang digunakan pada field input
Teks yang akan ditampilkan pada form

Pada contoh perintah membuat dialog prompt() diatas kita sudah memberikan nilai default yang berupa string dengan tanda petik.

Jadi kesimpulannya kita bisa menggunakan dialog confirm() di Javascript untuk mendapatkan jawaban konfirmasi dari user, dialog alert() di Javascript untuk menampilkan sebuah informasi dan dialog prompt() kalau kita ingin mengambil data yang diinputkan oleh user.

Oke jadi sampai disini dulu pembahasan kita mengenai bagaimana cara untuk membuat dialog pada Javascript. Semoga tutorial sederhana ini bisa bermanfaat dan sampai jumpa di tutorial belajar Javascript selanjutnya ya.

Lebak Cyber Tips dan Trik Komputer

Membuat Dialog Menggunakan Javascript