বিকাশকারীরা বেশিরভাগই তাদের ওয়েব পৃষ্ঠাগুলিকে আকর্ষণীয় করে তুলতে চায় এবং তাদের ইন্টারেক্টিভ করে তোলে। এই উদ্দেশ্যে, ওয়েব পেজে বোতাম যোগ করা হয়। উদাহরণস্বরূপ, যখন কোনও অ্যাকাউন্টে নিবন্ধন বা সাইন ইন করার সময় ব্যবহারকারীর জন্য অতিরিক্ত কার্যকারিতার জন্য ক্লিক ইভেন্ট সহ ডেটা প্রেরণ বা গ্রহণ করার প্রয়োজন হয়। এই ধরনের ক্ষেত্রে, বোতামগুলি শেষ-ব্যবহারকারীকে স্মার্টভাবে বিভিন্ন কার্যকারিতা সম্পাদন করতে দেয়।
এই ব্লগটি জাভাস্ক্রিপ্টে বোতাম তৈরি করার পদ্ধতি ব্যাখ্যা করবে।
কীভাবে জাভাস্ক্রিপ্টে বোতাম তৈরি করবেন?
জাভাস্ক্রিপ্টে বোতাম তৈরি করতে, নিম্নলিখিত পদ্ধতিগুলি ব্যবহার করা যেতে পারে:
নিম্নলিখিত পদ্ধতিগুলি একের পর এক ধারণাটি প্রদর্শন করবে!
পদ্ধতি 1: 'createElement()' এবং 'appendChild()' পদ্ধতি ব্যবহার করে জাভাস্ক্রিপ্টে বোতাম তৈরি করুন
দ্য ' ক্রিয়েট এলিমেন্ট() ' পদ্ধতি একটি উপাদান তৈরি করে এবং ' appendChild() ” পদ্ধতি একটি উপাদানের শেষ সন্তানের সাথে একটি উপাদান যুক্ত করে। এই পদ্ধতিগুলি একটি বোতাম তৈরি করার জন্য প্রয়োগ করা হবে এবং ডকুমেন্ট অবজেক্ট মডেল (DOM) এর সাথে যুক্ত করা হবে যা যথাক্রমে ব্যবহার করা প্রয়োজন।
বাক্য গঠন
নথি এলিমেন্ট তৈরি করুন ( প্রকার )উপাদান শিশুকে সংযুক্ত করুন ( নোড )
উপরের সিনট্যাক্সে, ' প্রকার ” এলিমেন্টের ধরন বোঝায় যা createElement() পদ্ধতি ব্যবহার করে তৈরি করা হবে এবং “ নোড ” হল নোড যা appendChild() পদ্ধতির সাহায্যে যুক্ত করা হবে।
নিম্নলিখিত উদাহরণটি বর্ণিত ধারণাটি ব্যাখ্যা করবে।
উদাহরণ
প্রথমত, একটি ' বোতাম ' document.createElement() পদ্ধতি ব্যবহার করে তৈরি করা হবে এবং 'নামক একটি ভেরিয়েবলে সংরক্ষণ করা হবে। তৈরি বোতাম ”:
const তৈরি বোতাম = নথি এলিমেন্ট তৈরি করুন ( 'বোতাম' )পরবর্তী, ' অভ্যন্তরীণ পাঠ্য ” সম্পত্তি তৈরি করা বোতামটি উল্লেখ করবে এবং নির্দিষ্ট বোতামের পাঠ্য মান নিম্নরূপ সেট করবে:
তৈরি বোতাম। অভ্যন্তরীণ পাঠ্য = 'ক্লিক_মি'সবশেষে, ' appendChild() ” পদ্ধতিটি একটি আর্গুমেন্ট হিসাবে সংরক্ষিত ভেরিয়েবলটিকে উল্লেখ করে DOM-এ তৈরি বোতামটি যুক্ত করবে:
নথি শরীর . শিশুকে সংযুক্ত করুন ( তৈরি বোতাম ) ;উপরের বাস্তবায়নের আউটপুট নিম্নরূপ হবে:
পদ্ধতি 2: 'ইনপুট' ট্যাগের 'টাইপ' বৈশিষ্ট্য ব্যবহার করে জাভাস্ক্রিপ্টে বোতাম তৈরি করুন
দ্য ' প্রকার ” বৈশিষ্ট্য প্রদর্শনের জন্য ইনপুট উপাদানের ধরন উপস্থাপন করে। এটি নির্দিষ্ট করে একটি বোতাম তৈরি করতে ব্যবহার করা যেতে পারে ' বোতাম ” ইনপুট ট্যাগের টাইপ অ্যাট্রিবিউটের মান হিসাবে।
বাক্য গঠন
< ইনপুট টাইপ = 'বোতাম' >এখানে, ' বোতাম ” ইনপুট ক্ষেত্রের ধরন নির্দেশ করে।
নীচে প্রদত্ত উদাহরণ দেখুন.
উদাহরণ
প্রথমত, আমরা একটি ইনপুট ট্যাগ ব্যবহার করব, এটির ধরন উল্লেখ করব “ বোতাম ', এবং মান হিসাবে ' আমাকে_ক্লিক করুন ” ফলস্বরূপ, একটি বোতাম তৈরি হবে। উপরন্তু, এটি ট্রিগার করবে ' CreateButton() ক্লিক করার সময় ফাংশন:
< ইনপুট টাইপ = বোতাম মান = Click_Me onclick = 'createButton()' >জাভাস্ক্রিপ্ট ফাইলে, আমরা সংজ্ঞায়িত করব “ CreateButton() ” ফাংশন যা একটি সতর্কতা বাক্স তৈরি করবে যখন যোগ করা বোতামটি ক্লিক করা হবে:
ফাংশন তৈরি বোতাম ( ) {সতর্ক ( 'এটি একটি বোতাম' )
}
আউটপুট
জাভাস্ক্রিপ্টে একটি বোতাম তৈরি করার জন্য আলোচিত কৌশলগুলি প্রয়োজনীয়তা অনুসারে উপযুক্তভাবে ব্যবহার করা যেতে পারে।
উপসংহার
জাভাস্ক্রিপ্টে একটি বোতাম তৈরি করতে, “ ক্রিয়েট এলিমেন্ট() ' এবং ' appendChild() একটি বোতাম তৈরি এবং DOM-এ ব্যবহার করার জন্য এটি যুক্ত করার জন্য পদ্ধতিগুলি প্রয়োগ করা যেতে পারে। আরেকটি কৌশল যা একটি বোতাম তৈরি করতে ব্যবহার করা যেতে পারে একটি ইনপুট প্রকার সংজ্ঞায়িত করা এবং সংশ্লিষ্ট কার্যকারিতা যোগ করা। এই নিবন্ধটি জাভাস্ক্রিপ্টে একটি বোতাম তৈরি করার পদ্ধতিগুলি প্রদর্শন করেছে৷