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

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

হোম-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 কনভার্শন-Conversion


 

জাভাস্ক্রিপ্ট তথ্যের ধরন(Data Type)


স্ট্রিং(String), সংখ্যা(Number), বুলিয়ান(Boolean), অ্যারে(Array), অবজেক্ট(Object)।


জাভাস্ক্রিপ্ট তথ্যের ধরন(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";
Note যখন সংখ্যাকে স্ট্রিং-এর সাথে যোগ করা হয়, জাভাস্ক্রিপ্ট সংখ্যাকে স্ট্রিং হিসাবে গণ্য করে। 

উদাহরণ

<!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><


ফলাফল



Note জাভাস্ক্রিপ্টে অ্যারে হচ্ছে বিশেষ ধরণের অবজেক্ট(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)।

Note জাভাস্ক্রিপ্টে 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>

ফলাফল