Awesome! টিউনস
সকল Awesome! টিউনস

জাভাস্ক্রিপ্ট টিউটোরিয়াল [পর্ব-০৯] :: জাভাস্ক্রিপ্ট ইভেন্ট

1,370 দেখা 1 টিউমেন্টস জোসস
টিউন বিভাগ জাভাস্ক্রিট
প্রকাশিত
Level 0

51 টিউনস 194 টিউমেন্টস 0 ফলোয়ার

আসসালামু আলাইকুম । আশা করি সবাই মহান আল্লাহ্‌ তা'আলার অশেষ রহমতে ভাল আছেন? আমি আলহামদুলিল্লাহ্‌ ভাল আছি । এখন থেকে নিয়মিত ভাবেই জাভাস্ক্রিপ্ট টিউটোরিয়াল লিখে যাচ্ছি । ইতোমধ্যে, জাভাস্ক্রিপ্ট এর বেশ কিছু গুরুত্বপূর্ণ বিষয় আলোচনা করে ফেলেছি । আজও ব্যতিক্রম কিছু নয় । মানে, আজ আমি জাভাস্ক্রিপ্ট এর একটি অত্যন্ত গুরুত্বপূর্ণ বিষয় আলোচনা করবো । আমি আজা জাভাস্ক্রিপ্ট ইভেন্ট নিয়ে আলোচনা করবো । আমি গত টিউটোরিয়াল এ ৮ম পর্ব নিয়ে আলোচনা করেছিলাম । আমার গত পর্বের বিষয় ছিলঃ

জাভাস্ক্রিপ্ট টিউটোরিয়াল [পর্ব-০৮] :: জাভাস্ক্রিপ্ট লুপ

আজ একটি নতুন বিষয়ের আলোচনা শুরু করতে যাচ্ছি । অর্থাৎ, আজ আমি জাভাস্ক্রিপ্ট এর ৯ম পর্ব আলোচনা করবো । প্রথমে আমরা আলোচনা করি জাভাস্ক্রিপ্ট ইভেন্ট কি?

ইভেন্ট (Event) শব্দের অর্থ ঘটনা । আমরা ডাইনামিক ওয়েবসাইট এ বিভিন্ন ধরনের ঘটনা ঘটতে দেখি । এসব ঘটনা-ই হচ্ছে ইভেন্ট । অর্থাৎ, কোন ইলিমেন্ট এর উপর মাউস দিয়ে ক্লিক করা, ফর্ম এ কোন কিছু টাইপ করা, কোন ইলিমেন্ট এর উপর হোভার করা প্রত্যেকটি একটি করে ইভেন্ট । জাভাস্ক্রিপ্ট এ ইভেন্ট একটি অত্যন্ত গুরুত্বপূর্ণ আলোচনা ।

একটি উদাহরণ দেখুন । এজন্য নিচের কোডটুকু নোটপ্যাড প্লাস প্লাস এ লিখে index.html নামে সেভ করুন;


<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title> JavaScript Event </title>
	<script type="text/javascript">
		function popup() {
			alert("I am Jihadur Rahman")
			}
	</script>
</head>
<body>
	<input type="button" onclick="popup()" value="Click Here" />
</body>
</html>

এবার index.html ফাইলটি যেকোনো ব্রাউজার দিয়ে রান করালে Click Here নামে একটা বাটন দেখতে পারবেন । এই বাটন এ ক্লিক করলে “I am Jihadur Rahman” লেখাটি দেখাবে ।

একটা কথা খেয়াল রাখবেন, আপনি যদি জাভাস্ক্রিপ্ট কোড script>… ট্যাগ এর মাঝে না লিখেন তাহলে জাভাস্ক্রিপ্ট কোডটি কাজ করবেনা । তাই, প্রথম প্রথম একটু সাবধানে কাজ করবেন । পরে ধীরে ধীরে তা ঠিক হয়ে যাবে । সুতরাং, জাভাস্ক্রিপ্ট এর বেসিক আলোচনা সমূহ সব সময় খেয়াল রাখবেন ।

এখানে onclick হচ্ছে ইভেন্ট হ্যান্ডেলার । জাভাস্ক্রিপ্ট এর কিছু ফাংশন আছে, এসব ফাংশন এ কোন ইভেন্ট ঘটালে ফাংশনটি কার্যকর হয় । এসব ফাংশন কে আমরা বলতে পারি ইভেন্ট হ্যান্ডেলার । আমি এখন কিছু গুরুত্বপূর্ণ জাভাস্ক্রিপ্ট এর ইভেন্ট নিয়ে আলোচনা করবো । এসব ইভেন্টের মধ্যে রয়েছে;

  • onsubmit
  • onmouseover
  • onfocus
  • onclick
  • onmouseout
  • onmousemove
  • onselect
  • ondbclick
  • onload
  • onresize

এবার আমি এসব জাভাস্ক্রিপ্ট ইভেন্ট নিয়ে বিস্তারিত আলোচনা করবো । জাভাস্ক্রিপ্ট ইভেন্ট এর বর্ণনা নিচের ছকে আলোচনা করা হলঃ

ইভেন্টবর্ণনা
onsubmitকোন ফর্ম সাবমিট করার আগে, ফর্ম এর ফিল্ড সমূহ যাচাই করার জন্য onsubmit ইভেন্ট ব্যবহার করা হয় । যদি ফর্ম এর ফিল্ড যথাযথ ভাবে পূর্ণ হয় তাহলে ফর্মটি সাবমিট করবে । আর যদি ফর্ম এর ফিল্ড যথাযথ ভাবে পূর্ণ হয় তাহলে ফর্মটি সাবমিট করবে না ।
onmouseoverসাধারণত Animated Button তৈরি করা করার জন্য onmouseover ইভেন্ট ব্যবহার করা হয় ।
onfocusযখন ফর্ম ইলিমেন্ট এ ফোকাস হবে তখন onfocus ইভেন্টটি কার্যকর হবে ।
onclickওয়েবসাইটের কোন ইলিমেন্ট এ ক্লিক করলে onclick ইভেন্ট কার্যকর হবে । এটা মূলত মাউস ইভেন্ট ।
onmouseoutএটাও onmouseover এর মত Animated Button তৈরি করা করার জন্য ব্যবহার করা হয় ।
onmousemoveযখন মাউসের কার্সর মুভ করা হবে অর্থাৎ স্থানান্তর করা হবে তখন onmousemove ইভেন্ট রান হবে । এটাও একটা মাউস ইভেন্ট ।
onselectযখন কোন ইলিমেন্ট সিলেক্ট অর্থাৎ বাছাই করা হবে তখন onselect ইভেন্ট রান হবে ।
ondbclickওয়েবসাইটের কোন ইলিমেন্ট এ ডাবল ক্লিক (Dubble Click) করলে ondbclick ইভেন্ট কার্যকর হবে । এটা মূলত মাউস ইভেন্ট ।
onloadওয়েবসাইট সম্পূর্ণ লোড হলে onload ইলিমেন্ট রান হয় ।
onresizeযখন উইন্ডো রিসাইজ করা হয় তখন onresize ইভেন্ট রান হয়ে থাকে ।

এখানে ব্যবহৃত onsubmit, onmouseover, onfocus, onclick, onmouseout, onmousemove, onselect, ondbclick, onload, onresize  প্রত্যেকটি ওয়ার্ডকে ইভেন্ট হ্যান্ডেলার বলা হয়ে থাকে ।

এছাড়া আরও অনেক ইভেন্ট রয়েছে । এসব ইভেন্ট সম্পর্কে জানতে গুগল এ সার্চ দিতে পারেন । আমি এখানে যেসব ইভেন্ট বেশি ব্যবহার করা হয় সেসব ইভেন্ট নিয়ে আলোচনা করেছি । তবে, আপনারা যদি এই টিউটোরিয়ালটি শুধু মনোযোগ দিয়ে পড়েন তাহলে হবে, আপনাদের প্রত্যেকটি ইভেন্ট জাভাস্ক্রিপ্ট কোড লিখে পরীক্ষা করে দেখতে হবে । আমি বেশ কিছু ইভেন্ট লিস্ট আর এসব ইভেন্ট সম্পর্কে বর্ণনা দিয়েছি আপনার এসব ইভেন্ট প্র্যাকটিস করবেন, দেখবেন ইভেন্ট সমূহ কিভাবে কাজ করে । তাহলেই জাভাস্ক্রিপ্ট ইভেন্ট সম্পর্কে জানতে পারবেন – ইনশাল্লাহ্‌ । আর যদি জাভাস্ক্রিপ্ট ইভেন্ট এর ব্যাপারে আপনাদের বুঝতে কোন অসুবিধা হয় তাহলে আমাকে কমেন্ট এর মাধ্যমে জানাবেন । একটা কথা বলে রাখি, আপনারা প্রশ্ন করলে আলোচনা করার সুযোগ পাওয়া যায় । একটা কথা মনে রাখবেন, কোন বিষয়ে যত বেশি আলোচনা করবেন তত বেশি জানতে পারবেন ।

যাইহোক, অনেক কথা বলে ফেললাম । আজ আর নয় । যদি টিউটোরিয়ালটি পড়ে আপনাদের ভাল লাগে তাহলে কমেন্ট করতে ভুলবেন । আর যদি টিউটোরিয়ালটি না ভাল লাগে তাহলে আমাকে বলবেন, আমি টিউটোরিয়াল এর মান আরও বাড়ানোর চেষ্টা করবো ।

ধন্যবাদ সবাইকে মনোযোগ দিয়ে আমার টিউটোরিয়ালটি পড়ার জন্য ।

আমার ফেইসবুক আইডি এখানে ।

সবাই ভাল থাকবেন । আল্লাহ্‌ হাফেজ ।

Level 0

আমি জিহাদুর রহমান। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 11 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 51 টি টিউন ও 194 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস

Level 0

চালিয়ে যান ভাই , সাথে আছি