জাভাস্ক্রিপ্ট ইনারএইচটিএমএল এবং ইনার টেক্সট:একটি গাইড

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

এই বৈশিষ্ট্যগুলি একটি DOM উপাদানের পাঠ্য এবং এর HTML কোড পরিবর্তন করা সহজ করে তোলে। এই নির্দেশিকাটিতে, আপনি জানবেন কিভাবে JavaScript ব্যবহার করতে হয় innerText এবং innerHTML গুণাবলী।

জাভাস্ক্রিপ্ট ইনারএইচটিএমএল কি?

JavaScript innerHTML বৈশিষ্ট্য একটি ওয়েব পৃষ্ঠায় একটি উপাদানের HTML বিষয়বস্তু সেট করে। InnerHTML হল HTML DOM-এর একটি সম্পত্তি। innerHTML প্রায়ই

উপাদানের বিষয়বস্তু সেট এবং পরিবর্তন করতে ব্যবহৃত হয়।

আপনি এর মত innerHTML ব্যবহার করতে পারেন:

document.getElementById(“paragraph”).innerHTML =“ক্যারিয়ার কর্ম!”;

কোডের এই লাইনটি “অনুচ্ছেদ”

উপাদানের বিষয়বস্তুকে “ক্যারিয়ার কর্ম!”-এ সেট করে। getElementById() পদ্ধতিটি আইডি দ্বারা একটি উপাদান পুনরুদ্ধার করে।

একটি পৃষ্ঠা লোড হলে ব্রাউজার একটি ডকুমেন্ট অবজেক্ট মডেল (DOM) সংজ্ঞায়িত করে। এই DOM হল পৃষ্ঠায় প্রদর্শিত বস্তুর একটি সিরিজ।

DOM এর অর্থ হল আপনি যখনই একটি ওয়েব উপাদান পরিবর্তন করতে চান তখন আপনাকে HTML কোড পরিবর্তন করতে হবে না। আপনি DOM এবং JavaScript ব্যবহার করে একটি নির্দিষ্ট সেশনে পৃষ্ঠাটি কীভাবে প্রদর্শিত হবে তা পরিবর্তন করতে পারেন।

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

৷

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

জাভাস্ক্রিপ্ট ইনার টেক্সট কি?

JavaScript innerText বৈশিষ্ট্য একটি উপাদানের পাঠ্য বিষয়বস্তু সেট করে। এটি তার বংশধরদের বিষয়বস্তুও সেট করে। বংশধরদের একটি অনুচ্ছেদের ভিতরে ট্যাগ থাকতে পারে।

innerText-এর সিনট্যাক্স innerHTML এর অনুরূপ:

document.getElementById("element").innerText ="এটি একটি পরীক্ষা।";

এটি "এলিমেন্ট" আইডি সহ উপাদানটির পাঠ্য মান "এটি একটি পরীক্ষা।"

আপনি আপনার JavaScript কনসোলে গিয়ে এবং পরিবর্তন করার জন্য একটি উপাদান নির্বাচন করে এই পদ্ধতিগুলি পরীক্ষা করতে পারেন:

এটি একটি ওয়েব পৃষ্ঠায় প্রথম

HTML ট্যাগের বিষয়বস্তু পরিবর্তন করে। আপনি যদি পাঠ্য প্রতিস্থাপন করতে চান, আপনি অভ্যন্তরীণ পাঠ্য ব্যবহার করতে পারেন বৈশিষ্ট্য:

এটি পৃষ্ঠার দ্বিতীয় অনুচ্ছেদের বিষয়বস্তু (1 নম্বর দ্বারা চিহ্নিত) পরিবর্তন করে "এটি একটি পরীক্ষা"।

জাভাস্ক্রিপ্টে innerHTML এবং innerText ব্যবহার করা

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

৷

একটি ওয়েব পৃষ্ঠা তৈরি করুন

আমাদের প্রথম ধাপ হল আমাদের ফ্রন্ট-এন্ডের জন্য একটি index.html ফাইল তৈরি করা:

<!DOCTYPE html>
<html>
    <head>
   	 <title>HTML Flashcard App</title>
	<link rel="stylesheet" href="./styles.css" />
    </head>
    <body>
   	 <div class="flashcard">
   		 <h2>Does a hyperlink only apply to text?</h2>
   		 <p>The answer will be revealed when you press "Show answer"</p>
   		 <button id="showAnswer">Show answer</button>
		 <br /> <br />
		 <div id="showMessage"></div>
   	 </div>
	<script src="./scripts.js"></script>
    </body>
</html>

এই পৃষ্ঠাটি তিনটি উপাদান সহ একটি ধারক তৈরি করে। প্রথমত, আমাদের কাছে প্রশ্ন আছে যেটি আমরা ব্যবহারকারীকে জিজ্ঞাসা করছি। আমরা উত্তর প্রকাশ কিভাবে সম্পর্কে বার্তা আছে. আমাদের পৃষ্ঠা উত্তরটি প্রকাশ করার জন্য একটি বোতাম দিয়ে শেষ হয়৷

আমাদের কোড আমাদের উপাদানগুলির পাঠ্য বিষয়বস্তু প্রদান করে:

জাভাস্ক্রিপ্ট ইনারএইচটিএমএল এবং ইনার টেক্সট:একটি গাইড

আমাদের পৃষ্ঠাটিকে আরও সুন্দর করতে আমরা একটি styles.css ফাইলে কিছু CSS শৈলী প্রয়োগ করতে যাচ্ছি:

<style>
.flashcard {
    margin: auto;
    width: 50%;
    padding: 50px;
    margin-top: 10%;
    background-color: lightgreen;
    text-align: center;
}

button {
    border: none;
    background-color: hotpink;
    padding: 10px;
    border-radius: 10px;
}
</style>

এখন আমাদের ওয়েব পৃষ্ঠাটি একবার দেখে নেওয়া যাক:

আমাদের সাইট এমন কিছু দেখায় যা দেখতে অনেকটা ফ্ল্যাশ কার্ডের মতো। আমরা আমাদের বোতামটি স্টাইল করেছি।

জাভাস্ক্রিপ্ট ইনারএইচটিএমএল এবং ইনার টেক্সট ব্যবহার করে পাঠ্য পরিবর্তন করুন

আমরা চাই বাটনে ক্লিক করলেই প্রশ্নের উত্তর প্রকাশ পাবে। প্রথমত, আমরা টেক্সট এবং বোতাম উপাদান নির্বাচন করতে যাচ্ছি যা আমরা আমাদের জাভাস্ক্রিপ্ট কোডে ব্যবহার করতে যাচ্ছি। আমরা আমাদের scripts.js ফাইলে এই সমস্ত কোড লিখব:

var answerText = document.querySelector('p');
var button = document.querySelector('button');

এর পরে, আমরা একটি জাভাস্ক্রিপ্ট ফাংশন তৈরি করতে যাচ্ছি। এই ফাংশনটি আমাদের প্রশ্নের উত্তর প্রকাশ করে যখন বোতামটি ক্লিক করা হয়:

function showAnswer() {
	answerText.innerText = "No. Hyperlinks can be used on both text and images.";
}

একটি বোতাম টিপে আমাদের ফাংশন সক্রিয় করতে, আমরা একটি সাধারণ ইভেন্ট লিসেনার তৈরি করতে যাচ্ছি। এই শ্রোতা আমাদের বোতামে ক্লিক করার জন্য শোনেন:

button.addEventListener('click', showAnswer);

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

আমরা JavaScript innerHTML ব্যবহার করে এই অ্যাপটিতে আরও কার্যকারিতা যোগ করতে পারি . ধরুন আমরা বোতামটি ক্লিক করার পরে ফ্ল্যাশ কার্ডের নীচে একটি বার্তা প্রদর্শন করতে চাই। এই বার্তাটি লাল রঙে প্রদর্শিত হওয়া উচিত। আমরা নিম্নলিখিত কোড ব্যবহার করে এই বার্তাটি তৈরি করতে পারি:

var message = document.querySelector('#showMessage');

function showAnswer() {
	answerText.innerText = "No. Hyperlinks can be used on both text and images.";
	message.innerHTML = "<span style='color:red;'>You have revealed the answer.</span>";
}

আসুন সংশোধিত showAnswer() দিয়ে আমাদের কোড চালানোর চেষ্টা করি ফাংশন এবং নতুন ক্যোয়ারী নির্বাচক যা আমরা লিখেছি:

আমরা innerHTML ব্যবহার করেছি আমাদের সাইটে একটি HTML ট্যাগ যোগ করার পদ্ধতি। এই ট্যাগটি একটি বার্তা প্রদর্শন করে যা একজন ব্যবহারকারী যখন উত্তর দেখান বোতাম টিপে তখন লাল রঙে প্রদর্শিত হয়৷

৷

জাভাস্ক্রিপ্ট ইনারটেক্সট বনাম ইনারএইচটিএমএল

innerText এবং innerHTML বৈশিষ্ট্য উভয়ই আপনাকে ট্যাগের বিষয়বস্তু অ্যাক্সেস এবং পরিবর্তন করতে দেয়। innerText কোনো বংশধর বা ব্যবধান ছাড়াই পাঠ্য ফেরত দেয়। innerHTML যেকোন বংশধর এবং ব্যবধান সহ পাঠ্য প্রদান করে।

আপনি যদি প্লেইন টেক্সটে একটি উপাদানের বিষয়বস্তু দেখতে চান তাহলে আপনি innerText ব্যবহার করবেন। যদি আপনি একটি স্ট্রিং-এ প্রদর্শিত সমস্ত HTML ট্যাগ দেখতে চান তাহলে innerHTML ব্যবহার করা আরও উপযুক্ত৷

সংক্ষেপে, innerText আপনাকে প্লেইন টেক্সটের সাথে কাজ করতে দেয় যেখানে innerHTML আপনাকে একটি স্ট্রিং-এ HTML এর সাথে কাজ করতে দেয়।

আধুনিক ব্রাউজারে innerText এবং innerHTML উভয়েরই ব্যাপক সমর্থন রয়েছে৷

উপসংহার

অভ্যন্তরীণ পাঠ্য এবং innerHTML বৈশিষ্ট্য HTML DOM ম্যানিপুলেট করে। innerText ব্যবধান বা বংশধর ছাড়াই একটি উপাদানের পাঠ্য বিষয়বস্তু ফিরিয়ে আনে। innerHTML একটি উপাদান এবং যেকোনো ব্যবধান এবং বংশধরের বিষয়বস্তু প্রদান করে।

বোনাস চ্যালেঞ্জ হিসাবে, বোতামটি দ্বিতীয়বার ক্লিক করার পরে আপনি উপরের কোডটি একটি উত্তর লুকাতে পারেন কিনা তা দেখুন। আপনার কোড করা উচিত:

উত্তর লুকান যখন একজন ব্যবহারকারী বোতামে ক্লিক করেন
উত্তর দেখানো হলে "উত্তর দেখান" থেকে "উত্তর লুকান" বোতামের পাঠ্য পরিবর্তন করুন।
একজন ব্যবহারকারী "উত্তর লুকান" চাপার পরে "আপনি উত্তরটি প্রকাশ করেছেন" বার্তাটি রাখুন৷

আপনি যদি আরও টিউটোরিয়াল খুঁজছেন যা আপনাকে জাভাস্ক্রিপ্ট শিখতে সাহায্য করবে, তাহলে জাভাস্ক্রিপ্ট নতুনদের গাইডের জন্য আমাদের সেরা টিউটোরিয়াল দেখুন।