JavaScript কেন? ব্রাউজার থেকে সার্ভার — এক ভাষা, পুরো ওয়েব

১ · স্বাগতম — এই কোর্স কাদের জন্য, কীভাবে চলে

ABCL TECH-এর JavaScript কোর্সে আপনাকে আন্তরিক স্বাগতম। আপনি হয়তো স্কুল-কলেজে পড়েন, হয়তো বিশ্ববিদ্যালয়ে। হয়তো চাকরির পরীক্ষা বা ইন্টারভিউর প্রস্তুতি নিচ্ছেন, হয়তো নিজের একটি ওয়েবসাইট বা অ্যাপ বানাতে চান। আবার হয়তো আপনি এর মধ্যেই অন্য কোনো ভাষায় কাজ করেন, এখন ওয়েবের দিকে আসতে চান। যেখান থেকেই আসুন — এই কোর্স আপনার জন্যই বানানো।

আগে কোনো প্রোগ্রামিং জানার দরকার নেই। অনেকের কাছে JavaScript-ই প্রথম ভাষা, তাই আমরা একদম শুরু থেকে শুরু করব। যাঁরা আমাদের C, C++, Python বা Java কোর্স থেকে এসেছেন, তাঁদের জন্য মাঝে মাঝে “C/C++/Python/Java জানলে” নামে একটি ছোট বাক্স থাকবে। ওই ভাষাগুলো না জানলে বাক্সটি নিশ্চিন্তে বাদ দিন।

কোর্সে ৮টি মডিউলে মোট ৫৯টি পর্ব। প্রতিটি পর্ব একই ছাঁচে সাজানো, যাতে কয়েকটি পর্ব পড়ার পর আপনি জানেন কোথায় কী পাবেন:

লেখার ভেতরে ডটেড দাগ দেওয়া শব্দে মাউস রাখলে বা চাপলে তার সহজ বাংলা মানে দেখাবে। লগইন করলে প্রতিটি পর্বে “পড়া শেষ” চিহ্ন দিয়ে অগ্রগতি রাখতে পারবেন; লগইন ছাড়াও সব পড়া, কোড চালানো আর কুইজ দেওয়া যায়। ড্যাশবোর্ডে মডিউল টেস্ট আর ফাইনাল পরীক্ষা দিয়ে সার্টিফিকেট নিতে পারবেন।

২ · আপনি প্রতিদিনই JavaScript চালাচ্ছেন

আজ সকালে হয়তো ফোনে Facebook খুলেছেন, Daraz-এ একটি জিনিস কার্টে রেখেছেন, কিংবা Google Docs-এ বন্ধুর সাথে একই ফাইলে লিখেছেন। এই প্রতিটি কাজের সময় আপনার ব্রাউজার চুপচাপ হাজার হাজার লাইন JavaScript চালাচ্ছিল। আপনি কোনো প্রোগ্রাম ইনস্টল করেননি, কোনো অনুমতিও দেননি — ওয়েবসাইট খোলার সাথে সাথে কোডটি ডাউনলোড হয়ে চলতে শুরু করেছে।

তিনটি চেনা দৃশ্য ভাবুন:

• “Add to cart” চাপলেন: পুরো পাতা নতুন করে লোড হলো না। শুধু কার্টের সংখ্যাটি ০ থেকে ১ হলো, পাশে ছোট একটি বার্তা ভেসে উঠল। পাতার একটি টুকরো বদলানোর এই কাজ JavaScript-এর।
• লাইভ ক্রিকেট স্কোর: বাংলাদেশের ম্যাচ চলছে, আপনি কিছু না চাপলেও রান আর ওভার নিজে থেকে বদলাচ্ছে। JavaScript পেছনে সার্ভারের সাথে যোগাযোগ রাখছে আর নতুন তথ্য এলেই পাতায় বসিয়ে দিচ্ছে।
• Google Maps টেনে সরানো: আঙুল দিয়ে ম্যাপ টানলে নতুন এলাকার ছবি টুকরো টুকরো করে আসে, জুম করলে মসৃণভাবে বড় হয়। পাতা একবারও reload হয় না। ২০০৫ সালে এটি দেখে মানুষ অবাক হয়েছিল — “ওয়েবসাইট কি ডেস্কটপ সফটওয়্যারের মতো আচরণ করতে পারে?”

এবার “Add to cart” চাপার মুহূর্তটি ধীরগতিতে দেখি। এক সেকেন্ডেরও কম সময়ে ভেতরে ছয়টি ঘটনা ঘটে। “পরে” চাপুন:

<button id="add">Add to cart</button>
↑ ব্রাউজার একটি "click" event তৈরি করল:
{ type: 'click', target: button#add, … }

button.addEventListener('click', addToCart);

async function addToCart() {
  button.disabled = true;   // দুবার চাপা ঠেকাতে
  // … পরের ধাপে সার্ভারে পাঠাব
}

const res = await fetch('/api/cart', {
  method: 'POST',
  body: JSON.stringify({ productId: 'TSHIRT-42', qty: 1 }),
});
// অপেক্ষার সময় পাতা জমে যায় না — স্ক্রল, টাইপ সব চলে

// সার্ভারের কোড — হতে পারে Node.js (JavaScript!),
// হতে পারে PHP, Java বা Python
কার্টে পণ্য যোগ → ডেটাবেসে লেখা → উত্তর তৈরি

HTTP 200 OK
{ "count": 1, "total": 450 }

const data = await res.json();   // টেক্সট → JavaScript object

badge.textContent = data.count;   // 🛒 কার্ট (১)
button.disabled = false;
পুরো পাতা reload হয়নি — শুধু একটি সংখ্যা বদলেছে

৩ · প্রথম স্বাদ — এই পাতাতেই চালিয়ে দেখুন

এখনই সব বোঝার দরকার নেই — পর্ব ০৪-এ প্রতিটি লাইন ধরে ধরে দেখব। আপাতত শুধু অনুভব করুন JavaScript কত কম কথায় কাজের জিনিস করে। নিচের কোডটি একটি অনলাইন দোকানের কার্টের মোট দাম হিসাব করে, আর বাংলা সংখ্যায়, বাংলাদেশি নিয়মে (লাখের কমা) টাকা দেখায়। “Run” চাপুন:

const cart = [
  { name: 'টি-শার্ট', price: 450, qty: 2 },
  { name: 'বই', price: 380, qty: 3 },
  { name: 'ল্যাপটপ', price: 98500, qty: 1 },
];

const taka = new Intl.NumberFormat('bn-BD', {
  style: 'currency', currency: 'BDT', maximumFractionDigits: 0,
});

for (const item of cart) {
  console.log(`${item.name} × ${item.qty} = ${taka.format(item.price * item.qty)}`);
}

const subtotal = cart.reduce((sum, item) => sum + item.price * item.qty, 0);
const delivery = subtotal >= 2000 ? 0 : 60;
console.log('ডেলিভারি:', taka.format(delivery));
console.log('মোট:', taka.format(subtotal + delivery));

এবার JavaScript-এর আসল জাদু — পাতার লেখা বদলানো। নিচের কোডটি চালালে কোডের ওপরে একটি ছোট ওয়েব পাতা দেখা যাবে। কোডটি নিজেই দুবার বোতামে ক্লিক করে। চালানোর পর আপনি নিজেও বোতামটি চেপে দেখুন:

const label = document.querySelector('#label');
const button = document.querySelector('#add');
let count = 0;

button.addEventListener('click', () => {
  count = count + 1;
  label.textContent = `🛒 কার্টে ${count.toLocaleString('bn-BD')}টি পণ্য`;
  console.log('পাতা বদলাল →', label.textContent);
});

button.click();   // কোড দিয়েই দুবার ক্লিক
button.click();

৪ · JavaScript আজ কোথায় চলে — ব্রাউজারের বাইরেও

শুরুতে JavaScript-এর একটিই ঘর ছিল — browser. কিন্তু গত পনেরো বছরে ভাষাটি প্রায় সবখানে ছড়িয়ে পড়েছে। কারণটা সহজ: একটি ভাষা চালাতে লাগে একটি engine (যে প্রোগ্রাম কোড পড়ে চালায়)। ব্রাউজারের ভেতর থেকে engine বের করে অন্য জায়গায় বসাতে পারলেই সেখানে JavaScript চলে।

একটি উদাহরণে পুরো ছবিটি দেখি। ধরুন আপনি একটি ছোট ই-কমার্স ব্যবসার জন্য কার্টের দাম হিসাবের একটি ফাংশন লিখলেন। সেই একই ফাংশন কত জায়গায় কাজে লাগানো যায়, দেখুন:

export function cartTotal(items) {
  const sub = items.reduce((s, i) => s + i.price * i.qty, 0);
  return sub >= 2000 ? sub : sub + 60;
}

import { cartTotal } from './cart.js';
totalBox.textContent = cartTotal(items);   // DOM আছে

import { cartTotal } from './cart.js';
const total = cartTotal(order.items);   // DOM নেই, কিন্তু ফাইল, নেটওয়ার্ক, ডেটাবেস আছে
if (total !== order.claimedTotal) reject(order);

// একটি জানালায় Chromium (DOM) + পেছনে Node.js (ফাইল, প্রিন্টার)
receipt.total = cartTotal(items);   → রসিদ প্রিন্ট

<Text>মোট: {cartTotal(items)} ৳</Text>
// DOM নেই — কিন্তু আসল native বোতাম আর লেখা

৫ · দশ দিনে জন্ম — Netscape থেকে প্রতি বছরের নতুন সংস্করণ

JavaScript-এর অনেক অদ্ভুত আচরণ বোঝার চাবি তার ইতিহাসে। ১৯৯৫ সাল। ইন্টারনেট সবে সাধারণ মানুষের কাছে পৌঁছাচ্ছে, আর সবচেয়ে জনপ্রিয় ব্রাউজার Netscape Navigator. ওয়েব পাতা তখন স্থির কাগজের মতো — কিছু চাপলে পুরো নতুন পাতা আসে। Netscape চাইল ব্রাউজারের ভেতরে একটি সহজ স্ক্রিপ্টিং ভাষা, যা ডিজাইনার আর শখের প্রোগ্রামাররাও লিখতে পারবেন।

দশ দিনে একটি ভাষা বানানো মানে অনেক সিদ্ধান্ত তাড়াহুড়োয় নেওয়া। Eich নিজের পছন্দের ভাষা Scheme থেকে নিয়েছিলেন function-কে মান হিসেবে ব্যবহারের ধারণা, Self থেকে prototype-ভিত্তিক object, আর বাইরের চেহারা দিয়েছিলেন Java-র মতো — কারণ ম্যানেজমেন্ট চেয়েছিল “দেখতে যেন Java-র ছোট ভাইয়ের মতো লাগে”। এই মিশ্রণ আশ্চর্যরকম শক্তিশালী হয়েছিল, কিন্তু কিছু ভুলও থেকে গেল, যেমন typeof null হলো 'object', আর == দিয়ে তুলনায় অপ্রত্যাশিত টাইপ বদল (coercion). ভাষা একবার লক্ষ লক্ষ ওয়েবসাইটে চলে গেলে আর এসব ভুল সারানো যায় না — সারালে পুরোনো সাইট ভেঙে যাবে। ওয়েবের এই নিয়মকে বলে “don't break the web”.

এরপর এলো ব্রাউজার যুদ্ধ। Microsoft ১৯৯৬ সালে Internet Explorer 3-এ নিজের সংস্করণ বানাল, নাম JScript (নামটি আলাদা, কারণ “JavaScript” trademark তাদের ছিল না)। দুটি দেখতে প্রায় এক, কিন্তু খুঁটিনাটিতে আলাদা। ওয়েব ডেভেলপারদের জীবন হয়ে উঠল দুর্বিষহ — একই কোড এক ব্রাউজারে চলে, অন্যটিতে চলে না। সমাধান একটাই: একটি নিরপেক্ষ, লিখিত মানদণ্ড।

Netscape ১৯৯৬ সালের শেষে ভাষাটি জমা দিল ইউরোপের মানদণ্ড সংস্থা Ecma International-এ। সেখানে এর দায়িত্ব পেল একটি কমিটি — TC39. ১৯৯৭ সালের জুনে প্রকাশিত হলো প্রথম মানদণ্ড ECMAScript 1. নামটি সুন্দর নয় — trademark-এর জটিলতা এড়াতে আপসের নাম। তাই মনে রাখুন: ECMAScript হলো লিখিত নিয়মের বই, আর JavaScript হলো সেই নিয়ম মেনে বানানো ভাষা, যা ব্রাউজার আর Node.js চালায়। বাস্তবে দুটি শব্দ প্রায় একই অর্থে ব্যবহার হয়।

নিচের টাইমলাইনে বাকি গল্পটি দেখুন — বিশেষ করে মাঝের “হারানো দশক” খেয়াল করুন:

<!-- সেই যুগের সাধারণ JavaScript -->
<form onsubmit="return checkForm()">
if (document.forms[0].name.value == "") {
  alert("নাম লিখুন!");
}

ES1 — জুন ১৯৯৭   প্রথম মানদণ্ড
ES2 — ১৯৯৮       ছোট সম্পাদনা
ES3 — ১৯৯৯       regex, try/catch — পরের দশ বছরের ভিত্তি

// ES4-এর খসড়ায় ছিল class, type, package …
২০০৮: ES4 পরিত্যক্ত
// এর মধ্যেই: Ajax (২০০৫), Gmail, Google Maps —
// পুরোনো ES3 দিয়েই ওয়েব অ্যাপের যুগ শুরু

সেপ্টেম্বর ২০০৮ — Chrome + V8   JIT, বহু গুণ দ্রুত
ডিসেম্বর ২০০৯ — ES5          "use strict", JSON, forEach/map
২০০৯          — Node.js      ব্রাউজারের বাইরে JavaScript

let / const   arrow =>   class   template `${…}`
destructuring   default parameter   Promise
import / export   Map / Set   for…of   Symbol

ES2016 **      ES2017 async/await   ES2020 ?. ??
ES2022 #private, top-level await   ES2023 toSorted
… প্রতি বছর একটি করে — ES2025 পর্যন্ত, এবং চলছে

৬ · Engine আর JIT — ধীর ভাষা কীভাবে দ্রুত হলো

প্রথম দশ বছর JavaScript-কে “খেলনা ভাষা” বলা হতো — ধীর, শুধু ছোট কাজের জন্য। তখনকার engine কোডকে machine code-এ না বদলে সরাসরি ধাপে ধাপে চালাত (interpret করত)। কিন্তু ২০০৫-এর পর Gmail আর Google Maps দেখাল, ব্রাউজারে বড় অ্যাপ চালানো সম্ভব — যদি JavaScript যথেষ্ট দ্রুত হয়। শুরু হলো ব্রাউজারগুলোর মধ্যে গতির প্রতিযোগিতা।

২০০৮ সালে Apple-এর WebKit দলের SquirrelFish আর Mozilla-র TraceMonkey কাজ করছিল, আর সেপ্টেম্বরে Google Chrome-এর সাথে এলো Lars Bak-এর দলের তৈরি V8. এদের মূল কৌশল JIT (Just-In-Time) compilation: প্রোগ্রাম চলার সময়ই engine খেয়াল করে কোন অংশ বারবার চলছে, আর সেই অংশটুকু সরাসরি machine code-এ অনুবাদ করে ফেলে। ফল — JavaScript কয়েক বছরের মধ্যে বহু গুণ দ্রুত হলো।

আজকের V8 এতটাই দ্রুত যে অনেক কাজে JavaScript Python-এর চেয়ে উল্লেখযোগ্যভাবে দ্রুত চলে, যদিও ভালোভাবে লেখা C, C++ বা Rust-এর গতিতে সাধারণত পৌঁছায় না। গতির এই বিপ্লবই JavaScript-কে “খেলনা” থেকে গুরুতর প্রকৌশলের ভাষা বানিয়েছে।

৭ · Node.js, npm, TypeScript — আর JavaScript কেন Java নয়

২০০৯ সালে Ryan Dahl একটি সহজ কিন্তু বৈপ্লবিক কাজ করলেন: V8 engine-কে ব্রাউজার থেকে বের করে তার সাথে জুড়ে দিলেন ফাইল, নেটওয়ার্ক আর প্রসেস সামলানোর ক্ষমতা। জন্ম নিল Node.js. তাঁর মূল চিন্তা ছিল — সার্ভার বেশিরভাগ সময় অপেক্ষা করে (ডেটাবেসের উত্তর, ফাইল পড়া, নেটওয়ার্ক)। অপেক্ষার সময় হাত গুটিয়ে না বসে অন্য অনুরোধ সামলালে একটি প্রসেসই হাজারো সংযোগ একসাথে চালাতে পারে। JavaScript ব্রাউজারে ঠিক এভাবেই event দিয়ে কাজ করত, তাই মিলটা নিখুঁত হলো।

২০১০ সালে এলো npm — Node.js-এর package manager. কেউ একটি কাজের কোড (package) লিখে প্রকাশ করলে বাকিরা এক কমান্ডে নিজের প্রজেক্টে নিতে পারেন। আজ npm registry বিশ্বের সবচেয়ে বড় package ভান্ডারগুলোর একটি, যেখানে লক্ষ লক্ষ package আছে। সুবিধা বিশাল: প্রায় যেকোনো কাজের জন্য তৈরি কোড আছে। ঝুঁকিও আছে: অন্যের কোড মানে অন্যের ভুল বা দুষ্ট উদ্দেশ্যও আপনার প্রজেক্টে ঢুকতে পারে। পর্ব ৪৬-এ npm আর সাপ্লাই-চেইন নিরাপত্তা দেখব।

JavaScript ≠ Java

নতুনদের সবচেয়ে সাধারণ ভুল ধারণা: “JavaScript বুঝি Java-র কোনো রূপ।” একদমই না। একজন অভিজ্ঞ ডেভেলপারের বিখ্যাত রসিকতা — “Java আর JavaScript-এর সম্পর্ক car আর carpet-এর মতো।” নামের মিল শুধু ১৯৯৫ সালের বিপণন। দুটি ভাষার মিল বলতে { }, if, for-এর মতো C-ধাঁচের বাইরের চেহারা।

TypeScript — টাইপসহ JavaScript

বড় প্রজেক্টে JavaScript-এর dynamic টাইপ সমস্যা তৈরি করে: ভুল টাইপের মান পাঠালে ভুলটা ধরা পড়ে কেবল চলার সময়, হয়তো ব্যবহারকারীর সামনে। এর সমাধানে Microsoft ২০১২ সালে আনে TypeScript — JavaScript-এর ওপর টাইপের একটি স্তর। আপনি লেখেন function total(price: number), আর কোড চালানোর আগেই টুল সতর্ক করে দেয় কোথাও string পাঠালে। চালানোর আগে TypeScript থেকে টাইপগুলো মুছে সাধারণ JavaScript তৈরি হয়। আজ অনেক পেশাদার প্রজেক্ট TypeScript-এ লেখা। কিন্তু মনে রাখুন — TypeScript আসলে JavaScript-ই; JavaScript ভালো না বুঝে TypeScript শেখা মানে ভিত ছাড়া দোতলা বানানো। পর্ব ৪৭-এ TypeScript শুরু করব।

৮ · একটি সৎ তুলনা — JavaScript কোথায় সেরা, কোথায় দুর্বল

কোনো ভাষাই সব কাজে সেরা নয়। একজন ভালো প্রকৌশলী জানেন কোন কাজে কোন টুল। তাই JavaScript-এর প্রশংসার পাশাপাশি তার দুর্বলতাও খোলাখুলি দেখি:

JavaScript-এর চারটি আসল দুর্বলতা

• ঢিলেঢালা টাইপ আর coercion: "5" - 2 দেয় 3, কিন্তু "5" + 2 দেয় "52". ভাষা নিজে থেকে টাইপ বদলে ফেলে, আর ভুল চুপচাপ ঘটে। সমাধান জানা আছে — ===, সতর্ক রূপান্তর, TypeScript — পর্ব ০৬-এ পুরোটা।
• একটি main thread: JavaScript সাধারণত একবারে একটি কাজই চালায়। I/O-র অপেক্ষায় এটা সমস্যা নয় (event loop সামলায়), কিন্তু ভারী গণনা চললে পাতা জমে যায়। সমাধান Web Worker (পর্ব ৪২) বা কাজটি অন্য ভাষায় করা।
• ইকোসিস্টেমের দ্রুত বদল: framework আর টুল প্রতি কয়েক বছরে বদলায়; একে মজা করে বলা হয় “JavaScript fatigue”. সমাধান: ভাষার মূল ধারণা শক্ত করে শেখা — framework বদলায়, ভিত বদলায় না।
• পুরোনো ভুল চিরকাল থাকে: “don't break the web”-এর কারণে typeof null === 'object' বা var-এর অদ্ভুত scope মুছে ফেলা যায় না। আধুনিক JavaScript এদের পাশ কাটানোর পথ দেয় (let/const, strict mode), কিন্তু পুরোনো কোড পড়তে এগুলো জানতে হয়।

৯ · ক্যারিয়ারের পথ আর এই কোর্সের মানচিত্র

বাংলাদেশে সফটওয়্যার কোম্পানি, ই-কমার্স, ফিনটেক আর আউটসোর্সিং — সবখানেই ওয়েব অ্যাপ লাগে, আর ওয়েব অ্যাপ মানেই JavaScript. চাকরির বিজ্ঞাপন আর ফ্রিল্যান্স মার্কেটপ্লেসে JavaScript-সংশ্লিষ্ট কাজের চাহিদা অনেক, দেশে ও বিদেশে দুই জায়গাতেই। বহু বছর ধরে আন্তর্জাতিক ডেভেলপার জরিপে JavaScript সবচেয়ে বেশি ব্যবহৃত ভাষাগুলোর শীর্ষে থেকেছে। তবে একটি সৎ কথা: চাহিদা বেশি বলে প্রতিযোগিতাও বেশি। শুধু “একটু JavaScript পারি” দিয়ে আলাদা হওয়া কঠিন; যিনি ভেতরের নিয়ম বোঝেন, তিনিই এগিয়ে থাকেন।

৮টি মডিউল — কোন পথে এগোব

প্রথম চারটি মডিউলের প্রায় সব কোড এই পাতার ভেতরেই চলবে। মডিউল ৬-এ পাতার ছোট উইন্ডোতে আসল DOM বদলাবেন, আর মডিউল ৭-এর Node.js পর্বগুলোতে কোড চলবে একটি অনলাইন Node.js সার্ভারে — তখনো কিছু ইনস্টল না করেই। কীভাবে পড়বেন: ক্রম মেনে পড়ুন, প্রতিটি stepper নিজে চালান, প্রতিটি কোড একটু বদলে আবার চালান, আর ভাবনার প্রশ্নের উত্তর দেখার আগে নিজে দুই মিনিট ভাবুন।

১০ · AI-এর যুগে JavaScript — কী আপনাকে বুঝতেই হবে

আজ AI টুলগুলো সম্ভবত অন্য যেকোনো ভাষার চেয়ে বেশি JavaScript লেখে — কারণ ইন্টারনেটে JavaScript কোডের পরিমাণ বিপুল, আর ওয়েবের প্রায় প্রতিটি কাজে এটি লাগে। একটি React পাতা বা Express API চাইলে কয়েক সেকেন্ডে পেয়ে যাবেন। তাহলে শেখার দরকার কী?

উত্তর: AI-এর লেখা JavaScript প্রায়ই প্রথম দেখায় চলে — আর সেখানেই বিপদ। কারণ JavaScript-এর বেশিরভাগ গুরুতর ভুল চুপচাপ ঘটে: কোনো error দেখায় না, শুধু কখনো কখনো ভুল ফল দেয়, ধীর হয়ে যায় বা নিরাপত্তার ফাঁক রেখে দেয়। এগুলো ধরতে লাগে চারটি বোঝাপড়া:

AI-এর লেখা JavaScript হাতে পেলে — যাচাইয়ের চেকলিস্ট

• কোডটি কোথায় চলবে জানি — ব্রাউজার না Node.js — আর সেই পরিবেশে না থাকা কিছু (document, fs) ব্যবহার হয়নি
• প্রতিটি fetch বা async কাজে await আছে, আর ব্যর্থ হলে কী হবে তা সামলানো হয়েছে
• ব্যবহারকারীর লেখা কোথাও innerHTML বা eval-এ যায়নি; কোনো গোপন key ব্রাউজারের কোডে নেই
• তুলনায় ===; টাকা বা সংখ্যার হিসাব অন্তত একবার হাতে মিলিয়েছি
• নতুন কোনো npm package যোগ হলে নামটি সঠিক ও পরিচিত কি না যাচাই করেছি
• প্রতিটি অংশ কী করে, নিজের ভাষায় বলতে পারি — না পারলে AI-কে জিজ্ঞেস করেছি “এই লাইন না থাকলে কী হতো?”