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

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

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


 

জাভাস্ক্রিপ্ট ক্লোজার


জাভাস্ক্রিপ্ট ভ্যারিয়েবলগুলো লোকাল বা গ্লোবাল স্কোপে থাকতে পারে।

ভ্যারিয়েবলকে ক্লোজারের মাধ্যমে প্রাইভেট ভ্যারিয়েবল করা যায়।


গ্লোবাল ভ্যারিয়েবল

ফাংশনের ভিতরে ডিফাইন করা সকল ভ্যারিয়েবলকে একটি ফাংশন এক্সেস করতে পারে। নিচের উদাহরণে ভ্যারিয়েবল a হচ্ছে লোকাল ভ্যারিয়েবল। লোকাল ভ্যারিয়েবল শুধুমাত্র ফাংশনের ভিতর থেকে এক্সেস করা যায়, ফাংশনের বাহিরের কোথাও একে এক্সেস করা যাবে না।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
    <p>ফাংশনটি  দ্বারা ফাংশনের ভিতর উল্লেখিত সকল ভেরিয়েবলকে অ্যাক্সেস করা যায়ঃ</p>
<button type="button" onclick="myFunction()">ক্লিক কর!</button>
    <p id="demo"></p>
<script>
    function myFunction() {
        var a = 4;
        document.getElementById("demo").innerHTML = a * a;
    }
</script>
</body>
</html>

ফলাফল



ফাংশনের বাহিরে ডিফাইন করা ভ্যারিয়েবলকেও এক্সেস করতে পারে। নিচের উদাহরণে ভ্যারিয়েবল a হচ্ছে গ্লোবাল ভ্যারিয়েবল। গ্লোবাল ভ্যারিয়েবল ওয়েব পেজে উইন্ডো অবজেক্টের অধীনস্থ। গ্লোবাল ভ্যারিয়েবলকে সকল স্ক্রিপ্ট ব্যবহার এবং পরিবর্তন করতে পারে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
    <p>ফাংশনটি  দ্বারা ফাংশনের বাইরের ভেরিয়েবলকে অ্যাক্সেস করা যায়ঃ</p>
<button type="button" onclick="myFunction()">ক্লিক কর!</button>
    <p id="demo"></p>
<script>
    var a = 4;
    function myFunction() {
        document.getElementById("demo").innerHTML = a * a;
    }
</script>
</body>
</html>

ফলাফল



একই নামের গ্লোবাল ও লোকাল ভ্যারিয়েবল পরস্পর থেকে ভিন্ন। একটি পরিবর্তন করলেও অন্যটি অপরিবর্তিত থাকে।

var কি-ওয়ার্ড ছাড়া তৈরিকৃত সকল ভ্যারিয়েবল গ্লোবাল ভ্যারিয়েবলে পরিণত হয়।


গননা সমস্যা

ধরুণ আপনি কোনোকিছু গণনা করার জন্য একটি ভ্যারিয়েবল ব্যবহার করবেন এবং আপনি চান এটি সব ফাংশনে কাজ করুক।

এক্ষেত্রে আপনি একটি গ্লোবাল ভ্যারিয়েবল এবং ফাংশন ব্যবহার করতে পারেনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
    <p>গ্লোবাল ভেরিয়েবল এর মাধ্যমে গননা করা হচ্ছে।</p>
<button type="button" onclick="myFunction()">গননা কর!</button>
    <p id="demo">0</p>
<script>
    var counter = 0;

    function add() {
        return counter += 1;
    }

    function myFunction(){
        document.getElementById("demo").innerHTML = add();
    }
</script>
</body>
</html>

ফলাফল



এখানে একটি সমস্যা হচ্ছে, add() ফাংশনকে কল করা ছাড়াই যেকোনো স্ক্রিপ্ট পেজের counter পরিবর্তন করতে পারবে।

counter কে শুধুমাত্র add() পরিবর্তন করতে পারবে, এমন অবস্থা তৈরি করতে হবে।

যদি আমরা ফাংশনের ভিতরে counter ডিক্লেয়ার করি, তাহলে add() ফাংশন ছাড়া counter পরিবর্তন করা যাবে নাঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
    <p>Counting with a local variable.</p>
<button type="button" onclick="myFunction()">Count!</button>
<p id="demo">0</p>
<script>
    function add() {
        var counter = 0;
        return counter += 1;
    }

    function myFunction(){
        document.getElementById("demo").innerHTML = add();
    }
</script>
</body>
</html>

ফলাফল



ইহা কার্যকর না! প্রতিবার যখন add() ফাংশন কল করা হয়, counter এর মান 1 থাকে।


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

সকল ফাংশন গ্লোবাল স্কোপকে এক্সেস করতে পারে।  

জাভাস্ক্রিপ্টের সকল ফাংশন তাদের উপরের স্কোপকে এক্সেস করতে পারে।

জাভাস্ক্রিপ্ট নেস্টেড ফাংশন সাপোর্ট করে। নেস্টেড ফাংশন তাদের উপরের স্কোপকে এক্সেস করতে পারে।

নিচের উদাহরণে, plus() ফাংশনটি প্যারেন্ট ফাংশনের counter ভ্যারিয়েবলকে এক্সেস করতে পারবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p>লোকাল ভেরিএবল এর মাধ্যমে গননা করা হচ্ছে।</p>
<p id="demo">0</p>
<script>
document.getElementById("demo").innerHTML = add();
function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();
    return counter;
}
</script>
</body>
</html>

ফলাফল



এখনও সমাধান পাওয়া যায়নি। যদি আমরা বাইরে থেকে plus() ফাংশনকে এক্সেস করতে পারি তবে এই সমস্যার সমাধান পাওয়া যাবে।

counter = 0 এই স্টেটমেন্টটি শুধুমাত্র একবার এক্সিকিউট করার একটি উপায় বের করতে হবে।


জাভাস্ক্রিপ্ট ক্লোজার

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
    <p>লোকাল ভেরিএবল এর মাধ্যমে গননা করা হচ্ছে।</p>
<button type="button" onclick="myFunction()">গননা কর!</button>
    <p id="demo">0</p>
<script>
    var add = (function () {
        var counter = 0;
        return function () {return counter += 1;}
    })();
    function myFunction(){
        document.getElementById("demo").innerHTML = add();
    }
</script>
</body>
</html>

ফলাফল



উদাহরণের ব্যাখ্যা

এখানে add ভ্যারিয়েবলে সেলফ-ইনভোকিং ফাংশনের ভ্যালু রিটার্ন করা হয়েছে।

সেলফ-ইনভোকিং ফাংশনটি একবার রান হয়। ইহা counter এর ভ্যালু 0 সেট করে এবং একটি ফাংশন এক্সপ্রেশন রিটার্ন করে।

এই পদ্ধতিতে add একটি ফাংশনে পরিণত হয় এবং ইহা তার প্যারেন্ট স্কোপের counter এক্সেস করতে পারে।

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

ক্লোজার হচ্ছে একটি ফাংশন যার প্যারেন্ট ফাংশন কাজ করা বন্ধ করে দিলেও এই ফাংশনটি প্যারেন্টের স্কোপকে এক্সেস করতে পারে।