জাভাস্ক্রিপ্ট

🌈জাভাস্ক্রিপ্ট কি?

📋জাভাস্ক্রিপ্ট হলো নির্দিষ্ট এলিমেন্ট নির্বাচন করার পদ্ধতি।

⚒️জাভাস্ক্রিপ্ট নির্দিষ্ট এলিমেন্ট নির্বাচন করতে ব্যবহৃত হয়।

জাভাস্ক্রিপ্ট সমূহ

জাভাস্ক্রিপ্ট এবং সেগুলোর ব্যবহারের তালিকা

➡️ * - সকল এলিমেন্ট সিলেক্ট করা
➡️ element, element - একাধিক এলিমেন্টের গ্রুপ সিলেক্ট করা
➡️ odd - বিজোড় অবস্থানের এলিমেন্ট সিলেক্ট করা
➡️ even - জোড় অবস্থানের এলিমেন্ট সিলেক্ট করা
➡️ #id - নির্দিষ্ট আইডির এলিমেন্ট সিলেক্ট করা
➡️ .class - নির্দিষ্ট ক্লাসের এলিমেন্ট সিলেক্ট করা
➡️ select-attribute-group - নির্দিষ্ট অ্যাট্রিবিউটের এলিমেন্ট সিলেক্ট করা
➡️ first-child - প্যারেন্টের প্রথম চাইল্ড এলিমেন্ট সিলেক্ট করা
➡️ last-child - প্যারেন্টের শেষ চাইল্ড এলিমেন্ট সিলেক্ট করা
➡️ first-of-type - একই ধরনের প্রথম এলিমেন্ট সিলেক্ট করা
➡️ last-of-type - একই ধরনের শেষ এলিমেন্ট সিলেক্ট করা
➡️ nth-child - নির্দিষ্ট অবস্থানের চাইল্ড এলিমেন্ট সিলেক্ট করা
➡️ only-child - একমাত্র চাইল্ড এলিমেন্ট সিলেক্ট করা
➡️ select-element-descendant - এলিমেন্টের বংশধর এলিমেন্ট সিলেক্ট করা
➡️ > - এলিমেন্টের প্যারেন্ট সিলেক্ট করা
➡️ + - এলিমেন্টের পরবর্তী সিবলিং সিলেক্ট করা
➡️ ~ - এলিমেন্টের পরবর্তী সব সিবলিং সিলেক্ট করা
➡️ select-all-element-attribute - নির্দিষ্ট অ্যাট্রিবিউটযুক্ত সকল এলিমেন্ট সিলেক্ট করা
➡️ select-element-attribute-value - নির্দিষ্ট অ্যাট্রিবিউটের নির্দিষ্ট মানযুক্ত এলিমেন্ট সিলেক্ট করা
➡️ select-element-attribute-value-contain - অ্যাট্রিবিউটের মানে নির্দিষ্ট শব্দ থাকা এলিমেন্ট সিলেক্ট করা
➡️ select-element-attribute-start-value - নির্দিষ্ট মান দিয়ে শুরু হওয়া অ্যাট্রিবিউটযুক্ত এলিমেন্ট সিলেক্ট করা
➡️ select-element-attribute-end-value - নির্দিষ্ট মান দিয়ে শেষ হওয়া অ্যাট্রিবিউটযুক্ত এলিমেন্ট সিলেক্ট করা
➡️ select-element-attribute-match-substring-value - অ্যাট্রিবিউটের মানের নির্দিষ্ট অংশের সাথে মিলে যাওয়া এলিমেন্ট সিলেক্ট করা

select-all-element - সকল এলিমেন্ট সিলেক্ট করার উদাহরণ।

javascript

<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ক্লিক করুন</button>
<ul>
  <li>পিএইচপি</li>
  <li>জাভা</li>
  <li>পাইথন</li>
  <li>জাভাস্ক্রিপ্ট</li>
</ul>

<script>
function execute() {
  document.querySelectorAll("*").forEach(function(element) {
    element.style.color = "red";
  });
}
</script>

</body>
</html>

select-element-group - একাধিক এলিমেন্টের গ্রুপ সিলেক্ট করার উদাহরণ।

javascript

<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ক্লিক করুন</button>
<div>
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

<script>
function execute() {
  document.querySelectorAll("h1, p").forEach(function(element) {
    element.style.color = "red";
  });
}
</script>

</body>
</html>

odd - বিজোড় অবস্থানের এলিমেন্ট সিলেক্ট করার উদাহরণ।

javascript

<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ক্লিক করুন</button>
<ul>
  <li>পিএইচপি</li>
  <li>জাভা</li>
  <li>পাইথন</li>
  <li>জাভাস্ক্রিপ্ট</li>
</ul>

<script>
function execute() {
  document.querySelectorAll("li:nth-child(odd)").forEach(function(element) {
    element.style.backgroundColor = "tomato";
  });

  document.querySelectorAll("li:nth-child(even)").forEach(function(element) {
    element.style.backgroundColor = "orange";
  });
}
</script>

</body>
</html>

even - জোড় অবস্থানের এলিমেন্ট সিলেক্ট করার উদাহরণ।

javascript

<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ক্লিক করুন</button>
<ul>
  <li>পিএইচপি</li>
  <li>জাভা</li>
  <li>পাইথন</li>
  <li>জাভাস্ক্রিপ্ট</li>
</ul>

<script>
function execute() {
  document.querySelectorAll("li:nth-child(odd)").forEach(function(element) {
    element.style.backgroundColor = "tomato";
  });

  document.querySelectorAll("li:nth-child(even)").forEach(function(element) {
    element.style.backgroundColor = "orange";
  });
}
</script>

</body>
</html>

select-id - নির্দিষ্ট আইডির এলিমেন্ট সিলেক্ট করার উদাহরণ।

javascript

<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ক্লিক করুন</button>
<ul id="list">
  <li>পিএইচপি</li>
  <li>জাভা</li>
  <li>পাইথন</li>
  <li>জাভাস্ক্রিপ্ট</li>
</ul>

<script>
function execute() {
  document.querySelector("#list").style.backgroundColor = "tomato";
}
</script>

</body>
</html>

select-class - নির্দিষ্ট ক্লাসের এলিমেন্ট সিলেক্ট করার উদাহরণ।

javascript

<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ক্লিক করুন</button>
<div class="container">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

<script>
function execute() {
  document.querySelector(".container").style.backgroundColor = "tomato";
}
</script>

</body>
</html>

select-attribute-group - নির্দিষ্ট অ্যাট্রিবিউটের এলিমেন্ট সিলেক্ট করার উদাহরণ।

javascript

<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ক্লিক করুন</button>
<div class="container">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
<br>
<ul id="list">
  <li>পিএইচপি</li>
  <li>জাভা</li>
  <li>পাইথন</li>
  <li>জাভাস্ক্রিপ্ট</li>
</ul>

<script>
function execute() {
  document.querySelectorAll("#list, .container").forEach(function(element) {
    element.style.backgroundColor = "tomato";
  });
}
</script>

</body>
</html>

first-child - প্যারেন্টের প্রথম চাইল্ড এলিমেন্ট সিলেক্ট করার উদাহরণ।

javascript

<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ক্লিক করুন</button>
<ul>
  <li>পিএইচপি</li>
  <li>জাভা</li>
  <li>পাইথন</li>
  <li>জাভাস্ক্রিপ্ট</li>
</ul>

<script>
function execute() {
  document.querySelectorAll("li:first-child").forEach(function(element) {
    element.style.color = "red";
  });
}
</script>

</body>
</html>

last-child - প্যারেন্টের শেষ চাইল্ড এলিমেন্ট সিলেক্ট করার উদাহরণ।

javascript

<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ক্লিক করুন</button>
<ul>
  <li>পিএইচপি</li>
  <li>জাভা</li>
  <li>পাইথন</li>
  <li>জাভাস্ক্রিপ্ট</li>
</ul>

<script>
function execute() {
  document.querySelectorAll("li:last-child").forEach(function(element) {
    element.style.color = "red";
  });
}
</script>

</body>
</html>

first-of-type - একই ধরনের প্রথম এলিমেন্ট সিলেক্ট করার উদাহরণ।

javascript

<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ক্লিক করুন</button>
<ul>
  <li>পিএইচপি</li>
  <li>জাভা</li>
  <li>পাইথন</li>
  <li>জাভাস্ক্রিপ্ট</li>
</ul>

<script>
function execute() {
  document.querySelectorAll("li:first-of-type").forEach(function(element) {
    element.style.color = "red";
  });
}
</script>

</body>
</html>

last-of-type - একই ধরনের শেষ এলিমেন্ট সিলেক্ট করার উদাহরণ।

javascript

<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ক্লিক করুন</button>
<ul>
  <li>পিএইচপি</li>
  <li>জাভা</li>
  <li>পাইথন</li>
  <li>জাভাস্ক্রিপ্ট</li>
</ul>

<script>
function execute() {
  document.querySelectorAll("li:last-of-type").forEach(function(element) {
    element.style.color = "red";
  });
}
</script>

</body>
</html>

nth-child - নির্দিষ্ট অবস্থানের চাইল্ড এলিমেন্ট সিলেক্ট করার উদাহরণ।

javascript

<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ক্লিক করুন</button>
<ul>
  <li>পিএইচপি</li>
  <li>জাভা</li>
  <li>পাইথন</li>
  <li>জাভাস্ক্রিপ্ট</li>
</ul>

<script>
function execute() {
  document.querySelectorAll("li:nth-child(2)").forEach(function(element) {
    element.style.color = "red";
  });
}
</script>

</body>
</html>

only-child - একমাত্র চাইল্ড এলিমেন্ট সিলেক্ট করার উদাহরণ।

javascript

<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ক্লিক করুন</button>
<div>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

<div>
  <p>হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>
  <p>ক্যাসকেডিং স্টাইল শিট</p>
</div>

<script>
function execute() {
  document.querySelectorAll("div p:only-child").forEach(function(element) {
    element.style.color = "coral";
  });
}
</script>

</body>
</html>

select-element-descendant - এলিমেন্টের বংশধর এলিমেন্ট সিলেক্ট করার উদাহরণ।

javascript

<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ক্লিক করুন</button>
<div>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

<div>
  <p>হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>
  <p>ক্যাসকেডিং স্টাইল শিট</p>
</div>

<script>
function execute() {
  document.querySelectorAll("div p").forEach(function(element) {
    element.style.color = "coral";
  });
}
</script>

</body>
</html>

select-element-parent - এলিমেন্টের প্যারেন্ট সিলেক্ট করার উদাহরণ।

javascript

<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ক্লিক করুন</button>
<div>
  <p>হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>
  <section>
    <p>ক্যাসকেডিং স্টাইল শিট</p>
  </section>
</div>

<script>
function execute() {
  document.querySelectorAll("div > p").forEach(function(element) {
    element.style.background = "coral";
  });
}
</script>

</body>
</html>

select-element-sibling - এলিমেন্টের পরবর্তী সিবলিং সিলেক্ট করার উদাহরণ।

javascript

<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ক্লিক করুন</button>
<div>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</div>
<p>হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>
<p>ক্যাসকেডিং স্টাইল শিট</p>

<script>
function execute() {
  document.querySelectorAll("div + p").forEach(function(element) {
    element.style.color = "coral";
  });
}
</script>

</body>
</html>

select-element-general-sibling - এলিমেন্টের পরবর্তী সব সিবলিং সিলেক্ট করার উদাহরণ।

javascript

<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ক্লিক করুন</button>
<div>প্রোগ্রামিং শিখুন</div>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
<span>জাভাস্ক্রিপ্ট</span>
<p>সিএসএস টিউটোরিয়াল</p>
<p>ক্যাসকেডিং স্টাইল শিট</p>

<script>
function execute() {
  document.querySelectorAll("div ~ p").forEach(function(element) {
    element.style.color = "coral";
  });
}
</script>

</body>
</html>

select-all-element-attribute - নির্দিষ্ট অ্যাট্রিবিউটযুক্ত সকল এলিমেন্ট সিলেক্ট করার উদাহরণ।

javascript

<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ক্লিক করুন</button>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
<p class="desc">হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>
<p class="para">ক্যাসকেডিং স্টাইল শিট</p>

<script>
function execute() {
  document.querySelectorAll("p[class]").forEach(function(element) {
    element.style.color = "red";
  });
}
</script>

</body>
</html>

select-element-attribute-value - নির্দিষ্ট অ্যাট্রিবিউটের নির্দিষ্ট মানযুক্ত এলিমেন্ট সিলেক্ট করার উদাহরণ।

javascript

<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ক্লিক করুন</button>
<p class="head">প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
<p class="desc">হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>
<p class="desc">ক্যাসকেডিং স্টাইল শিট</p>

<script>
function execute() {
  document.querySelectorAll("p[class=desc]").forEach(function(element) {
    element.style.color = "red";
  });
}
</script>

</body>
</html>

select-element-attribute-value-contain - অ্যাট্রিবিউটের মানে নির্দিষ্ট শব্দ থাকা এলিমেন্ট সিলেক্ট করার উদাহরণ।

javascript

<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ক্লিক করুন</button>
<p class="head">প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
<p class="desc">হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>
<p class="desc">ক্যাসকেডিং স্টাইল শিট</p>

<script>
function execute() {
  document.querySelectorAll("p[class~=head]").forEach(function(element) {
    element.style.color = "red";
  });
}
</script>

</body>
</html>

select-element-attribute-start-value - নির্দিষ্ট মান দিয়ে শুরু হওয়া অ্যাট্রিবিউটযুক্ত এলিমেন্ট সিলেক্ট করার উদাহরণ।

javascript

<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ক্লিক করুন</button>
<p class="head">প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
<p class="desc">হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>
<p class="desc">ক্যাসকেডিং স্টাইল শিট</p>

<script>
function execute() {
  document.querySelectorAll("p[class^='de']").forEach(function(element) {
    element.style.color = "red";
  });
}
</script>

</body>
</html>

select-element-attribute-end-value - নির্দিষ্ট মান দিয়ে শেষ হওয়া অ্যাট্রিবিউটযুক্ত এলিমেন্ট সিলেক্ট করার উদাহরণ।

javascript

<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ক্লিক করুন</button>
<p class="head">প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
<p class="desc">হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>
<p class="desc">ক্যাসকেডিং স্টাইল শিট</p>

<script>
function execute() {
  document.querySelectorAll("p[class$='sc']").forEach(function(element) {
    element.style.color = "red";
  });
}
</script>

</body>
</html>

select-element-attribute-match-substring-value - অ্যাট্রিবিউটের মানের নির্দিষ্ট অংশের সাথে মিলে যাওয়া এলিমেন্ট সিলেক্ট করার উদাহরণ।

javascript

<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ক্লিক করুন</button>
<p class="head">প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
<p class="desc">হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>
<p class="desc">ক্যাসকেডিং স্টাইল শিট</p>

<script>
function execute() {
  document.querySelectorAll("p[class*='e']").forEach(function(element) {
    element.style.color = "red";
  });
}
</script>

</body>
</html>

জাভাস্ক্রিপ্ট সম্পর্কিত বিস্তারিত তথ্য

কার্যকর কোডিং উদাহরণ এবং সেগুলোর রেফারেন্স লিংক

নাম	বিবরণ
*	সকল এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
element, element	একাধিক এলিমেন্টের গ্রুপ সিলেক্ট করতে ব্যবহৃত হয়।
odd	বিজোড় অবস্থানের এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
even	জোড় অবস্থানের এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
#id	নির্দিষ্ট আইডির এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
.class	নির্দিষ্ট ক্লাসের এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
select-attribute-group	নির্দিষ্ট অ্যাট্রিবিউটের এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
first-child	প্যারেন্টের প্রথম চাইল্ড এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
last-child	প্যারেন্টের শেষ চাইল্ড এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
first-of-type	একই ধরনের প্রথম এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
last-of-type	একই ধরনের শেষ এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
nth-child	নির্দিষ্ট অবস্থানের চাইল্ড এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
only-child	একমাত্র চাইল্ড এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
select-element-descendant	এলিমেন্টের বংশধর এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
>	এলিমেন্টের প্যারেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
+	এলিমেন্টের পরবর্তী সিবলিং সিলেক্ট করতে ব্যবহৃত হয়।
~	এলিমেন্টের পরবর্তী সব সিবলিং সিলেক্ট করতে ব্যবহৃত হয়।
select-all-element-attribute	নির্দিষ্ট অ্যাট্রিবিউটযুক্ত সকল এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
select-element-attribute-value	নির্দিষ্ট অ্যাট্রিবিউটের নির্দিষ্ট মানযুক্ত এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
select-element-attribute-value-contain	অ্যাট্রিবিউটের মানে নির্দিষ্ট শব্দ থাকা এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
select-element-attribute-start-value	নির্দিষ্ট মান দিয়ে শুরু হওয়া অ্যাট্রিবিউটযুক্ত এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
select-element-attribute-end-value	নির্দিষ্ট মান দিয়ে শেষ হওয়া অ্যাট্রিবিউটযুক্ত এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
select-element-attribute-match-substring-value	অ্যাট্রিবিউটের মানের নির্দিষ্ট অংশের সাথে মিলে যাওয়া এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।