02/06/2025
জাভাস্ক্রিপ্ট শেখার অসাধারণ যাত্রা শুরু হোক আজ থেকেই!
জাভাস্ক্রিপ্ট কী, কোথায়, কেন, কিভাবে
প্রথম প্রোগ্রাম লেখার আগে একটু বুঝে নিই—এই 'জাভাস্ক্রিপ্ট' আসলে কী?
জাভাস্ক্রিপ্ট হচ্ছে ওয়েবের ভাষা। যখন আপনি কোনো ওয়েবসাইটে ক্লিক করেন, ফর্ম পূরণ করেন, মেনু খুলে কিছু দেখেন—সবকিছু পিছনে চালাচ্ছে জাভাস্ক্রিপ্ট।
এটা এমন একটা প্রোগ্রামিং ভাষা যা: আপনার ব্রাউজারে সরাসরি চলে ওয়েবসাইটে ইন্টারঅ্যাকশন যোগ করে — মানে কি? ধরুন আপনি একটি বোতামে ক্লিক করলেন আর সঙ্গে সঙ্গে একটা মেসেজ দেখালো “ধন্যবাদ!”, অথবা আপনি ফর্ম পূরণ করলেন, আর সাবমিট করার পরে স্ক্রিনে এসে গেলো “আপনার তথ্য রেকর্ড করা হয়েছে” — এটিই হচ্ছে ইন্টারঅ্যাকশন।
HTML দিয়ে আপনি ওয়েবসাইটের গঠন বানান (যেন একটা থিয়েটারের মঞ্চ), CSS দিয়ে আপনি সেটিকে সাজান (যেন আলো, রঙ ও মেকআপ), কিন্তু জাভাস্ক্রিপ্ট হলো সেই “অভিনেতা” — যিনি দর্শকের প্রতি রেসপন্স দেন, কথা বলেন, অ্যাকশন করেন।
উদাহরণ: আপনি একটি ফর্ম পূরণ করছেন একটি ফিল্ড ভুল পূরণ করলে সাথে সাথে লাল মার্কিং ও সতর্ক বার্তা আসছে আপনি ক্লিক করতেই স্ক্রিনে নতুন কিছু দেখাচ্ছে চ্যাটবক্সে আপনি টাইপ করছেন, এবং সাথে সাথেই রেসপন্স পাচ্ছেন
এসব কিছু জাভাস্ক্রিপ্ট ছাড়া সম্ভব নয় — HTML & CSS একা এই কাজ করতে পারে না। আজকাল backend, mobile app, এমনকি AI তেও ব্যবহার হচ্ছে
কোথায় চালাবেন? Chrome browser এর DevTools Console-এ অথবা JSFiddle.net, CodePen.io, [replit.com]—যেকোনো অনলাইন প্ল্যাটফর্মে
কেন শিখবেন? বিশ্বের সবচেয়ে চাহিদাসম্পন্ন ভাষা ফ্রিল্যান্সিং, জব, স্টার্টআপ — সবকিছুর দরজা খুলে দেয় শেখা সহজ, প্রয়োগ বিশাল
কতটুকু শিখলেই হবে? শুরুর জন্য আপনাকে শুধু ৫টি জিনিস জানতে হবে:
কিভাবে স্ক্রিনে কিছু দেখাতে হয়
কিভাবে ইউজারের কাছ থেকে ইনপুট নিতে হয়
ভ্যারিয়েবল কীভাবে কাজ করে
ডেটা টাইপ কীভাবে behave করে
কিভাবে শর্ত দিয়ে সিদ্ধান্ত নেয়
এই লেখায় আপনি সব শিখে ফেলবেন, step-by-step!
এই লেখাটি পড়ে আপনি কী শিখবেন?
এই লেখাটি আপনার জন্য যদি আপনি একেবারে নতুন হন, আবার যদি আগেও শিখেছেন কিন্তু মজার, গল্পভিত্তিক ও সহজ উপায়ে আবার ঝালাই করতে চান—তাহলেও!
আপনি শিখবেন: প্রোগ্রাম কাকে বলে, কীভাবে লেখা হয় কীভাবে ইউজার থেকে ইনপুট নেওয়া যায় কীভাবে স্ক্রিনে মেসেজ দেখানো যায় ভ্যারিয়েবল মানে কী এবং কেন দরকার নাম্বার, টেক্সট ও ট্রু-ফলস — এই তিনটা প্রধান ডেটা টাইপ সবচেয়ে বেশি ভুল হয় এমন একটি বাস্তব উদাহরণ (ভুল বুঝে শিখা!) শর্ত (if-else) দিয়ে কিভাবে সিদ্ধান্ত নেওয়া হয় প্রোগ্রামে
একদম বেসিক থেকে শুরু করে, আপনি আজ এমন কিছু শিখবেন যা দিয়ে যেকোনো সমস্যার গেটওয়ে খুলে যাবে!
বই খুলে কঠিন সিনট্যাক্স মুখস্ত না করে, আজ আমরা মজার গল্প, উদাহরণ আর বাস্তব প্রোগ্রাম দিয়ে জাভাস্ক্রিপ্ট শিখব—একেবারে শুরু থেকে। এই লেখাটি শুধু শেখাবে না, বরং আপনাকে প্রেমে পড়িয়ে দেবে জাভাস্ক্রিপ্টে।
প্রথম প্রোগ্রাম: Hello World
প্রোগ্রামিং শেখার শুরু হয় একটি ঐতিহাসিক বাক্য দিয়ে: Hello World!
কোড:
let message = "Hello World!";
console.log(message);
message নামে একটা ভ্যারিয়েবল তৈরি করেছি, যাতে ভবিষ্যতে বার্তাটি সহজে পরিবর্তন করা যায়।
আপনি চাইলে এই কোডটি সরাসরি Chrome ব্রাউজারে Console-এ রান করতে পারেন।
-Chrome খুলুন
-যে কোনো ওয়েবসাইটে যান (যেমন: google.com)
-কীবোর্ডে Ctrl + Shift + J চাপুন (Mac: Cmd + Option + J)
-Console ট্যাবে এই কোড লিখে Enter চাপুন
-এর ফলে আপনি বাস্তবে স্ক্রিনে 'Hello World!' দেখতে পাবেন এবং বুঝতে পারবেন console.log() কিভাবে কাজ করে।
এই আর্টিকেলে প্রতিটি কোড এমনভাবে দেয়া হয়েছে যাতে আপনি নিজে Console-এ লিখে নিজেই output দেখে শিখতে পারেন — এটা শেখার সবচেয়ে কার্যকর উপায়!
এখানে console.log() হচ্ছে জাভাস্ক্রিপ্টের মাইক্রোফোন, যেটা দিয়ে আমরা স্ক্রিনে কিছু বলতে পারি।
ইউজারের সাথে কথা বলা
চলুন এবার এমন একটি প্রোগ্রাম লিখি যেখানে ইউজার তার নাম দিবে, আর আমরা তাকে শুভেচ্ছা জানাবো।
কোড:
let userName = prompt("আপনার নাম লিখুন:"); console.log("স্বাগতম,", userName, "!");
এখানে আমরা prompt() দিয়ে ইনপুট নিচ্ছি আর console.log() দিয়ে সরাসরি সেই নামের সাথে বার্তা জুড়ে দিচ্ছি।
এখানে prompt() হচ্ছে ইনপুট নেওয়ার রাস্তা, আর + দিয়ে আমরা স্ট্রিং জোড়া দিচ্ছি।
একটি গল্প গঠনের প্রোগ্রাম
চলুন এবার একটা গল্প বানাই, ইউজারের দেয়া ৬টি ইনপুট থেকে।
কোড:
let name = prompt("নাম দিন:");
let age = prompt("বয়স দিন:");
let city = prompt("শহরের নাম:");
let college = prompt("কলেজের নাম:");
let profession = prompt("পেশা:");
let pet = prompt("পোষা প্রাণীর নাম:");
console.log(`একটা সময় ছিল, একজন ছিল যার নাম ছিল ${name}, শহর: ${city}।`);
console.log(`${age} বছর বয়সে, সে পড়তে গেল ${college} কলেজে।`);
console.log(`পড়াশোনা শেষে সে হয়ে গেল একজন ${profession}।`);
console.log(`একদিন সে একটা পোষা প্রাণী নিলো, নাম ${pet}।`);
console.log("তারা দুজনে সুখে-শান্তিতে বসবাস করলো!");
এবার আমরা ব্যবহার করেছি template literals (``), যেটা দিয়ে কোডটা পড়তে এবং লিখতে আরও সহজ হয়।
এতটুকুতেই আপনি শিখে ফেললেন ইনপুট, ভ্যারিয়েবল আর স্ট্রিং কনক্যাটেনেশন!
ডেটা টাইপ ও ভ্যারিয়েবল
প্রোগ্রামিং ভাষায়, "ডেটা টাইপ" হচ্ছে ভ্যারিয়েবলের মধ্যে কী ধরনের মান রাখা হবে তা নির্ধারণ করার উপায়। যেমন:
সংখ্যা রাখতে চাইলে Number টাইপ লেখা রাখতে চাইলে String টাইপ সত্য-মিথ্যা রাখতে চাইলে Boolean টাইপ
জাভাস্ক্রিপ্টে ভ্যারিয়েবল ঘোষণা করতে আমরা let বা const ব্যবহার করি।
let ব্যবহার করি এমন ভ্যারিয়েবল তৈরি করতে যেটার মান পরে পরিবর্তন করা যাবে। যেমন:
let name = "Omar";
name = "Sham"; // এটা ঠিক আছে
const ব্যবহার করি এমন ভ্যারিয়েবল তৈরি করতে যেটার মান একবার সেট করলে আর বদলানো যাবে না। যেমন:
const pi = 3.1416;
pi = 3.14; // এটি ভুল, কারণ const ভ্যারিয়েবল পরিবর্তন করা যায় না
মনে রাখুন: let = পরিবর্তনযোগ্য মান const = অপরিবর্তনযোগ্য মান
এই বিষয়টি নিয়ে আমরা সামনে একটি বিস্তারিত আলাদা পোস্ট করব যেখানে বুঝবো কখন let ব্যবহার করবেন, কখন const, এবং কেন var এড়িয়ে চলা ভালো। অপেক্ষায় থাকুন!
🧾 কোড:
let score = 100; // Number → সংখ্যা
let name = "Omar"; // String → টেক্সট
let passed = true; // Boolean → সত্য (true) বা মিথ্যা (false)
ধরুন, আপনার ওয়েবসাইটে একজন ইউজার কত নম্বর পেলো, সেটা Number টাইপে রাখতে হবে।
ইউজারের নাম, মেসেজ, ঠিকানা—এসব String টাইপ।
আর সে পরীক্ষায় পাশ করেছে কি না, সেটি Boolean টাইপ: true বা false।
বয়স, দাম, গ্রেড — এগুলো সব Number টাইপে যাবে।
নাম, শহর, মন্তব্য — এগুলো String।
একজন ইউজার logged in আছে কিনা? — Boolean: true বা false।
ছোট্ট করে মনে রাখুন:
Number → সংখ্যা
String → লেখা
Boolean → হ্যাঁ/না (true/false)
let score = 100; // Number
let name = "Omar"; // String
let passed = true; // Boolean
আপনি এখন জানেন কোন ভ্যারিয়েবলে সংখ্যা, কোনটাতে টেক্সট, আর কোনটাতে সত্য-মিথ্যা রাখা হয়।
মজার একটা ভুল এবং এর ব্যাখ্যা
চলুন দেখি এমন একটা ভুল, যেটা নতুনদের ৯৯%-ই করে! এবং সেটা এত চুপিসারে হয়, কেউ ধরতেই পারে না—যদি না আপনি জানেন আসল ঘটনা।
কোড:
let a = prompt("প্রথম সংখ্যা:");
let b = prompt("দ্বিতীয় সংখ্যা:");
let sum = a + b;
console.log("ফলাফল:", sum);
আপনি ভাবছেন, “এ তো সহজ! দুইটা সংখ্যা নিয়ে যোগ করে দেখাচ্ছে।”
কিন্তু ধরুন আপনি ইনপুট দিলেন:
প্রথম সংখ্যা: 5
দ্বিতীয় সংখ্যা: 7
ফলাফল কী আসবে?
ফলাফল: 57
কি!? ৫ + ৭ = ৫৭!?
হ্যাঁ buddy, কারণ এখানে হচ্ছে একটা ধরার বাইরে থাকা ভুল — prompt() সব ইনপুটকে ধরে string হিসেবে। অর্থাৎ, আপনার ইনপুট “5” ও “7” আসলে টেক্সট হিসেবে রাখা হচ্ছে। আর + চিহ্ন string এর জন্য মানে হচ্ছে “জোড়া লাগাও”, না যে যোগ করো।
তাই "5" + "7" মানে হচ্ছে → "57"
সমাধান:
let sum = Number(a) + Number(b);
এখানে Number() ফাংশন দিয়ে আমরা স্ট্রিংকে রূপান্তর করছি সংখ্যায়। এখন যদি আপনি 5 ও 7 ইনপুট দেন, আউটপুট হবে:
ফলাফল: 12
এটা থেকে শিক্ষা: জাভাস্ক্রিপ্টে সব prompt() ইনপুট প্রথমে string হয়। তাই যোগফল বা গণনার জন্য সবসময় টাইপ কনভার্সন নিশ্চিত করুন।
আরও একটা গোপন ট্র্যাপ:
let x = "5";
let y = 2;
let result = x + y;
console.log(result); // Output: "52"
কারণ x একটা string, আর + প্রথমে দেখে যায় কোনও string আছে কিনা — থাকলে পুরোটা string করে ফেলে। তাই এটি "5" + "2" → "52"
ঠিক করার জন্য:
let result = Number(x) + y; // Output: 7
এই রকম ভুল ছোট হলেও বড় অ্যাপের মধ্যে চরম গণ্ডগোল করে ফেলতে পারে। তাই নতুনদের এই ভুলটা বুঝে রাখা সবচেয়ে গুরুত্বপূর্ণ জিনিসগুলোর একটা।
# # কন্ডিশনাল স্টেটমেন্ট
আমরা অনেক সময় কোড লিখি এমনভাবে যেন নির্দিষ্ট শর্তে কোনো কাজ হয়। ঠিক যেমন:
যদি বয়স ১৮ বা তার বেশি হয়, তাহলে লাইসেন্স দেওয়া যাবে
যদি পাস করেন, তাহলে গ্র্যাজুয়েশন সার্টিফিকেট পাবেন
যদি পাসওয়ার্ড ভুল হয়, তাহলে অ্যালার্ট দেখাও
এই ধরনের সিদ্ধান্ত নেওয়ার জন্য আমরা ব্যবহার করি `if` এবং `else`।
কোড:
--------------------
let age = Number(prompt("আপনার বয়স লিখুন:"));
if (age >= 18) {
console.log("আপনি ড্রাইভিং লাইসেন্সের জন্য উপযুক্ত!");
} else {
console.log("দুঃখিত, আপনি এখনো ছোট!");
}
--------------------
উপরে `if` বলছে: যদি `age >= 18` হয়, তাহলে সত্য ব্রাঞ্চ চালাও। না হলে `else` অংশ চালাও।
এই স্টেটমেন্টগুলোকে বলে **কন্ডিশনাল স্টেটমেন্ট** বা **শর্তভিত্তিক সিদ্ধান্ত**।
# # # আরও কিছু কন্ডিশনের উদাহরণ:
```javascript
let score = 75;
if (score >= 80) {
console.log("A গ্রেড");
} else if (score >= 60) {
console.log("B গ্রেড");
} else {
console.log("C বা তার নিচে");
}
এখানে আমরা একের পর এক শর্ত চেক করছি।
এমনকি চাইলে এক লাইনে লিখতেও পারেন:
let result = (age >= 18) ? "উপযুক্ত" : "অনুপযুক্ত";
console.log(result);
এটাকে বলে ternary operator — ছোট অথচ শক্তিশালী টুল।
বয়স, নাম্বার, ট্রু/ফলস—সব ধরনের ডেটার উপর ভিত্তি করে আপনি সিদ্ধান্ত নিতে পারেন কোন কোড চালানো হবে।
এটাই হলো একজন প্রকৃত ডেভেলপারের চিন্তা — শর্ত বুঝে, সঠিক সিদ্ধান্ত নেওয়া!
কুইজ: কার কাছে আছে লুকানো রত্ন
ধরা যাক, আপনার হাতে আছে ৮টি ছোট বাক্স। প্রতিটা দেখতে একই, কিন্তু একটা বাক্সে আছে একটা ছোট্ট সোনার রত্ন। বাক্সগুলো ওজনে প্রায় সমান—শুধু যেটাতে রত্ন আছে, সেটা একটু ভারী।
আপনার কাছে আছে একটা ডিজিটাল স্কেল, যা একসাথে দুইটি বাক্স ওজন করতে পারে।
প্রশ্ন: আপনি কতবার ওজন করলেই বুঝতে পারবেন কোন বাক্সে লুকিয়ে আছে রত্ন?
তরুণ কোডারদের জন্য এটি একটি বাস্তব 'লজিকাল থিঙ্কিং' এক্সারসাইজ।
কমেন্টে লিখে জানান, আপনি কীভাবে সমাধান করবেন!
একটি মজার হ্যাকিং ট্রিক
চলুন শেখা শেষে একটু মজা করি! আপনি জানেন কি, আপনার ব্রাউজারেই আপনি মজা করে গুগলের মতো বিশাল ওয়েবসাইটে ছোটখাটো পরিবর্তন আনতে পারেন?
Chrome এ গিয়ে google.com খুলুন, তারপর কীবোর্ডে চাপুন Ctrl + Shift + J (Mac এ Cmd + Option + J) — Console খুলে যাবে।
এখন নিচের কোডটি কপি করে Console-এ পেস্ট করুন:
document.body.innerHTML = document.body.innerHTML.replace(/Google/gi, "CoderBoss 😎");
এখন গুগল পেজের যেকোনো "Google" শব্দ মুহূর্তে বদলে যাবে "CoderBoss 😎" এ — একদম ম্যাজিকের মতো!
এই মজার হ্যাক দিয়ে আপনি শিখবেন: কিভাবে JavaScript দিয়ে পুরো ওয়েবসাইটের কন্টেন্ট পরিবর্তন করা যায় কিভাবে innerHTML এবং replace() কাজ করে
মনে রাখবেন, এটি শুধু আপনার ব্রাউজারে কাজ করে এবং কোনো স্থায়ী পরিবর্তন আনে না — একেবারে নিরাপদ ও শেখার জন্য পারফেক্ট!
শেষ কথা
প্রোগ্রামিং শেখা মানে কেবল কোড মুখস্থ করা না—মজা করে, ধাপে ধাপে বোঝা।
আজ আপনি শিখলেন: প্রোগ্রামের গঠন ইনপুট/আউটপুট ডেটা টাইপ কন্ডিশনাল স্টেটমেন্ট ছোট সমস্যা থেকে বড়ো চিন্তাভাবনা!
তাহলে, কোড লেখা শুরু করুন এখনই!
পরের পর্বে আসছে লুপ, অ্যারে, ও আরও মজার ম্যাজিক!
আপনার Turn!
এই লেখাটি কেমন লাগলো? কোন অংশটা সবচেয়ে বেশি বুঝতে পেরেছেন?
আর কোন টপিকটা এখনো কেমন যেন ধোঁয়াটে লাগে?
কমেন্টে জানান —
আপনার প্রশ্নই হতে পারে পরবর্তী পর্বের বিষয়!
আর হ্যাঁ, আপনি যদি একেবারে নতুন হন, দয়া করে শুধু একটা "নতুন" লিখুন —
আমরা আপনাকে মাথায় রেখে লিখব
-IT
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
