জাভাস্ক্রিপ্ট অবজেক্ট(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 অবজেক্ট তৈরি করা থেকে বিরত থাকুন। এইগুলো আপনার কোডকে জটিল এবং সম্পাদনের গতি কমিয়ে দেয়।
আপনি এই টিউটোরিয়ালের পরবর্তী পরিচ্ছেদে অবজেক্ট সম্পর্কে আরো জানতে পারবেন।