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

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

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

<!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>
a = 20; // Assign 20 to a

element = document.getElementById("test"); // Find an element
element.innerHTML = a;                     // Display a in the element

var a; // Declare 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; // a ঘোষনা করা হয়েছ
a = 20; //  a এর মধ্যে 20 রাখা হয়েছে

element = document.getElementById("test"); // এটা একটা এলিমেন্ট
element.innerHTML = a;                     //  a এর এলিমেন্ট  প্রদর্শণ করা হলো
</script>

</body>
</html>

ফলাফল



এটা বুঝার জন্য আপনাকে হয়েস্টিং("hoisting") বিষয়টি বুঝতে হবে।

জাভাস্ক্রিপ্ট ডিফল্টভাবে সকল ডিক্লেয়ারেশনকে তার নিজ নিজ স্কোপের উপরে নিয়ে যায়,একেই হয়েস্টিং বলা হয়।


ইনিশিয়ালাইজেশন হয়েস্টিং-এর অন্তর্ভুক্ত নয়

জাভাস্ক্রিপ্টে হয়েস্টিং শুধুমাত্র ডিক্লেয়ারেশনের জন্য প্রযোজ্য। ইনিশিয়ালাইজেশন হয়েস্টিং-এর অন্তর্ভুক্ত নয়।

নিচের দুইটি উদাহরণ দেখিঃ

উদাহরণ-1

<!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 = 3; // a এর মান নির্ধারন করা হয়েছে
var b = 8; //   b  এর মান নির্ধারন করা হয়েছে

element = document.getElementById("test"); // এটা একটা এলিমেন্ট
element.innerHTML = a + " " + b;           // a এবং b প্রদর্শন  করা হয়েছে

</script>

</body>
</html>



ফলাফল




উদাহরণ-2

<!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 = 3;  //  a এর মান নির্ধারন করা হয়েছে

element = document.getElementById("test");            // এটা একটা এলিমেন্ট
element.innerHTML = "a  হল " + a + "  এবং b  হল " + b;    // a এবং b প্রদর্শন করা হয়েছে

var b = 8;  //   b এর মান নির্ধারন করা হয়েছে
</script>

</body>
</html>

ফলাফল



দ্বিতীয় উদাহরণে b এর ভ্যালু undefined দেখিয়েছে। কারণ জাভাস্ক্রিপ্ট শুধুমাত্র ডিক্লেয়ারেশনকে উপরে নিয়েছে, এসাইনকৃত ভ্যালুকে উপরে নেয়নি। তাই b এর ভ্যালু 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 a = 6; // Initialize a
var b;     // Declare b

element = document.getElementById("test"); // Find an element
element.innerHTML = a + " " + b;           // Display a and b

b = 9;     // Assign 9 to b

</script>
</body>
</html>

ফলাফল





সবসময় ভ্যারিয়েবলকে স্কোপের উপরে ডিক্লেয়ার করা একটি ভাল অভ্যাস।


"use strict";

জাভাস্ক্রিপ্ট কোডে "use strict"; ব্যবহার একটি ভালো দিক। ইহা প্রোগ্রামারদের সিন্টেক্সগত ভুল, অনিচ্ছাকৃত গ্লোবাল ভ্যারিয়েবল তৈরি এবং অন্যান্য সমস্যা থেকে রক্ষা করে। এই বিষয়গুলো জাভাস্ক্রিপ্টে কোন এঁরর দেখায় না, কিন্তু "use strict"; ব্যবহার করলে ইহা এঁরর হিসেবে গণ্য হয়।

একটি স্ক্রিপ্ট এবং প্রতিটি ফাংশনের শুরুতে "use strict"; ডিক্লেয়ার করা যায়।

উদাহরণ

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

<h1>"use strict"</h1>
<h3>ভেরিয়েবল ডিক্লার করা ব্যতিত ভেরিয়েবল ব্যবহার করতে অনুমতি দেয় না।</h3>

<p>আপনার ব্রাউজারে এরর রিপোর্ট দেখার জন্য ডিবাগিং (F12) এক্টিভ করুন।</p>

<script>
"use strict";
a = "tamim";    // এটি একটি এরর দেখাবে (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>

<h2>গ্লোবাল "use strict" ডিক্লারেশন</h2>

<p>আপনার ব্রাউজারে এরর রিপোর্ট দেখার জন্য ডিবাগিং (F12) এক্টিভ করুন।</p>

<script>
"use strict";
myFunc();

function myFunc() {
    a = "tamim";   // এটি একটি এরর দেখাবে (a ডিফাইন করা হয়নি)
}
</script>

</body>
</html>

ফলাফল



"use strict"; যদি স্ক্রিপ্টের শুরুতে ব্যবহার করা হয় তবে ইহা স্ক্রিপ্টের সকল কোডের জন্য প্রযোজ্য হবে এবং ফাংশনের ভিতরে ব্যবহার করা হলে ইহা শুধুমাত্র ফাংশনের কোডের জন্য প্রযোজ্য।