অধ্যায় ১৮: JavaScript ইভেন্টস (Events) (বাংলায়)
এই অধ্যায়ে শিখবো কীভাবে ব্যবহারকারীর ইনপুট বা কাজ (যেমন ক্লিক, হোভার) ধরে তার ওপর ভিত্তি করে ওয়েবপেজে পরিবর্তন আনা যায়।
১. ইভেন্ট (Event) কী?
ইভেন্ট হলো কোনো ঘটনা বা ব্যবহারকারীর কোনো কাজ, যেমন:
-
বাটনে ক্লিক
-
মাউস ওভার (hover)
-
কী প্রেস করা
-
পেজ লোড হওয়া
২. ইভেন্ট হ্যান্ডলার (Event Handler)
ইভেন্ট ধরার জন্য আমরা ফাংশন ব্যবহার করি যাকে ইভেন্ট হ্যান্ডলার বলা হয়।
৩. HTML এ সরাসরি ইভেন্ট যোগ করা
<button onclick="alert('আপনি ক্লিক করলেন!')">ক্লিক করো</button>
onclick হলো ইভেন্ট, ক্লিক হলে কোড চলবে।
৪. JavaScript দিয়ে ইভেন্ট যোগ করা
HTML থেকে আলাদা করে JavaScript-এ ইভেন্ট যোগ করা উত্তম পদ্ধতি।
<button id="myBtn">ক্লিক করো</button>
<script>
let btn = document.getElementById('myBtn');
btn.addEventListener('click', function() {
alert('বাটনে ক্লিক হয়েছে!');
});
</script>
৫. সাধারণ ইভেন্টের নামসমূহ:
| ইভেন্ট | কাজ |
|---|---|
| click | বাটনে ক্লিক করলে |
| mouseover | মাউস বাটনের ওপর গেলে |
| mouseout | মাউস বাটন থেকে চলে গেলে |
| keydown | কী প্রেস করলে |
| keyup | কী ছেড়ে দিলে |
| load | পেজ লোড হলে |
| submit | ফর্ম সাবমিট হলে |
৬. উদাহরণ: বাটনে ক্লিক করলে টেক্সট পরিবর্তন
<button id="btn">ক্লিক করো</button>
<p id="text">পুরানো টেক্সট</p>
<script>
let btn = document.getElementById('btn');
let text = document.getElementById('text');
btn.addEventListener('click', function() {
text.textContent = 'টেক্সট পরিবর্তন হয়েছে!';
});
</script>
এই অধ্যায়ের শেষে আপনি শিখলেন:
-
ইভেন্ট কি এবং কেন দরকার
-
HTML ও JavaScript এ ইভেন্ট যোগ করা
-
বিভিন্ন সাধারণ ইভেন্টের নাম ও ব্যবহার
-
ইভেন্ট হ্যান্ডলার ফাংশন তৈরি
পরবর্তী অধ্যায়:
অধ্যায় ১৯: JavaScript DOM Manipulation
লিখুন: “অধ্যায় ১৯ শুরু করো” — তাহলে আমরা শিখবো ওয়েবপেজের এলিমেন্ট কিভাবে পরিবর্তন বা নিয়ন্ত্রণ করা যায়।