জাভাস্ক্রিপ্ট একটি সুপরিচিত বহুমুখী ভাষা যা বেশিরভাগই ওয়েবসাইটগুলিতে ইন্টারেক্টিভ কার্যকারিতা যুক্ত করতে ব্যবহৃত হয়। এটি jQuery নামে একটি লাইব্রেরির সাথে আসে যা এই কাজগুলি দক্ষতার সাথে সম্পাদন করে। jQuery পদ্ধতিগুলি মূলত এমন ক্রিয়া যা কোডের বেশি জড়িত ছাড়াই একটি নির্দিষ্ট কাজ সম্পাদন করে। এরকম একটি পদ্ধতি হল ' পরিবর্তন() ' পদ্ধতি যা ইনপুট ক্ষেত্রের মান পরিবর্তিত হয়েছে তা অবিলম্বে লক্ষ্য করার জন্য 'পরিবর্তন' ইভেন্টটিকে ফায়ার করে। এটি বেশিরভাগ HTML ফর্ম ক্ষেত্রের পাশাপাশি চেকবক্স, রেডিও বোতাম এবং নির্বাচন বাক্সগুলিতে ব্যবহৃত হয়।
এই লেখাটি jQuery 'পরিবর্তন()' পদ্ধতির কার্যকরী এবং ব্যবহারিক বাস্তবায়ন সম্পর্কে বিশদভাবে বর্ণনা করে।
কিভাবে jQuery 'পরিবর্তন()' পদ্ধতি কাজ করে?
jQuery ' পরিবর্তন() 'পদ্ধতি আগুন দেয়' পরিবর্তন ' অনুষ্ঠান পরিচালনাকারী. 'পরিবর্তন' ইভেন্ট হল একটি বিশেষ ধরনের জাভাস্ক্রিপ্ট ইভেন্ট যা ঘটে যখন নির্দিষ্ট করা (“ ”, “
বাক্য গঠন
$ ( নির্বাচক ) .পরিবর্তন ( ফাংশন )
উপরের সিনট্যাক্সে:
-
- নির্বাচক: এটি HTML উপাদানের ম্যানিপুলেশনের অনুমতি দেয়।
- ফাংশন: এটি একটি ঐচ্ছিক পরামিতি যা 'পরিবর্তন()' পদ্ধতিতে কার্যকর করার ফাংশন নির্দিষ্ট করে।
উদাহরণ 1: ইনপুট ক্ষেত্রের পরিবর্তিত মান পেতে 'পরিবর্তন()' পদ্ধতি প্রয়োগ করা
এই উদাহরণে, ' পরিবর্তন() একটি নির্দিষ্ট HTML “ ” এলিমেন্ট পরিবর্তিত মান ফেরাতে ” পদ্ধতি প্রয়োগ করা হয়।
HTML কোড
প্রথমত, নিম্নলিখিত HTML কোডের একটি ওভারভিউ:
< h2 > jQuery পরিবর্তন ( ) পদ্ধতি h2 >< পি > ইনপুট ক্ষেত্রের মান পরিবর্তন করুন: পি >
ইনপুট ক্ষেত্র: < ইনপুট প্রকার = 'পাঠ্য' মান = 'লিনাক্স' পরিবর্তন বিষয়ক = 'সতর্ক (এই. মান)' >
< পি > ফায়ার করতে প্রদত্ত বোতামে ক্লিক করুন 'পরিবর্তন বিষয়ক' ঘটনা: পি >
< বোতাম > এখানে ক্লিক করুন বোতাম >
এই কোড ব্লকে:
-
- লেভেল 2 এর একটি উপশিরোনাম সংজ্ঞায়িত করুন ' ট্যাগ
- এরপর, “এর সাহায্যে অনুচ্ছেদটি নির্দিষ্ট করুন। ট্যাগ
- এর পরে, 'এর মাধ্যমে একটি ইনপুট ক্ষেত্র যোগ করুন <ইনপুট> ' ট্যাগ নাম ' ইনপুট ক্ষেত্র ', টাইপ হচ্ছে ' পাঠ্য ', এবং মান হিসাবে ' লিনাক্স ”, যথাক্রমে।
- এটি একটি সংযুক্ত করে ' পরিবর্তন বিষয়ক() ” ইভেন্ট যা একটি সতর্কতা বাক্স পপ আপ করে যখন নির্দিষ্ট ইনপুট মান পরিবর্তন হয়।
- দ্য ' ” ট্যাগ বিবৃত বিবৃতি সহ অন্য অনুচ্ছেদ তৈরি করে।
- অবশেষে, ' ব্যবহার করে একটি বোতাম যোগ করুন <বোতাম> ট্যাগ
jQuery কোড
এখন, নিম্নলিখিত jQuery কোড বিবেচনা করুন:
< মাথা >< লিপি src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' >> লিপি >
< লিপি >
$ ( নথি ) .প্রস্তুত ( ফাংশন ( ) {
$ ( 'বোতাম' ) .ক্লিক ( ফাংশন ( ) {
$ ( 'ইনপুট' ) .পরিবর্তন ( ) ;
} ) ;
} ) ;
লিপি >
মাথা >
উপরের কোড লাইনে:
-
- উল্লেখ ' 'হেড' বিভাগে ট্যাগ করুন যা অফিসিয়াল ওয়েবসাইট থেকে jQuery এর CDN পাথ অন্তর্ভুক্ত করে ' ”
- এরপরে, jQuery কোডটি প্রথমে “এর সাথে মিলে যায় নথি ' নির্বাচক লক্ষ্যযুক্ত DOM উপাদান নির্বাচন করতে এবং সংযুক্ত করতে ' প্রস্তুত() ” পদ্ধতি যা নথিটি লোড হওয়ার সাথে সাথেই বর্ণিত ফাংশন() চালু করে।
- এর পরে, ' বোতাম 'নির্বাচক যোগ করা হয় এবং 'এর সাথে লিঙ্ক করা হয় ক্লিক() ' পদ্ধতি যা বোতাম ক্লিকের উপর একটি ফাংশন সম্পাদনের অনুমতি দেবে।
- ফাংশনের সংজ্ঞায়, ' প্রয়োগ করুন পরিবর্তন() 'পদ্ধতি' উপর ইনপুট ' উপাদান যা 'অপরিবর্তন' ইভেন্টটিকে ফায়ার করে যখন এর মান পরিবর্তন হয়।
আউটপুট
আউটপুট ট্রিগার করা 'অনচেঞ্জ' ইভেন্টে ইনপুট ক্ষেত্রের পরিবর্তিত মান সহ একটি সতর্কতা বাক্স প্রদর্শন করে।
উদাহরণ 2: একটি ইনপুট ক্ষেত্রের পটভূমির রঙ পরিবর্তন করতে 'পরিবর্তন()' পদ্ধতি প্রয়োগ করা
এই বিশেষ উদাহরণটি 'এর কাজ ব্যাখ্যা করে পরিবর্তন() মান পরিবর্তন করার পরে ইনপুট ক্ষেত্রের পটভূমির রঙ পরিবর্তন করার পদ্ধতি।
HTML কোড
প্রদত্ত HTML কোড অনুসরণ করুন:
< h2 > jQuery পরিবর্তন ( ) পদ্ধতি h2 >< পি > ইনপুট ক্ষেত্রের মান পরিবর্তন করুন: পি >
ইনপুট ক্ষেত্র: < ইনপুট প্রকার = 'পাঠ্য' মান = 'লিনাক্স' >> পি >
এখানে, “ ” উপাদানটি শুধুমাত্র তার প্রকার এবং মান নির্দিষ্ট করে।
jQuery কোড
এখন, jQuery কোডে যান:
< মাথা >< লিপি src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' >> লিপি >
< লিপি >
$ ( নথি ) .প্রস্তুত ( ফাংশন ( ) {
$ ( 'ইনপুট' ) .পরিবর্তন ( ফাংশন ( ) {
$ ( এই ) .css ( 'পেছনের রং' , 'হলুদ' ) ;
} ) ;
} ) ;
লিপি >
মাথা >
উপরের কোড লাইনগুলিতে, ' পরিবর্তন () 'পদ্ধতি একটি সংযুক্ত করে' ফাংশন() ' যা 'CSS' স্টাইলিং সম্পত্তি প্রযোজ্য ' পেছনের রং 'নির্বাচিত এইচটিএমএল উপাদানে যেমন, পরিবর্তিত ইনপুট মানের উপর 'ইনপুট'।
আউটপুট
আউটপুট নিশ্চিত করে যে প্রদত্ত ইনপুট ক্ষেত্রের পটভূমির রঙ পরিবর্তিত হয় যখন এর মান পরিবর্তন করা হয়।
উপসংহার
jQuery অফার করে ' পরিবর্তন() ' পদ্ধতি যেটি 'পরিবর্তন' ইভেন্টটিকে ফায়ার করে যখন ব্যবহারকারী ইনপুট ক্ষেত্রের মান পরিবর্তন করে। এটির কার্যকারিতা সমর্থন করার জন্য এটি একটি অতিরিক্ত ইভেন্টের সাথেও যুক্ত হতে পারে এটি শুধুমাত্র ' ', '