একটি ওয়েবসাইটে ইন্টারেক্টিভ বৈশিষ্ট্য যোগ করা যেখানে জাভাস্ক্রিপ্ট উজ্জ্বল হয়। যেখানে HTML এবং CSS যথাক্রমে একটি ওয়েব পৃষ্ঠার গঠন এবং শৈলী সেট করতে ব্যবহৃত হয়, আপনি আপনার সাইটটিকে আরও গতিশীল করতে JavaScript ব্যবহার করতে পারেন।
জাভাস্ক্রিপ্টে, ইভেন্টগুলি একটি সাইটকে ইন্টারেক্টিভ করতে ব্যবহার করা হয়। এই গাইডে, আমরা জাভাস্ক্রিপ্ট ইভেন্টগুলি সম্পর্কে কথা বলতে যাচ্ছি। ইভেন্টগুলি কোথায় ব্যবহার করা যেতে পারে, কীভাবে একটি ইভেন্টকে সংজ্ঞায়িত করতে হয় এবং কীভাবে একটি ইভেন্টকে কল করতে হয় তা আমরা অন্বেষণ করব। চলুন শুরু করা যাক!
একটি জাভাস্ক্রিপ্ট ইভেন্ট কি?
ইভেন্টগুলি হয় ব্রাউজার বা ব্যবহারকারীর দ্বারা ট্রিগার করা যেতে পারে এবং ওয়েব পৃষ্ঠার অবস্থা পরিবর্তন করতে সক্ষম। আপনি যখন একটি ওয়েব পৃষ্ঠার একটি বোতামে ক্লিক করেন, একটি জাভাস্ক্রিপ্ট ইভেন্ট তৈরি হয়। যখন আপনি একটি ড্রপডাউন মেনুতে ক্লিক করেন যা প্রসারিত হয়, একটি জাভাস্ক্রিপ্ট ইভেন্ট ব্যবহার করা হয়।
জাভাস্ক্রিপ্ট ইভেন্টগুলির বিস্তৃত ব্যবহার রয়েছে, যার মধ্যে রয়েছে:
- একটি ফর্ম পূরণ করা হয়েছে কিনা তা পরীক্ষা করা হচ্ছে
- একজন ব্যবহারকারী যখন একটি ফর্ম পূরণ করে তখন অন্য পৃষ্ঠায় নেভিগেট করা
- ড্রপডাউন মেনুকে ইন্টারেক্টিভ করা
- একজন ব্যবহারকারীকে ছবি জুম ইন এবং আউট করার অনুমতি দেয়
জাভাস্ক্রিপ্টে ইভেন্ট নিয়ে কাজ করার জন্য, আপনাকে দুটি ধারণা সম্পর্কে জানতে হবে:ইভেন্ট হ্যান্ডলার এবং ইভেন্ট শ্রোতা।
একটি ইভেন্ট হ্যান্ডলার একটি ফাংশন যা চালানো হয় যখন একটি ইভেন্ট একটি ওয়েব পৃষ্ঠায় ট্রিগার হয়। ইভেন্ট শ্রোতারা একটি ইভেন্ট ফাংশনকে একটি HTML উপাদানের সাথে সংযুক্ত করে, তাই যখন সেই ফাংশনটি কার্যকর করা হয়, তখন ওয়েব উপাদানটি পরিবর্তিত হয়।
ইভেন্ট হ্যান্ডলারগুলিকে তিনটি উপায়ের মধ্যে একটিতে সংজ্ঞায়িত করা যেতে পারে:একটি ইনলাইন ইভেন্ট হ্যান্ডলার, একটি ইভেন্ট সম্পত্তি বা একটি ইভেন্ট লিসেনার ব্যবহার করে৷
ইনলাইন ইভেন্ট হ্যান্ডলার
জাভাস্ক্রিপ্টে ইভেন্টগুলি শুরু করার সবচেয়ে সহজ উপায় হল একটি ইনলাইন ইভেন্ট হ্যান্ডলার ব্যবহার করা। এর মানে হল আপনি আপনার ইভেন্টটি আপনার HTML ফাইলে সংজ্ঞায়িত করবেন
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।
এই উদাহরণের জন্য, ধরুন আমরা JJ Smith’s Bakery নামে একটি বেকারির জন্য একটি ওয়েবসাইট ডিজাইন করছি। আমরা চাই একজন ব্যবহারকারীকে "প্রতিক্রিয়া গৃহীত" পাঠ্যের সাথে অনুরোধ করা হোক। যখন তারা একটি ফর্ম জমা দেয়।
নিম্নলিখিত কোড বিবেচনা করুন:
<!DOCTYPE html> <html> <head> <title>JJ Smith's Bakery</title> </head> <script src="main.js"></script> <body> <p id="submitted"></p> <button onclick="submitForm()">Submit form</button> </body> </html>
এই কোডটি একটি ওয়েব পৃষ্ঠা রেন্ডার করে যা দেখতে এইরকম:
এখন পর্যন্ত, খুব একটা যাচ্ছে না. আমাদের ওয়েব পৃষ্ঠায় একটি বোতাম রয়েছে যা কিছু করা উচিত যখন আমরা আমাদের বোতামটি ক্লিক করি। যখন আমরা আমাদের বোতামে ক্লিক করি তখন কিছুই হয় না। এর কারণ হল আমরা এখনও আমাদের ইভেন্ট হ্যান্ডলার লিখতে পারিনি।
main.js ফাইলে, নিম্নলিখিত কোড পেস্ট করুন:
const submitForm = () => {
const text = document.getElementById("submitted");
text.textContent = "Form submitted."
}
এই কোডটি "জমা দেওয়া" আইডি সহ উপাদানটি খুঁজে পাবে এবং এটির বিষয়বস্তুকে "ফর্ম জমা দেওয়া" হিসাবে পরিবর্তন করবে। এই কোডটি তখনই চলবে যখন আমাদের submitForm() ফাংশন বলা হয়। ব্যবহারকারী আমাদের বোতামে ক্লিক করলে এটি ঘটবে।
যখন আমরা আমাদের বোতামে ক্লিক করি, নিম্নলিখিতগুলি ঘটে:
আপনি দেখতে পারেন, আমাদের প্রম্পট প্রদর্শিত হবে. আমরা আমাদের ওয়েব পৃষ্ঠাকে ইন্টারেক্টিভ করতে একটি ইনলাইন ইভেন্ট হ্যান্ডলার ব্যবহার করেছি। কিন্তু ইনলাইন ইভেন্ট হ্যান্ডলাররা জাভাস্ক্রিপ্টে ইভেন্ট ব্যবহার করার একমাত্র উপায় নয়। আমাদের কোডে ইভেন্ট হ্যান্ডলার প্রপার্টি কীভাবে ব্যবহার করবেন তা নিয়ে আলোচনা করা যাক।
হ্যান্ডলার বৈশিষ্ট্য সহ ইভেন্টগুলি
একটি ইনলাইন হ্যান্ডলারে, আপনি আপনার HTML ফাইলে কোন ফাংশনটি চালাতে চান তা নির্দিষ্ট করতে হবে। আগের থেকে আমাদের HTML কোডে, এই লাইনটি হল যেখানে আমরা যে ফাংশনটিকে কল করতে চাই তা নির্ধারণ করেছি যখন আমাদের বোতাম টিপানো হয়:
<button onclick="submitForm()">Submit form</button>
হ্যান্ডলার বৈশিষ্ট্য ব্যবহার করে, আমরা আমাদের কোড থেকে "অনক্লিক" ইভেন্টটি সরিয়ে ফেলতে পারি। এটি আমাদের সমস্ত জাভাস্ক্রিপ্ট সরাতে দেয় যা আমাদের ওয়েব পৃষ্ঠাটিকে তার নিজস্ব ফাইলে ইন্টারেক্টিভ করে তোলে। এই উদাহরণের জন্য, আমরা আমাদের বোতামটি আইডি "বোতাম" বরাদ্দ করতে যাচ্ছি, যাতে আমরা আমাদের জাভাস্ক্রিপ্ট কোডে আমাদের বোতামটি সনাক্ত করতে পারি। আসুন অনক্লিক ইভেন্টটি সরান এবং আমাদের বোতামটিকে একটি আইডি বরাদ্দ করি:
<button id="button">Submit form</button>
আমাদের বোতাম টিপে আমাদের ইভেন্ট ফায়ার করার জন্য, আমরা আমাদের "main.js" ফাইলের ভিতরে একটি হ্যান্ডলার সম্পত্তি সহ একটি ইভেন্ট লিখতে যাচ্ছি। আমরা যে কোডটি ব্যবহার করব তা এখানে:
const submitForm = () => {
const text = document.getElementById("submitted");
text.textContent = "Form submitted."
}
const button = document.getElementById("button")
button.onclick = submitForm;
আপনি যখন এই কোডটি চালান এবং বোতামে ক্লিক করেন, নিম্নলিখিতটি ফিরে আসে:
আমাদের বোতাম আগের মতোই কাজ করে, কিন্তু আমাদের কোডটি অন্যভাবে লেখা হয়। আমাদের ইভেন্ট হ্যান্ডলারদের ইনলাইনে লেখার পরিবর্তে, আমরা সেগুলিকে আমাদের main.js ফাইলে সরিয়ে নিয়েছি। এটি আমাদের আরও রক্ষণাবেক্ষণযোগ্য কোড লিখতে সাহায্য করে কারণ আমাদের ইনলাইন ইভেন্টগুলি কোথায় ট্রিগার হয়েছে তা খুঁজে বের করার জন্য আমাদের সমস্ত HTML কোড পড়ার দরকার নেই৷
ইভেন্ট লিসেনার
ইভেন্ট শ্রোতারা জাভাস্ক্রিপ্টে একটি ইভেন্ট ঘোষণা করতে ব্যবহার করা যেতে পারে। শ্রোতারা সর্বদা খুঁজছেন যখন একটি উপাদানের অবস্থা পরিবর্তিত হয়, এবং যদি সেই উপাদানটি পরিবর্তন করা হয়, শ্রোতার কোডটি কার্যকর করা হবে।
উদাহরণস্বরূপ, আপনি যখন একটি ইভেন্ট শ্রোতার সাথে সংযুক্ত একটি বোতামে ক্লিক করেন, তখন শ্রোতা "শুনে" যে একটি মাউস ইভেন্ট ট্রিগার হয়েছে৷ তারপর এটি সেই নির্দিষ্ট ইভেন্ট শ্রোতার সাথে আপনার যুক্ত কোডটি কার্যকর করবে।
এই উদাহরণের জন্য আমাদের এইচটিএমএল কোড উপরের মতই, কিন্তু আমরা আমাদের "main.js" ফাইলে একটি ছোট পরিবর্তন করতে যাচ্ছি:
const submitForm = () => {
const text = document.getElementById("submitted");
text.textContent = "Form submitted."
}
const button = document.getElementById("button")
button.addEventListener("click", submitForm);
এই কোডে, আমরা addEventListener ব্যবহার করছি একটি ইভেন্ট শ্রোতা তৈরি করতে। এটি আমাদের submitForm() বাঁধাই করার পরিবর্তে একটি অনক্লিক ইভেন্টে জাভাস্ক্রিপ্ট ফাংশন যেমন আমরা আমাদের শেষ দুটি উদাহরণে করেছি।
যখন আমাদের বোতামটি মাউস পয়েন্টার দিয়ে ক্লিক করা হয় তখন আমাদের কোড শোনার জন্য আমরা "ক্লিক" উল্লেখ করি। ক্লিক ইভেন্ট ছাড়াও অন্যান্য ইভেন্টের ধরন আছে—যেমন কীবোর্ড ইভেন্ট—কিন্তু আমরা এই টিউটোরিয়ালে মাউস ক্লিক ইভেন্টের উপর ফোকাস করব।
আবার আমাদের কোড রান করুন এবং আমাদের বোতামে ক্লিক করুন।
আউটপুট একই রকম যা আমরা আমাদের শেষ দুটি উদাহরণে দেখেছি, কিন্তু এবার আমরা একটি HTML ইভেন্ট লিসেনার ব্যবহার করছি। ইভেন্ট শ্রোতা হল জাভাস্ক্রিপ্টে ইভেন্ট ঘোষণা করার নতুন উপায়, এবং তারা সম্ভবত সবচেয়ে সাধারণ পদ্ধতি ব্যবহার করা হয়।
উপসংহার
জাভাস্ক্রিপ্ট ইভেন্টগুলি আপনাকে আপনার ওয়েব পৃষ্ঠাকে ইন্টারেক্টিভ করতে দেয়। আপনি যখন একটি বোতাম টিপুন, একটি ফর্ম জমা দেন বা কিছু পাঠ্যের উপর হোভার করেন তখন একটি ইভেন্ট ট্রিগার হতে পারে৷ জাভাস্ক্রিপ্টে একটি ইভেন্ট ঘোষণা করার তিনটি উপায় রয়েছে:ইনলাইন, একটি সম্পত্তি ব্যবহার করে, বা শ্রোতা ব্যবহার করে৷
এখন আপনি একজন পেশাদার ওয়েব ডেভেলপারের মতো জাভাস্ক্রিপ্টে ইভেন্ট তৈরি করা শুরু করতে প্রস্তুত!
