জাভাস্ক্রিপ্ট
🌈জাভাস্ক্রিপ্ট কি?
📋জাভাস্ক্রিপ্ট হলো ডকুমেন্ট পরিচালনা করার পদ্ধতি।
⚒️জাভাস্ক্রিপ্ট ডকুমেন্ট পরিচালনা করতে ব্যবহৃত হয়।
জাভাস্ক্রিপ্ট সমূহ
জাভাস্ক্রিপ্ট এবং সেগুলোর ব্যবহারের তালিকা
- ➡️ 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 - ডকুমেন্টের ডকটাইপ তথ্য নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<body>
<script>
document.write(document.doctype.name);
</script>
</body>
</html>
characterSet - ডকুমেন্টের অক্ষর সেটের নাম বের করার উদাহরণ।
<!DOCTYPE html>
<html>
<body>
<script>
document.write(document.characterSet);
</script>
</body>
</html>
title - ডকুমেন্টের শিরোনাম নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<title>প্রোগ্রামিং শিখুন</title>
</head>
<body>
<script>
document.write(document.title);
</script>
</body>
</html>
head - ডকুমেন্টের হেড উপাদান অ্যাক্সেস করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="প্রোগ্রামিং টিউটোরিয়াল">
</head>
<body>
<script>
console.log(document.head);
</script>
</body>
</html>
body - ডকুমেন্টের বডি উপাদান অ্যাক্সেস করার উদাহরণ।
<!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 - ডকুমেন্টে এমবেড করা উপাদানগুলোর তালিকা বের করার উদাহরণ।
<!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 - ডকুমেন্টের ছবিগুলোর তালিকা বের করার উদাহরণ।
<!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 - ডকুমেন্টের ফর্মগুলোর তালিকা বের করার উদাহরণ।
<!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 - ডকুমেন্টের লিংকগুলোর তালিকা বের করার উদাহরণ।
<!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 - ডকুমেন্টের স্ক্রিপ্টগুলোর তালিকা বের করার উদাহরণ।
<!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 - ডকুমেন্টের সামঞ্জস্যপূর্ণ মোড বের করার উদাহরণ।
<!DOCTYPE html>
<html>
<body>
<script>
document.write(document.compatMode);
</script>
</body>
</html>
contentType - ডকুমেন্টের কনটেন্টের ধরন বের করার উদাহরণ।
<!DOCTYPE html>
<html>
<body>
<script>
document.write(document.contentType);
</script>
</body>
</html>
cookie - ডকুমেন্টের কুকির তথ্য অ্যাক্সেস করার উদাহরণ।
<!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 - ডকুমেন্টের সক্রিয় এলিমেন্ট বের করার উদাহরণ।
<!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 - ডকুমেন্টের গৃহীত স্টাইলশিটগুলোর তালিকা নির্ধারণ করার উদাহরণ।
<!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 - বর্তমানে চলমান স্ক্রিপ্টের উপাদান বের করার উদাহরণ।
<!DOCTYPE html>
<html>
<body>
<script>
console.log(document.currentScript);
</script>
</body>
</html>
defaultView - ডকুমেন্টের ডিফল্ট উইন্ডো অবজেক্ট বের করার উদাহরণ।
<!DOCTYPE html>
<html>
<body>
<script>
console(document.defaultView);
</script>
</body>
</html>
documentElement - ডকুমেন্টের মূল এলিমেন্ট অ্যাক্সেস করার উদাহরণ।
<!DOCTYPE html>
<html>
<body>
<script>
console.log(document.documentElement);
</script>
</body>
</html>
documentURI - ডকুমেন্টের ইউআরআই বের করার উদাহরণ।
<!DOCTYPE html>
<html>
<body>
<script>
document.write(document.documentURI);
</script>
</body>
</html>
domain - ডকুমেন্টের ডোমেইন বের করার উদাহরণ।
<!DOCTYPE html>
<html>
<body>
<script>
document.write(document.domain);
</script>
</body>
</html>
fullscreenElement - ফুলস্ক্রিনে থাকা এলিমেন্ট বের করার উদাহরণ।
<!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 - ডকুমেন্টের বাস্তবায়ন তথ্য অ্যাক্সেস করার উদাহরণ।
<!DOCTYPE html>
<html>
<body>
<script>
console.log(document.implementation);
</script>
</body>
</html>
lastModified - ডকুমেন্টের সর্বশেষ পরিবর্তনের সময় বের করার উদাহরণ।
<!DOCTYPE html>
<html>
<body>
<script>
document.write(document.lastModified);
</script>
</body>
</html>
location - ডকুমেন্টের অবস্থানের তথ্য অ্যাক্সেস করার উদাহরণ।
<!DOCTYPE html>
<html>
<body>
<script>
document.write(document.location);
</script>
</body>
</html>
pictureInPictureElement - পিকচার-ইন-পিকচার অবস্থায় থাকা এলিমেন্ট বের করার উদাহরণ।
<!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 - ডকুমেন্টে ব্যবহৃত প্লাগইনগুলোর তালিকা বের করার উদাহরণ।
<!DOCTYPE html>
<html>
<body>
<script>
document.write(document.plugins.length);
</script>
</body>
</html>
readyState - ডকুমেন্টের প্রস্তুতির অবস্থা বের করার উদাহরণ।
<!DOCTYPE html>
<html>
<body>
<script>
document.write(document.readyState);
</script>
</body>
</html>
referrer - ডকুমেন্টে আসার পূর্ববর্তী পেজের ঠিকানা বের করার উদাহরণ।
<!DOCTYPE html>
<html>
<body>
<script>
document.write(document.referrer);
</script>
</body>
</html>
scrollingElement - ডকুমেন্টের স্ক্রল করা এলিমেন্ট বের করার উদাহরণ।
<!DOCTYPE html>
<html>
<body style="height:1500px">
<button onclick="document.scrollingElement.scrollTop = 500">
স্ক্রল
</button>
<p style="margin-top:700px">হ্যালো বিশ্ব</p>
</body>
</html>
styleSheets - ডকুমেন্টের স্টাইলশিটগুলোর তালিকা বের করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: pink;
}
</style>
</head>
<body>
<script>
document.write(document.styleSheets.length);
</script>
</body>
</html>
visibilityState - ডকুমেন্টের দৃশ্যমানতার অবস্থা বের করার উদাহরণ।
<!DOCTYPE html>
<html>
<body>
<p id="result">হ্যালো বিশ্ব</p>
<script>
result.textContent = document.visibilityState;
</script>
</body>
</html>
open - ডকুমেন্টে লেখা বা নতুন কনটেন্টের জন্য ডকুমেন্ট খোলার উদাহরণ।
<!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 - ডকুমেন্ট বন্ধ করার উদাহরণ।
<!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 - ডকুমেন্টে নতুন নোড যুক্ত করার উদাহরণ।
<!DOCTYPE html>
<html>
<body>
<button onclick="execute()">যোগ</button>
<script>
function execute() {
document.body.append("প্রোগ্রামিং শিখুন");
}
</script>
</body>
</html>
prepend - ডকুমেন্টের শুরুতে নতুন নোড যুক্ত করার উদাহরণ।
<!DOCTYPE html>
<html>
<body>
<button onclick="execute()">যোগ</button>
<div id="result">হ্যালো</div>
<script>
function execute() {
result.prepend("বিশ্ব ");
}
</script>
</body>
</html>
adoptNode - অন্য ডকুমেন্টের নোড গ্রহণ করার উদাহরণ।
<!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 - নতুন অ্যাট্রিবিউট তৈরি করার উদাহরণ।
<!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 - নতুন ডকুমেন্ট ফ্র্যাগমেন্ট তৈরি করার উদাহরণ।
<!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 - নতুন এলিমেন্ট তৈরি করার উদাহরণ।
<!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 - নতুন ইভেন্ট তৈরি করার উদাহরণ।
<!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 - নতুন এক্সপ্রেশন তৈরি করার উদাহরণ।
<!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 - ডকুমেন্টের নোড পর্যায়ক্রমে অ্যাক্সেস করার ইটারেটর তৈরি করার উদাহরণ।
<!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 - নতুন প্রসেসিং নির্দেশনা তৈরি করার উদাহরণ।
<!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 - ডকুমেন্টের নির্দিষ্ট অংশের রেঞ্জ তৈরি করার উদাহরণ।
<!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 - নতুন টেক্সট নোড তৈরি করার উদাহরণ।
<!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 - ডকুমেন্টের নোড পর্যায়ক্রমে অতিক্রম করার ট্রি ওয়াকার তৈরি করার উদাহরণ।
<!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 - ট্যাগের নাম অনুযায়ী এলিমেন্টগুলোর তালিকা বের করার উদাহরণ।
<!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 - আইডি অনুযায়ী একটি এলিমেন্ট বের করার উদাহরণ।
<!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 - ক্লাসের নাম অনুযায়ী এলিমেন্টগুলোর তালিকা বের করার উদাহরণ।
<!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 - নামের ভিত্তিতে এলিমেন্টগুলোর তালিকা বের করার উদাহরণ।
<!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 - নির্বাচক অনুযায়ী প্রথম এলিমেন্ট বের করার উদাহরণ।
<!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 - নির্বাচক অনুযায়ী সকল এলিমেন্ট বের করার উদাহরণ।
<!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 - ডকুমেন্টের অ্যানিমেশনগুলোর তালিকা বের করার উদাহরণ।
<!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 - ডকুমেন্টে ফোকাস আছে কিনা যাচাই করার উদাহরণ।
<!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 | ডকুমেন্টে ফোকাস আছে কিনা যাচাই করতে ব্যবহৃত হয়। |