জয়েন লগইন

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

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

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

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

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

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

  • ➡️ doctype - ডকুমেন্টের ডকটাইপ তথ্য নির্ধারণ করা
  • ➡️ characterSet - ডকুমেন্টের অক্ষর সেটের নাম বের করা
  • ➡️ title - ডকুমেন্টের শিরোনাম নির্ধারণ করা
  • ➡️ head - ডকুমেন্টের হেড উপাদান অ্যাক্সেস করা
  • ➡️ body - ডকুমেন্টের বডি উপাদান অ্যাক্সেস করা
  • ➡️ embeds - ডকুমেন্টে এমবেড করা উপাদানগুলোর তালিকা বের করা
  • ➡️ images - ডকুমেন্টের ছবিগুলোর তালিকা বের করা
  • ➡️ forms - ডকুমেন্টের ফর্মগুলোর তালিকা বের করা
  • ➡️ links - ডকুমেন্টের লিংকগুলোর তালিকা বের করা
  • ➡️ scripts - ডকুমেন্টের স্ক্রিপ্টগুলোর তালিকা বের করা
  • ➡️ compatMode - ডকুমেন্টের সামঞ্জস্যপূর্ণ মোড বের করা
  • ➡️ contentType - ডকুমেন্টের কনটেন্টের ধরন বের করা
  • ➡️ cookie - ডকুমেন্টের কুকির তথ্য অ্যাক্সেস করা
  • ➡️ activeElement - ডকুমেন্টের সক্রিয় এলিমেন্ট বের করা
  • ➡️ adoptedStyleSheets - ডকুমেন্টের গৃহীত স্টাইলশিটগুলোর তালিকা নির্ধারণ করা
  • ➡️ currentScript - বর্তমানে চলমান স্ক্রিপ্টের উপাদান বের করা
  • ➡️ defaultView - ডকুমেন্টের ডিফল্ট উইন্ডো অবজেক্ট বের করা
  • ➡️ documentElement - ডকুমেন্টের মূল এলিমেন্ট অ্যাক্সেস করা
  • ➡️ documentURI - ডকুমেন্টের ইউআরআই বের করা
  • ➡️ domain - ডকুমেন্টের ডোমেইন বের করা
  • ➡️ fullscreenElement - ফুলস্ক্রিনে থাকা এলিমেন্ট বের করা
  • ➡️ implementation - ডকুমেন্টের বাস্তবায়ন তথ্য অ্যাক্সেস করা
  • ➡️ lastModified - ডকুমেন্টের সর্বশেষ পরিবর্তনের সময় বের করা
  • ➡️ location - ডকুমেন্টের অবস্থানের তথ্য অ্যাক্সেস করা
  • ➡️ pictureInPictureElement - পিকচার-ইন-পিকচার অবস্থায় থাকা এলিমেন্ট বের করা
  • ➡️ plugins - ডকুমেন্টে ব্যবহৃত প্লাগইনগুলোর তালিকা বের করা
  • ➡️ readyState - ডকুমেন্টের প্রস্তুতির অবস্থা বের করা
  • ➡️ referrer - ডকুমেন্টে আসার পূর্ববর্তী পেজের ঠিকানা বের করা
  • ➡️ scrollingElement - ডকুমেন্টের স্ক্রল করা এলিমেন্ট বের করা
  • ➡️ styleSheets - ডকুমেন্টের স্টাইলশিটগুলোর তালিকা বের করা
  • ➡️ visibilityState - ডকুমেন্টের দৃশ্যমানতার অবস্থা বের করা
  • ➡️ open - ডকুমেন্টে লেখা বা নতুন কনটেন্টের জন্য ডকুমেন্ট খোলা
  • ➡️ close - ডকুমেন্ট বন্ধ করা
  • ➡️ append - ডকুমেন্টে নতুন নোড যুক্ত করা
  • ➡️ prepend - ডকুমেন্টের শুরুতে নতুন নোড যুক্ত করা
  • ➡️ adoptNode - অন্য ডকুমেন্টের নোড গ্রহণ করা
  • ➡️ createAttribute - নতুন অ্যাট্রিবিউট তৈরি করা
  • ➡️ createDocumentFragment - নতুন ডকুমেন্ট ফ্র্যাগমেন্ট তৈরি করা
  • ➡️ createElement - নতুন এলিমেন্ট তৈরি করা
  • ➡️ createEvent - নতুন ইভেন্ট তৈরি করা
  • ➡️ createExpression - নতুন এক্সপ্রেশন তৈরি করা
  • ➡️ createNodeIterator - ডকুমেন্টের নোড পর্যায়ক্রমে অ্যাক্সেস করার ইটারেটর তৈরি করা
  • ➡️ createProcessingInstruction - নতুন প্রসেসিং নির্দেশনা তৈরি করা
  • ➡️ createRange - ডকুমেন্টের নির্দিষ্ট অংশের রেঞ্জ তৈরি করা
  • ➡️ createTextNode - নতুন টেক্সট নোড তৈরি করা
  • ➡️ createTreeWalker - ডকুমেন্টের নোড পর্যায়ক্রমে অতিক্রম করার ট্রি ওয়াকার তৈরি করা
  • ➡️ getElementsByTagName - ট্যাগের নাম অনুযায়ী এলিমেন্টগুলোর তালিকা বের করা
  • ➡️ getElementById - আইডি অনুযায়ী একটি এলিমেন্ট বের করা
  • ➡️ getElementsByClassName - ক্লাসের নাম অনুযায়ী এলিমেন্টগুলোর তালিকা বের করা
  • ➡️ getElementsByName - নামের ভিত্তিতে এলিমেন্টগুলোর তালিকা বের করা
  • ➡️ querySelector - নির্বাচক অনুযায়ী প্রথম এলিমেন্ট বের করা
  • ➡️ querySelectorAll - নির্বাচক অনুযায়ী সকল এলিমেন্ট বের করা
  • ➡️ getAnimations - ডকুমেন্টের অ্যানিমেশনগুলোর তালিকা বের করা
  • ➡️ hasFocus - ডকুমেন্টে ফোকাস আছে কিনা যাচাই করা

doctype - ডকুমেন্টের ডকটাইপ তথ্য নির্ধারণ করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<script>
document.write(document.doctype.name);
</script>

</body>
</html>

characterSet - ডকুমেন্টের অক্ষর সেটের নাম বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<script>
document.write(document.characterSet);
</script>

</body>
</html>

title - ডকুমেন্টের শিরোনাম নির্ধারণ করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<head>
<title>প্রোগ্রামিং শিখুন</title>
</head>
<body>

<script>
document.write(document.title);
</script>

</body>
</html>

head - ডকুমেন্টের হেড উপাদান অ্যাক্সেস করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="প্রোগ্রামিং টিউটোরিয়াল">
</head>
<body>

<script>
console.log(document.head);
</script>

</body>
</html>

body - ডকুমেন্টের বডি উপাদান অ্যাক্সেস করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">click to view result</button>

<div>
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

<script>
function execute() {
  document.body.style.backgroundColor = "pink";
}
</script>

</body>
</html>

embeds - ডকুমেন্টে এমবেড করা উপাদানগুলোর তালিকা বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">click to view result</button><br>
<embed src="/images/author.jpg" width="200" height="100">

<script>
function execute() {
  document.embeds[0].width = 300;
}
</script>

</body>
</html>

images - ডকুমেন্টের ছবিগুলোর তালিকা বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">click to view result</button><br>
<img src="/images/author.jpg" width="200" height="100">

<script>
function execute() {
  document.images[0].width = 300;
}
</script>

</body>
</html>

forms - ডকুমেন্টের ফর্মগুলোর তালিকা বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">click to view result</button><br>
<form action="index.php" method="post">
  <label>আপনার নাম</label>
  <input type="text" name="name"><br><br>

  <label>আপনার দেশ</label>
  <input type="text" name="land"><br><br>

  <input type="submit" name="submit" value="সেভ করুন">
</form>

<script>
function execute() {
  document.forms[0].style.border = "1px solid";
}
</script>

</body>
</html>

links - ডকুমেন্টের লিংকগুলোর তালিকা বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">click to view result</button><br>
<a href="/index.php">লার্নউইজ</p>

<script>
function execute() {
  document.links[0].style.color = "red";
}
</script>

</body>
</html>

scripts - ডকুমেন্টের স্ক্রিপ্টগুলোর তালিকা বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">click to view result</button>
<script src="test.js"></script>

<script>
function execute() {
  alert(document.scripts[0].src);
}
</script>

</body>
</html>

compatMode - ডকুমেন্টের সামঞ্জস্যপূর্ণ মোড বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<script>
document.write(document.compatMode);
</script>

</body>
</html>

contentType - ডকুমেন্টের কনটেন্টের ধরন বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<script>
document.write(document.contentType);
</script>

</body>
</html>

cookie - ডকুমেন্টের কুকির তথ্য অ্যাক্সেস করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">click to view result</button>

<p id="result">প্রোগ্রামিং শিখুন</p>

<script>
function execute() {
  document.cookie = "name=আরিফ";
  result.textContent = document.cookie;
}
</script>

</body>
</html>

activeElement - ডকুমেন্টের সক্রিয় এলিমেন্ট বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<input onclick="show()" value="click to view result">

<p id="result"></p>

<script>
function show() {
  result.textContent = document.activeElement;
}
</script>

</body>
</html>

adoptedStyleSheets - ডকুমেন্টের গৃহীত স্টাইলশিটগুলোর তালিকা নির্ধারণ করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">click to view result</button>

<p id="result">ওয়েটিং</p>

<script>
function execute() {
  let sheet = new CSSStyleSheet();

  sheet.replaceSync("body { background: pink; }");

  document.adoptedStyleSheets = [sheet];

  result.textContent = "স্টাইলশিট";
}
</script>

</body>
</html>

currentScript - বর্তমানে চলমান স্ক্রিপ্টের উপাদান বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<script>
console.log(document.currentScript);
</script>

</body>
</html>

defaultView - ডকুমেন্টের ডিফল্ট উইন্ডো অবজেক্ট বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<script>
console(document.defaultView);
</script>

</body>
</html>

documentElement - ডকুমেন্টের মূল এলিমেন্ট অ্যাক্সেস করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<script>
console.log(document.documentElement);
</script>

</body>
</html>

documentURI - ডকুমেন্টের ইউআরআই বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<script>
document.write(document.documentURI);
</script>

</body>
</html>

domain - ডকুমেন্টের ডোমেইন বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<script>
document.write(document.domain);
</script>

</body>
</html>

fullscreenElement - ফুলস্ক্রিনে থাকা এলিমেন্ট বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">click to view result</button>

<p id="result">ফুলস্কীন</p>

<script>
function execute() {
  document.documentElement.requestFullscreen();
  document.addEventListener("fullscreenchange", () => {}, { once: true });
}
</script>

</body>
</html>

implementation - ডকুমেন্টের বাস্তবায়ন তথ্য অ্যাক্সেস করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<script>
console.log(document.implementation);
</script>

</body>
</html>

lastModified - ডকুমেন্টের সর্বশেষ পরিবর্তনের সময় বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<script>
document.write(document.lastModified);
</script>

</body>
</html>

location - ডকুমেন্টের অবস্থানের তথ্য অ্যাক্সেস করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<script>
document.write(document.location);
</script>

</body>
</html>

pictureInPictureElement - পিকচার-ইন-পিকচার অবস্থায় থাকা এলিমেন্ট বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<video id="video" controls width="300">
  <source src="/videos/rain.mp4">
</video>

<p id="result">হ্যালো বিশ্ব</p>

<script>
video.addEventListener("enterpictureinpicture", () => {
  result.textContent = document.pictureInPictureElement;
});
</script>

</body>
</html>

plugins - ডকুমেন্টে ব্যবহৃত প্লাগইনগুলোর তালিকা বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<script>
document.write(document.plugins.length);
</script>

</body>
</html>

readyState - ডকুমেন্টের প্রস্তুতির অবস্থা বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<script>
document.write(document.readyState);
</script>

</body>
</html>

referrer - ডকুমেন্টে আসার পূর্ববর্তী পেজের ঠিকানা বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<script>
document.write(document.referrer);
</script>

</body>
</html>

scrollingElement - ডকুমেন্টের স্ক্রল করা এলিমেন্ট বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body style="height:1500px">

<button onclick="document.scrollingElement.scrollTop = 500">
  স্ক্রল
</button>

<p style="margin-top:700px">হ্যালো বিশ্ব</p>

</body>
</html>

styleSheets - ডকুমেন্টের স্টাইলশিটগুলোর তালিকা বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background: pink;
}
</style>
</head>
<body>

<script>
document.write(document.styleSheets.length);
</script>

</body>
</html>

visibilityState - ডকুমেন্টের দৃশ্যমানতার অবস্থা বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<p id="result">হ্যালো বিশ্ব</p>

<script>
result.textContent = document.visibilityState;
</script>

</body>
</html>

open - ডকুমেন্টে লেখা বা নতুন কনটেন্টের জন্য ডকুমেন্ট খোলার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button id="button" onclick="execute()">খুলুন</button>

<script>
let page;

function execute() {
  if (page && !page.closed) {
    page.close();
    button.textContent = "খুলুন";
  } else {
    page = document.open("", "_blank", "width=400,height=250");
    page.document.write("<h2>প্রোগ্রামিং শিখুন</h2>");
    button.textContent = "বন্ধ করুন";
  }
}
</script>

</body>
</html>

close - ডকুমেন্ট বন্ধ করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button id="button" onclick="execute()">খুলুন</button>

<script>
let page;

function execute() {
  if (page && !page.closed) {
    page.close();
    button.textContent = "খুলুন";
  } else {
    page = document.open("", "_blank", "width=400,height=250");
    page.document.write("<h2>প্রোগ্রামিং শিখুন</h2>");
    button.textContent = "বন্ধ করুন";
  }
}
</script>

</body>
</html>

append - ডকুমেন্টে নতুন নোড যুক্ত করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">যোগ</button>

<script>
function execute() {
  document.body.append("প্রোগ্রামিং শিখুন");
}
</script>

</body>
</html>

prepend - ডকুমেন্টের শুরুতে নতুন নোড যুক্ত করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">যোগ</button>

<div id="result">হ্যালো</div>

<script>
function execute() {
  result.prepend("বিশ্ব ");
}
</script>

</body>
</html>

adoptNode - অন্য ডকুমেন্টের নোড গ্রহণ করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<div id="result"></div>

<button onclick="adopt()">click to view result</button>

<script>
function adopt() {
  const other = document.implementation.createHTMLDocument();
  const node = other.createElement("p");
  node.textContent = "প্রোগ্রামিং শিখুন";

  result.append(document.adoptNode(node));
}
</script>

</body>
</html>

createAttribute - নতুন অ্যাট্রিবিউট তৈরি করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<p id="result">হ্যালো বিশ্ব</p>
<button onclick="execute()">ক্রিয়েট</button>

<script>
function execute() {
  const attribute = document.createAttribute("title");
  attribute.value = "প্রোগ্রামিং শিখুন";

  result.setAttributeNode(attribute);
}
</script>

</body>
</html>

createDocumentFragment - নতুন ডকুমেন্ট ফ্র্যাগমেন্ট তৈরি করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<div id="result"></div>

<button onclick="execute()">ক্রিয়েট</button>

<script>
function execute() {
  const fragment = document.createDocumentFragment();

  const first = document.createElement("p");
  first.textContent = "এইচটিএমএল";

  const second = document.createElement("p");
  second.textContent = "সিএসএস";

  fragment.append(first, second);
  result.append(fragment);
}
</script>

</body>
</html>

createElement - নতুন এলিমেন্ট তৈরি করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<div id="result"></div>

<button onclick="execute()">click to view result</button>

<script>
function execute() {
  const node = document.createElement("p");

  node.textContent = "প্রোগ্রামিং শিখুন";

  result.append(node);
}
</script>

</body>
</html>

createEvent - নতুন ইভেন্ট তৈরি করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button id="button">ক্রিয়েট</button>

<script>
function execute() {
  const event = document.createEvent("Event");

  event.initEvent("custom", true, true);

  button.dispatchEvent(event);
}

button.addEventListener("custom", () => {
  button.textContent = "ইভেন্ট";
});

execute();
</script>

</body>
</html>

createExpression - নতুন এক্সপ্রেশন তৈরি করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<p id="result">হ্যালো বিশ্ব</p>
<button onclick="execute()">ক্রিয়েট</button>

<script>
function execute() {
  if (document.createExpression) {
    const expression = document.createExpression(
      "1 + 2",
      document
    );

    result.textContent = expression.evaluate(
      document,
      XPathResult.STRING_TYPE
    ).stringValue;
  } else {
    result.textContent = "প্রোগ্রামিং শিখুন";
  }
}
</script>

</body>
</html>

createNodeIterator - ডকুমেন্টের নোড পর্যায়ক্রমে অ্যাক্সেস করার ইটারেটর তৈরি করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<div id="source">
  <p>এইচটিএমএল</p>
  <p>সিএসএস</p>
</div>

<button onclick="execute()">ক্রিয়েট</button>

<p id="result"></p>

<script>
function execute() {
  const iterator = document.createNodeIterator(
    source,
    NodeFilter.SHOW_ELEMENT
  );

  let node;
  let names = [];

  while (node = iterator.nextNode()) {
    names.push(node.nodeName);
  }

  result.textContent = names.join(", ");
}
</script>

</body>
</html>

createProcessingInstruction - নতুন প্রসেসিং নির্দেশনা তৈরি করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<p id="result">ফলাফল</p>

<button onclick="execute()">ক্রিয়েট</button>

<script>
function execute() {
  const node = document.createProcessingInstruction(
    "xml-stylesheet",
    'type="text/css" href="style.css"'
  );

  result.textContent =
    node.target + " " + node.data;
}
</script>

</body>
</html>

createRange - ডকুমেন্টের নির্দিষ্ট অংশের রেঞ্জ তৈরি করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<p id="text">প্রোগ্রামিং শিখুন</p>

<button onclick="execute()">ক্রিয়েট</button>

<p id="result"></p>

<script>
function execute() {
  const range = document.createRange();

  range.selectNodeContents(text);

  result.textContent = range.toString();
}
</script>

</body>
</html>

createTextNode - নতুন টেক্সট নোড তৈরি করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<div id="result"></div>

<button onclick="execute()">ক্রিয়েট</button>

<script>
function execute() {
  const text = document.createTextNode("প্রোগ্রামিং শিখুন");

  result.append(text);
}
</script>

</body>
</html>

createTreeWalker - ডকুমেন্টের নোড পর্যায়ক্রমে অতিক্রম করার ট্রি ওয়াকার তৈরি করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<div id="source">
  <p>এইচটিএমএল</p>
  <p>সিএসএস</p>
</div>

<button onclick="execute()">ফলাফল</button>

<p id="result"></p>

<script>
function execute() {
  const walker = document.createTreeWalker(
    source,
    NodeFilter.SHOW_ELEMENT
  );

  let node;
  let names = [];

  while (node = walker.nextNode()) {
    names.push(node.nodeName);
  }

  result.textContent = names.join(", ");
}
</script>

</body>
</html>

getElementsByTagName - ট্যাগের নাম অনুযায়ী এলিমেন্টগুলোর তালিকা বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>

<ul>
  <li>পিএইচপি</li>
  <li>জাভা</li>
  <li>পাইথন</li>
  <li>জাভাস্ক্রিপ্ট</li>
</ul>

<script>
function execute() {
  const elements = document.getElementsByTagName("li");

  for (let i = 0; i < elements.length; i++) {
    elements[i].style.color = "pink";
  }
}
</script>

</body>
</html>

getElementById - আইডি অনুযায়ী একটি এলিমেন্ট বের করার উদাহরণ।

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.getElementById("list").style.color = "pink";
}
</script>

</body>
</html>

getElementsByClassName - ক্লাসের নাম অনুযায়ী এলিমেন্টগুলোর তালিকা বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">পরিবর্তন</button>


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

<script>
function execute() {
  const elements = document.getElementsByClassName("desc");

  for (let i = 0; i < elements.length; i++) {
    elements[i].style.color = "pink";
  }
}
</script>

</body>
</html>

getElementsByName - নামের ভিত্তিতে এলিমেন্টগুলোর তালিকা বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>
<input name="name" value="আরিফ">

<script>
function execute() {
  alert(document.getElementsByName("name")[0].value);
}
</script>

</body>
</html>

querySelector - নির্বাচক অনুযায়ী প্রথম এলিমেন্ট বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>

<ul class="list">
  <li>পিএইচপি</li>
  <li>জাভা</li>
  <li>পাইথন</li>
  <li>জাভাস্ক্রিপ্ট</li>
</ul>

<script>
function execute() {
  document.querySelector(".list").style.color = "pink";
}
</script>

</body>
</html>

querySelectorAll - নির্বাচক অনুযায়ী সকল এলিমেন্ট বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>


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

<script>
function execute() {
  const elements = document.querySelectorAll(".desc");

  for (let i = 0; i < elements.length; i++) {
    elements[i].style.color = "tomato";
  }
}
</script>

</body>
</html>

getAnimations - ডকুমেন্টের অ্যানিমেশনগুলোর তালিকা বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<head>
<style>
#box {
  width: 100px;
  height: 100px;
  background: orange;
  animation: move 3s infinite alternate;
}

@keyframes move {
  to {
    transform: translateX(200px);
  }
}
</style>
</head>
<body>

<button onclick="execute()">ফলাফল</button><br>
<div id="box"></div>

<script>
function execute() {
  box.style.background = "pink";
}
</script>

</body>
</html>

hasFocus - ডকুমেন্টে ফোকাস আছে কিনা যাচাই করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="check()">ফলাফল</button>

<p id="result"></p>

<script>
function check() {
  result.textContent = document.hasFocus() ? "ফোকাস" : "";
}
</script>

</body>
</html>

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

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

নাম বিবরণ
doctype ডকুমেন্টের ডকটাইপ তথ্য নির্ধারণ করতে ব্যবহৃত হয়।
characterSet ডকুমেন্টের অক্ষর সেটের নাম বের করতে ব্যবহৃত হয়।
title ডকুমেন্টের শিরোনাম নির্ধারণ করতে ব্যবহৃত হয়।
head ডকুমেন্টের হেড উপাদান অ্যাক্সেস করতে ব্যবহৃত হয়।
body ডকুমেন্টের বডি উপাদান অ্যাক্সেস করতে ব্যবহৃত হয়।
embeds ডকুমেন্টে এমবেড করা উপাদানগুলোর তালিকা বের করতে ব্যবহৃত হয়।
images ডকুমেন্টের ছবিগুলোর তালিকা বের করতে ব্যবহৃত হয়।
forms ডকুমেন্টের ফর্মগুলোর তালিকা বের করতে ব্যবহৃত হয়।
links ডকুমেন্টের লিংকগুলোর তালিকা বের করতে ব্যবহৃত হয়।
scripts ডকুমেন্টের স্ক্রিপ্টগুলোর তালিকা বের করতে ব্যবহৃত হয়।
compatMode ডকুমেন্টের সামঞ্জস্যপূর্ণ মোড বের করতে ব্যবহৃত হয়।
contentType ডকুমেন্টের কনটেন্টের ধরন বের করতে ব্যবহৃত হয়।
cookie ডকুমেন্টের কুকির তথ্য অ্যাক্সেস করতে ব্যবহৃত হয়।
activeElement ডকুমেন্টের সক্রিয় এলিমেন্ট বের করতে ব্যবহৃত হয়।
adoptedStyleSheets ডকুমেন্টের গৃহীত স্টাইলশিটগুলোর তালিকা নির্ধারণ করতে ব্যবহৃত হয়।
currentScript বর্তমানে চলমান স্ক্রিপ্টের উপাদান বের করতে ব্যবহৃত হয়।
defaultView ডকুমেন্টের ডিফল্ট উইন্ডো অবজেক্ট বের করতে ব্যবহৃত হয়।
documentElement ডকুমেন্টের মূল এলিমেন্ট অ্যাক্সেস করতে ব্যবহৃত হয়।
documentURI ডকুমেন্টের ইউআরআই বের করতে ব্যবহৃত হয়।
domain ডকুমেন্টের ডোমেইন বের করতে ব্যবহৃত হয়।
fullscreenElement ফুলস্ক্রিনে থাকা এলিমেন্ট বের করতে ব্যবহৃত হয়।
implementation ডকুমেন্টের বাস্তবায়ন তথ্য অ্যাক্সেস করতে ব্যবহৃত হয়।
lastModified ডকুমেন্টের সর্বশেষ পরিবর্তনের সময় বের করতে ব্যবহৃত হয়।
location ডকুমেন্টের অবস্থানের তথ্য অ্যাক্সেস করতে ব্যবহৃত হয়।
pictureInPictureElement পিকচার-ইন-পিকচার অবস্থায় থাকা এলিমেন্ট বের করতে ব্যবহৃত হয়।
plugins ডকুমেন্টে ব্যবহৃত প্লাগইনগুলোর তালিকা বের করতে ব্যবহৃত হয়।
readyState ডকুমেন্টের প্রস্তুতির অবস্থা বের করতে ব্যবহৃত হয়।
referrer ডকুমেন্টে আসার পূর্ববর্তী পেজের ঠিকানা বের করতে ব্যবহৃত হয়।
scrollingElement ডকুমেন্টের স্ক্রল করা এলিমেন্ট বের করতে ব্যবহৃত হয়।
styleSheets ডকুমেন্টের স্টাইলশিটগুলোর তালিকা বের করতে ব্যবহৃত হয়।
visibilityState ডকুমেন্টের দৃশ্যমানতার অবস্থা বের করতে ব্যবহৃত হয়।
open ডকুমেন্টে লেখা বা নতুন কনটেন্টের জন্য ডকুমেন্ট খুলতে ব্যবহৃত হয়।
close ডকুমেন্ট বন্ধ করতে ব্যবহৃত হয়।
append ডকুমেন্টে নতুন নোড যুক্ত করতে ব্যবহৃত হয়।
prepend ডকুমেন্টের শুরুতে নতুন নোড যুক্ত করতে ব্যবহৃত হয়।
adoptNode অন্য ডকুমেন্টের নোড গ্রহণ করতে ব্যবহৃত হয়।
createAttribute নতুন অ্যাট্রিবিউট তৈরি করতে ব্যবহৃত হয়।
createDocumentFragment নতুন ডকুমেন্ট ফ্র্যাগমেন্ট তৈরি করতে ব্যবহৃত হয়।
createElement নতুন এলিমেন্ট তৈরি করতে ব্যবহৃত হয়।
createEvent নতুন ইভেন্ট তৈরি করতে ব্যবহৃত হয়।
createExpression নতুন এক্সপ্রেশন তৈরি করতে ব্যবহৃত হয়।
createNodeIterator ডকুমেন্টের নোড পর্যায়ক্রমে অ্যাক্সেস করার ইটারেটর তৈরি করতে ব্যবহৃত হয়।
createProcessingInstruction নতুন প্রসেসিং নির্দেশনা তৈরি করতে ব্যবহৃত হয়।
createRange ডকুমেন্টের নির্দিষ্ট অংশের রেঞ্জ তৈরি করতে ব্যবহৃত হয়।
createTextNode নতুন টেক্সট নোড তৈরি করতে ব্যবহৃত হয়।
createTreeWalker ডকুমেন্টের নোড পর্যায়ক্রমে অতিক্রম করার ট্রি ওয়াকার তৈরি করতে ব্যবহৃত হয়।
getElementsByTagName ট্যাগের নাম অনুযায়ী এলিমেন্টগুলোর তালিকা বের করতে ব্যবহৃত হয়।
getElementById আইডি অনুযায়ী একটি এলিমেন্ট বের করতে ব্যবহৃত হয়।
getElementsByClassName ক্লাসের নাম অনুযায়ী এলিমেন্টগুলোর তালিকা বের করতে ব্যবহৃত হয়।
getElementsByName নামের ভিত্তিতে এলিমেন্টগুলোর তালিকা বের করতে ব্যবহৃত হয়।
querySelector নির্বাচক অনুযায়ী প্রথম এলিমেন্ট বের করতে ব্যবহৃত হয়।
querySelectorAll নির্বাচক অনুযায়ী সকল এলিমেন্ট বের করতে ব্যবহৃত হয়।
getAnimations ডকুমেন্টের অ্যানিমেশনগুলোর তালিকা বের করতে ব্যবহৃত হয়।
hasFocus ডকুমেন্টে ফোকাস আছে কিনা যাচাই করতে ব্যবহৃত হয়।