IT Forum

Jika anda sering menjelajahi internet, pastinya sering menemukan jendela dialog di website. Jendela dialog atau box dialog adalah sebuah jendela yang muncul dari browser untuk melakukan interaksi dengan user (pengguna). Ada 3 macam dialog didalam javascript yang sangat populer dan sangat sering digunakan, yaitu:

  1.       Alert Box
  2.       Prompt Box
  3.       Confirm Box

Nah kali ini inxindo akan membahas bagaimana membuat jendela dialog atau box dialog didalam javascript dengan mudah, simak tutorial dan penjelasannya dibawah ini

  1.       Alert Box (Kotak peringatan)

Alert box digunakan untuk menampilkan sebuah peringatan kepada user. Alert box sering digunakan untuk melakukan debugging oleh para programmer, membuat alert selamat datang di sebuah website, dan lain sebagainya. Didalam alert box terdapat satu tombol yaitu “Oke”. Sesuai dengan namanya, alert box ini hanya menampilkan sebuah peringatan dan user cukup klik “oke” untuk mengonfirmasi peringatan tersebut.

Untuk sintaksnya, yaitu seperti contoh pada gambar dibawah ini :

Dari contoh sintaks diatas akan menghasilkan output seperti pada gambar dibawah ini:

Tips tambahan: untuk menambahkan baris baru didalam teks alert box, anda dapat menambahkan tanda backslash n (\n), perhatikan pada gambar dibawah ini:

  1.       Prompt Box (Kotak saran)

Prompt box adalah sebuah kotak dialog yang muncul membawa formulir atau untuk mengambil sebuah inputan dari user. Prompt box sering digunakan untuk meminta konfirmasi kepada user untuk meminta informasi sebelum user masuk ke halaman website.

Dibawah ini mari kita buat sebuah prompt box untuk mengambil informasi nama pengguna. Untuk itu anda perlu membuat satu label, satu variabel, atau string.

Contoh sintaks:

Dari contoh sintaks diatas akan menghasilkan output seperti dibawah ini :

Prompt Box memiliki beberapa parameter yang harus diperhatikan :

  1.       Teks yang akan ditampilkan pada form;
  2.       Nilai default untuk field input. 
  3.       Confirm Box (Kotak Konfirmasi)

Confirm box digunakan untuk mengonfirmasi sebuah jendela yang muncul dan menampilkan dua pilihan kepada user, tombol tersebut: “konfirmasi” dan “batal”. Biasanya confirm box sering digunakan ketika melakukan penghapusan, atau pada saat ketika mengunduh sebuah file kemudian kita menutup halaman website tersebut.

Secara logika pada kotak konfirmasi jika user meng-klik tombol “konfirmasi” maka akan memberikan nilai true, jika user menekan tombol batal maka akan bernilai “false”.

Dibawah ini merupakan contoh sintaks dari confirm box didalam javascript.

Dari contoh sintaks diatas akan menghasilkan output seperti dibawah ini :

Jika user meng-klik tombol “batal”, maka output yang akan terjadi seperti dibawah ini:

Pada contoh diatas, inixindo mencontohkan kotak konfirmasi kepada user, apakah user ingin mengunjungi website inixindo atau tidak. Jika user meng-klik tombol “oke” maka pada kode bernilai true akan dijalankan dan mengarahkan ke website inixindo.co.id. dan jika user meng-klik “batal” maka ada pesan yang terlihat “oke, kami mengerti”

Demikian tutorial ini tentang membuat kotak dialog didalam javascript, cukup mudah bukan? Dan Inixindo mempunyai training javascript loh!, ika ingin memperdalam lebih jauh tentang javascript Inixindo punya trainingnya loh untuk info lebih lanjut mengenai training HTML Javascript dan CSS silahkan klik https://inixindo.co.id/index.php/trainings/web-app-dev/420-html-css3-js

 

Silahkan Login untuk memberikan komentar.