জাভাস্ক্রিপ্ট ডায়লগ বক্স (Dialog Boxes)

জাভাস্ক্রিপ্ট তিনটি গুরুত্বপূর্ণ টাইপের ডায়লগ বক্স সাপোর্ট করে। এগুলো এলার্ট জানাতে, কনফার্মেশন নেওয়া, বা ইউজার থেকে ইনপুট নেওয়ার জন্য ব্যবহৃত হয়।

তিনটি ডায়লগ বক্স

1. Alert Box: সতর্কবার্তা বা তথ্য দেখানোর জন্য। শুধু OK বাটন থাকে।
2. Confirm Box: ব্যবহারকারীর নিশ্চয়তা যাচাই করতে। OK এবং Cancel বাটন থাকে।
3. Prompt Box: ব্যবহারকারীর কাছ থেকে ইনপুট নেওয়ার জন্য। টেক্সট ফিল্ড, OK এবং Cancel থাকে।

উদাহরণ

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>Document</title> 
  <style> 
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .sample { font-size: 18px; font-weight: 500; }
  </style> 
</head> 
<body> 
  <h1>Dialogue boxes</h1> 
  <div class="sample"></div> 
  <button class="alert">ALERT BOX</button> 
  <button class="confirm">CONFIRM BOX</button> 
  <button class="prompt">PROMPT BOX</button> 
  <h3> Click on the above button to see their dialogue box </h3> 
  <script> 
    let fillEle = document.querySelector(".sample");
    
    document.querySelector('.alert').addEventListener('click', () => {
      alert('Hello World');
    });
    
    document.querySelector('.confirm').addEventListener('click', () => {
      const result = confirm('Are you sure?');
      fillEle.innerHTML = "User clicked: " + (result ? "OK" : "Cancel");
    });
    
    document.querySelector('.prompt').addEventListener('click', () => {
      const name = prompt('Enter your name');
      fillEle.innerHTML = "Entered: " + (name || "Cancelled");
    });
  </script> 
</body> </html>

রিটার্ন ভ্যালু

• alert() → undefined (কোনো রিটার্ন নেই)
• confirm() → true (OK) বা false (Cancel)
• prompt() → ইনপুট স্ট্রিং (OK) বা null (Cancel)

ব্যবহার সতর্কতা

• এই ডায়লগগুলো মডাল (modal) - পেজ ব্লক করে দেয়
• ওভারюза্ব করলে UX খারাপ হয়
• মডার্ন অ্যাপে কাস্টম মডাল/টোস্ট নোটিফিকেশন ব্যবহার করা ভালো
• prompt() কিছু ব্রাউজারে ডিপ্রিকেটেড/সীমিত