Lecture ini membahas 3 modal windows bawaan browser di JavaScript:

alert()
prompt()
confirm()

Materinya terlihat sederhana, tetapi penting karena ketiganya akan sering dipakai saat belajar conditional statements (if, switch, dll.) dan ketika JavaScript perlu berkomunikasi dengan user.

1. Apa itu Modal Window?

Modal window adalah jendela/dialog yang muncul di browser dan sementara waktu menghentikan interaksi user dengan halaman.

Misalnya halaman kita punya:

[ Tombol A ]
[ Tombol B ]
[ Input ]

Kemudian JavaScript menjalankan:

alert("Hello");

Browser menampilkan dialog.

Selama dialog tersebut masih terbuka:

• user tidak bisa klik tombol lain
• user tidak bisa mengisi input di halaman
• user tidak bisa scroll halaman
• user tidak bisa berinteraksi dengan bagian halaman lainnya

Setelah dialog ditutup, halaman bisa digunakan lagi.

Jadi sederhananya:

JavaScript
    ↓
Modal muncul
    ↓
Halaman "terkunci"
    ↓
User menutup modal
    ↓
Halaman bisa digunakan lagi

2. Tiga Modal Window

JavaScript menyediakan tiga fungsi utama:

Cara mengingatnya:

alert   → "Saya ingin memberitahu kamu sesuatu."
prompt  → "Tolong masukkan sesuatu."
confirm → "Apakah kamu yakin?"

3. alert() — Menampilkan Pesan

alert() digunakan ketika kita ingin menampilkan pesan kepada user.

Sintaks:

alert("pesan");

Contoh:

alert("Welcome to JavaScript course");

Browser akan menampilkan kira-kira:

┌─────────────────────────────────┐
│ Welcome to JavaScript course    │
│                                 │
│                         [ OK ]  │
└─────────────────────────────────┘

User hanya perlu menekan OK.

4. Apa yang terjadi ketika alert() dipanggil?

Misalnya:

console.log("A");

alert("Hello");

console.log("B");

Ketika dijalankan:

console.log("A")
       ↓
alert muncul
       ↓
JavaScript berhenti menunggu
       ↓
User klik OK
       ↓
console.log("B")

Jadi alert() bersifat blocking terhadap halaman/script pada saat dialog tersebut terbuka.

Ini penting untuk dipahami.

5. alert() tidak mengembalikan input

alert() hanya digunakan untuk memberikan informasi.

Misalnya:

alert("Data berhasil disimpan");

Kita tidak meminta user memasukkan sesuatu.

Kalau tujuan kita adalah mendapatkan data dari user, gunakan:

prompt()

6. prompt() — Meminta Input User

prompt() digunakan ketika kita ingin:

Meminta user memasukkan sebuah nilai.

Contoh:

prompt("Please enter your age");

Browser akan menampilkan dialog dengan:

• pesan
• input field
• tombol OK
• tombol Cancel

Kira-kira:

┌─────────────────────────────────┐
│ Please enter your age            │
│                                 │
│ [ 25                         ]  │
│                                 │
│            [Cancel] [OK]        │
└─────────────────────────────────┘

7. Nilai dari prompt() bisa disimpan

Ini sangat penting.

Misalnya:

let age = prompt("Please enter your age");

User memasukkan:

25

dan menekan OK.

Maka:

age

akan mendapatkan nilai:

"25"

Perhatikan!

Hasil prompt() secara normal berupa string, meskipun user mengetik angka.

Jadi:

let age = prompt("Enter your age");

Jika user mengetik:

25

maka:

typeof age

adalah:

"string"

bukan:

"number"

Ini penting karena sebelumnya kita sudah belajar tentang data type dan type coercion.

Kalau memang ingin angka:

let age = Number(prompt("Enter your age"));

Sekarang hasilnya menjadi Number.

8. Apa yang terjadi kalau user klik Cancel?

Misalnya:

let age = prompt("Enter your age");

User tidak memasukkan apa pun dan memilih:

Cancel

Maka:

age

akan berisi:

null

Jadi:

console.log(age);

hasilnya:

null

9. Bedakan Cancel dan input kosong

Ini penting banget.

Ada dua situasi yang berbeda.

Situasi 1 — User menekan OK tanpa mengetik

Input:
[              ]

User → OK

Hasil:

""

yaitu empty string.

Situasi 2 — User menekan Cancel

User → Cancel

Hasil:

null

Jadi:

Ini perbedaan yang harus kamu ingat.

10. prompt() punya parameter kedua

Lecture juga menjelaskan bahwa prompt() bisa menerima dua parameter:

prompt(message, defaultValue);

Contoh:

let age = prompt("Please enter your age", "18");

Parameter pertama:

"Please enter your age"

adalah pesan.

Parameter kedua:

"18"

adalah nilai default.

11. Apa maksud default value?

Browser akan menampilkan:

Please enter your age

[ 18                         ]

              [Cancel] [OK]

Jika user langsung menekan OK tanpa mengubah apa pun, nilai yang dikembalikan adalah:

"18"

Perhatikan lagi: karena prompt() menghasilkan string, "18" adalah string.

12. Kalau default value tidak diberikan

Misalnya:

let age = prompt("Please enter your age");

User langsung klik OK tanpa mengetik.

Hasil:

""

Tetapi:

let age = prompt("Please enter your age", "18");

user langsung klik OK.

Hasil:

"18"

Jadi parameter kedua digunakan untuk memberikan nilai awal/default pada input.

13. Ringkasan prompt()

let value = prompt("Masukkan sesuatu", "default");

Kemungkinan hasil:

User mengetik sesuatu + OK
        ↓
String yang diketik

User OK tanpa mengubah/mengosongkan input
        ↓
Nilai yang ada di input

User Cancel
        ↓
null

14. confirm() — Meminta Konfirmasi

Sekarang fungsi ketiga:

confirm()

confirm() digunakan ketika kita ingin bertanya:

“Apakah kamu yakin?”

Contoh:

confirm("Do you really want to delete this item?");

Browser menampilkan:

┌──────────────────────────────────────┐
│ Do you really want to delete this    │
│ item?                                │
│                                      │
│                  [Cancel] [OK]       │
└──────────────────────────────────────┘

Berbeda dengan prompt():

• prompt() → meminta data
• confirm() → meminta keputusan

15. Hasil confirm() selalu Boolean

Ini yang paling penting dari confirm().

Jika user klik:

OK

true

Jika user klik:

Cancel

false

Jadi:

let isDelete = confirm("Do you really want to delete this item?");

Kalau user klik OK:

isDelete === true

Kalau Cancel:

isDelete === false

16. Kenapa confirm() berguna?

Misalnya kita punya tombol delete.

User menekan Delete.

Kita jangan langsung menghapus.

Kita bisa bertanya:

let isDelete = confirm("Do you really want to delete this item?");

Kemudian nanti menggunakan hasilnya untuk menentukan tindakan.

Secara logika:

User klik Delete
       ↓
Apakah benar-benar ingin menghapus?
       ↓
   ┌───┴───┐
  OK     Cancel
   ↓        ↓
 true      false
   ↓        ↓
Hapus    Jangan hapus

Ini adalah contoh pertama kamu melihat hubungan antara modal window + Boolean + conditional logic.

17. Contoh penggunaan dengan if

Walaupun lecture conditional statement belum dibahas, kita bisa melihat preview-nya:

let isDelete = confirm("Do you really want to delete this item?");

if (isDelete) {
    console.log("Item deleted");
}

Kalau user klik OK:

isDelete = true

Maka:

Item deleted

Kalau Cancel:

isDelete = false

Maka kode di dalam if tidak dijalankan.

Jadi confirm() sangat cocok untuk conditional statement.

18. Perbedaan alert, prompt, confirm

Ini wajib kamu kuasai.

Contoh:

alert("Hello");

→ hanya pesan.

let name = prompt("What is your name?");

→ mendapatkan input.

let ok = confirm("Are you sure?");

→ mendapatkan keputusan Boolean.

19. Analogi kehidupan sehari-hari

Bayangkan ada seorang kasir.

alert()

Kasir berkata:

“Pesanan kamu sudah selesai.”

Kamu hanya menerima informasi.

alert("Order completed");

prompt()

Kasir bertanya:

“Berapa nomor meja kamu?”

Kamu memberikan data:

prompt("What is your table number?");

confirm()

Kasir bertanya:

“Apakah kamu yakin ingin membatalkan pesanan?”

Kamu memilih:

OK
atau
Cancel

Itulah:

confirm("Are you sure?");

20. Ketiganya bersifat modal

Ini kesamaan penting:

alert()
prompt()
confirm()

Ketiganya membuat dialog modal browser.

Ketika muncul:

┌─────────────────────┐
│      MODAL          │
│                     │
│       [ OK ]        │
└─────────────────────┘

halaman di belakangnya tidak bisa digunakan sampai modal ditutup.

21. Mengapa disebut “blocking”?

Misalnya:

console.log("1");

alert("Hello");

console.log("2");

Urutannya:

1
↓
Alert muncul
↓
USER BELUM KLIK OK
↓
"2" belum dijalankan
↓
User klik OK
↓
2

Jadi JavaScript menunggu sampai dialog selesai.

Hal yang sama berlaku pada:

prompt()

dan:

confirm()

Karena JavaScript membutuhkan jawaban user sebelum melanjutkan.

22. Kekurangan Modal Window bawaan Browser

Lecture menyebut ada dua keterbatasan utama.

1. Posisi tidak bisa kita atur

Browser yang menentukan lokasi dialog.

Biasanya berada di sekitar bagian atas/tengah browser.

Kita tidak bisa mengatakan:

"Taruh alert di pojok kanan bawah."

dengan alert() bawaan.

23. 2. Tampilan tidak bisa kita desain

Misalnya:

alert("Hello");

Tampilan dialog ditentukan oleh browser/OS.

Kita tidak bisa dengan mudah mengubah:

• warna
• font
• ukuran
• tombol
• border
• icon
• layout

menggunakan alert() bawaan.

Jadi kita tidak bisa membuat:

┌─────────────────────────────┐
│ 🔥 WARNING!                 │
│                             │
│ Kamu yakin ingin menghapus? │
│                             │
│ [ Tidak ]   [ Ya, hapus ]   │
└─────────────────────────────┘

dengan custom CSS melalui alert() bawaan.

24. Kalau ingin modal yang bisa didesain?

Kita bisa membuat custom modal menggunakan HTML + CSS + JavaScript.

Misalnya secara konsep:

<div class="modal">
    <h2>Warning</h2>
    <p>Are you sure?</p>

    <button>Cancel</button>
    <button>Delete</button>
</div>

Kemudian CSS menentukan tampilannya.

Itulah yang dimaksud lecture:

Browser menyediakan modal bawaan, tetapi kita juga bisa membuat modal sendiri.

Nanti dalam pengembangan web modern, custom modal jauh lebih fleksibel.

25. Perbedaan Browser Modal dan Custom Modal

Browser modal

alert("Hello");

Kelebihan:

• sangat mudah
• tidak perlu HTML tambahan
• tidak perlu CSS
• langsung tersedia

Kekurangan:

• desain tidak bisa dikontrol
• posisi tidak bisa dikontrol
• blocking

Custom modal

Kita membuat sendiri dengan:

HTML
 +
CSS
 +
JavaScript

Kelebihan:

• desain bebas
• posisi bebas
• bisa dibuat lebih modern
• bisa menambahkan berbagai elemen

Kekurangan:

• lebih banyak kode
• harus mengatur behavior sendiri

26. Hal yang sangat penting: prompt() menghasilkan String

Karena sebelumnya kamu sudah belajar tentang type coercion, ini bagus untuk dihubungkan.

Misalnya:

let age = prompt("Enter your age");

User memasukkan:

20

Jangan langsung berasumsi:

age === 20

Karena:

age

adalah:

"20"

Jadi:

age === 20

hasilnya:

false

Sedangkan:

age === "20"

hasilnya:

true

27. Kalau ingin age menjadi Number

Gunakan:

let age = Number(prompt("Enter your age"));

Sekarang:

typeof age

adalah:

"number"

Contoh:

let age = Number(prompt("Enter your age"));

console.log(age);
console.log(typeof age);

Kalau user memasukkan 20:

20
number

Ini akan sangat berguna ketika nanti kamu belajar conditional statement.

28. Contoh sederhana yang menggabungkan materi sebelumnya

Misalnya kita ingin meminta umur user:

let age = Number(prompt("Enter your age"));

Kemudian:

console.log(age >= 18);

Kalau user memasukkan:

20

maka:

20 >= 18

hasil:

true

Di sini kamu sudah menggabungkan:

prompt
  ↓
String
  ↓
Number()
  ↓
Comparison operator
  ↓
Boolean

Dan sebentar lagi Boolean tersebut akan digunakan oleh:

if

29. prompt() + default value

Contoh:

let name = prompt("Enter your name", "Guest");

Jika user langsung OK:

name === "Guest"

Jika user mengetik:

Budi

maka:

name === "Budi"

Jika user Cancel:

name === null

30. confirm() + Boolean

Misalnya:

let logout = confirm("Do you want to logout?");

Kalau user klik OK:

logout // true

Kalau Cancel:

logout // false

Karena hasilnya sudah Boolean, kita bisa langsung menggunakannya sebagai kondisi.

31. Hubungan dengan materi Logical Operator

Ini menarik karena baru saja kamu belajar:

&&
||
!

Sekarang kita bisa menggabungkannya dengan confirm().

Misalnya:

let isLoggedIn = true;
let isConfirmed = confirm("Continue?");

console.log(isLoggedIn && isConfirmed);

Kalau keduanya true:

true && true
↓
true

Jadi materi mulai tersambung:

confirm()
   ↓
Boolean
   ↓
Logical operators
   ↓
Conditional statements

32. Hubungan dengan null dan undefined

Kamu juga baru belajar tentang:

null
undefined

Sekarang muncul lagi dalam konteks prompt().

prompt()

Cancel:

null

alert()

Tidak mengembalikan input, sehingga hasil return-nya:

undefined

Jadi materi lama ternyata akan terus digunakan.

33. Jangan tertukar null dengan empty string

Ini salah satu jebakan yang bagus untuk diingat:

prompt("Enter your name");

User menekan OK tanpa mengetik:

""

User menekan Cancel:

null

Bukan:

"null"

dan bukan:

undefined

34. Cheat Sheet

alert()

alert("Hello");

Gunanya:

Menampilkan pesan.

Hasil:

User melihat pesan
↓
Klik OK
↓
Program lanjut

prompt()

let value = prompt("Enter your name");

Gunanya:

Meminta input.

Kemungkinan hasil:

Input + OK → String
OK tanpa input → ""
Cancel → null

prompt() dengan default

let value = prompt("Enter your age", "18");

"18" adalah nilai default.

confirm()

let result = confirm("Are you sure?");

Kemungkinan hasil:

OK     → true
Cancel → false

35. Tabel yang sebaiknya kamu hafalkan

🎯 Inti yang harus kamu ingat

Kalau lecture ini diringkas menjadi tiga kalimat:

alert()
→ "Saya ingin MEMBERITAHU sesuatu."

prompt()
→ "Saya ingin MENDAPATKAN input."

confirm()
→ "Saya ingin MENDAPATKAN KEPUTUSAN."

Lebih teknisnya:

alert("Hello");
// menampilkan pesan

let name = prompt("Your name?");
// mendapatkan String atau null

let answer = confirm("Are you sure?");
// mendapatkan true atau false

Dan satu hal yang sangat penting untuk materi berikutnya:

prompt()
   ↓
data dari user
   ↓
bisa dikonversi dengan Number()
   ↓
comparison
   ↓
true / false
   ↓
if / switch

Jadi sebenarnya lecture ini adalah jembatan menuju conditional statements. Setelah ini ketika kamu belajar if, kamu akan mulai melihat pola seperti:

let age = Number(prompt("Enter your age"));

if (age >= 18) {
    // ...
}

Di situ beberapa materi yang sudah kamu pelajari—variable, data type, type coercion, comparison operator, Boolean, dan sekarang prompt—mulai bekerja bersama-sama.