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

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

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


 

জাভাস্ক্রিপ্ট ভ্যারিয়েবল


জাভাস্ক্রিপ্ট ভ্যারিয়েবল

জাভাস্ক্রিপ্ট ভ্যারিয়েবল হচ্ছে ভ্যালু রাখার জন্য ব্যবহৃত কন্টেইনার।

নিচের উদাহরণে a, b এবং c হচ্ছে ভ্যারিয়েবলঃ

উদাহরণ

<!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>জাভাস্ক্রিপ্ট ভেরিয়েবল</h3>

<h4>এই উদাহরণে a, b, এবং c হলো ভেরিয়েবল</h4>

<p id="test"></p>

<script>
var a = 10;
var b = 20;
var c = a + b;
document.getElementById("test").innerHTML = c;
</script>

</body>
</html>

ফলাফল



উপরের উদাহরনে লক্ষ্য করুন a, b এবং c নামের তিনটি ভ্যারিয়েবল আছেঃ

  • a ভ্যারিয়েবলে সংরক্ষিত হয় 10
  • b ভ্যারিয়েবলে সংরক্ষিত হয় 20
  • c ভ্যারিয়েবলে সংরক্ষিত হয় 30 (10 + 20 = 30)

ভ্যারিয়েবল প্রায় বীজগণিতের মতই

উপরের উদাহরণে a, b এবং c হচ্ছে ভ্যারিয়েবলঃ

বীজগণিতের মত প্রোগ্রামিংয়ের ক্ষেত্রেও মান রাখার জন্য ভ্যারিয়েবল বা চলক (যেমন-a) ব্যবহার করা হয়।

বীজগণিতের মত প্রোগ্রামিংয়ের ক্ষেত্রেও আমরা এক্সপ্রেশনে ভ্যারিয়েবল ব্যবহার করি।
যেমনঃ (c = a + b)

উপরের উদাহরণ থেকে হিসাব করলে যোগফল হয় 30

Note জাভাস্ক্রিপ্ট ভ্যারিয়েবল হচ্ছে ভ্যালু রাখার জন্য ব্যবহৃত কন্টেইনার।


জাভাস্ক্রিপ্ট আইডেন্টিফায়ার

সকল জাভাস্ক্রিপ্ট ভ্যারিয়েবল অবশ্যই একটি ইউনিক নামের মাধ্যমে সনাক্ত করতে হবে।

এই ইউনিক নামগুলোকে আইডেন্টিফায়ার বলে।

আইডেন্টিফায়ারগুলোর সংক্ষিপ্ত নাম হতে পারে (যেমন- x এবং y),অথবা বর্ণনামূলক নামও হতে পারে (যেমন-age, sum, totalVolume)।

ভ্যারিয়েবলের নাম দেওয়ার ক্ষেত্রে সাধারণ নিয়মগুলো হচ্ছেঃ

  • নামের মধ্যে অক্ষর(x, y, z), ডিজিট(1, 2, 3), আন্ডারস্কোর(_) এবং ডলার($) চিহ্ন থাকতে পারে
  • নাম অবশ্যই অক্ষর দিয়ে শুরু হবে
  • $ এবং _ দিয়েও নাম শুরু হতে পারে
  • নামগুলো কেসসেন্সিটিভ (যেমন x এবং X দুটি আলাদা ভ্যারিয়েবল)
  • সংরক্ষিত শব্দগুলোকে(যেমন- জাভাস্ক্রিপ্ট কিওয়ার্ড) কখনো নাম হিসাবে ব্যবহার করা যাবেনা
Note জাভাস্ক্রিপ্ট আইডেন্টিফায়ারগুলো কেসসেন্সিটিভ।

এসাইনমেন্ট অপারেটর

জাভাস্ক্রিপ্টে সমান চিহ্নকে (=) "এসাইনমেন্ট" অপারেটর হিসাবে ব্যবহার করা হয়, যা দ্বারা "সমান" বুঝায় না। বরং ভ্যারিয়েবলের মধ্যে ভ্যালু এসাইন করা বুঝায়।

কম্পিউটারের ভ্যারিয়েবল বীজগণিতের ভ্যারিয়েবল থেকে আলাদা। নিচের লাইনটি বীজগণিতে কোন অর্থ বহন করে নাঃ

a = b + c;

কিন্তু জাভাস্ক্রিপ্টে এর অর্থ আছে, এর মানে x + 10 এর মান x এর মধ্যে জমা হয়।

এটা x + 10 এর মানকে গণনা করে এবং ফলাফল x এর মধ্যে জমা রাখে। এখানে x এর মান 10 বৃদ্ধি পায়।

Note জাভাস্ক্রিপ্টে "==" অপারেটরটি সমান বুঝাতে লেখা হয়।

জাভাস্ক্রিপ্ট ডাটাটাইপ

জাভাস্ক্রিপ্ট ভ্যারিয়েবলের মধ্যে সংখ্যা(৪০),টেক্সট ভ্যালু ("আজিজুর রহমান") থাকতে পারে।

প্রোগ্রামিং-এ টেক্সট ভ্যালুকে টেক্সট স্ট্রিং বলে।

জাভাস্ক্রিপ্ট অনেক ধরণের তথ্য বা ডাটা পরিচালনা করতে পারে, কিন্তু এখন শুধু নাম্বার এবং স্ট্রিং শিখবো।

স্ট্রিংকে সিঙ্গেল বা ডাবল কোটেশনের(উদ্ধৃতির) মধ্যে লেখা হয়। সংখ্যাকে উদ্ধৃতি ছাড়াই লিখতে হয়।

যদি আপনি নাম্বারকে উদ্ধৃতির মধ্যে লিখেন তাহলে তা স্ট্রিং বলে গণ্য হবে।

var a = "Satt Academy";
var b = 'Satt Academy';
var c = 20;
var d = "20";

জাভাস্ক্রিপ্ট ভ্যারিয়েবল তৈরি

জাভাস্ক্রিপ্টে ভ্যারিয়েবল তৈরিকে অন্য ভাষায় ভ্যারিয়েবল ডিক্লেয়ারেশন বলে।

var কিওয়ার্ডের মাধ্যমে জাভাস্ক্রিপ্টে ভ্যারিয়েবল ডিক্লেয়ার করা হয়।

var academyName;

ঘোষণা করার পরে এখন ভ্যারিয়েবলের কোন মান নাই। প্রকৃতপক্ষে এটার মান undefined

ভ্যারিয়েবলের মধ্যে মান রাখার জন্য আমরা সমান(=) চিহ্ন ব্যবহার করি।

academyName = "Satt";

এমনকি ভ্যারিয়েবল ডিক্লেয়ারের সময়ই আপনি ভ্যারিয়েবলের মান দিয়ে দিতে পারেনঃ

var academyName = "Satt";

নিচের উদাহরণে আমরা academyName নামে ভ্যারিয়েবল ডিক্লেয়ার করে এর মান "Satt" দিয়েছি।

তারপরে আমরা id="test" সম্বলিত এইচটিএমএল এলিমেন্টের মধ্যে আউটপুট নিয়েছিঃ

উদাহরণ

<!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>জাভাস্ক্রিপ্ট পাত্রসমূহ</h3>

<h4>একটি  ভেরিয়েবল তৈরী করুন,এর মান  নির্দিষ্ট  করুন, এবং এটি প্রদর্শন করান।</h4>

<p id="test"></p>

<script>
var academyName= "Satt";
document.getElementById("test").innerHTML = academyName;
</script>

</body>
</html>

ফলাফল



Note সকল ভ্যারিয়েবলগুলোকে স্ক্রিপ্টের প্রথমেই ঘোষণা করা প্রোগ্রামিং-এ ভাল অভ্যাস।

একটি স্টেটমেন্টে অনেক ভ্যারিয়েবল

একটি স্টেটমেন্টের মধ্যে আপনি অনেক ভ্যারিয়েবল ডিক্লেয়ার করতে পারেন।

var কিওয়ার্ডের মাধ্যমে শুরু করুন এবং কমা(,) দ্বারা ভ্যারিয়েবলগুলো আলাদা করুন, সবশেষে সেমিকোলন(;) দিনঃ

উদাহরণ

<!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>জাভাস্ক্রিপ্ট পাত্রসমূহ</h3>

<h4>আপনি একটি স্টেটমেন্টের মধ্যে  অনেক  ভেরিয়েবল(চলক) ঘোষণা করতে পারেন।</h4>

<p id="test"></p>

<script>
var person = "আজিজুর রাহমান", academyName = "satt", cost =" ফ্রি";
document.getElementById("test").innerHTML = academyName ;
</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>

<h3>জাভাস্ক্রিপ্ট পাত্রসমূহ</h3>

<h4>আপনি একটি স্টেটমেন্টের মধ্যে  অনেক  ভেরিয়েবল(চলক) ঘোষণা করতে পারেন।</h4>

<p id="test"></p>

<script>
var person = "আজিজুর রাহমান",
academyName = "satt",
cost =" ফ্রি";
document.getElementById("test").innerHTML = academyName ;
</script>

</body>
</html>

ফলাফল




Value = undefined

কম্পিউটার প্রোগ্রামিং-এ, প্রায়ই ভ্যারিয়েবলকে মান ছাড়াই ডিক্লেয়ার করা হয়, মানগুলো হয় পরে নির্ধারন করা হয় অথবা হিসাব করে পাওয়া যায়।

যখন ভ্যারিয়েবলকে মান ছাড়াই ডিক্লেয়ার করা হয় তখন এর মান হয় undefined

নিচের স্টেটমেন্টকে সম্পাদন করার পর academyName ভ্যারিয়েবলের মান হয় অসংজ্ঞায়িত(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>

<h3>জাভাস্ক্রিপ্ট পাত্রসমূহ</h3>

<h4> যদি একটি পাত্র কোনো মান ছাড়া ঘোষণা করা হয় তবে এর ভ্যালু অনির্দিষ্ট দেখাবে।</h4>

<p id="test"></p>

<script>
var academyName;
document.getElementById("test").innerHTML = academyName;
</script>

</body>
</html>

ফলাফল




জাভাস্ক্রিপ্ট ভ্যারিয়েবলকে পুনরায় ঘোষণা

জাভাস্ক্রিপ্ট ভ্যারিয়েবলকে পুনরায় ঘোষণা করলেও আগের মান হারায় না।

স্টেটমেন্টটি সম্পাদন হওয়ার পরেও acadmeyName ভ্যারিয়েবলের মান "স্যাট" থাকেঃ

উদাহরণ

<!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>জাভাস্ক্রিপ্ট পাত্রসমূহ</h3>

<h4>যদি আপনি জাভাস্ক্রিপ্টের পাত্রের মান পুনরায় ঘোষণা করেন তবে এটা তার মান হারাবে না।</h4>

<p id="test"></p>

<script>
var academyName = "Satt";
var academyName;
document.getElementById("test").innerHTML = academyName ;
</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>

<h3>জাভাস্ক্রিপ্ট পাত্রসমূহ</h3>

<h6>10,23 ও 13 যোগ করে এর ফলাফল প্রদর্শন করান।</h6>

<p id="test"></p>

<script>
var a = 10 + 23 + 13;
document.getElementById("test").innerHTML = a;
</script>

</body>
</html>

ফলাফল



আপনি স্ট্রিংকেও যোগ করতে পারেন। কিন্তু এগুলো যোগ করলে যোগের পরিবর্তে পাশাপাশি(concatination) বসেঃ

উদাহরণ

<!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>জাভাস্ক্রিপ্ট পাত্রসমূহ</h3>

<h6>যোগ করুন  "আজিজুর " + " " + "রহমান":</h6>

<p id="test"></p>

<script>
var a = "আজিজুর " + " " + "রহমান";
document.getElementById("test").innerHTML = 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>

<h3>জাভাস্ক্রিপ্ট ভেরিয়েবল সমুহ </h3>

<h6>যোগ করুন  "7" + 4 + 1 এবং এর ফলাফল প্রদর্শন করান।</h6>

<p id="test"></p>

<script>
var a = "7" + 4 + 1;
document.getElementById("test").innerHTML = a;
</script>

</body>
</html>

ফলাফল



Note যদি আপনি একটি সংখ্যাকে কোটেশনের মধ্যে রাখেন তাহলে পরবর্তী সংখ্যাগুলোও স্ট্রিং-এ রূপান্তরিত হয় এবং এগুলো পাশাপাশি বসে।