জাভাস্ক্রিপ্ট অ্যাড ক্লাস:একটি গাইড

একটি উপাদানে একটি শ্রেণীর সম্পত্তি যোগ করা ডেভেলপারকে ওয়েব পৃষ্ঠায় একটি গতিশীল ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে সহায়তা করে। যখন একটি শ্রেণির বৈশিষ্ট্য একটি উপাদানে যোগ করা হয়, তখন নির্বাচিত উপাদানটি সেই শ্রেণির নামের সাথে যুক্ত স্টাইলিং অনুমান করবে।

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

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

কিভাবে জাভাস্ক্রিপ্ট অ্যাড ক্লাস ব্যবহার করবেন

জাভাস্ক্রিপ্টে, ক্লাসের নাম যোগ করা কয়েকটি উপায়ে করা যেতে পারে। প্রথমে, আমরা পছন্দসই HTML উপাদান নির্বাচন করি। তারপর, আমাদের কাছে className প্রপার্টি বা add() ব্যবহার করার একটি পছন্দ আছে উপাদানটিতে ক্লাসের নাম যোগ করার পদ্ধতি। আমরা সিনট্যাক্সের মধ্য দিয়ে যাব এবং পরবর্তী বিভাগে ব্যবহার করব।

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

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

শ্রেণীর নাম যোগ করতে জাভাস্ক্রিপ্ট সিনট্যাক্স

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

প্লেইন জাভাস্ক্রিপ্ট ব্যবহার করে ক্লাসের নাম যোগ করার প্রথম উপায় হল className প্রপার্টি দিয়ে যাওয়া। এখানে যুক্তি হল উপাদান নির্বাচন করা, তারপর নির্বাচিত উপাদানটিতে .className কল করুন। তারপর আমরা উপাদানের সাথে ক্লাসের নাম সংযুক্ত করতে পারি।

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

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

আমাদের HTML দিয়ে শুরু করা যাক:

<div id="div">
Hello World
</div>
<button>
Add Class
</button>

এখানে "div" এর একটি আইডি সহ একটি

আছে। আমাদের

এর নিচে একটি বোতাম রয়েছে। একবার ক্লিক করলে এই বোতামটি ক্লাসের নাম যোগ করবে। এখন সিএসএস ক্লাসের একটি উদাহরণ দেখা যাক।

.background {
  background-color: blue;
  color: white;
}

আমাদের CSS ফাইলে, আমাদের ক্লাস "ব্যাকগ্রাউন্ড" আছে। এখানে এটি একটি নীল ব্যাকগ্রাউন্ড কালার দিয়ে স্টাইল করা হবে এবং লেখাটি সাদা হবে। আমরা আমাদের

-এ "div" আইডি দিয়ে ক্লাসের নাম "ব্যাকগ্রাউন্ড" যোগ করতে চাই।

জাভাস্ক্রিপ্ট একটি ফাংশনে

নির্বাচন পরিচালনা করতে পারে, যেমন:

const addClass = () => {
  const element = document.getElementById('div');
  element.className += "background"
}

addClass নামক আমাদের ফাংশনটি "div" এর আইডি দ্বারা

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

আমরা এখনও পুরোপুরি শেষ না! আমরা এখনও কোথাও আমাদের addClass ফাংশন কল করতে হবে. বোতামে ক্লিক করার পর আমাদের

-এ ক্লাসের নাম যোগ করি।

<div id="div">
Hello World
</div>
<button onClick="addClass()">
Add Class
</button>

JavaScript onClick পদ্ধতি ব্যবহার করে, বোতামটি ক্লিক করার পরে আমরা আমাদের ফাংশনটি কল করতে পারি। বোতামে ক্লিক করে এটি পরীক্ষা করা যাক।

এইমাত্র যা ঘটেছে তা পর্যালোচনা করতে, আমরা আমাদের CSS ফাইলে স্টাইলিংয়ের সাথে যুক্ত ক্লাসের নাম "ব্যাকগ্রাউন্ড" যোগ করেছি। আমরা উপাদান খুঁজে পেতে এবং ক্লাসের নাম যোগ করার জন্য একটি জাভাস্ক্রিপ্ট ফাংশন তৈরি করার পরে, বোতামটি ক্লিক করার পরে

এ ক্লাস স্টাইল প্রয়োগ করা হয়েছিল।

জাভাস্ক্রিপ্ট অ্যাড() পদ্ধতি

উপরের মত একই উদাহরণ ব্যবহার করে, আসুন ক্লাসের নাম যোগ করার অন্য উপায়টি দেখি। এটি জাভাস্ক্রিপ্ট add() ব্যবহার করে পদ্ধতি উপরের উদাহরণের বিপরীতে, আমরা add() কল করতে classList প্রপার্টি ব্যবহার করি .

আমাদের addClass() ফাংশন এখন এই মত দেখায়:

const addClass = () => {
  const element = document.getElementById('div');
  element.classList.add("background")
}

আমরা এখনও তার আইডি দ্বারা

পাচ্ছি এবং এটি একটি ভেরিয়েবলে সংরক্ষণ করছি। তারপর আমরা add() এর পরে আমাদের ভেরিয়েবলের ক্লাসলিস্ট প্রপার্টি কল করি পদ্ধতি আমরা add()-এ ক্লাসের নাম “ব্যাকগ্রাউন্ড” পাস করি একটি যুক্তি হিসাবে।

-এ এখন "ব্যাকগ্রাউন্ড" যোগ করা হয়েছে।

আমরা দুটি ভিন্ন উপায়ে কোডিং করে একই ফলাফল পাই। আপনার কোডে কোনটি প্রয়োগ করবেন তা আপনার পছন্দ, তবে দ্বিতীয় পদ্ধতিটি সর্বোত্তম অনুশীলন হিসাবে আরও ব্যাপকভাবে গৃহীত। add() ব্যবহার করে এটি সর্বোত্তম অনুশীলন হিসাবে বিবেচিত হয় কারণ এটি সংমিশ্রণ ব্যবহার করার চেয়ে কম ত্রুটি প্রবণ।

উপসংহার

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

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