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

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

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


 

জাভাস্ক্রিপ্ট Error


try স্টেটমেন্ট এঁররের জন্য একটি কোড ব্লককে টেস্ট করতে সাহায্য করে

catch স্টেটমেন্ট আপনাকে এঁরর নিয়ন্ত্রণ করতে সাহায্য করে

throw স্টেটমেন্ট আপনাকে কাস্টম এঁরর তৈরি করতে সাহায্য করে

finally স্টেটমেন্ট আপনাকে try এবং catch-এর ফলাফল অনুযায়ী কোড এক্সিকিউট করতে দেয়


এঁরর!

জাভস্ক্রিপ্ট কোড এক্সিকিউশনের সময় বিভিন্ন ধরনের এঁরর ঘটে।

প্রোগ্রামার দ্বারা কোড এঁরর, ভুল ইনপুট অথবা অন্যান্য যেকোন কারণে এঁরর ঘটতে পারে।

উদাহরণ

এই উদাহরণে আমরা newalert নামে একটি এলার্ট তৈরি করেছি একটি এঁরর দেখানোর জন্যঃ

<!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 id="test"></h3>

<script>
try {
    newalert("আপনাকে স্বাগতম!");
}
catch(error) {
    document.getElementById("test").innerHTML = error.message;
}
</script>

</body>
</html>

ফলাফল



catch ব্লক newalert কে error হিসেবে ধরবে এবং হ্যান্ডেল করতে কোড এক্সিকিউট করবে।


জাভাস্ক্রিপ্টে try এবং catch

এক্সিকিউশনের সময় try স্টেটমেন্ট একটি কোডের ব্লককে এঁররের জন্য টেস্ট করতে সাহায্য করে।

যদি try ব্লকে কোন এঁরর ঘটে তাহলে catch স্টেটমেন্ট একটি কোডের ব্লককে এক্সিকিউট করতে সাহায্য করে।

জাভাস্ক্রিপ্ট try এবং catch স্টেটমেন্টের গঠনপ্রণালীঃ

try {
    Block of code to try
}
catch(err) {
    Block of code to handle errors
}


throw স্টেটমেন্ট

throw স্টেটমেন্ট একটি কাস্টম এঁরর তৈরি করতে সাহায্য করে।

এর মানে হচ্ছে আপনি একটি এক্সসেপ্সন তৈরি করতে পারেন।

আপনি try এবং catch এর সাথে throw একত্রে ব্যবহার করলে আপনি একটি

ইহা একটি স্ট্রিং, নম্বর, বুলিয়ান অথবা একটি অবজেক্ট হতে পারেঃ

throw "সঠিক নয়";    // টেক্সট throw করবে
throw 231;          // নম্বর throw করবে


ইনপুট ভ্যালিডেশন

এই উদাহরণে try এবং catch এর সাথে throw এর ব্যবহার দেখানো হয়েছেঃ

উদাহরণ

<!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>দয়া করে 12 থেকে 17 এর মধ্যে  যে কোনো একটি সংখ্যা ইনপুট দিন :</h3>

<input id="test" type="text">
<button type="button" onclick="myFunc()">  ইনপুট যাচাই </button>
<p id="msg"></p>

<script>
function myFunc() {
    var message, a;
    message = document.getElementById("msg");
    message.innerHTML = "";
    a = document.getElementById("test").value;
    try {
        if(a == "")  throw "খালি";
        if(isNaN(a)) throw " নাম্বার না";
        a = Number(a);
        if(a < 12)    throw "অনেক কম";
        if(a > 17)   throw "অনেক বেশি";
    }
    catch(error) {
        message.innerHTML = "ইনপুট " + error;
    }
}
</script>

</body>
</html>


ফলাফল




এইচটিএমএল ভ্যালিডেশন

আধুনিক ব্রাউজারে জাভাস্ক্রিপ্ট এবং এইচটিএমএল এট্রিবিউট ব্যবহার করে ভ্যালিডেশন করা হয়ঃ

<input id="test" type="number" min="3" max="9" step="1">

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


finally স্টেটমেন্ট

finally স্টেটমেন্ট আপনাকে try এবং catch-এর ফলাফলের উপর নির্ভর করে কোড এক্সিকিউট করতে সাহায্য করেঃ

উদাহরণ

<!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>   দয়া করে 12 থেকে 17 পর্যন্ত  যে   কোনো একটি সংখ্যা ইনপুট দিন :</h3>

<input id="test" type="text">
<button type="button" onclick="myFunc()"> ইনপুট যাচাই </button>

<p id="msg"></p>

<script>
function myFunc() {
    var message, a;
    message = document.getElementById("msg");
    message.innerHTML = "";
    a = document.getElementById("test").value;
    try {
        if(a == "")  throw "খালি";
        if(isNaN(a)) throw " নাম্বার না";
        a = Number(a);
        if(a > 12)   throw "হলো অনেক বেশি";
        if(a < 17)    throw "হলো অনেক কম";
    }
    catch(error) {
        message.innerHTML = "ইনপুট " + error;
    }
    finally {
        document.getElementById("test").value = "";
    }
}
</script>

</body>
</html>



ফলাফল




কোড ডিবাগিং

প্রোগ্রামিং কোডের এঁরর খোঁজাকে কোড ডিবাগিং বলে।

যখন কোডের মধ্যে এঁরর হবে,আপনি কোন এঁরর মেসেজ পাবেন না। আপনি বুঝতে পারবেন না কোথায় ভুলের জন্য অনুসন্ধান করবেন।


জাভাস্ক্রিপ্ট ডিবাগার

ডিবাগ করা সহজ নয়। কিন্তু বর্তমানে সকল আধুনিক ব্রাউজারে একটি বিল্ট-ইন ডিবাগার আছে।

ডিবাগারে ব্রেকপয়েন্ট সেট করে আপনি এক্সিকিউশনের সময় ভ্যারিয়েবলের ভ্যালু দেখতে পারেন।

আপনি F12 কী চেপে আপনার ব্রাউজারে ডিবাগিং মেন্যু থেকে কনসোল চালু করতে পারেন।


console.log()

console.log() মেথড ব্যবহার করে আপনি আপনার কোডের বিভিন্ন ভ্যালু দেখতে পারবেনঃ

উদাহরণ

<!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>আমার প্রথন  ওয়েব পেজ</h2>

<p>F12 এর সাহায্যে আপনার ব্রাউজারে (Chrome, IE, Firefox)  ডিবাগিং সক্রিয় করুন , ডিবাগিং মেন্যুর "Console" অপশনটি সিলেক্ট করুন</p>

<script>
a = 3;
b = 7;
c = a + b;
console.log(c);

</body>
 </html>

ফলাফল




ব্রেকপয়েন্ট সেট করা

ডিবাগার উইন্ডোতে জাভাস্ক্রিপ্টের কোডের মধ্যে আপনি ব্রেকপয়েন্ট সেট করতে পারবেন। ব্রেকপয়েন্টে জাভাস্ক্রিপ্ট এক্সিকিউশন বন্ধ করে আপনাকে জাভাস্ক্রিপ্টের ভ্যালু পরীক্ষা করতে সাহায্য করবে।

ভ্যালু পরীক্ষা করার পর আপনি আবার প্লে বাটনে ক্লিক করে কোডের এক্সিকিউশন চালু করতে পারবেন।