JavaScript Dasar: Interaksi (alert, prompt, confirm)

JavaScript memiliki fitur yang memungkinkan kita untuk berinteraksi dengan pengguna melalui kotak dialog. Fitur tersebut adalah `alert`, `prompt`, dan `confirm`. 

Mereka merupakan fungsi bawaan yang dapat menampilkan pesan ke pengguna melalui kotak dialog atau dialog box. 

Kotak dialog dapat kita sebut dengan istilah lain: 

• Modal box
• Modal window
• Pop-pup window

Ketika dialog box ditampilkan, eksekusi JavaScript akan dihentikan dan pengguna tidak dapat berinteraksi seperti scroll atau klik di halaman web hingga pengguna mengeklik tombol yang tersedia atau menekan `Esc`. 

Dialog box adalah komponen bawaan dari browser. Setiap browser memiliki desain dan posisi penempatan dialog box yang berbeda. 

Sayangnya kita tidak bisa mengatur posisinya atau mengubah tampilannya. 

`alert()` 

Fungsi `alert` memerintahkan browser untuk menampilkan pesan dalam kotak dialog dan mencegah pengguna berinteraksi dengan halaman web dan juga menghentikan eksekusi JavaScript hingga pengguna menutupnya. 

Akan terdapat tombol `OK` yang apabila diklik akan menutup kotak dialog dan melanjutkan eksekusi JavaScript dan pengguna dapat kembali berinteraksi dengan halaman web. 

window.alert("Pesan Opsional");

// atau lebih singkat:

alert("Pesan Opsional");

Pesan alert adalah opsional. dapat berisi variabel, ekspresi, juga literal. Jika pesan bukan string, maka akan dikonversi menjadi string. 

Contoh input berupa variabel: 

const message = "Selamat Datang ZendCode - Teman Belajar Coding";

alert(message);

Contoh input berupa ekspresi: 

alert(1 + 2) // Output: 3

Contoh input berupa literal: 

alert(22) // Numeric literal

alert("Helo!") // String literal

alert(true) // Boolean literal

Pembahasan mengenai apa itu ekspresi dan literal ada pada artikel "JavaScript Code Structure" sebelumnya

Lalu, contoh input berupa fungsi: 

alert(Boolean(1)) // Output: true

`Boolean()` adalah fungsi bawaan (built-in function) yang digunakan untuk mengubah nilai menjadi nilai boolean (true atau false). 

Fungsi `alert()` akan mengembalikan nilai `undefined`.  

`prompt()` 

Fungsi `prompt` digunakan untuk meminta input dari pengguna. Input dapat berupa teks atau angka. Input tersebut dapat disimpan dalam variabel dan digunakan dalam logika program. 

`prompt()` menerima dua argumen (input): 

• Pesan (string) - opsional
• Nilai default (apapun) - opsional

prompt("Siapa nama Anda?", "Anonim")

Nilai default akan otomatis diisikan ke kolom input. Jika pengguna tidak memasukkan namanya, maka nilai default (anonim) akan digunakan. 

Nilai yang diinput akan menjadi nilai kembalian (return value), sehingga kita dapat menyimpannya dalam variabel. 

const nama = prompt("Siapa nama Anda?", "Anonim");

alert(nama);

Jika nilai default tidak diatur, input tidak diberikan, dan tombol `OK` diklik, maka string kosong yang akan dikembalikan.

Namun, jika pengguna mengeklik tombol `Cancel` atau `Batal`, atau menekan tombol `Esc`, maka `null` yang akan dikembalikan. 

Nilai yang dihasilkan dapat menentukan logika program, contohnya: 

let nama = prompt("Siapa nama Anda?", "Anonim");

if (nama === null) {

    // Jika pengguna menekan tombol `Esc` atau klik tomvol `cancel`

    nama = prompt("Mohon isikan nama Anda dengan benar!", "Anonim");

} else if (nama == "Anonim") {

    // Jika user tidak menginput namanya dan mengeklik `OK`

    alert("Nama Anda diatur ke 'Anonim'.")

    alert("Selamat datang 'Anonim'!")

} else {

    // Pengguna menginputkan namanya

    alert("Halo" + nama + "! Selamat Datang!")

}

`confirm()

Fungsi `confirm` digunakan untuk meminta konfirmasi dari pengguna terhadap suatu tindakan. Ia akan mengembalikan nilai `true` jika tombol `OK` diklik, dan `false` jika `cancel`. 

Contoh penggunaan confirm adalah sebagai berikut:

if (confirm('Apakah Anda yakin ingin menghapus item ini?')) {

  // Aksi yang dijalankan jika tombol OK ditekan

  alert('Item dihapus.');

} else {

  // Aksi yang dijalankan jika tombol Cancel ditekan

  alert('Penghapusan dibatalkan.');

}

Dalam contoh di atas, fungsi `confirm` dipanggil didalam pernyataan `if`. Apabila ia mengembalikan `true` maka blok `if` akan dieksekusi. Jika sebaliknya, blok `else` akan dieksekusi. 

Catatan Penting

Dialog box (kotak dialog) bersifat modal. Mereka menghalangi interaksi pengguna dengan halaman web di belakangnya sampai dialog box ditutup atau tindakan yang diminta diselesaikan.

Penting untuk menggunakan dialog box dengan bijak dan mempertimbangkan pengalaman pengguna. 

Terlalu banyak penggunaan dialog box atau penggunaannya yang tidak perlu dapat mengganggu dan menghambat pengguna dalam menjelajahi halaman web atau menyelesaikan tugas-tugas mereka.