JavaScript Popup Boxes – একটি পূর্ণাঙ্গ বাংলা টিউটোরিয়াল
জাভাস্ক্রিপ্টের একটি গুরুত্বপূর্ণ ফিচার হল Popup Boxes। এগুলোর মাধ্যমে ব্যবহারকারীর সাথে সরাসরি যোগাযোগ স্থাপন করা যায়। মোট তিন ধরনের popup box রয়েছে:
- alert()
- confirm()
- prompt()
এই টিউটোরিয়ালে আমরা প্রতিটি popup box সম্পর্কে বিস্তারিত আলোচনা করব, উদাহরণ সহ।
1. alert() Popup
এটি একটি সাধারণ মেসেজ দেখানোর জন্য ব্যবহৃত হয়। ইউজার কেবল “OK” ক্লিক করতে পারে।
<script>
alert("স্বাগতম! এটি একটি এলার্ট বক্স!");
</script>
যখন এই স্ক্রিপ্ট চালানো হবে, তখন একটি পপআপ মেসেজ দেখাবে: “স্বাগতম! এটি একটি এলার্ট বক্স!”
2. confirm() Popup
এটি ব্যবহারকারীর কাছ থেকে নিশ্চিতকরণ (Yes/No) নেওয়ার জন্য ব্যবহৃত হয়।
<script>
var result = confirm("আপনি কি নিশ্চিত?");
if(result) {
alert("আপনি OK চাপলেন!");
} else {
alert("আপনি Cancel চাপলেন!");
}
</script>
এখানে ব্যবহারকারী যদি OK চাপেন তবে একটি এলার্ট দেখাবে “আপনি OK চাপলেন!” এবং যদি Cancel চাপেন তবে দেখাবে “আপনি Cancel চাপলেন!”।
3. prompt() Popup
এটি ব্যবহারকারীর থেকে ইনপুট নেওয়ার জন্য ব্যবহৃত হয়। ব্যবহারকারী একটি টেক্সট বক্সে কিছু লিখে সাবমিট করতে পারে।
<script>
var name = prompt("আপনার নাম লিখুন:");
if(name != null) {
alert("স্বাগতম, " + name + "!");
}
</script>
ব্যবহারকারী নাম দিলে একটি মেসেজ দেখাবে যেমনঃ “স্বাগতম, Hasan!”
Popup Box তুলনা টেবিল:
| প্রকার | ব্যবহার | ইউজার অপশন |
|---|---|---|
| alert() | বার্তা প্রদর্শন | শুধু OK |
| confirm() | নিশ্চিতকরণ | OK / Cancel |
| prompt() | ইনপুট নেওয়া | Text + OK / Cancel |
উপসংহার
JavaScript popup boxes ওয়েবসাইটে ব্যবহারকারীর সাথে ইন্টারঅ্যাক্ট করার জন্য অত্যন্ত কার্যকর। সঠিকভাবে ব্যবহার করলে এগুলো ইউজার এক্সপেরিয়েন্স বাড়াতে সাহায্য করে। আপনি চাইলে এগুলোর সাথে CSS বা DOM এর মাধ্যমে আরও ইন্টারঅ্যাকটিভ ফিচার তৈরি করতে পারেন।
পরবর্তী পদক্ষেপ:
- popup বক্সে CSS যোগ করে কাস্টমাইজেশন
- DOM এর মাধ্যমে কন্টেন্ট পরিবর্তন
- eventListener দিয়ে popup trigger