জাভাস্ক্রিপ্ট জেকুয়েরি এঙ্গুলার জেএস এইচটিএমএল সিএসএস বুটস্ট্রাপ পিএইচপি সি প্রোগ্রামিং
ফোরাম
×

জেএস টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction ব্যবহার-Uses গঠনপ্রণালী-Syntax আউটপুট-Output তথ্যের ধরণ-Data Type চলক-Variable স্টেটমেন্ট-Statement মন্তব্য-Comment অপারেটর-Operator গণিত-Arithmetic এসাইনমেন্ট-Assignment ফাংশন-Function অবজেক্ট-Object স্কোপ-Scope ইভেন্ট-Event ধরণ পরিবর্তন-Type Conversion রেগুলার এক্সপ্রেশন-RegExp ভুল-Error জেসন-JSON হয়েস্টিং-Hoisting

কন্ট্রোল স্টেটমেন্ট

বুলিয়ান-Boolean তুলনা-Comparison শর্তাবলী-Condition সুইচ-Switch ফর লুপ- For Loop হোয়াইল লুপ-While Loop ব্রেক-Break এবং কন্টিনিউ-continue

স্ট্রিং এবং অ্যারে

স্ট্রিং-String স্ট্রিং পদ্ধতি-String Method অ্যারে-Array অ্যারে পদ্ধতি -Array Method অ্যারে সর্ট-ArraySort

সংখ্যা, গণিত ও তারিখ

সংখ্যা-Number সংখ্যা পদ্ধতি-Number Method গণিত-Math তারিখ-Date তারিখ বিন্যাস-Date Format তারিখ পদ্ধতি-Date Method

জেএস ফাংশন-Function

ফাংশনের সংজ্ঞা-Definition ফাংশন প্যারামিটার-Parameter ফাংশনকে ডাকা-Invocation ফাংশন ক্লোজার-Closure

জেএস অবজেক্ট-Object

অবজেক্টের সংজ্ঞা-Definition অবজেক্ট প্রোপার্টি-Property অবজেক্ট মেথড-Method অবজেক্ট প্রোটোটাইপ-Prototype

জেএস ফর্ম-Form

ফর্ম বৈধকরণ-Validation ফর্ম এপিআই-API

জেএস এইচটিএমএল ডোম-DOM

ডোম(DOM) পরিচিতি ডোম মেথড-Method ডোম ডকুমেন্ট-Document ডোম এলিমেন্ট -Element ডোম এইচটিএমএল-HTML ডোম সিএসএস-CSS ডোম অ্যানিমেশন-Animation ডোম ঘটনা-Event ডোম ইভেন্টলিসেনার-EventListener ডোম নেভিগেশন-Navigation ডোম নোড-Node ডোম নোডতালিকা-Nodelist

জেএস ব্রাউজার বোম-BOM

উইন্ডো-Window স্ক্রিন-Screen লোকেশন-Location হিস্টোরি-History নেভিগেটর-Navigator পপআপ এলার্ট-Popup Alert টাইমিং-Timing কুকি-Cookie

জেএস রেফারেন্স

জাভাস্ক্রিপ্ট অবজেক্ট এইচটিএমএল ডোম অবজেক্ট অপারেটর-Operator স্টেটমেন্ট-Statement অ্যারে-Array বুলিয়ান-Boolean স্ট্রিং-String সংখ্যা-Number রেগুলার এক্সপ্রেশন-RegExp গণিত-Math তারিখ-Date গ্লোবাল-Global কনভার্শন-Conversion


 

জাভাস্ক্রিপ্ট এইচটিএমএল ডোম নেভিগেশন


এইচটিএমএল ডোমের সাহায্যে আপনি নোডের সম্পর্ক ব্যবহার করে নোড ট্রি নেভিগেট করতে পারেন।


ডোম নোড

W3C এর এইচটিএমএল ডোমের স্ট্যান্ডার্ড অনুযায়ী, একটি এইচটিএমএল ডকুমেন্টের সবকিছুই একটি নোডঃ

  • সম্পূর্ণ ডকুমেন্ট একটি ডকুমেন্ট নোড
  • প্রতিটি এইচটিএমএল এলিমেন্ট একটি এলিমেন্ট নোড
  • এইচটিএমএল এলিমেন্টের ভিতরের টেক্সট হচ্ছে টেক্সট নোড
  • প্রতিটি এইচটিএমএল এট্রিবিউট হলো এট্রিবিউট নোড
  • সকল কমেন্ট হচ্ছে কমেন্ট নোড
DOM HTML tree

এইচটিএমএল ডোমের মাধ্যমে নোড ট্রির সকল নোডকে জাভাস্ক্রিপ্ট দ্বারা এক্সেস করা যাবে।

নতুন নোড তৈরি করা যাবে এবং সমস্ত নোড পরিবর্তন বা বাদ দেওয়া যাবে।


নোডের সম্পর্ক

এই সম্পর্ককে বর্ণনা করতে প্যারেন্ট,চাইল্ড এবং সিবলিং ব্যবহার করা হয়।

  • একটি নোড ট্রির মধ্যে সবচেয়ে উপরের নোডকে রুট(বা রুট নোড) বলা হয়
  • প্রতিটি নোডের শুধুমাত্র একটাই প্যারেন্ট থাকে, রুট ছাড়া (যার কোন প্যারেন্ট নেই)
  • একটি নোডের অনেকগুলো চিলড্রেন থাকতে পারে
  • সিবলিং(ব্রাদারস-সিস্টারস) হলো সেই নোড যাদের একই প্যারেন্ট থাকে
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>

<h1>ডোম টিউটোরিয়াল</h1>
<p>স্যাট একাডেমী</p>

</body>
</html>
Node tree

উপরের এইচটিএমএল থেকে আমরা যা শিখলামঃ

  • <html> হচ্ছে একটি রুট নোড
  • <html> এর কোন প্যারেন্ট নেই
  • <html> হচ্ছে <head> এবং<body> এর প্যারেন্ট
  • <head>হচ্ছে <html>এর প্রথম চাইল্ড
  • <body> হলো <html> এর শেষ চাইল্ড

এবং

  • <head> এর একটি চাইল্ড আছেঃ <title>
  • <title> এর একটি চাইল্ড টেক্সট নোড রয়েছেঃ "জাভাস্ক্রিপ্ট উদাহরণ"
  • <body> এর দুইটি চাইল্ড আছেঃ <h1> এবং <p>
  • <h1> এর একটি চাইল্ড আছেঃ "ডোম টিউটোরিয়াল"
  • <p> এর একটি চাইল্ড আছেঃ "স্যাট একাডেমী"
  • <h1> এবং <p> হচ্ছে সিবলিং

নোডের মধ্যে নেভিগেট করা

আপনি জাভাস্ক্রিপ্ট দিয়ে নোডের মধ্যে নেভিগেট করতে নিম্নলিখিত নোড প্রোপার্টি ব্যবহার করতে পারেনঃ

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

সতর্কতা!

ডোম(DOM) প্রক্রিয়াকরণে একটি ভুল ধারণা হলো একটি এলিমেন্ট নোডে শুধু টেক্সট থাকবে।

এই উদাহরণেঃ <title>ডোম টিউটোরিয়াল</title>, এলিমেন্ট নোড <title> টেক্সট ধারণ করে না। এটি "ডোম টিউটোরিয়াল" ভ্যালুসহ একটি টেক্সট নোড(text node) ধারণ করে।

নোডের innerHTMLপ্রোপারটি অথবা nodeValue দ্বারা টেক্সট নোডের ভ্যালু এক্সেস করা যেতে পারে।


চাইল্ড নোড এবং নোড ভ্যালু

innerHTML প্রোপারটি ছাড়াও আপনি একটি এলিমেন্টের কন্টেন্টকে পেতে childNodes এবং nodeValue প্রোপারটি ব্যবহার করতে পারেন।

নিম্নলিখিত উদাহরণে আমরা একটি <h1> এলিমেন্টের নোড ভ্যালুকে সংগ্রহ করে এবং একটি <p> এলিমেন্টে ব্যবহার করেছি।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>

<h3 id="heading">জাভাস্ক্রিপ্ট টিউটোরিয়াল</h3>

<p id="test">হ্যালো</p>

<script>
var headingText = document.getElementById("heading").childNodes[0].nodeValue;
document.getElementById("test").innerHTML = headingText;
</script>
</body>
</html>

ফলাফল



উপরোক্ত উদাহরণে getElementById হলো একটি মেথড, childNodes এবং nodeValue হচ্ছে প্রোপার্টি।

এই টিউটোরিয়ালে innerHTML প্রোপার্টি ব্যবহার করা হয়েছে। তবে ট্রি স্ট্রাকচার এবং ডোমের নেভিগেশন জানার জন্য উপরোক্ত মেথডটি অবশ্যই শেখা প্রয়োজন।

firstChild প্রোপারটির ব্যবহার এবং childNodes[0] এর ব্যবহার একই রকমঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>

<h3 id="heading">জাভাস্ক্রিপ্ট টিউটোরিয়াল</h3>

<p id="test">হ্যালো</p>

<script>
var headingText = document.getElementById("heading").firstChild.nodeValue;
document.getElementById("test").innerHTML = headingText;
</script>
</body>
</html>

ফলাফল




ডোম রুট নোড

শুধুমাত্র দুটি উপায়ে সম্পূর্ণ ডকুমেন্টকে এক্সেস করা যায়ঃ

  • document.body - ডকুমেন্টের বডি
  • document.documentElement - সম্পূর্ণ ডকুমেন্ট

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>

<h3>জাভাস্ক্রিপ্ট টিউটোরিয়াল</h3>

<p>স্যাট একাডেমী</p>

<button onclick="myFunc()">ক্লিক করুন</button>

<script>
function myFunc(){
  alert(document.body.innerHTML);
}
</script>
</body>
</html>

ফলাফল




উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>

<h3>জাভাস্ক্রিপ্ট টিউটোরিয়াল</h3>

<p>স্যাট একাডেমী</p>

<button onclick="myFunc()">ক্লিক করুন</button>

<script>
function myFunc(){
  alert(document.documentElement.innerHTML);
}
</script>
</body>
</html>

ফলাফল




nodeName প্রোপার্টি

nodeName প্রোপার্টি দ্বারা একটি নোডের নাম নির্দেশ করা হয়।

  • nodeName প্রোপার্টি read-only
  • একটি এলিমেন্ট নোডের nodeName এবং TagName একই রকম
  • একটি এট্রিবিউট নোডের nodeName হলো এট্রিবিউটের নাম
  • একটি টেক্সট নোডের nodeName সবসময় #text হয়
  • ডকুমেন্ট নোডের nodeName সবসময় #document হয়

নোটঃ nodeName সবসময় একটি এইচটিএমএল এলিমেন্টের বড়হাতের অক্ষরের ট্যাগ নাম ধারণ করে।


nodeValue প্রোপার্টি

nodeValue প্রোপার্টি একটি নোডের ভ্যালু নির্দেশ করে।

  • এলিমেন্ট নোডের nodeValue এর ভ্যালু undefined থাকে
  • টেক্সট নোডের nodeValue ঐ টেক্সটকেই নির্দেশ করে
  • এট্রিবিউট নোডের nodeValue হলো এট্রিবিউটের ভ্যালু

nodeType প্রোপার্টি

nodeType প্রোপার্টি নোডের টাইপ রিটার্ন করে। nodeType হলো read only প্রোপার্টি।

সবচেয়ে গুরুত্বপূর্ণ নোড টাইপগুলো হচ্ছেঃ

ইলিমেন্ট টাইপ নোডটাইপ
Element
Attribute
Text
Comment
Document