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

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

হোম-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


 

জাভাস্ক্রিপ্ট অবজেক্ট(Object)


বাস্তব জীবনের অবজেক্ট, প্রোপার্টি, এবং মেথড

বাস্তব জীবনে, একটি গাড়ি হল অবজেক্ট। একটি গাড়ির ওজন এবং রং প্রোপার্টি, মেথড হচ্ছে গাড়ি চালু করা বা বন্ধ করাঃ

অবজেক্ট প্রোপার্টি মেথড

car.name = Lamborghini

car.model = 500

car.weight = 850kg

car.color = white

car.start()

car.drive()

car.brake()

car.stop()

সব গাড়ির একই ধরনের প্রোপার্টি থাকে, কিন্তু বিভিন্ন গাড়ির বিভিন্ন ধরনের প্রোপার্টি ভ্যালু থাকে।

সব গাড়ির একই ধরনের মেথড থাকে, কিন্তু মেথডগুলো বিভিন্ন সময়ে সম্পাদন হয়।


জাভাস্ক্রিপ্ট অবজেক্ট

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

এই কোডে car নামের একটি ভ্যারিয়েবলে একটি সাধারণ ভ্যালু এসাইন করা হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>

<h4>একটি জাভাস্ক্রিপ্ট ভেরিয়েবল তৈরি </h4>

<p id="test"></p>

<script>
var person = "Tamim";
document.getElementById("test").innerHTML = person;
</script>

</body>
</html>

ফলাফল



অবজেক্টও এক ধরনের ভ্যারিয়েবল। কিন্তু অবজেক্ট এক সাথে অনেক ভ্যালু ধারন করতে পারে।

এই কোডে member নামের ভ্যারিয়েবলে একসাথে অনেক ভ্যালু(Azizur, Rahman, 32, black) এসাইন করা হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>

<h4>একটি জাভাস্ক্রিপ্ট অবজেক্ট তৈরি </h4>

<p id="test"></p>

<script>
var member = {firstName:"Azizur", lastName:"Rahman", age:32, eyeColor:"black"};
document.getElementById("test").innerHTML = member.eyeColor;
</script>

</body>
</html>

ফলাফল



ভ্যালুগুলো name:value আকারে জোড়ায় জোড়ায় লিখা হয়েছে (name and value কোলন দ্বারা আলাদা করা হয়েছে)।

জাভাস্ক্রিপ্ট অবজেক্ট নামযুক্ত ভ্যালু(eyeColor:"black") ধারন করে।


অবজেক্ট প্রোপার্টি

name:value এর জোড়াকে জাভাস্ক্রিপ্ট অবজেক্টে প্রোপার্টি বলা হয়।

var member = {firstName:"Azizur", lastName:"Rahman", age:32, eyeColor:"black"};
প্রোপার্টি প্রোপার্টি ভ্যালু
firstName Azizur
lastName Rahman
age 50
eyeColor black

অবজেক্ট মেথড

অবজেক্টের উপর সম্পাদিত কাজকেই মেথড বলে।

মেথডকে ফাংশন ডেফিনেশন আকারে প্রোপার্টির মধ্যে জমা রাখতে হয়।

প্রোপার্টি প্রোপার্টি ভ্যালু
firstName Azizur
lastName Rahman
age 50
eyeColor black
fullName function() {return this.firstName + " " + this.lastName;}

জাভাস্ক্রিপ্ট অবজেক্ট হলো প্রোপার্টি এবং মেথডের কন্টেইনার।


অবজেক্টের সংজ্ঞা

অবজেক্ট লিটারালের(object literal) মাধ্যমে আপনি একটি জাভাস্ক্রিপ্ট অবজেক্ট তৈরি করতে পারেনঃ

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>

<h4>একটি জাভাস্ক্রিপ্ট অবজেক্ট তৈরি </h4>

<p id="test"></p>

<script>
var member = {firstName:"Azizur", lastName:"Rahman", age:32, eyeColor:"black"};
document.getElementById("test").innerHTML =
member.firstName + " " + member.lastName + " " + "এর বয়স" + " " + member.age + " " + " বছর।";
</script>

</body>
</html>

ফলাফল



অবজেক্ট ডেফিনেশনে স্পেস এবং লাইন ব্রেক(line break) গুরুত্বপূর্ণ নয়। একটি অবজেক্ট ডেফিনেশনকে একাধিক লাইনে লেখা যেতে পারেঃ

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>

<h4>একটি জাভাস্ক্রিপ্ট অবজেক্ট তৈরি </h4>

<p id="test"></p>

<script>
var member = {
    firstName:"Azizur", 
    lastName:"Rahman", 
    age:32, 
    eyeColor:"black"
};
document.getElementById("test").innerHTML =
member.firstName + " " + member.lastName + " " + "এর বয়স" + " " + member.age + " " + " বছর।";
</script>

</body>
</html>

ফলাফল




অবজেক্টের প্রোপার্টি এক্সেস

আপনি দুইভাবে অবজেক্টের প্রোপার্টিকে এক্সেস করতে পারেনঃ

objectName.propertyName

অথবা

objectName["propertyName"]

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>

<h4> একটি অবজেক্ট প্রোপার্টি একসেস করার দুইটি উপায় আছেঃ
</h4>
<h4>আপনি  member.property অথবা  member["property"]
ব্যবহার করতে পারেন। </p>

<p id="test"></p>

<script>
var member = {firstName:"Azizur", lastName:"Rahman", age:32, eyeColor:"black"};
document.getElementById("test").innerHTML = member.eyeColor;
</script>

</body>
</html>

ফলাফল



উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>

<h4> একটি অবজেক্ট প্রোপার্টি একসেস করার দুইটি উপায় আছেঃ
</h4>
<h4>আপনি  member.property অথবা  member["property"]
ব্যবহার করতে পারেন। </p>

<p id="test"></p>

<script>
var member = {firstName:"Azizur", lastName:"Rahman", age:32, eyeColor:"black"};
document.getElementById("test").innerHTML = member["eyeColor"];
</script>

</body>
</html>

ফলাফল




অবজেক্টের মেথড এক্সেস

আপনি নিম্নলিখিত পদ্ধতিতে অবজেক্টের মেথডকে এক্সেস করতে পারবেনঃ

objectName.methodName()

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>

<h4>একটি অবজেক্ট মেথড তৈরি এবং ব্যবহার।
</h4>
<h4>ফাংশন ডেফিনেশন হচ্ছে একটি অবজেক্ট মেথড যা প্রোপার্টি ভ্যালু হিসেবে ধারন করে। </p>

<p id="test"></p>

<script>
var member = {firstName:"Azizur", lastName:"Rahman", age:32, eyeColor:"black", fullName : function() {
       return this.firstName + " " + this.lastName;
    }};
document.getElementById("test").innerHTML = member.fullName();
</script>

</body>
</html>

ফলাফল



যদি আপনি fullName মেথডকে () ছাড়া এক্সেস করতে চান তবে এটি আপনাকে ফাংশন ডেফিনেশনকে হুবুহু রিটার্ন করবেঃ

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>

<h4>একটি অবজেক্ট মেথড হচ্ছে একটি ফাংশন ডেফিনেশন যা প্রোপার্টি ভ্যালু হিসেবে জমা থাকে। 
</h4>
<h4>আপনি যদি () ছাড়া একসেস করেন, তবে ফাংশন ডেফিনেশন রিটার্ন করতে পারবেনঃ </p>

<p id="test"></p>

<script>
var member = {firstName:"Azizur", lastName:"Rahman", age:32, eyeColor:"black", fullName : function() {
       return this.firstName + " " + this.lastName;
    }};
document.getElementById("test").innerHTML = member.fullName;
</script>

</body>
</html>

ফলাফল



একটি প্রোপার্টির ভ্যালু হিসেবে যখন ফাংশন ডেফিনেশন রাখা হয় তখন ঐ প্রোপার্টিকে মেথড বলা হয়।


কখনোই Strings, Numbers, এবং Booleans কে অবজেক্ট হিসেবে ডিক্লেয়ার করা উচিত না!

জাভাস্ক্রিপ্টে একটি ভ্যারিয়েবলকে "new" কিওয়ার্ড দ্বারা ডিক্লেয়ার করলে ঐ ভ্যারিয়েবলটি একটি অবজেক্ট হয়ে যায়ঃ

var a = new String();        // এখানে a কে String অবজেক্ট হিসেবে ডিক্লেয়ার করা হয়েছে
var b = new Number();        // এখানে b কে Number অবজেক্ট হিসেবে ডিক্লেয়ার করা হয়েছে
var c = new Boolean();       // এখানে c কে Boolean অবজেক্ট হিসেবে ডিক্লেয়ার করা হয়েছে

String, Number এবং Boolean অবজেক্ট তৈরি করা থেকে বিরত থাকুন। এইগুলো আপনার কোডকে জটিল এবং সম্পাদনের গতি কমিয়ে দেয়।

আপনি এই টিউটোরিয়ালের পরবর্তী পরিচ্ছেদে অবজেক্ট সম্পর্কে আরো জানতে পারবেন।