জাভাস্ক্রিপ্ট Prompt() মেথড: ব্যবহার এবং উদাহরণ

prompt() — ব্যবহারকারীর ইনপুট নেওয়ার সিম্পল ডায়লগ

window.prompt() একটি ব্রাউজার বিল্ট-ইন মেথড যা একটি মডাল ডায়লগ বক্স দেখায় যেখানে ব্যবহারকারী টেক্সট ইনপুট দিতে পারে। এটি সিঙ্ক্রোনাস এবং পেজ ব্লক করে (ব্যবহারকারী ওকে/ক্যানসেল না দিতে পারলে কোড এক্সিকিউশন থেমে থাকে)।

সিনট্যাক্স

const result = prompt(message, defaultValue);

• message: ডায়লগে দেখানো মেসেজ (স্ট্রিং)।
• defaultValue (ঐচ্ছিক): ইনপুট ফিল্ডে ডিফল্ট ভ্যালু।
• রিটার্ন: ব্যবহারকারীর ইনপুট স্ট্রিং, অথবা null (যদি ক্যানসেল/এস্কেপ দিয়ে বন্ধ করে)।

পূর্ণ উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Prompt Example</title>
  <style>
    * { box-sizing: border-box; }
    body { font-family: 'Segoe UI', sans-serif; padding: 20px; max-width: 500px; margin: 0 auto; text-align: center; }
    .result { font-size: 18px; font-weight: 500; color: #6d28d9; margin-top: 20px; min-height: 28px; }
    button { padding: 12px 24px; background: #4f46e5; color: white; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
    button:hover { background: #4338ca; }
  </style>
</head>
<body>
  <h1>JavaScript prompt() মেথড</h1>
  <div class="result" id="result"></div>
  <button id="promptBtn">প্রম্প্ট দেখান</button>
  <p style="margin-top: 15px; color: #666;">বাটনে ক্লিক করলে প্রম্প্ট ডায়লগ খুলবে</p>
  
  <script>
    const resultEl = document.getElementById('result');
    const btn = document.getElementById('promptBtn');
    
    btn.addEventListener('click', () => {
      // প্রম্প্ট দেখান
      const userInput = prompt('আপনার নাম লিখুন:', 'অতিথি'); // ডিফল্ট ভ্যালু 'অতিথি'
      
      if (userInput === null) {
        // ব্যবহারকারী Cancel বা ESC চাপল
        resultEl.textContent = 'আপনি ক্যানসেল করলেন।';
        resultEl.style.color = '#ef4444';
      } else if (userInput.trim() === '') {
        // খালি সাবমিট
        resultEl.textContent = 'আপনি কিছু লিখলেন না।';
        resultEl.style.color = '#f59e0b';
      } else {
        // সফল ইনপুট
        resultEl.textContent = `স্বাগতম, ${userInput.trim()}!`;
        resultEl.style.color = '#22c55e';
      }
    });
  </script>
</body>
</html>

আউটপুট পরিস্থিতি

সীমাবদ্ধতা এবং সতর্কতা

• মডাল ও ব্লকিং: প্রম্প্ট খোলা থাকলে পেজের সব ইন্টারঅ্যাকশন বন্ধ থাকে।
• স্টাইল করা যায় না: ব্রাউজার/ওএস অনুযায়ি দেখতে ভিন্ন হয়, CSS দিয়ে কাস্টমাইজ করা যায় না।
• নিরাপত্তা: কিছু ব্রাউজার/সেটিং-এ প্রম্প্ট ব্লক করে দেয় (পপ-আপ ব্লকার)।
• মোবাইল UX: মোবাইল ব্রাউজারগুলোতে প্রম্প্ট UX খারাপ (জুম, কীবোর্ড ইস্যু)।
• সিঙ্ক্রোনাস: অ্যাসিঙ্ক্রোনাস কোডে (async/await) সরাসরি ব্যবহার করা যায় না — প্রমিসে র‍্যাপ করুন।

আধুনিক বিকল্প: কাস্টম মডাল (Recommended)

প্রোডাকশন অ্যাপে ব্রাউজার প্রম্প্ট বাদে কাস্টম মডাল কম্পোনেন্ট ব্যবহার করুন:

// সিম্পল প্রমিস-বেসড প্রম্প্ট র‍্যাপার
function showPrompt(message, defaultValue = '') {
  return new Promise((resolve) => {
    // এখানে আপনার কাস্টম মডাল HTML/CSS/JS লজিক
    // রেজলভ(userInput) বা রেজলভ(null) কল করুন
  });
}

// ব্যবহার
const name = await showPrompt('নাম লিখুন:');
if (name) console.log(name);

লাইব্রেরি: SweetAlert2, Bootbox, Radix Dialog, Headless UI Dialog — এগুলো প্রোফেশনাল লুক, অ্যাক্সেসিবিলিটি, অ্যানিমেশন, থিমিং দেয়।

লিগ্যাসি কোডে প্রম্প্ট হ্যান্ডলিং

// পুরানো কোডে নাল চেক বাধ্যতামূলক
const input = prompt('মান দিন:');
if (input !== null) {
  // ব্যবহারকারী OK দিয়েছে (হয়তো খালি স্ট্রিং)
  process(input);
} else {
  // ব্যবহারকারী Cancel/ESC
  console.log('বাতিল করা হয়েছে');
}

সারামারি: প্রম্প্ট শুধু কুইক প্রোটোটাইপিং, লার্নিং, বা অ্যাডমিন টুলের জন্য উপযোগী। প্রোডাকশন ইউজার-ফেসিং অ্যাপে কাস্টম মডাল ব্যবহার করুন।