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

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

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


 

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


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

জাভাস্ক্রিপ্টে অবজেক্ট হলো মূল। আপনি যদি অবজেক্ট বুঝতে পারেন, তাহলে পুরো জাভাস্ক্রিপ্ট বুঝতে পারবেন।

জাভাস্ক্রিপ্টে প্রায় সবকিছুই অবজেক্ট।

  1. বুলিয়ান অবজেক্ট হতে পারে
  2. নম্বর অবজেক্ট হতে পারে
  3. স্ট্রিং-ও অবজেক্ট হতে পারে
  4. তারিখ সবসময় অবজেক্ট
  5. ম্যাথ সবসময় অবজেক্ট
  6. রেগুলার এক্সপ্রেশন সবসময় অবজেক্ট
  7. অ্যারে সবসময় অবজেক্ট
  8. ফাংশন সবসময় অবজেক্ট
  9. অবজেক্ট সবসময় অবজেক্ট

জাভাস্ক্রিপ্টে প্রিমিটিভ ভ্যালু ব্যতীত সকল ভ্যালুই অবজেক্ট।

প্রিমিটিভ ভ্যালু হলোঃ স্ট্রিং("Azizur Rahman"), নম্বর(৩.১৪), true, false, null এবং undefined  


অবজেক্ট ভ্যারিয়েবল ধারনকারী ভ্যারিয়েবল

জাভাস্ক্রিপ্ট ভ্যারিয়েবলে মাত্র একটি মান রাখা যায়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
    <p>একটি জাভাস্ক্রিপ্ট ভেরিয়েবল তৈরী করুন</p>
    <p id="demo"></p>
<script>
        var person = "আজিজুর রহমান";
        document.getElementById("demo").innerHTML = person;
</script>
</body>
</html>

ফলাফল



অবজেক্টও ভ্যারিয়েবল, কিন্তু অবজেক্টে অনেক মান রাখা যায়।

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
    <p>একটা জাভাস্ক্রিপ্ট অবজেক্ট তৈরী</p>
    <p id="demo"></p>
<script>
    var person = {
                firstName : "আজিজুর",
                lastName  : "রহমান",
                age       : 32,
                eyeColor  : "কালো"
            };
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>
</body>
</html>

ফলাফল



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


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

জাভাস্ক্রিপ্ট অবজেক্টের নামযুক্ত এইসব ভ্যালুকে প্রোপার্টি বলে।

প্রোপার্টি ভ্যালু
firstName Azizur
lastName Rahman
age 32
eyeColor black

অবজেক্ট মেথড

মেথড হলো অবজেক্টের কার্যক্রম যা অবজেক্টের মাধ্যমে সম্পাদিত হয়।

অবজেক্ট প্রোপার্টিগুলো প্রিমিটিভ ভ্যালু, অবজেক্ট এবং ফাংশন হতে পারে।

অবজেক্ট মেথড হলো একটি অবজেক্ট প্রোপার্টি যার মধ্যে ভ্যালু হিসেবে একটি ফাংশন ডেফিনেশন থাকে।

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

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

জাভাস্ক্রিপ্টে অবজেক্ট তৈরি করার কয়েকটি উপায় রয়েছেঃ

  1. অবজেক্ট লিটারাল ব্যবহার করে একটি অবজেক্ট তৈরি করা যায়।
  2. new কি-ওয়ার্ড ব্যবহার করে একটি অবজেক্ট তৈরি করা যায়।
  3. অবজেক্ট কনস্ট্রাক্টর ডিফাইন করে তারপর ঐ কনস্ট্রাক্টর টাইপ থেকে অবজেক্ট তৈরি করা যায়।
  4. ES5-এ Object.create() ফাংশনের মাধ্যমে অবজেক্ট তৈরি করা যায়।

অবজেক্ট লিটারাল ব্যবহার করে অবজেক্ট তৈরি

জাভাস্ক্রিপ্ট অবজেক্ট তৈরি করার এটিই সবচেয়ে সহজ পদ্বতি।

অবজেক্ট লিটারাল ব্যবহার করে একটি স্টেটমেন্টে অবজেক্ট ডিফাইন এবং তৈরি করা যায়।

অবজেক্ট লিটারাল হলো দ্বিতীয় বন্ধনীর {} মধ্যে কিছু name:value এর জোড়ার লিস্ট।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
    <p>একটি জাভাস্ক্রিটপ ভেরিয়েবল তৈরী করি</p>
    <p id="demo"></p>

<script>
    var person = {firstName:"আজিজুর", lastName:"রহমান", age:32, eyeColor:"নীল"};

document.getElementById("demo").innerHTML =
person.firstName + " এর বয়স " + person.age + " বছর ";
</script>

</body>
</html>

ফলাফল




new কী-ওয়ার্ড ব্যবহার করে অবজেক্ট তৈরি

উদাহরণ

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

<p id="demo"></p>

<script>
var person = new Object();
person.firstName = "আজিজুর";
person.lastName = "রহমান ";
person.age = 32;
person.eyeColor = "কালো";

document.getElementById("demo").innerHTML =
person.firstName + " এর বয়স " + person.age + " বছর ";
</script>

</body>
</html>

ফলাফল



উপরের দুটি উদাহরণ একই রকম কাজ করে। তাই new Object() ব্যবহার করার প্রয়োজন নেই।


অবজেক্ট কনস্ট্রাক্টর ব্যবহার করে অবজেক্ট তৈরি

উপরের পদ্ধতিগুলোর কিছু সীমাবদ্ধতা আছে। কারন এগুলোর মাধ্যমে শুধুমাত্র একটি অবজেক্ট তৈরি করা যায়।

মাঝে মাঝে আমাদের একই ধরনের অনেক অবজেক্টের প্রয়োজন হতে পারে। তাই আমরা একটি অবজেক্ট টাইপ ব্যবহার করতে পারি।

অবজেক্ট টাইপ তৈরি করার আদর্শ পদ্ধতি হলো কনস্ট্রাক্টর ফাংশন ব্যবহার করাঃ

উদাহরণ

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

<p id="demo"></p>

<script>
    function person(first, last, age, eye) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eye;
    }

    var myFather = new person("আজিজুর", "রহমান", 32, "blue");
    var myMother = new person("নীলা", "খাতুন", 24, "green");

document.getElementById("demo").innerHTML =
"আমার বাবার বয়স " + myFather.age + আমার মায়ের বয়স " + myMother.age;
</script>
</body>
</html>

ফলাফল



উপরের ফাংশনটি একটি অবজেক্ট কনস্ট্রাক্টর।

আপনার একটি অবজেক্ট কনস্ট্রাক্টর থাকলে আপনি একই টাইপের অনেক অবজেক্ট তৈরি করতে পারবেনঃ

var myFather = new person("Azizur", "Rahman", 32, "black");
var myMother = new person("Nila", "Khatun", 24, "black");


this কি-ওয়ার্ড

জাভাস্ক্রিপ্টে, যে অবজেক্টের কোডের মধ্যে this কি-ওয়ার্ড থাকে মূলত এই this এর মাধ্যমে ঐ অবজেক্টকে বুঝায়।

যদি কোন অবজেক্টের ফাংশনে this ব্যবহার করা হয়,তাহলে this এর ভ্যালু হচ্ছে ঐ ফাংশনটি যে অবজেক্টে রয়েছে।

যখন অবজেক্টের মধ্যে this ব্যবহার করা হয়, এর ভ্যালু ঐ অবজেক্টটি।

অবজেক্ট কনস্ট্রাক্টরের মধ্যে this কি-ওয়ার্ডের কোন ভ্যালু থাকে না।

অবজেক্ট তৈরি করার জন্য যখন অবজেক্ট কনস্ট্রাক্টর ব্যবহার করা হয় তখন this এর ভ্যালু হয় নতুন অবজেক্টটি।

this কোন ভ্যারিয়েবল নয়। এটি একটি কী-ওয়ার্ড। আপনি this এর ভ্যালু পরিবর্তন করতে পারবেন না।


বিল্ট-ইন জাভাস্ক্রিপ্ট কনস্ট্রাক্টর

জাভাস্ক্রিপ্টের কিছু বিল্ট-ইন কনস্ট্রাক্টরের উদাহরণ নিচে দেওয়া হলোঃ

উদাহরণ

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

<p id="demo"></p>

<script>
    var x1 = new Object();   // A new Object object
    var x2 = new String();   // A new String object
    var x3 = new Number();   // A new Number object
    var x4 = new Boolean();  // A new Boolean object
    var x5 = new Array();    // A new Array object
    var x6 = new RegExp();   // A new RegExp object
    var x7 = new Function(); // A new Function object
    var x8 = new Date();     // A new Date object

document.getElementById("demo").innerHTML =
    "x1: " + typeof x1 + "<br>" +
    "x2: " + typeof x2 + "<br>" +
    "x3: " + typeof x3 + "<br>" +
    "x4: " + typeof x4 + "<br>" +
    "x5: " + typeof x5 + "<br>" +
    "x6: " + typeof x6 + "<br>" +
    "x7: " + typeof x7 + "<br>" +
    "x8: " + typeof x8 + "<br>";
</script>

<p>  String(), Number(), Boolean(), Array(), এবং RegExp() ব্যবহার করার দরকার নেই। </p>

</body>
</html>

ফলাফল



Math() অবজেক্টটি এই লিস্টের মধ্যে নেই। Math একটি গ্লোবাল অবজেক্ট। Math অবজেক্টে new কি-ওয়ার্ডটি ব্যবহার করা যায় না।


জাভাস্ক্রিপ্ট অবজেক্টগুলো মিউটেবল

জাভাস্ক্রিপ্ট অবজেক্টকে তার ভ্যালুর মাধ্যমে পরিচয় করা হয় না, এর নামের মাধ্যমে করা হয়।

var x = person;

উপরের উদাহরণটিতে person যদি একটি অবজেক্ট হয়,তাহলে উপরের এসাইনমেন্টটির মাধ্যমে আমরা person অবজেক্টকেই x এর মধ্যে রাখলাম,আমরা person এর মত হুবহু আরেকটি অবজেক্ট তৈরি করিনি। এখন person কে আমরা x এর মাধ্যমে এক্সেস করতে পারবো। x এর মধ্যে পরিবর্তন করলে person এর মধ্যেও পরিবর্তন হবে, কারণ তারা একই অবজেক্ট।

উদাহরণ

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

<p id="demo"></p>

<script>
    var person = {firstName:"আজিজুর", lastName:"রহমান", age:32, eyeColor:"নীল"}
    var x = person;
    x.age = 32;
document.getElementById("demo").innerHTML =
person.firstName + " এর বয়স " + person.age + " বছর";
</script>
</body>
</html>

ফলাফল



নোটঃ জাভাস্ক্রিপ্ট ভ্যারিয়েবল মিউটেবল নয়। শুধুমাত্র অবজেক্ট মিউটেবল।