১ ঘণ্টায় শিখি জাভাস্ক্রিপ্ট

জাভাস্ক্রিপ্ট হচ্ছে বর্তমান সময়ের দ্রুত বেড়ে ওঠা এবং উন্নতির দিকে অগ্রসর হওয়া প্রোগ্রামিং ভাষাগুলোর মধ্যে অন্যতম। নামের প্রথমে জাভা থাকলেও এটি কোনো দিক দিয়েই জাভার মতো না। সম্পূর্ণ একটি একক ল্যাঙ্গুয়েজ, যদিও সি এবং জাভা থেকে কিছুটা কপি-পেস্ট করে জাভাস্ক্রিপ্ট তৈরি।

ওয়েব ডেভেলপমেন্ট বা ওয়েব ডিজাইন যেকোন জায়গায় জাভস্ক্রিপ্ট অতুলনীয়। সহজ বোধ্যগম্য সিন্ট্যাক্স সহ এর অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিং সাপোর্ট একে করে তুলেছে সবার প্রিয় ল্যাঙ্গুয়েজ। আজকের লেখায় জাভাস্ক্রিপ্ট সম্বন্ধে খুব বেশি গভীর জ্ঞান দেয়া হবে না বরং জাভাস্ক্রিপ্ট এর সাথে পরিচয় করিয়ে দেয়াই লক্ষ্য।

যদি আগে থেকেই প্রোগ্রামিং জেনে থাকেন বা কোনো ল্যাঙ্গুয়েজ এ মোটামুটি জ্ঞান রাখেন তাহলে খুব সহজে জাভাস্ক্রিপ্ট আয়ত্তে আনতে পারবেন। প্রোগ্রামিং এর মুল পাঁচটা স্তম্ভ এখানে আলোচনা করা হবে। তাই, ১ ঘণ্টায় জাভাস্ক্রিপ্ট শিখতে এখনই পড়ে ফেলুন নিচের লেখাটি।

জাভাস্ক্রিপ্ট কী ??

জাভাস্ক্রিপ্ট হচ্ছে সবচেয়ে জনপ্রিয় স্ক্রিপ্টিং ল্যাঙ্গুয়েজ। জাভাস্ক্রিপ্ট সাধারণত ব্রাউজারের সাথে বিল্টইন অবস্থায় থাকে। যেহেতু জাভাস্ক্রিপ্ট ব্যবহৃত হয় ওয়েব সাইটকে ডাইনামিক করতে তাই ব্রাউজারে আগে থেকে বিল্টইন অবস্থায় জাভাস্ক্রিপ্ট থাকলে সেই সাইট টা ঠিকমতো লোড নিতে পারে। জাভাস্ক্রিপ্ট নামটা যেহেতু বড় তাই একে সংক্ষেপে JS বলা হয়।

জাভাস্ক্রিপ্ট কি কি কাজে লাগে ??

যেহেতু আগেই বলা হয়েছে এটি সাইটকে ডাইনামিক করতে ব্যবহৃত হয় তাই হয়তো ভাবছেন এটা দিয়ে শুধু এটুকুই করা যায়। তবে, নিচের লিস্ট টা দেখে নিজের ধারনা পরিবর্তন করতে পারেন।

1. যেকোন সাইটের ক্লায়েন্ট এবং ব্যাকেন্ড এর রিলেশন করাতে জাভাস্ক্রিপ্ট ব্যবহৃত হয়।
2. ব্লকচেইন প্রযুক্তি তে জাভাস্ক্রিপ্ট ব্যবহৃত হয়।
3. ওয়েব ডেভেলপমেন্ট এ জাভাস্ক্রিপ্ট এর ফ্রেমওয়ার্ক গুলো একচ্ছত্র আধিপত্য ধরে রেখেছে।
4. অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিং ভাষা হওয়ায় সব ফিল্ডেই এটি প্রায় সমান উপযোগী।

জাভাস্ক্রিপ্ট কেন শিখবো ??

অনেক গুলো কারনের মধ্যে উল্লেখযোগ্য কিছু কারণ নিচে দেয়া হল

1. লাইফের প্রথম প্রোগ্রামিং শিখতে চাইলে বেস্ট চয়েস হতে পারে।
2. সহজে প্রোগ্রামিং এর সাথে পরিচিত হতে চাইলে জাভাস্ক্রিপ্ট ভালো হবে।
3. ওয়েব সাইট ডিজাইনিং শিখতে চাইলে জাভাস্ক্রিপ্ট শিখা মাস্ট।
4. ওয়েব সাইটের ব্যাকেন্ড ডেভেলপে জাভাস্ক্রিপ্ট এর জুড়ি নেই।
5. 
   নিজের কৌতূহল মেটাতে চাইলে শিখতে পারেন।

আমি শিখেছি নিজের কৌতূহল মেটাতে। আমি খুব ভালো পারি এমন না তবে ব্যাসিক কাজ গুলো পারি। আজকে সেগুলোই আলোচনা হবে।

ল্যাঙ্গুয়েজ কোনো ম্যাটার না আগে থেকে কোনো ল্যাঙ্গুয়েজ জানলে এটা শিখতে মাত্র ১০ মিনিট লাগবে।

কাদের জন্য এই টিউটোরিয়াল ??

1. যারা কোনো একটা ল্যাঙ্গুয়েজ এর ব্যাসিক জানে অর্থাৎ মোটামুটি প্রোগ্রামিং জানে বা পারে।
2. একদম বিগিনার হলেও দেখা যেতে পারে তবে না বুঝলে সেটা গুগলে সার্চ করতে হবে।

কি কি শিখবো আজ??

আজকে খুব ব্যাসিক কিছু বিষয় শিখবো, এখানে যারা একদম নতুন অর্থাৎ ভ্যারিয়েবল কি এগুলো আলোচনা হবে না। তাই, যদি কোনো ধারনা না থাকে তাহলে এই সাইটের পাইথন প্রোগ্রামিং ক্যাটেগরি থেকে ভ্যারিয়েবল এর পার্ট টা শিখে নিতে পারেন।
আজকে শিখবো

1. ইন্সটল কিভাবে করব।
2. আউটপুট কিভাবে দেখাতে হয়।
3. ভ্যারিয়েবল কী।
4. ইনপুট কিভাবে নিতে হয়।
5. ব্যাসিক ডেটা টাইপ ( স্ট্রিং, ইন্টেজার, ফ্লোট, বুলিয়ান )।
6. অপারেটর
7. কন্ডিশনাল স্টেটমেন্ট।
8. লুপ ( ফর লুপ এবং হোয়াইল )।
9. লিস্ট বা অ্যারে।
10. ফাংশন।

ইন্সটল কিভাবে করতে হয়??

জাভাস্ক্রিপ্ট শেখার জন্য আমাদের তেমন কিছু প্রয়োজন নেই। গুগলে গিয়ে সার্চ করুন “Javascript online ide” তাহলেই কোড লিখে রান করার জায়গা পেয়ে যাবেন। আবার শুধু একটা ব্রাউজার থাকলেই হবে ক্রোম বা ফায়ারফক্স যেকোন কিছু।

Google Chrome ব্রাউজারে নিচের ধাপগুলো অনুসরন করুন।

ধাপ-১

ধাপ-২

ঐ সাদা জায়গায় আমরা কোড লিখবো। এখন তাহলে সব ইন্সটলেশন রেডি আর হ্যা এন্ড্রোয়েড মোবাইলের জন্য প্লে স্টোরে গিয়ে Javascript IDE লিখে সার্চ করলেই অনেক এপ পেয়ে যাবেন।

আউটপুট কিভাবে দেখাতে হয়।

জাভাস্ক্রিপ্টে আউটপুট অনেক ভাবেই দেখানো যায় তবে এখন আমরা দুইটা পদ্ধতি শিখবো। প্রথমে যেখানে কোড লেখার জন্য প্রস্তুত হয়েছে সেখানে নিচের মতো লিখুন

console.log("Hello World!!")

এটা লিখে ইন্টার প্রেস করলেই Hello World!! লেখাটি দেখাবে। অভিনন্দন আপনি জাভাস্ক্রিপ্টে প্রথম প্রোগ্রাম লিখেছেন। এখন আরেকবার লিখুন নিচের মতো

alert("Hello World!!")

এটা লিখলেই একটা পপ-আপ উইন্ড আসবে সেখানে Hello World!! লেখা থাকবে। এই দুইভাবে জাভাস্ক্রিপ্টে আমরা কোনো কিছু আউটপুট দেখাতে পারি।

তাহলে, আমরা কোনো কিছু আউটপুট দেখাতে চাইলে লিখবো
cosole.log এবং তারপর প্রথম বন্ধনী দিয়ে ডাবল কোটেশন এর মধ্যে আপনার ইচ্ছামতো যা দেখাতে চান সেটা লিখে কোটেশন এবং বন্ধনী ক্লোজ করে ইন্টার চাপলেই আউটপুট দেখাবে।

আরেকটা বুদ্ধি হচ্ছে alert লিখে প্রথম বন্ধনী দিয়ে ডাবল কোটেশন এর মধ্যে আপনার ইচ্ছামতো যা দেখাতে চান সেটা লিখে কোটেশন এবং বন্ধনী ক্লোজ করে ইন্টার চাপলেই পপ-আপ উইন্ডোতে আউটপুট দেখাবে। 🙂

ভ্যারিয়েবল কী।

ভ্যারিয়েবল হচ্ছে চলক আমরা নিশ্চয় সেটা জানি না জানলে জেনে নিতে হবে কোথায় থেকে জানবেন সেটা আগেই বলেছি।

এখন তাহলে দেখি JS এ কিভাবে ভ্যারিয়েবল লিখতে হয়। কোড এডিটরে নিচের মতো লিখুন

var x="Hello World!!";
console.log(x)

এভাবে লিখলেই x ভ্যারিয়েবলের ভ্যালু আউটপুট দিবে।

ভ্যারিয়েবল লেখার জন্য প্রথমে var লিখে তারপর ভ্যারিয়েবল নেম দিতে হবে এবং = চিহ্ন দিয়ে ভ্যারিয়েবলের ভ্যালু দিতে হবে এবং শেষে সেমিকোলন দিয়ে শেষ করতে হবে।

ইনপুট কিভাবে নিতে হয়

ইউজার এর থেকে ইনপুট নেয়ার জন্য নিচের মতো লিখুন

var user = prompt("Enter Something:- ");
console.log(user)

এভাবে লিখে ইন্টার চাপলেই নিচের লাইনে ইনপুট নিবে কিছু একটা এবং পরে সেইটা আউটপুট দিবে।

তাহলে, ইনপুট নিতে চাইলে একটা ভ্যারিয়েবল নিয়ে সেটার ভ্যালু হিসেবে লিখতে হবে prompt();

ব্যাসিক ডেটা টাইপ ( স্ট্রিং, ইন্টেজার, ফ্লোট )।

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

1. স্ট্রিং
2. ইন্টেজার
3. ফ্লোট
4. বুলিয়ান

স্ট্রিং

স্ট্রিং হচ্ছে যেকোন টেক্সট। JS এ স্ট্রিং এভাবে লেখা যায়

var x="Hello";

অর্থাৎ, স্ট্রিং লিখতে হবে কোটেশন এর মধ্যে।

ইন্টেজার

ইন্টেজার হচ্ছে পুর্নসংখ্যা। JS এ নিচের মতো করে ইন্টেজার লেখা যায়।

var y = 5;

ফ্লোট

ফ্লোট হচ্ছে দশমিক সংখ্যা।

var z = 4.0;

বুলিয়ান

বুলিয়ান ডেটা টাইপ হচ্ছে দুই ধরনের
true অথবা false. true সত্যতা এবং false মিথ্যা নির্দেশ করে।

অপারেটর

অপারেটর গুলো অন্যান্ন ল্যাঙ্গুয়েজ এর মতোই তবুও একটু দেখে নেই
+, -, *, / হচ্ছে যথাক্রমে যোগ, বিয়োগ, গুন এবং ভাগের জন্য।
== হচ্ছে দুইটার মধ্যকার তুলনা বোঝাতে যে দুইটা সমান কিনা। তবে, এক্ষেত্রে একটু সমস্যা আছে। আগে নিচের উদাহরণ দেখে নেই,

var x = "2";
var y = 2;
console.log(x==y)

এখন এই কোড টা লিখলে true আসবে যদিও false আসা উচিৎ কারণ x এর মান হচ্ছে স্ট্রিং এবং y এর মান হচ্ছে ইন্টেজার।
আসলে, JS এখানে শুধু ভ্যালু টা দেখে এক্স্যাক্ট ভ্যালু দেখে না। তবে, সেক্ষেত্রে আমরা

var x = "2";
var y = 2;
console.log(x===y)

লিখলে সঠিক রেজাল্ট পাবো। এক্ষেত্রে JS এক্স্যাক্ট ভ্যালু নিয়ে তুলনা করে।
“<” দিয়ে বামের অপারেন্ডকে ছোট নির্দেশ করে।
“>” দিয়ে ডানের অপারেন্ডকে ছোট নির্দেশ করে।
“<=” দ্বারা বামের অপারেন্ড ছোট অথবা সমান নির্দেশ করে।
“>=” দ্বারা ডানের অপারেন্ড ছোট অথবা সমান নির্দেশ করে।
“!=” দিয়ে অসমান নির্দেশ করে এবং “!==” দিয়ে এক্স্যাক্ট ভ্যালু নিয়ে কাজ করে।
“||” হচ্ছে or বোঝাতে ব্যবহৃত অপারেটর। যেমন

2 === 2 || 3 === 4;

এটা লিখলে true আসবে। or এর দুই পাশে যে দুইটা কন্ডিশন বা অবস্থা থাকে তাদের দুইটার যেকোন একটা সত্য হলেই ( || বা or ) সেটাকে সত্য বিবেচনা করে।
“&&” হচ্ছে and বোঝাতে ব্যবহৃত অপারেটর। যেমন

2 === 2 && 3 === 4;

এটা লিখলে false আসবে। and এর দুই পাশে যে দুইটা কন্ডিশন বা অবস্থা থাকে তাদের দুইটার দুইটাই কেবল সত্য হলে ( && বা and ) সেটাকে সত্য বিবেচনা করে অন্যথায় মিথ্যা।

কন্ডিশনাল স্টেটমেন্ট

আমরা যারা প্রোগ্রামিং এ একটু জ্ঞান রাখি তাদের কাছে এই কন্সেপ্ট টা একদম সহজ লাগবে। অন্য ল্যাঙ্গুয়েজ এর মতোই। নিচের উদাহরণ দেখুন

var x = 23;
var y = 43;
if (x===y){
 console.log("Match")
}

এখানে প্রথমে দুইটা ভ্যারিয়েবলে দুইটা ভ্যালু রেখেছি। পরে ওই দুইটার মান একই হলে Match লেখা আউটপুট দিতে বলেছি।

কন্ডিশনাল লিখতে হলে,

প্রথমে if লিখতে হবে এবং তারপর প্রথম বন্ধনী দিয়ে সেটার মধ্যে শর্ত দিতে হবে ( যেমন এক্ষেত্রে x === y )। তারপর ইন্ডেনশন এর জন্য কার্লি ব্রেস বা দ্বিতীয় বন্ধনী দিতে হবে।

এবং সেটার পরে কন্ডিশন সত্য হলে কি করবে সেটা লিখতে হবে ( যেমন এক্ষেত্রে console.log(“Match”) ) এবং সবশেষে ইন্ডেনশন বন্ধ করার জন্য দ্বিতীয় বন্ধনী ক্লোজ করতে হবে।
এখন দেখবো else if এবং else এর ব্যবহার

যদি এরকম চাই যে প্রথম কন্ডিশন সত্য না হলে পরের কন্ডিশন এ যাবে তাহলে এরকম লিখতে পারি।var x = 23;

var y = 43;
if (x===y){
    console.log("Match")
} else if (x > y){
    console.log("Left is bigger")
}

এখানে প্রথমে চেক করবে প্রথম কন্ডিশন অর্থাৎ দুইটা সংখ্যা এক কিনা যদি এক হয় তাহলে Match লেখা আউটপুট দিয়ে কোড ওখানে থেমে যাবে।

আর যদি ঐ প্রথম কন্ডিশন সত্য না হয় তাহলে পরের else if এর কন্ডিশন চেক করবে যদি সত্য হয় তবে সেটার কাজ করবে অন্যথায় পরের else if থাকলে চেক করবে নাহয় কোড থেমে যাবে।

var x = 23;
var y = 43;
if (x===y){
    console.log("Match")
} else{
    console.log("Not Match")
}

এখানে আরেকটা কাজ করলাম যদি প্রথম কন্ডিশন সত্য হয় তবে আউটপুট দেবে Match আর যদি ওই কন্ডিশন সত্য না হয়ে যেকোন কিছু হয় তাহলে else ব্লকের কাজ করবে। এক্ষেত্রে Not Match আউটপুট দেবে।

এই হল আমাদের কন্ডিশনাল স্টেটমেন্ট।।

লুপ

এখন আমরা দেখবো লুপ। যেহেতু আমি ধরে নিচ্ছি আপনি কোনো একটা ল্যাঙ্গুয়েজ জানেন বা প্রোগ্রামিং পারেন তাই আমি কোনো কিছু আলোচনা করব না শুধু সিন্ট্যাক্স গুলো জানিয়ে দেব।

For Loop

ফর লুপ এর জন্য নিচের মতো করে লিখতে হয়।

for (var i = 0; i < 5; i++){
    console.log(i)
}

সিন্ট্যাক্স মুলত সি প্রোগ্রামিং এর মতো। প্রথমে for লিখতে হবে তারপর প্রথম বন্ধনী দিতে হবে। এখন একটা ভ্যারিয়েবল নিয়েছি i এবং সেটার ভ্যালু হচ্ছে 0, তারপর দিয়েছি কন্ডিশন অর্থাৎ কতক্ষণ লুপ চলবে।

যেমন এক্ষেত্রে i < 5 অর্থাৎ i যতক্ষণ ৫ এর নিচে থাকবে ততক্ষণ লুপ চলবে। পরের স্টেটমেন্ট এ দিয়েছি i++ অর্থাৎ i এর মান এক এক করে বাড়বে। এই স্টেটমেন্ট এভাবেও লিখা যায়

for (var i = 0; i < 5; i = i +1 ){
    console.log(i)
}

অর্থাৎ আগের মতোই শুধু লাস্ট স্টেটমেন্ট একটু সহজ করে লিখেছি।

While Loop

হোয়াইল লুপ এর সিন্ট্যাক্স অন্যান্ন যেকোন প্রোগ্রামিং ল্যাঙ্গুয়েজ এর মতোই।

var i = 0;
while (i < 5){
    console.log(i)
    i = i+1
}

এটা লিখলেও আগের মতো আউটপুট আসবে। এখানে,

প্রথমে একটা ভ্যারিয়েবল নিয়ে সেটার ভ্যালু দিয়েছি ০ এবং তারপর লিখেছি while এবং ব্র্যাকেট এর মধ্যে কন্ডিশন। এক্ষেত্রে দিয়েছি i < 5 অর্থাৎ i এর ভ্যালু যতক্ষণ ৫ এর কম।

তারপর, i এর মান আউটপুট দিয়েছি এবং i এর মান এক এক করে বৃদ্ধি করেছি।

লিস্ট বা অ্যারে

লিস্ট বা অ্যারে লিখার নিয়ম হচ্ছে পাইথনের সিন্ট্যাক্স এর মতোই।

var item_list = ["Mouse", "Keyboard", "Monitor"];
console.log(item_list)

এভাবেই লেখা যায় জাভাস্ক্রিপ্টে অ্যারে বা লিস্ট।

ফাংশন

ফাংশন নিয়েও কোনো আলোচনা করব না কারণ ধরে নিয়েছি আপনি প্রোগ্রামিং করেন বা পড়েন।

function calculator(num1, num2){
    return num1 + num2
}
calculator(12, 20)

ফাংশন লেখার জন্য প্রথমে function লিখতে হবে। এবং তারপরে ফাংশনের নাম দিতে হবে। নাম দেয়ার পরে ব্র্যাকেট দিয়ে তার মধ্যে প্যারামিটার লিখতে হবে। এবং তারপর return করতে হবে অথবা যা প্রয়োজন সেটার কোড দিতে হবে।

এবং ফাংশন লেখা শেষে ফাংশন কল করলেই আউটপুট পেয়ে যাবেন।

ওকে, মোটামুটি জাভাস্ক্রিপ্ট এর ব্যাসিক আমরা শিখে ফেলেছি। তবে, কিছু কথা এই সঙ্গে না বললেই নয়।

1. আমি আগেই বলেছি এটা একদম যারা বিগিনার তাদের জন্য না। কোনো একটা প্রোগ্রামিং ল্যাঙ্গুয়েজ না জানলে এই আর্টিকেল থেকে কিছুই শেখা সম্ভব না।
2. ১ ঘণ্টায় আসলে কোনো কিছুই শেখা যায় না, আর প্রোগ্রামিং তো অনেক দুরের ব্যাপার। আমি যদি এই ১ টা আর্টিকেল এ জাভাস্ক্রিপ্ট শেখাতে চেষ্টা করি তবে সেটা হবে মস্ত বোকামি।
3. এই ১ ঘণ্টায় জাভাস্ক্রিপ্ট হচ্ছে জাভস্ক্রিপ্ট এর সঙ্গে পরিচয় করিয়ে দেয়া।
4. আমি কোনো ভালো মানের প্রোগ্রামার না তাই যেকোন ভুল ত্রুটি ক্ষমা করবেন। ভালো হয় যদি কি ভুল করেছি সেটা কমেন্টে লিখে জানিয়ে দেন।

কমেন্ট বক্সে জানিয়ে দিন কেমন লাগলো এই আর্টিকেল টি।

বন্ধুদেরকেও জাভাস্ক্রিপ্টের সাথে পরিচয় করিয়ে দিতে চাইলে শেয়ার করে ফেলুন এই লেখাটি।।

আরো ভালো আর্টিকেল পেতে চলে যান এই লিংক এ www.thebanglatech.xyz