JavaScript alert() মেথড, যেটাকেও Window.alert() হিসেবে জানা হয়, একটি ইউজারকে একটি এলার্ট ডায়লগ বক্স ডিসপ্লে করে। এটি একটি অপশনাল মেসেজ আর্গুমেন্ট গ্রহণ করে একটি মেসেজ ডিসপ্লে করতে একটি OK বাটনসহ ইউজারের কাছে। alert()-র কমন ইউজেস হলো ইউজাকে জানাতে একটি অ্যাকশন সফল হয়েছে, বা এরর ডিসপ্লে করতে।
alert() মেথড একটি ডেভেলপমেন্ট টুল হিসেবেও কাজে আসে। উদাহরণস্বরূপ, একটি ফর্ম সাবমিশন হ্যান্ডেল করার ফাংশনের ভেতরে একটি alert() রাখা। সাধারণত, alert() event.preventDefault() কল হওয়ার পর রাখা হয়।
রিভিউর জন্য, event.preventDefault() শুধু সাবমিট বাটন ক্লিক হওয়ার পর রিডায়রেক্ট করার ডিফল্ট বিহেভিয়র ক্যানسেল করে। event.preventDefault() আরও রিভিউ করার জন্য এই কুইক টিউটোরিয়াল পড়ুন।
JavaScript alert() কী?
JavaScript alert() একটি পপ-আপ ডায়লগ বক্স ডিসপ্লে করে। একটি অপশনাল মেসেজ স্ট্রিং আকারে পাস করা যায় একটি কাস্টম মেসেজ ডিসপ্লে করার জন্য। alert()-এর একটি গুরুত্বপূর্ণ নোট: এটি শুধু একটি মেসেজ ডিসপ্লে করতে ব্যবহার করা উচিত যেটি OK ক্লিক করে একনলেজমেন্ট চায়। একটি মেসেজ যেটি একটি অ্যাকশন চায় সেটি alert() ব্যবহার করা উচিত নয়।
একটি alert() ডায়লগ বক্সের অনেক ইউজ আছে। এটি একটি fetch() রিকোয়েস্টের প্রেক্ষাপটে সাকসেস বা এরর ডিসপ্লে করতে ব্যবহার করা যায়। আরেকটি ইউজ হলো একটি ফাংশনে alert() ডিসপ্লে করা প্রোগ্রাম উপযুক্তভাবে ফ্লো করছে কিনা নিশ্চিত করার জন্য।
alert() JavaScript সিনট্যাক্স
alert()-এর সিনট্যাক্স সংক্ষিপ্ত এবং সোজা। শুধু alert() ইনভোক করুন একটি মেসেজ স্ট্রিং আকারে পাস করে:
alert('message')
এটি একটি ডায়লগ বক্স ডিসপ্লে করবে যেটি 'message' বলবে। আপনার কাস্টম মেসেজ স্ট্রিং হিসেবে রাখুন ডিসপ্লে করার জন্য।
মেসেজটি অপশনাল। যদি মেসেজ ইনক্লুড না করা হয়, তবে একটি খালি ডায়লগ বক্স OK বাটনসহ দেখাবে।
alert()
JavaScript alert() উদাহরণ
এই আর্টিকেলের ইন্ট্রোডাকশনে, আমরা alert() ব্যবহার করার জন্য একটি ইউজার এবং একটি ডেভেলপার সিনেরিও বিবেচনা করেছি। চলুন এখন দেখি প্রতিটি কীভাবে ইমপ্লিমেন্ট করা হয়। ডেভেলপার সাইড থেকে শুরু করি। আমরা একটি ফাংশনের ভেতরে একটি alert() রাখব যা ফর্ম সাবমিশন হ্যান্ডেল করে।
আমরা একটি বেসিক ফর্ম দিয়ে শুরু করব লগইন করার জন্য ইউজারনেম এবং পাসওয়ার্ড দিয়ে।
<form> <label>Name</label> <input type="text" name="name"> <label>Password</label> <input type="text" name="name"> <button type="submit"> Log In </button> </form>
যা রেন্ডার করে:
এখন আমাদের JavaScript ফর্মের onSubmit প্রপার্টিতে পাস করার জন্য একটি ফাংশন বিল্ড করি।
const handleOnSubmit = (event) => { event.preventDefault(); alert("Logged In") }
তারপর আমরা এই ফাংশনটি আমাদের ফর্মের onSubmit প্রপার্টিতে পাস করি।
<form onSubmit="handleOnSubmit(event)"> <label>Name</label> <input type="text" name="name"> <label>Password</label> <input type="text" name="name"> <button type="submit"> Log In </button> </form>
এখন আমরা লগইন বাটনে ক্লিক করে দেখতে পারি আমরা সঠিকভাবে ফাংশনটি ফর্মের সাথে ওয়ার্ড করেছি কিনা। বাটনে ক্লিক করার পর আমরা এমন একটি ডায়লগ বক্স পাই:
চমৎকার! আমরা জানি যে আমাদের ডিফাইন করা ফাংশন আমাদের ফর্মের সাথে কমিউনিকেট করছে। JavaScript alert() আমাদের প্রোগ্রামের ফ্লো চেক করার একটি সিম্পল উপায় দেয়।
আমাদের পরবর্তী উদাহরণের জন্য, চলুন দেখি কীভাবে আমরা সাকসেস এবং এরর মেসেজ এক্সপোজ করতে পারি একটি fetch() রিকোয়েস্টে।
fetch('/current-cart/', { credentials: 'include', method: 'GET', headers: { 'Content-Type': 'application/json' }, }) .then(resp => resp.json()) .then(cart => { if(cart.error){ alert(cart.error) }
এই উদাহরণে, আমাদের একটি শপিং কার্ট fetch রিকোয়েস্ট আছে একটি ই-কমার্স অ্যাপে। আমরা একটি রিকোয়েস্ট পাঠাচ্ছি দেখতে একটি কারেন্ট শপিং কার্ট স্টোর হয়েছে কিনা। রিকোয়েস্টের শেষ পর্যন্ত যাওয়া, আমাদের একটি alert() আছে যেটি এরর ডিসপ্লে করবে, যদি থাকে।
কারণ একটি এক্টিভ শপিং কার্ট নেই, আমরা এই এরর পাই:
এই উদাহরণ ডেভেলপমেন্টে বেশি উপকারী প্রোডাকশনে, কিন্তু একই প্রিন্সিপলগুলো ফর্মের ভ্যালিডেশন হিসেবে প্রয়োগ করা যায়।
return fetch('/login', { credentials: 'include', method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(creds) }) .then(resp => resp.json()) .then(response => { if (response.error) { alert(response.error) }
এখানে, alert() লগইন ফর্মের সাথে জড়িত এরর মেসেজ ডিসপ্লে করবে। যদি একজন ইউজার ফর্ম ফিল না করেই লগইন করতে চায়, তবে আমরা এই এররগুলো পাই:
এটি alert() ব্যবহার করে ইউজার এক্সপেরিয়েন্স ডাইরেক্ট করার একটি উদাহরণ যেটি ফর্মে ভ্যালিডেশন এরর ডিসপ্লে করে ইউজারের কাছে।
আমরা দেখেছি alert() কীভাবে ডেভেলপমেন্ট সাইড এবং ক্লায়েন্ট সাইড - যা ইউজার দেখে - দুটোই ইউজ করা যায়। চলুন একটু রিক্যাপ করি যা আমরা শিখেছি।
উপসংহার
JavaScript alert() একটি সিম্পল মেথড যার অনেক ব্রড ইউজেস আছে। এটি একটি অপশনাল আর্গুমেন্ট নেয় মেসেজ হিসেবে স্ট্রিং ডেটা টাইপ। এটি একটি ডায়লগ বক্স ডিসপ্লে করে মেসেজ এবং একটি OK বাটনসহ। মনে রাখবেন যে alert() শুধু মেসেজ ডিসপ্লে করার জন্য বানানো হয়েছে এবং কোনো অ্যাকশন নিতে পারে না।
আমাদের উদাহরণগুলতে, আমরা দেখেছি alert() কীভাবে ডেভেলপমেন্টে ব্যবহার করা যায় একটি ফাংশন এবং একটি ফর্মের কমিউনিকেশন ট্র্যাক করতে। তারপর, আমরা দেখেছি alert() কীভাবে একটি fetch রিকোয়েস্টের ডেভেলপমেন্ট সাইডে এরর মেসেজ এক্সপোজ করতে পারে। আমাদের ফাইনাল উদাহরণে, আমরা দেখেছি alert() কীভাবে একটি ফর্মে ভ্যালিডেশন এরর ডেলিভার করতে পারে একটি ইউজারের কাছে।
এখন পর্যন্ত, আপনার alert()-র কমন ইউজেসে একটি গ্যাস্প হওয়া উচিত। আপনার নেক্সট JavaScript প্রজেক্টে এটি টেস্ট করে দেখুন বিভিন্ন ফাংশন্যালিটি টেস্ট করার উপায় হিসেবে।
