HTML Dasar #27 - Menampilkan Alert dan Prompt dengan JavaScript

byFerdian Rahabista -
0

Setelah kita belajar cara menambahkan JavaScript ke HTML (inline, internal, external), sekarang saatnya mengenal fungsi-fungsi dasar JavaScript untuk berinteraksi dengan pengguna: alert(), prompt(), dan confirm(). Ketiga fungsi ini adalah cara termudah untuk memulai belajar JavaScript karena langsung memberikan hasil yang terlihat.

Apa Itu Alert, Prompt, dan Confirm?

Ketiga fungsi ini adalah dialog box bawaan browser yang bisa kita gunakan untuk berkomunikasi dengan pengguna.

Fungsi Fungsi Tampilan Nilai Kembalian
alert() Menampilkan pesan peringatan Teks + tombol OK Tidak ada (undefined)
prompt() Meminta input teks dari pengguna Teks + input field + OK/Cancel String (atau null jika Cancel)
confirm() Meminta konfirmasi ya/tidak Teks + tombol OK/Cancel Boolean (true/false)
Catatan Penting:
Alert, prompt, dan confirm adalah fungsi blocking - artinya eksekusi kode JavaScript akan berhenti sementara sampai pengguna menutup dialog box. Ini berguna untuk interaksi sederhana, tapi untuk aplikasi modern biasanya menggunakan modal custom.

1. Alert() - Menampilkan Pesan Peringatan

alert() adalah fungsi paling sederhana. Fungsinya menampilkan kotak dialog dengan pesan dan tombol OK. Pengguna harus menekan OK untuk melanjutkan.

Contoh Dasar Alert:

<button onclick="alert('Selamat datang di website saya!')">
    Klik untuk Sapaan
</button>

<button onclick="alert('Peringatan: Data akan dihapus!')">
    Peringatan
</button>

Hasilnya:

Klik tombol di atas untuk melihat alert.

Alert dengan Variabel:

<script>
    let nama = "Budi";
    let umur = 17;
    alert("Halo " + nama + ", umur kamu " + umur + " tahun.");
    // atau pakai template literal (lebih modern)
    alert(`Halo ${nama}, umur kamu ${umur} tahun.`);
</script>
Kegunaan Alert:
  • Memberi tahu pengguna bahwa suatu aksi telah selesai
  • Menampilkan pesan error atau peringatan
  • Debugging sederhana (alternatif console.log)
  • Menampilkan hasil perhitungan atau data

2. Prompt() - Meminta Input dari Pengguna

prompt() menampilkan dialog box yang memungkinkan pengguna memasukkan teks. Fungsi ini mengembalikan string yang diinput pengguna, atau null jika tombol Cancel ditekan.

Sintaks Prompt:

let jawaban = prompt("Pertanyaan untuk pengguna", "Nilai default (opsional)");

Contoh Prompt Sederhana:

<button onclick="tanyaNama()">Siapa Nama Kamu?</button>
<p id="hasilNama"></p>

<script>
    function tanyaNama() {
        let nama = prompt("Masukkan nama kamu:", "");
        if (nama !== null && nama !== "") {
            document.getElementById("hasilNama").innerHTML = "Halo, " + nama + "! Selamat belajar JavaScript.";
        } else if (nama !== null) {
            document.getElementById("hasilNama").innerHTML = "Kamu tidak mengisi nama.";
        }
    }
</script>

Hasilnya:

Contoh Prompt untuk Menghitung:

<button onclick="hitungLuas()">Hitung Luas Persegi</button>

<script>
    function hitungLuas() {
        let sisi = prompt("Masukkan panjang sisi persegi (cm):", "0");
        
        if (sisi !== null) {
            let sisiAngka = parseFloat(sisi);
            
            if (isNaN(sisiAngka)) {
                alert("Harap masukkan angka yang valid!");
            } else {
                let luas = sisiAngka * sisiAngka;
                alert(`Luas persegi dengan sisi ${sisiAngka} cm adalah ${luas} cm²`);
            }
        }
    }
</script>
Tips Prompt:
  • Gunakan parseInt() atau parseFloat() untuk mengubah input menjadi angka
  • Gunakan if (jawaban !== null) untuk mengecek apakah pengguna menekan Cancel
  • Gunakan if (jawaban === "") untuk mengecek input kosong
  • Prompt mengembalikan string, jadi "10" berbeda dengan 10 (angka)

3. Confirm() - Meminta Konfirmasi Ya/Tidak

confirm() menampilkan dialog box dengan tombol OK dan Cancel. Fungsi ini mengembalikan true jika pengguna menekan OK, dan false jika menekan Cancel.

Contoh Confirm Sederhana:

<button onclick="konfirmasiHapus()">Hapus Data</button>

<script>
    function konfirmasiHapus() {
        let yakin = confirm("Apakah Anda yakin ingin menghapus data ini?");
        
        if (yakin) {
            alert("Data berhasil dihapus!");
            // kode untuk menghapus data di sini
        } else {
            alert("Penghapusan dibatalkan.");
        }
    }
</script>

Contoh Confirm untuk Navigasi Keluar:

<a href="https://www.google.com" id="linkKeluar">Keluar dari Website</a>

<script>
    document.getElementById("linkKeluar").addEventListener("click", function(event) {
        let yakin = confirm("Anda akan meninggalkan halaman ini. Lanjutkan?");
        if (!yakin) {
            event.preventDefault(); // batalkan navigasi
        }
    });
</script>
Keluar dari Website (Contoh)

Klik link di atas - akan muncul konfirmasi sebelum "keluar".

Contoh Proyek: Aplikasi Kuis Sederhana

Berikut contoh aplikasi kuis interaktif yang menggabungkan alert, prompt, dan confirm:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Kuis JavaScript Sederhana</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        .quiz-card {
            background: white;
            border-radius: 20px;
            padding: 40px;
            max-width: 500px;
            text-align: center;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }
        h1 {
            color: #1e293b;
            margin-bottom: 10px;
        }
        p {
            color: #64748b;
            margin-bottom: 20px;
        }
        button {
            background: #3b82f6;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 10px;
            font-size: 16px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #2563eb;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 10px;
            font-weight: bold;
        }
        .score-high {
            background: #dcfce7;
            color: #166534;
        }
        .score-low {
            background: #fee2e2;
            color: #991b1b;
        }
    </style>
</head>
<body>

    <div class="quiz-card">
        <h1>JavaScript Quiz</h1>
        <p>Uji pengetahuan JavaScript Anda!</p>
        
        <button id="startQuiz">Mulai Kuis</button>
        <div id="result" class="result"></div>
    </div>

    <script>
        const startButton = document.getElementById('startQuiz');
        const resultDiv = document.getElementById('result');
        
        // Daftar pertanyaan
        const questions = [
            {
                text: "Apa kepanjangan dari HTML?",
                answer: "hypertext markup language"
            },
            {
                text: "CSS digunakan untuk mengatur apa?",
                answer: "tampilan"
            },
            {
                text: "JavaScript adalah bahasa pemrograman untuk...",
                answer: "interaktif"
            }
        ];
        
        function startQuiz() {
            // Konfirmasi sebelum mulai
            let siap = confirm("Kuis akan dimulai. Ada 3 pertanyaan. Siap?");
            
            if (!siap) {
                alert("Oke, lain kali ya!");
                return;
            }
            
            let score = 0;
            
            // Loop untuk setiap pertanyaan
            for (let i = 0; i < questions.length; i++) {
                let jawaban = prompt(
                    `Pertanyaan ${i+1} dari ${questions.length}\n\n${questions[i].text}`,
                    ""
                );
                
                if (jawaban === null) {
                    alert("Kuis dibatalkan.");
                    return;
                }
                
                // Bandingkan jawaban (case insensitive)
                if (jawaban.toLowerCase().trim() === questions[i].answer) {
                    alert("Benar!");
                    score++;
                } else {
                    alert(`Salah! Jawaban yang benar adalah: ${questions[i].answer}`);
                }
            }
            
            // Tampilkan hasil akhir
            let pesan = `Nilai Anda: ${score} dari ${questions.length}`;
            
            if (score === questions.length) {
                alert(`Sempurna! ${pesan} Selamat!`);
                resultDiv.innerHTML = `Sempurna! ${pesan} Selamat!`;
                resultDiv.className = "result score-high";
            } else if (score >= questions.length / 2) {
                alert(`Cukup baik! ${pesan} Terus belajar!`);
                resultDiv.innerHTML = `Cukup baik! ${pesan} Terus belajar!`;
                resultDiv.className = "result score-high";
            } else {
                alert(`${pesan} Jangan menyerah! Coba lagi lain waktu.`);
                resultDiv.innerHTML = `${pesan} Jangan menyerah! Coba lagi lain waktu.`;
                resultDiv.className = "result score-low";
            }
        }
        
        startButton.addEventListener('click', startQuiz);
    </script>

</body>
</html>

Hasil visual kuis:

JavaScript Quiz

Uji pengetahuan JavaScript Anda!

Tabel Perbandingan Alert, Prompt, Confirm

Fitur alert() prompt() confirm()
Input dari pengguna Tidak Ya (teks) Ya (boolean)
Tombol yang tersedia OK OK, Cancel OK, Cancel
Nilai kembalian undefined String atau null true atau false
Kegunaan utama Pemberitahuan Mengambil input Konfirmasi aksi

Kesalahan Umum Pemula

  • Lupa mengubah tipe data prompt → Prompt selalu mengembalikan string. Gunakan parseInt() atau parseFloat() untuk operasi matematika.
  • Tidak mengecek nilai null dari prompt/confirm → Pengguna bisa menekan Cancel, selalu cek dengan if (hasil !== null).
  • Menganggap prompt selalu terisi → Pengguna bisa mengosongkan input. Cek dengan if (hasil === "").
  • Menggunakan alert berlebihan → Terlalu banyak alert bisa mengganggu pengguna.
  • Lupa bahwa alert/prompt/confirm adalah blocking → Kode JavaScript berhenti sampai dialog ditutup.
Debugging Tips:
  • Gunakan console.log() untuk melihat nilai yang dikembalikan prompt/confirm
  • Periksa tipe data dengan typeof variable
  • Jika angka tidak sesuai, pastikan sudah di-convert dengan parseInt() atau parseFloat()

Latihan Singkat

  1. Buat file HTML baru dengan judul "Latihan Alert Prompt Confirm"
  2. Buat tombol yang menampilkan alert "Selamat datang!"
  3. Buat tombol yang meminta nama pengguna dengan prompt, lalu tampilkan sapaan dengan alert
  4. Buat tombol yang meminta konfirmasi sebelum menjalankan aksi (misal: "Yakin ingin melanjutkan?")
  5. Buat program sederhana yang meminta dua angka dengan prompt, lalu menampilkan hasil penjumlahannya dengan alert
  6. Simpan dan buka di browser, coba semua fungsi

Intisari Hari Ini

  • alert("pesan") → menampilkan pesan peringatan (tombol OK)
  • prompt("pertanyaan", "default") → meminta input teks dari pengguna
  • confirm("pertanyaan") → meminta konfirmasi ya/tidak (true/false)
  • Prompt mengembalikan string (atau null jika Cancel)
  • Confirm mengembalikan boolean (true jika OK, false jika Cancel)
  • Gunakan parseInt() atau parseFloat() untuk mengubah input prompt menjadi angka
  • Selalu cek nilai null untuk prompt dan confirm
Tantangan Akhir Pekan: Buat sebuah Aplikasi Kalkulator Sederhana dengan alert, prompt, dan confirm! Persyaratan:
  • Tampilkan menu pilihan operasi dengan prompt: "1. Tambah, 2. Kurang, 3. Kali, 4. Bagi"
  • Minta pengguna memilih operasi (1-4)
  • Minta dua angka dengan prompt
  • Lakukan perhitungan sesuai pilihan
  • Tampilkan hasil dengan alert
  • Setelah selesai, tanyakan dengan confirm: "Ingin menghitung lagi?"
  • Jika ya, ulangi dari awal. Jika tidak, tampilkan alert "Terima kasih telah menggunakan kalkulator"
  • Validasi input: pastikan pengguna memasukkan angka yang valid
  • Jika pengguna memilih Cancel di tengah jalan, hentikan program dengan pesan yang sesuai

Bonus: Tambahkan operasi pangkat dan modulus.

Selamat mencoba!

Artikel Sebelumnya: HTML Dasar #26 - Cara Menambahkan JavaScript ke HTML (Inline, Internal, External)
Artikel Selanjutnya: HTML Dasar #28 - Mengambil dan Mengubah Isi Elemen HTML (innerHTML, textContent)

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال