এই নির্দেশিকা জাভাস্ক্রিপ্টে 'অনচেঞ্জ' ইভেন্টের উদ্দেশ্য এবং কাজ প্রদর্শন করবে।
কীভাবে জাভাস্ক্রিপ্টে একটি 'অনচেঞ্জ' ইভেন্ট ব্যবহার করবেন?
দ্য ' পরিবর্তন বিষয়ক ” ইভেন্ট সক্রিয় হয় যখন নির্দিষ্ট HTML উপাদানের মান পরিবর্তন করা হয়। যখন এই ইভেন্টটি ট্রিগার হয়, তখন সংশ্লিষ্ট জাভাস্ক্রিপ্ট ফাংশনটি নির্দিষ্ট কাজটি সম্পাদন করে।
বাক্য গঠন
বস্তু পরিবর্তন বিষয়ক = ফাংশন ( ) { মাইস্ক্রিপ্ট } ;
উপরের সিনট্যাক্সে:
- উপাদান: এটি নির্দিষ্ট HTML উপাদানকে নির্দেশ করে।
- ফাংশন(): এটি সংজ্ঞায়িত ফাংশন প্রতিনিধিত্ব করে যা ইভেন্ট ট্রিগারের উপর আহ্বান করা হবে।
- মাইস্ক্রিপ্ট: এটি 'অনচেঞ্জ' ইভেন্টটি ঘটলে নির্দিষ্ট কাজটি সম্পাদন করার জন্য জাভাস্ক্রিপ্ট ফাংশন সংজ্ঞাকে নির্দেশ করে।
সিনট্যাক্স ('addEventListener()' পদ্ধতি সহ)
বস্তু AddEventListener ( 'পরিবর্তন' , মাইস্ক্রিপ্ট ) ;
উপরের সিনট্যাক্সে, ' AddEventListener() 'পদ্ধতি ব্যবহার করে' পরিবর্তন বিষয়ক ” বিভিন্ন কাজ সম্পাদনের জন্য জাভাস্ক্রিপ্ট ফাংশন চালানোর ইভেন্ট।
উদাহরণ 1: মৌলিক সিনট্যাক্স ব্যবহার করে নির্বাচিত মান প্রদর্শন করতে 'অনচেঞ্জ' ইভেন্ট প্রয়োগ করা
এই পরিস্থিতিতে, পরিবর্তিত বিকল্প মান প্রদর্শন করতে এবং সংশ্লিষ্ট জাভাস্ক্রিপ্ট ফাংশন চালু করতে একটি 'অপরিবর্তন' ইভেন্ট একটি বিকল্প তালিকার সাথে যুক্ত থাকে।
HTML কোড
নিম্নলিখিত HTML কোডটি দেখুন:
< h2 > পরিবর্তন বিষয়ক ঘটনা জাভাস্ক্রিপ্টে h2 >< পি > তালিকা থেকে অন্য ভাষা বেছে নিন। পি >
< আইডি নির্বাচন করুন = 'ডেমো' পরিবর্তন বিষয়ক = 'নমুনা()' >
< বিকল্প মান = 'এইচটিএমএল' > এইচটিএমএল বিকল্প >
< বিকল্প মান = 'সিএসএস' > সিএসএস বিকল্প >
< বিকল্প মান = 'জাভাস্ক্রিপ্ট' > জাভাস্ক্রিপ্ট বিকল্প >
নির্বাচন করুন >
< পি আইডি = 'P1' >> পি >
উপরের কোডে:
- প্রথমে, ' ব্যবহার করে একটি উপশিরোনাম সংজ্ঞায়িত করুন ট্যাগ
- পরবর্তী, বিবৃত বিবৃতি সহ একটি অনুচ্ছেদ যোগ করুন।
- এর পরে, ' <নির্বাচন> ' ট্যাগ একটি নির্ধারিত আইডি সহ একটি ড্রপ-ডাউন তালিকা তৈরি করে ' ডেমো ' এবং ' পরিবর্তন বিষয়ক 'ইভেন্ট ফাংশনে পুনঃনির্দেশ করে' নমুনা() ”, যথাক্রমে।
- '
- অবশেষে, একটি আইডি দিয়ে একটি খালি অনুচ্ছেদ তৈরি করা হয় “ P1 ' বিকল্প তালিকা থেকে নির্বাচিত/পরিবর্তিত মান প্রদর্শন করতে।
জাভাস্ক্রিপ্ট কোড
এখন, নিম্নলিখিত জাভাস্ক্রিপ্ট কোডের ওভারভিউ:
< লিপি >ফাংশন নমুনা ( ) {
কোথায় = নথি getElementById ( 'ডেমো' ) . মান ;
নথি getElementById ( 'P1' ) . innerHTML = 'নির্বাচিত বিকল্প হল:' + t ;
}
লিপি >
উপরের কোড ব্লকে:
- প্রথমত, “নামের একটি ফাংশন ঘোষণা করুন নমুনা() ”
- এর সংজ্ঞায়, প্রয়োগ করুন ' getElementById() 'এর মাধ্যমে বিকল্প তালিকা থেকে নির্বাচিত বিকল্পের মান অ্যাক্সেস করার পদ্ধতি ' মান 'সম্পত্তি।
- অবশেষে, ' ব্যবহার করে মান প্রদর্শন করুন innerHTML 'সম্পত্তি।
আউটপুট
আউটপুটে দেখা যায়, ড্রপ-ডাউন থেকে একটি বিকল্প নির্বাচন করার পরে, 'অনচেঞ্জ' ইভেন্টটি ট্রিগার করে এবং সংশ্লিষ্ট ফাংশনকে আহ্বান করে।
উদাহরণ 2: 'addEventListener()' পদ্ধতি সিনট্যাক্স ব্যবহার করে বড় হাতের ইনপুট ফিল্ড টেক্সট পরিবর্তন করতে 'onchange' ইভেন্ট প্রয়োগ করা
এই উদাহরণটি 'addEventListener()' পদ্ধতির সাহায্যে ইনপুট টেক্সট ক্ষেত্রটিকে 'বড় হাতের' তে পরিবর্তন করে 'অনচেঞ্জ' ইভেন্টটি ব্যাখ্যা করে।
HTML কোড
প্রথমে, নীচের প্রদত্ত HTML কোডের মাধ্যমে যান:
< h2 > পরিবর্তন বিষয়ক ঘটনা জাভাস্ক্রিপ্টে h2 >নাম : < ইনপুট টাইপ = 'পাঠ্য' আইডি = 'ডেমো' >
< বোতাম > জমা দিন বোতাম >
উপরের HTML কোডে:
- 'এর মাধ্যমে স্তর 2-এর একটি উপশিরোনাম সংজ্ঞায়িত করুন ট্যাগ
- এরপরে, একটি যোগ করুন ' <ইনপুট> 'লেবেল দ্বারা ক্ষেত্র' নাম ', বিষয়বস্তুর প্রকার ' পাঠ্য ', এবং সংশ্লিষ্ট আইডি ' ডেমো ”, যথাক্রমে।
- অবশেষে, ' ব্যবহার করে একটি বোতাম অন্তর্ভুক্ত করুন <বোতাম> ট্যাগ
জাভাস্ক্রিপ্ট কোড
পরবর্তী, নিম্নলিখিত জাভাস্ক্রিপ্ট কোড দেখুন:
< লিপি >নথি getElementById ( 'ডেমো' ) . AddEventListener ( 'পরিবর্তন' , নমুনা ) ;
ফাংশন নমুনা ( ) {
কোথায় = নথি getElementById ( 'ডেমো' ) ;
t. মান = t. মান . আপপারকেস থেকে ( ) ;
}
লিপি >
এই কোড ব্লকে:
- প্রথমত, ' document.getElementById() 'পদ্ধতি ব্যবহার করে' পরিবর্তন ' ইভেন্ট যার ফলে আইডি থাকা ইনপুট পাঠ্য ক্ষেত্রের মান পরিবর্তন হবে ' ডেমো ” বোতামে ক্লিক করলে।
- এর পরে, 'Sample()' ফাংশনটি সংজ্ঞায়িত করা হয়েছে যা 'document.getElementById()' পদ্ধতি ব্যবহার করে ইনপুট টেক্সট ফিল্ড 'ডেমো' অ্যাক্সেস করে এবং তারপরে 'এর মাধ্যমে 'বড় হাতের অক্ষরে মান পরিবর্তন করে। বড় হাতের() 'পদ্ধতি।
আউটপুট
যেমন দেখা যায়, ইনপুট টেক্সট বাটন ক্লিক করার পরে বড় হাতের অক্ষরে রূপান্তরিত হয়েছে।
উপসংহার
জাভাস্ক্রিপ্ট অফার করে সাধারণত ব্যবহৃত ' পরিবর্তন বিষয়ক ” ইভেন্ট যা একটি নির্দিষ্ট উপাদানের মান পরিবর্তনের সাথে সাথেই ট্রিগার করে। এটি অনুরূপ ' অনইনপুট ' ইভেন্ট কিন্তু 'অনইনপুট' মান পরিবর্তনের সাথে সাথেই ঘটে যেখানে 'অনচেঞ্জ' ইভেন্টটি ট্রিগার হয় যখন ইভেন্টের মান ফোকাস হারায়। এই নির্দেশিকা জাভাস্ক্রিপ্টে 'অনচেঞ্জ' ইভেন্টের উদ্দেশ্য, কাজ এবং ব্যবহার প্রদর্শন করেছে।