জাভাস্ক্রিপ্ট-৮ [ফাংশন, অবজেক্ট] - SMH Amiri

    • সর্বশেষ লিখাসমূহ

    Home জাভাস্ক্রিপ্ট জাভাস্ক্রিপ্ট-৮ [ফাংশন, অবজেক্ট]

    জাভাস্ক্রিপ্ট-৮ [ফাংশন, অবজেক্ট]



    জাভাস্ক্রিপ্ট ফাংশন

    জাভাস্ক্রিপ্ট ফাংশন হচ্ছে একগুচ্ছ কোড যা কোন নির্দিষ্ট কাজ সম্পাদন করার জন্য তৈরি করা হয়।

    জাভাস্ক্রিপ্ট ফাংশন নিজে নিজে সম্পাদিত(execution) হয় না। এটা সম্পাদিত হয় যখন কোন কিছুর মাধ্যমে একে ডাকা হয়।

    উদাহরণ

    <!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>
function myFunc(a, b) {
    return a * b;
}
document.getElementById("test").innerHTML = myFunc(5, 2);
</script>

</body>
</html>


    Copy

    ফলাফল

    জাভাস্ক্রিপ্ট ফাংশনের গঠনপ্রণালী(Syntax)

    জাভাস্ক্রিপ্ট ফাংশন তৈরি করতে প্রথমে function কিওয়ার্ড(keyword) লিখতে হবে, তারপর ফাংশনের নাম এবং এর ডান পাশে () এবং এর ডানপাশে {} লিখতে হয়।

    ফাংশনের নাম সাধারনত অক্ষর(letters),সংখ্যা(digits),আন্ডারস্কোর(_), ডলার($) চিহ্ন দিয়ে লেখা যায়।

    প্রথম বন্ধনীর মাঝের প্যারামিটারগুলো কমার(,) মাধ্যমে আলাদা করা হয়ঃ (parameter1,  parameter2, ...)

    দ্বিতীয় বন্ধনীর {} মধ্যে অবস্থিত কোডগুলো ফাংশনকে কল করার মাধ্যমে সম্পাদিত হয়।

    function name(parameter1, parameter2, parameter3) {
    সম্পাদনযোগ্য কোড
}

    Copy

    ফাংশন প্যারামিটার(parameter) হচ্ছে ফাংশন ডেফিনেশনের প্রথম বন্ধনীর মধ্যে ব্যবহৃত নাম।

    ফাংশন আর্গুমেন্ট(arguments) হচ্ছে ফাংশনকে ডাকার(invoke) সময় প্যারামিটারের মান যেগুলো ফাংশন ব্যবহার করে।

    ফাংশনের মধ্যে আর্গুমেন্টগুলো লোকাল ভ্যারিয়েবলের(local variables) মত আচরণ করে।

    Noteজাভাস্ক্রিপ্টের ফাংশনগুলো অন্যান্য  প্রোগ্রামিং ল্যাঙ্গুয়েজের প্রসিডিউর(Procedure) অথবা সাব্রুটিনের(Subroutine) মত।

    ফাংশন ডাকা(Invocation)

    কোন কিছুর মাধ্যমে ফাংশনকে ডাক(Call) দেওয়া হলে ফাংশনের ভিতরের কোডগুলো সম্পাদিত(Execution) হয়ঃ

    • যখন কোন ইভেন্ট ঘটে (ব্যবহারকারী বাটনে ক্লিক করলে)
    • যখন একে ডাকা(Call) হয়
    • স্বয়ংক্রিয়ভাবে (নিজেই নিজেকে কল করে)

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

    ফাংশন রিটার্ন(Return)

    জাভাস্ক্রিপ্ট রিটার্ন(return) স্টেটমেন্টের কাছে পৌঁছালে ফাংশন এক্সিকিউশন বন্ধ হয়ে যায়।

    যদি ফাংশনকে কোন স্টেটমেন্টে কল করা হয় তাহলে জাভাস্ক্রিপ্ট ঐ স্টেটমেন্টের পরে সেই ফাংশনের কোড করার জন্য ফেরত যায়।

    ফাংশন প্রায়ই রিটার্ন(return) ভ্যালু এক্সিকিউট করে। রিটার্নকৃত ভ্যালু কলারের(Caller) কাছে ফেরত পাঠানো হয়ঃ

    উদাহরণ

    দুইটি সংখ্যার গুণফল রিটার্ন করিঃ

    <!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>
function myFunc(a, b) {
    return a * b;
}
document.getElementById("test").innerHTML = myFunc(5, 2);
</script>

</body>
</html>


    Copy

    ফলাফল

    ফাংশন কেন?

    আপনি কোড বারবার ব্যবহার করতে পারবেনঃ কোড একবার লিখে অসংখ্যবার ব্যবহার করতে পারবেন।

    ভিন্ন ভিন্ন ফলাফল পাওয়ার জন্য আপনি বিভিন্ন আর্গুমেন্ট ব্যবহার করে একই কোড অনেকবার ব্যবহার করতে পারেন।

    উদাহরণ

    <!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>
function myFunc(a, b) {
    return a * b;
}
document.getElementById("test").innerHTML = myFunc(5, 2) + "<br>" + myFunc(6, 4);
</script>

</body>
</html>


    Copy

    ফলাফল

    () অপারেটর ফাংশনকে কল করে

    উপরোক্ত উদাহরনে ব্যবহৃত toCelsius দ্বারা ফাংশন অবজেক্টকে বুঝা‍য় এবং toCelsius() দ্বারা ফাংশনের ফলাফলকে বুঝায়।

    উদাহরণ

    <!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>
function myFunc(a, b) {
    return a * b;
}
document.getElementById("test").innerHTML = myFunc;
</script>

</body>
</html>


    Copy

    ফলাফল

    ফাংশনকে ভ্যারিয়েবল হিসেবে ব্যবহার

    জাভাস্ক্রিপ্টে আপনি ফাংশনকে ভ্যারিয়েবলের মত ব্যবহার করতে পারেন।

    <!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>
function myFunc(a, b) {
    return a * b;
}
var result = myFunc(5, 2);
document.getElementById("test").innerHTML = "ফলাফল হলো " + result ;
</script>

</body>
</html>

    Copy

    একটি ফাংশনের রিটার্ন ভ্যালু একটি ভ্যারিয়েবলে জমা না রেখেঃ

    আপনি ফাংশনকে সরাসরি ভ্যারিয়েবলের মত ব্যবহার করতে পারেনঃ

    উদাহরণ

    <!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>
function myFunc(a, b) {
    return a * b;
}
document.getElementById("test").innerHTML = "ফলাফল হলো " + myFunc(5, 2) ;
</script>

</body>
</html>


    Copy

    ফলাফল









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

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

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


    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>


    Copy

    ফলাফল

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

    এই কোডে 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>


    Copy

    ফলাফল

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

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

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

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

    var member = {firstName:"Azizur", lastName:"Rahman", age:32, eyeColor:"black"};

    Copy
    প্রোপার্টিপ্রোপার্টি ভ্যালু
    firstNameAzizur
    lastNameRahman
    age50
    eyeColorblack

    অবজেক্ট মেথড

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

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

    প্রোপার্টিপ্রোপার্টি ভ্যালু
    firstNameAzizur
    lastNameRahman
    age50
    eyeColorblack
    fullNamefunction() {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>


    Copy

    ফলাফল

    অবজেক্ট ডেফিনেশনে স্পেস এবং লাইন ব্রেক(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>


    Copy

    ফলাফল

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

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

    objectName.propertyName

    Copy

    অথবা

    objectName["propertyName"]

    Copy

    উদাহরণ

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


    Copy

    ফলাফল

    উদাহরণ

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


    Copy

    ফলাফল

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

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

    objectName.methodName()

    Copy

    উদাহরণ

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


    Copy

    ফলাফল

    যদি আপনি 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>


    Copy

    ফলাফল

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

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

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

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

    Copy

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



    Tags
    Share This
    Author Image

    About Amiri

    at
    Marcadores: