জাভাস্ক্রিপ্ট তথ্যের ধরন(Data Type)
জাভাস্ক্রিপ্ট ভ্যারিয়েবল অনেক টাইপের ডাটা জমা রাখতে পারেঃ সংখ্যা(number), স্ট্রিং(string), অ্যারে(array), অবজেক্ট(object) এবং আরো অনেকঃ
var scores = 16; // সংখ্যা
var name = "Tamim"; // স্ট্রিং
var animals = ["Tiger", "Lion", "Elephant"]; // অ্যারে
var a = {firstName:"Azizur", lastName:"Rahman"}; // অবজেক্ট
ডাটা টাইপের ধারনা
প্রোগ্রামিং-এর ক্ষেত্রে, ডাটা টাইপ একটি গুরুত্বপূর্ন বিষয়।
ভ্যারিয়েবল নিয়ে কাজ করতে হলে ডাটা টাইপ জানা খুবই গুরুত্বপূর্ণ।
ডাটা টাইপ ছাড়া কম্পিউটার এগুলোকে(ডাটাকে) সঠিকভাবে সমাধান করতে পারেনাঃ
var a = 28 + "Tamim";
28 এর সাথে "Tamim" যোগ করা কি কোন অর্থ বহন করে? ইহা কি কোন ভুল(error) দেখাবে নাকি ফলাফল দিবে?
জাভাস্ক্রিপ্ট উপরের উদাহরণকে নিচের মত ভাববেঃ
var a = "28" + "Tamim";
যখন সংখ্যাকে স্ট্রিং-এর সাথে যোগ করা হয়, জাভাস্ক্রিপ্ট সংখ্যাকে স্ট্রিং হিসাবে গণ্য করে। |
উদাহরণ
<!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 a = 28 + "Tamim";
document.getElementById("test").innerHTML = a;
</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>
<p id="test"></p>
<script>
var a = "Tamim" + 28;
document.getElementById("test").innerHTML = a;
</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>
<p id="test"></p>
<script>
var a = 28 + 12 + "Tamim";
document.getElementById("test").innerHTML = a;
</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>
<p id="test"></p>
<script>
var a = "Tamim" + 28 + 12;
document.getElementById("test").innerHTML = a;
</script>
</body>
</html>
ফলাফল
প্রথম উদাহরণে, 28 এবং 12কে সংখ্যা হিসাবে বিবেচনা করে যোগ করে তারপর "Tamim" যেহেতু স্ট্রিং তাই জাভাস্ক্রিপ্ট সম্পূর্নটাকে স্ট্রিং বিবেচনা করে।
দ্বিতীয় উদাহরণে, প্রথম অপারেন্ড স্ট্রিং হওয়ায় সকল অপারেন্ডকেই স্ট্রিং হিসাবে গণ্য করা হয়েছে।
জাভাস্ক্রিপ্ট ডায়নামিক ডাটা টাইপ
জাভাস্ক্রিপ্টে ডাটা টাইপ ডায়নামিক। এর অর্থ একই ভ্যারিয়েবলে বিভিন্ন টাইপের ডাটা রাখা যেতে পারেঃ
var a; // এখানে a হচ্ছে undefined
var a = 9; // এখানে a হচ্ছে সংখ্যা(Number)
var a = "Tamim"; // এখানে a হচ্ছে স্ট্রিং(String)
জাভাস্ক্রিপ্ট স্ট্রিং(String)
স্ট্রিং(string) হচ্ছে কিছু অক্ষরের(character) ধারা। যেমন- "আজিজুর রহমান"।
স্ট্রিংকে উদ্ধৃতি(quote) চিহ্নের মধ্যে লিখতে হয়। আপনি সিঙ্গেল অথবা ডাবল কোটেশন ব্যবহার করতে পারেনঃ
var newCar = "Volvo XC60"; // ডাবল কোট ব্যবহার করে
var newCar = 'Volvo XC60'; //সিঙ্গেল কোট ব্যবহার করে
আপনি স্ট্রিং-এর মধ্যেও কোটেশন ব্যবহার করতে পারেন, তবে স্ট্রিং-এর উভয় পাশের কোটেশনের সাথে মিলতে পারবে নাঃ
উদাহরণ
<!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>
<p id="test"></p>
<script>
var wel1 = "Welcome To Satt Academy"
var wel2 = "Welcome To 'Satt' Academy"
var wel3 = 'Welcome To "Satt" Academy'
document.getElementById("test").innerHTML =
wel1 + "<br>" + wel2 + "<br>" + wel3;
</script>
</body>
</html>
ফলাফল
এই টিউটোরিয়ালের পরবর্তী পরিচ্ছেদে স্ট্রিং সম্পর্কে আপনি আরো শিখবেন।
জাভাস্ক্রিপ্ট সংখ্যা
জাভাস্ক্রিপ্টে শুধু এক ধরণের সংখ্যা আছে।
সংখ্যাকে দশমিক অথবা দশমিক ছাড়াও লেখা যায়ঃ
var a = 12.00; // দশমিক(decimals) যুক্ত সংখ্যা
var b = 12; // দশমিক ছাড়া সংখ্যা
অতিরিক্ত বড় অথবা অতিরিক্ত ছোট সংখ্যাকে বৈজ্ঞানিক (exponential) পদ্ধতিতে লেখা যেতে পারেঃ
উদাহরণ
<!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>
<p id="test"></p>
<script>
var a = 12.00;
var b = 12;
var c = 324e4;
var d = 324e-4;
document.getElementById("test").innerHTML = a + "<br>" + b + "<br>" + c + "<br>" + d
</script>
</body>
</html>
ফলাফল
এই টিউটোরিয়ালের পরবর্তী পরিচ্ছেদে সংখ্যা সম্পর্কে আপনি আরো শিখবেন।
জাভাস্ক্রিপ্ট বুলিয়ান(Boolean)
বুলিয়ানের শুধুমাত্র দুইটি মান থাকেঃ true অথবা false ।
var a = true;
var b = false;
শর্ত পরীক্ষা(Condition Test) করার জন্য প্রায়ই বুলিয়ান ব্যবহার করা হয়।
এই টিউটোরিয়ালের পরবর্তী পরিচ্ছেদে শর্ত পরীক্ষা(Condition Test) সম্পর্কে আপনি আরো অনেক কিছু শিখবেন।
জাভাস্ক্রিপ্ট অ্যারে(Array)
জাভাস্ক্রিপ্ট অ্যারেকে তৃতীয় বন্ধনীর(Square Bracket) মাধ্যমে লিখতে হয়।
অ্যারের উপাদানগুলো(items) কমার(,) মাধ্যমে আলাদা করতে হয়।
নিচের উদাহরণে animals নামের একটি অ্যারে ভ্যারিয়েবল ডিক্লেয়ার করা হয়েছে, যার মধ্যে তিনটি মান রয়েছেঃ
উদাহরণ
<!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>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
document.getElementById("test").innerHTML = animals[1];
</script>
</body>
</html>
ফলাফল
অ্যারের ইনডেক্স(index) শুরু হয় 0 দিয়ে, অর্থাৎ প্রথম উপাদানটি হবে [0],দ্বিতীয় উপাদানটি হবে [1], এবং এভাবে চলতে থাকবে।
এই টিউটোরিয়ালের পরবর্তী পরিচ্ছেদে অ্যারে(Array) সম্পর্কে আপনি আরো শিখবেন।
জাভাস্ক্রিপ্ট অবজেক্ট(Object)
দ্বিতীয় বন্ধনীর(curly bracket) মাধ্যমে জাভাস্ক্রিপ্ট অবজেক্ট লেখা হয়।
অবজেক্টের প্রোপার্টিগুলো name:value জোড়া আকারে লিখতে হয়, একাধিক প্রোপার্টিকে কমার(,) মাধ্যমে পৃথক করতে হয়।
উদাহরণ
<!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>
ফলাফল
উপরের উদাহরণে person অবজেক্টের চারটি প্রোপার্টি আছেঃ firstName, lastName, age, and eyeColor
এই টিউটোরিয়ালের পরবর্তী পরিচ্ছেদে অবজেক্ট(Object) সম্পর্কে আপনি আরো শিখবেন।
typeof অপারেটর
জাভাস্ক্রিপ্ট ভ্যারিয়েবলের টাইপ জানতে আপনি typeof অপারেটর(operator) ব্যবহার করতে পারেনঃ
উদাহরণ
<!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>
<h3> typeof অপারেটর দ্বারা ভ্যারিয়েবল, অবজেক্ট, ফাংশন, অথবা এক্সপ্রেশন এর টাইপকে বুঝায় ।</h3>
<p id="test"></p>
<script>
document.getElementById("test").innerHTML =
typeof "Tahmid" + "<br>" +
typeof 3.14 + "<br>" +
typeof NaN + "<br>" +
typeof false + "<br>" +
typeof new Date() + "<br>" +
typeof function () {} + "<br>" +
typeof newDay + "<br>" +
typeof [1,2,3,4] + "<br>" +
typeof {name:'আজিজুর', age:34} + "<br>" +
typeof null;
</script>
</body>
</html><
ফলাফল
জাভাস্ক্রিপ্টে অ্যারে হচ্ছে বিশেষ ধরণের অবজেক্ট(object)। তাই অ্যারের টাইপ অবজেক্ট(Object)। |
অসংজ্ঞায়িত(Undefined)
জাভাস্ক্রিপ্টে ভ্যারিয়েবলকে ভ্যালু ছাড়া ডিক্লেয়ার করলে এর একটি ভ্যালু থাকে undefined। typeof এর মানও undefined ।
উদাহরণ
<!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>
<p id="test"></p>
<script>
var member;
document.getElementById("test").innerHTML =
member + "<br>" + typeof member;
</script>
</body>
</html>
ফলাফল
ভ্যারিয়েবলের মান undefined সেট করে এর মান খালি রাখা যায়।
উদাহরণ
<!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>
<p id="test"></p>
<script>
var member = undefined;
document.getElementById("test").innerHTML =
member + "<br>" + typeof member; // ভ্যালু undefined, টাইপও undefined
</script>
</body>
</html>
ফলাফল
খালি মান(Empty Values)
খালি মান(value) আর অসজ্ঞায়িত দুইটি ভিন্ন জিনিস।
খালি স্ট্রিং-এর ভ্যালু এবং টাইপ(type) দুইটাই থাকে।
উদাহরণ
<!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>
<p id="test"></p>
<script>
var member = "";
document.getElementById("test").innerHTML =
member + "<br>" + typeof member; // ভ্যারিয়েবলের ভ্যালু "", এবং typeof হচ্ছে string
</script>
</body>
</html>
ফলাফল
ফাকা(Null)
জাভাস্ক্রিপ্টে null দ্বারা বুঝায় "কিছুই না"। এটা দ্বারা বুঝায় যার কোন অস্তিত্ব নাই।
জাভাস্ক্রিপ্টে, null এর ডাটা টাইপ হচ্ছে অবজেক্ট(object)।
জাভাস্ক্রিপ্টে null এর typeof অপারেটরের ভ্যালু হচ্ছে অবজেক্ট, আপনি একে bug হিসেবে বিবেচনা করতে পারেন।কারণ এটা null হওয়া উচিৎ ছিল। |
আপনি অবজেক্টের মান null সেট করে একে খালি রাখতে পারেনঃ
উদাহরণ
<!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>
<p id="test"></p>
<script>
var member = null;
document.getElementById("test").innerHTML =
member + "<br>" + typeof member; // মান হচ্ছে null, কিন্তু টাইপ এখনো অবজেক্ট
</script>
</body>
</html>
ফলাফল
Undefined এবং Null এর মধ্যে পার্থক্য
উদাহরণ
<!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>
<p id="test"></p>
<script>
document.getElementById("test").innerHTML =
typeof undefined + "<br>" +
typeof null + "<br>" +
(null === undefined) + "<br>" +
(null == undefined);
</script>
</body>
</html>