জাভাস্ক্রিপ্ট অনক্লিক:একটি ধাপে ধাপে নির্দেশিকা

জাভাস্ক্রিপ্ট অনক্লিক ইভেন্ট একটি ফাংশন নির্বাহ করে যখন কোনো ব্যবহারকারী একটি বোতাম বা অন্য কোনো ওয়েব উপাদানে ক্লিক করে। এই পদ্ধতিটি একটি HTML নথিতে এবং একটি জাভাস্ক্রিপ্ট নথিতে উভয় ইনলাইনে ব্যবহৃত হয়।

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

সেখানেই "অনক্লিক()" ইভেন্টটি কার্যকর হতে পারে। অনক্লিক ইভেন্ট হল সবচেয়ে বেশি ব্যবহৃত ইভেন্টের ধরন। অনক্লিক আপনাকে কোড চালানোর অনুমতি দেয় যখন একজন ব্যবহারকারী আপনার ওয়েব পৃষ্ঠার একটি বোতাম বা অন্য উপাদানে ক্লিক করেন।

এই সংক্ষিপ্ত নির্দেশিকাতে, আমরা কীভাবে অনক্লিক ফাংশন কাজ করে তা ভাঙ্গাতে যাচ্ছি। একটি ওয়েবসাইট ইন্টারেক্টিভ করতে আপনি কীভাবে আপনার কোডে অনক্লিক ব্যবহার করতে পারেন তা আমরা আলোচনা করব।

ইভেন্ট রিফ্রেশার

অনক্লিক হল এক প্রকার জাভাস্ক্রিপ্ট ইভেন্ট। ইভেন্ট হল এমন ক্রিয়া যা ব্রাউজারে সংঘটিত হয় যা হয় ব্যবহারকারী বা ব্রাউজার নিজেই শুরু করতে পারে। একজন ব্যবহারকারী একটি বোতামে ক্লিক করছেন, একটি ফর্ম জমা দিচ্ছেন, বা তাদের কীবোর্ডে একটি কী টিপেছেন এই সমস্ত ইভেন্টের উদাহরণ। এই টিউটোরিয়ালে, আমরা প্রথমটির উপর ফোকাস করব:একজন ব্যবহারকারী একটি উপাদানে ক্লিক করছেন।

ইভেন্ট ব্যবহার করে, বিকাশকারীরা একটি ওয়েব পৃষ্ঠাকে ইন্টারেক্টিভ করতে পারে। যখন ব্যবহারকারী একটি বোতামে ক্লিক করে তখন আপনি একটি ফর্ম দৃশ্যমান করতে পারেন, বা যখন তারা একটি ফর্ম জমা দেন তখন একটি ব্যবহারকারীকে একটি বার্তা প্রদর্শন করতে পারেন৷

ইভেন্টের দুটি প্রধান উপাদান রয়েছে:ইভেন্ট হ্যান্ডলার এবং ইভেন্ট শ্রোতা।

আপনি যখন একটি বোতামে ক্লিক করেন, একটি কী টিপুন, বা একটি উপাদানের উপর হোভার করেন, একটি ইভেন্ট চালানো হয়। ইভেন্ট হ্যান্ডলার হল সেই কোড যা আপনার ইভেন্ট শুরু হলে চলে। উদাহরণস্বরূপ, আপনি যখন একটি বোতামে ক্লিক করেন, ইভেন্ট হ্যান্ডলারটি চলবে।

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।

ইভেন্ট শ্রোতা হল একটি উপাদানের অংশ - যেমন একটি বোতাম - যেটি "শোনে" এবং আপনি এটির সাথে ইন্টারঅ্যাক্ট করা পর্যন্ত অপেক্ষা করেন। তারপর, শ্রোতা ইভেন্ট হ্যান্ডলার চালায়।

জাভাস্ক্রিপ্ট অনক্লিক

জাভাস্ক্রিপ্ট অনক্লিক ইভেন্ট একটি ফাংশন চালায় যখন আপনি একটি বোতাম বা অন্য কোনো ওয়েব উপাদানে ক্লিক করেন। উদাহরণস্বরূপ, একটি অনক্লিক ইভেন্ট একটি ডায়ালগ বক্সকে ট্রিগার করতে পারে যা আপনি একটি বোতামে ঘড়ির সময় উপস্থিত হতে পারেন৷

এখানে HTML এ অনক্লিক পদ্ধতির সিনট্যাক্স রয়েছে:

&lt;button onclick="codetorun"&gt;Click me&lt;/button&gt;

যখন এই HTML বোতামটি ক্লিক করা হয়, তখন “codetorun” JavaScript ফাংশনটি কার্যকর হবে। আমরা অন্যান্য উপাদানের সাথে অনক্লিক ব্যবহার করতে পারি, যেমন একটি div। অনক্লিক বোতামগুলির জন্য একচেটিয়া নয়৷

৷

আপনি প্লেইন জাভাস্ক্রিপ্টেও অনক্লিক ব্যবহার করতে পারেন। এখানে একটি জাভাস্ক্রিপ্ট অনক্লিক পদ্ধতির একটি উদাহরণ:

var item = document.getElementById("button");
item.onclick = function() {
	codetoexecute...
}

আমরা আমাদের ওয়েব পৃষ্ঠা থেকে একটি উপাদান পুনরুদ্ধার করতে JavaScript getElementById পদ্ধতি ব্যবহার করি। যখন আমরা আইডি "বোতাম" সহ উপাদানটিতে ক্লিক করি তখন আমাদের অনক্লিক ফাংশন কার্যকর হবে৷

বোতাম অনক্লিক জাভাস্ক্রিপ্ট উদাহরণ

ধরা যাক আপনি একটি p উপাদান বা একটি অনুচ্ছেদে ক্লিক করার পরে একটি ওয়েব পৃষ্ঠায় কিছু পাঠ্য পরিবর্তন করতে চান৷ আমরা একটি ওয়েবসাইটে এই বৈশিষ্ট্য বাস্তবায়ন করতে onclick বৈশিষ্ট্য ব্যবহার করতে পারি। একটি বোতাম এবং কিছু পাঠ্য সহ একটি HTML পৃষ্ঠা দিয়ে শুরু করা যাক। আমরা একটি জাভাস্ক্রিপ্ট ফাইলও তৈরি করব যাতে আমাদের ইভেন্ট কোড থাকবে।

index.html

<!DOCTYPE html>
<html>

<head>
	<title>onclick example</title>
</head>
<!-- Main body of code -->
<body>
	<button>Click here.</button>

	<p>This text will change when you click the button.</p>
</body>

<!-- Reference our JavaScript event code -->
<script src=”js/onclick.js”></script>

</html>

এটি একটি মৌলিক ওয়েব পৃষ্ঠার একটি উদাহরণ, কিন্তু এটি এখনও ইন্টারেক্টিভ নয়। যখন এই ওয়েব পৃষ্ঠাটি চলে, আমরা একটি বোতাম এবং কিছু পাঠ্য দেখতে পাব, কিন্তু যখন আমরা আমাদের বোতামটি ক্লিক করি তখন কিছুই হবে না। কারণ আমরা এখনও অনক্লিক স্ক্রিপ্ট ফাংশন প্রয়োগ করিনি৷

৷

এখন যেহেতু আমাদের ওয়েব পেজ প্রস্তুত, আমরা আমাদের অনক্লিক ইভেন্ট তৈরি করা শুরু করতে পারি। আমাদের প্রথমে আমাদের বোতামে onclick() ইভেন্ট লিসেনার যোগ করতে হবে। ব্যবহারকারী যখন বোতামে ক্লিক করবে তখন এই ইভেন্টটি শুনবে৷

৷

index.html

...
<body>
	<button onclick=”changeParagraph()”>Click here.</button>

	<p>This text will change when you click the button.</p>
</body>
…

আসুন আমাদের "onclick.js" ফাইলটি তৈরি করি, যা আমাদের changeParagraph() ইভেন্টের কোড ধারণ করবে। এই ইভেন্টটি আমাদের অনুচ্ছেদের পাঠ্য (“p” উপাদান) অন্য কিছু দিয়ে পরিবর্তন করবে।

onclick.js

const changeParagraph = () => {
	const paragraph = document.querySelector(“p”);
	paragraph.textContent = “This text has changed because you clicked the button.”
}

আমরা চেঞ্জপ্যারাগ্রাফ নামে একটি জাভাস্ক্রিপ্ট ফাংশন সংজ্ঞায়িত করেছি। আমরা আমাদের পৃষ্ঠায় একটি অনুচ্ছেদ নির্বাচন করতে JavaScript querySelector পদ্ধতি ব্যবহার করি। যখন আমরা প্রথম পৃষ্ঠাটি লোড করি, তখন আমরা আমাদের বোতাম এবং টেক্সট দেখতে পাব যেখানে লেখা আছে, "আপনি বোতামটি ক্লিক করলে এই পাঠ্যটি পরিবর্তিত হবে।"

আমরা বোতামটি ক্লিক করার পরে, আমাদের ওয়েব পৃষ্ঠা পরিবর্তন করে এবং আমাদের নতুন পাঠ্য দেখায়:

জাভাস্ক্রিপ্ট অনক্লিক:একটি ধাপে ধাপে নির্দেশিকা

সারাংশ

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

এটাই! উপরের কোডটি ব্যবহার করে, আমরা সফলভাবে একটি ওয়েবপেজ তৈরি করেছি যা আমরা একটি বোতাম টিপলে কোড চলবে। যদিও উপরের আমাদের কোড শুধুমাত্র পাঠ্য পরিবর্তন করে, আপনি এটিকে যতটা জটিল বা সহজ করতে চান।

আপনি যদি বোতামে ক্লিক করার সময় ব্যবহারকারীকে সতর্ক করতে চান তবে আপনি জাভাস্ক্রিপ্টে সতর্কতা() ফাংশনটি ব্যবহার করতে পারেন। আপনি যদি আপনার কোডে "যদি" বিবৃতি যোগ করতে চান তবে আপনি এটিও করতে পারেন।

আরও জাভাস্ক্রিপ্ট শেখার সংস্থানগুলির জন্য, আমাদের কীভাবে জাভাস্ক্রিপ্ট শিখবেন নির্দেশিকা দেখুন৷

৷