প্রথম প্রোগ্রাম — console.log থেকে পাতায় লেখা

১ · প্রোগ্রাম মানে ওপর থেকে নিচে চলা নির্দেশের সারি

আগের পর্বে আপনি browser console আর Node.js হাতের কাছে এনেছেন। এবার প্রথম প্রোগ্রাম। তবে কোড লেখার আগে একটি ছবি মাথায় বসিয়ে নিন — বাকি পুরো কোর্স এই ছবির ওপর দাঁড়িয়ে।

একটি JavaScript প্রোগ্রাম হলো কতগুলো statement-এর সারি। প্রতিটি statement একটি সম্পূর্ণ নির্দেশ: “একটি মান মনে রাখো”, “এটা যোগ করো”, “এটা দেখাও”। যে প্রোগ্রাম এই নির্দেশগুলো পড়ে চালায়, তার নাম engine — Chrome ও Edge-এ V8, Firefox-এ SpiderMonkey, Safari-তে JavaScriptCore. Node.js-এর ভেতরেও আছে সেই V8.

একটি সূক্ষ্ম কিন্তু জরুরি কথা: engine প্রথম লাইন চালানোর আগে পুরো ফাইলটি একবার পড়ে নেয়, ব্যাকরণ ঠিক আছে কি না দেখতে। একে বলে parsing. ব্যাকরণ ঠিক থাকলে তবেই চালানো শুরু। এই দুই ধাপের কথা মনে রাখুন — অংশ ৬-এ error পড়ার সময় এটাই চাবিকাঠি হবে। নিচের ডায়াগ্রামে একটি বাজারের হিসাব কীভাবে ধাপে ধাপে চলে দেখুন:

1let total = 0;2total = total + 320;   // চাল3total = total + 145;   // ডাল4console.log('এখন পর্যন্ত:', total);5total = total + 199;   // তেল6console.log('মোট:', total);

২ · console.log — ডেভেলপারের জানালা

প্রথম প্রোগ্রামটি এক লাইনের। Browser console (F12 → Console) বা Node.js-এ লিখুন:

console.log('Hello, World!');

এখানে console একটি object — DevTools-এর console প্যানেলের সাথে কথা বলার মাধ্যম। তার ভেতরের log একটি function, যা পাওয়া মান লিখে দেয়। বন্ধনীর ভেতরে যা দেন, তাকে বলে argument. কমা দিয়ে একাধিক argument দেওয়া যায়; console.log সেগুলো মাঝে একটি করে ফাঁকা রেখে পাশাপাশি লেখে।

String, number আর ছোট হিসাব

উদ্ধৃতিচিহ্নের ভেতরের লেখাকে বলে string. একক '…', দ্বৈত "…" আর backtick `…` — তিনটিই চলে; শুধু শুরু আর শেষে একই চিহ্ন হতে হবে। উদ্ধৃতি ছাড়া 42 বা 12.5 হলো number. আর 45 + 30-এর মতো যা হিসাব করে একটি মান দেয়, তাকে বলে expression. নিচের টেবিলের প্রতিটি ফল Edge আর Node-এ চালিয়ে যাচাই করা:

শেষ দুটি সারি টাকার হিসাবে খুব কাজের। দাম দেখানোর সময় toFixed(2) দিয়ে দুই ঘর দশমিক রাখুন, যাতে “271.3333333333333 টাকা” না দেখায়। মনে রাখবেন, toFixed ফেরত দেয় string — অর্থাৎ দেখানোর জন্য, আরও হিসাবের জন্য নয়।

৩ · Statement, semicolon আর ASI-এর ফাঁদ

C বা Java-তে প্রতিটি statement-এর শেষে ; না দিলে compile-ই হয় না। JavaScript-এ অনেক সময় না দিলেও চলে। কারণ ভাষার নিয়মে আছে ASI — Automatic Semicolon Insertion. মোটামুটি নিয়ম: লাইন ভাঙার জায়গায় পরের টোকেন দিয়ে আগের statement চালিয়ে নেওয়া না গেলে, engine সেখানে নিজেই একটি ; ধরে নেয়।

শুনতে আরামদায়ক। কিন্তু দুটি জায়গায় এটি উল্টো কাজ করে — একবার বসিয়ে দিয়ে, আরেকবার না বসিয়ে। নিচে দুটোই আসল আচরণসহ দেখুন:

function getBill() {
  return
  {
    total: 120
  };
}
console.log(getBill());

function getBill() {
  return;          // ← ASI এখানে ; বসাল
  {
    total: 120
  };
}

  {                 // একটি block
    total: 120      // label "total" + মান 120
  };                // কখনো চলবে না

undefined

// ঠিক করার উপায়: { থাকুক return-এর লাইনেই
return {
  total: 120
};

const a = 1
const b = a
[1, 2].forEach(n => console.log(n))

// engine পড়ে: const b = a[1, 2].forEach(...)
TypeError: Cannot read properties of undefined (reading 'forEach')

৪ · Comment, বড়-ছোট হাতের অক্ষর আর নামের নিয়ম

Comment — মানুষের জন্য লেখা

Comment engine পুরোপুরি উপেক্ষা করে; এটি পরের পাঠকের জন্য — যিনি ছয় মাস পরের আপনিও হতে পারেন। দুই রকম:

// এক লাইনের comment — লাইনের শেষ পর্যন্ত

/* একাধিক লাইনের comment —
   যেখানে শেষ চিহ্ন আসবে, সেখানেই শেষ */

/**
 * দুই ঘর দশমিকে টাকার অঙ্ক বানায়।
 * @param {number} amount - টাকার পরিমাণ
 * @returns {string} যেমন "271.33"
 */
function formatTaka(amount) {
  return amount.toFixed(2);
}

শেষেরটি /** দিয়ে শুরু — এর নাম JSDoc. VS Code এটি পড়ে: formatTaka( লিখলেই ওপরে বর্ণনা আর টাইপ দেখায়। এটি TypeScript-এর দিকে প্রথম পদক্ষেপও — পর্ব ৪৭-এ আবার দেখা হবে। ভালো comment বলে কেন, কোড নিজেই বলে কী। // total-এ 1 যোগ করো অপ্রয়োজনীয়; // দোকান ১ টাকা রাউন্ড আপ করে, তাই +1 মূল্যবান।

বড় হাত আর ছোট হাত আলাদা

JavaScript case-sensitive — total, Total আর TOTAL তিনটি আলাদা নাম। এক অক্ষরের ভুলে দুই ধরনের error আসে, দুটোই Node-এ চালিয়ে দেখা:

পার্থক্যটি খেয়াল করুন — এটি অংশ ৬-এর মূল শিক্ষা। নামটাই না পেলে ReferenceError; নাম পাওয়া গেছে কিন্তু সেটি দিয়ে অসম্ভব কাজ করতে বললে TypeError.

নাম রাখার নিয়ম (identifier)

ভ্যারিয়েবল বা function-এর নামকে বলে identifier. নিয়ম: অক্ষর, _ বা $ দিয়ে শুরু; পরে অঙ্কও চলে; ফাঁকা বা - চলে না; let, return-এর মতো সংরক্ষিত শব্দ চলে না। Node-এ যাচাই করা উদাহরণ:

• let 2nd = 1 → SyntaxError: Invalid or unexpected token (অঙ্ক দিয়ে শুরু)
• let my-name = 1 → SyntaxError: Unexpected token '-' (engine ভাবে বিয়োগ)
• let let = 1 → SyntaxError: let is disallowed as a lexically bound name

JavaScript-এর রীতি হলো camelCase: প্রথম শব্দ ছোট হাতে, পরের প্রতিটি শব্দের প্রথম অক্ষর বড় — customerName, totalPrice, getBill. Class-এর নাম বড় হাতে শুরু (ShoppingCart), আর কখনো না বদলানো ধ্রুবক অনেকে লেখেন VAT_RATE.

"use strict" — ভাষার পুরোনো ভুলের সংশোধনী

পুরোনো JavaScript-এ একটি ভয়ংকর আচরণ ছিল: ঘোষণা না করা নামে মান বসালে engine চুপচাপ একটি global ভ্যারিয়েবল বানিয়ে ফেলত। ফলে বানান ভুল (totl = 5) কোনো error দিত না, শুধু নতুন একটি ভ্যারিয়েবল জন্ম নিত। ES5 (২০০৯) এর সমাধান আনে strict mode: ফাইল বা function-এর শুরুতে "use strict"; লিখলে এমন ভুল সরাসরি error হয়ে যায়। যাচাই করা ফল: সাধারণ মোডে totl = 5 নিঃশব্দে চলে, কিন্তু strict mode-এ একই লাইনে আসে ReferenceError: totl is not defined — ভুলটি সাথে সাথে চোখে পড়ে।

আধুনিক কোডে প্রায়ই এই লাইনটি আলাদা করে লিখতে হয় না। <script type="module"> বা import/export ব্যবহার করা ফাইল — অর্থাৎ module — আর class-এর ভেতরের কোড নিজে থেকেই strict. Module নিয়ে বিস্তারিত পর্ব ৪৫-এ।

৫ · পাতায় লেখা — ব্যবহারকারীর জন্য আউটপুট

এবার দ্বিতীয় দর্শক: ব্যবহারকারী। তিনি দেখেন শুধু পাতা। পর্ব ০২-এ দেখেছেন, browser HTML পড়ে একটি গাছের মতো কাঠামো বানায় — DOM. JavaScript সেই গাছের যেকোনো ডাল খুঁজে বদলাতে পারে। সবচেয়ে সহজ আর নিরাপদ জোড়াটি হলো:

const banner = document.querySelector('#banner');   // id="banner" উপাদানটি খোঁজো
banner.textContent = 'স্বাগতম, রাফি!';                // তার লেখা বদলাও

document.querySelector একটি CSS selector নেয় (#id, .class, h1…) আর প্রথম মিল পাওয়া উপাদানটি দেয়; কিছু না পেলে দেয় null. textContent উপাদানের ভেতরের লেখা বদলায় — এবং যা দেন তা শুধু লেখা হিসেবেই বসে, HTML হিসেবে নয়। DOM-এর পুরো গল্প পর্ব ৩৭-এ।

innerHTML — শক্তিশালী, কিন্তু বিপজ্জনক

innerHTML-ও লেখা বসায়, তবে যা দেন তাকে HTML হিসেবে পড়ে। নিজের লেখা নির্দিষ্ট HTML-এর জন্য ঠিক আছে। কিন্তু ব্যবহারকারীর দেওয়া কিছু (নাম, মন্তব্য, URL-এর অংশ) innerHTML-এ ঢোকালে, কেউ নামের জায়গায় HTML ট্যাগ লিখে তার ভেতরে script চালানোর ব্যবস্থা করতে পারে। একে বলে XSS — ওয়েবের সবচেয়ে পরিচিত নিরাপত্তা-ত্রুটিগুলোর একটি।

// ✗ ঝুঁকিপূর্ণ: ব্যবহারকারীর লেখা HTML হিসেবে পড়া হবে
greeting.innerHTML = 'স্বাগতম, ' + userName;

// ✓ নিরাপদ: যা-ই থাকুক, শুধু লেখা হিসেবে দেখাবে
greeting.textContent = 'স্বাগতম, ' + userName;

নিয়মটি সহজ: ব্যবহারকারীর ডেটা মানেই textContent. নিরাপদভাবে HTML বানানোর পূর্ণ কৌশল, আর Content Security Policy — পর্ব ৪৩-এ।

যেগুলো আছে, কিন্তু এড়িয়ে চলবেন

Script কোথায় বসাবেন

HTML ওপর থেকে নিচে পড়া হয়। <head>-এ সাধারণ <script src> রাখলে script চলে body তৈরির আগেই — তখন querySelector পায় null, আর textContent বসাতে গেলে আসে TypeError: Cannot set properties of null (setting 'textContent') (V8-এর বার্তা, Node-এ যাচাই করা)। পর্ব ০২-এর সমাধানটিই মনে রাখুন:

<head>
  <script src="app.js" defer></script>   <!-- HTML পড়া শেষ হলে চলবে -->
</head>

defer মানে “ফাইলটি এখনই নামাও, কিন্তু চালাও HTML পুরো পড়া শেষ হলে।” type="module" দেওয়া script-ও নিজে থেকে defer-এর মতো আচরণ করে।

৬ · Error পড়তে শিখুন — প্রথম আসল দক্ষতা

প্রোগ্রামিং শেখার প্রথম মাসে আপনি সফল আউটপুটের চেয়ে বেশি error দেখবেন। অভিজ্ঞরাও প্রতিদিন দেখেন — পার্থক্য হলো, তাঁরা মেসেজটি পড়েন, ভয় পান না। JavaScript-এ শুরুতে তিনটি error সবচেয়ে বেশি আসে:

“কখন ধরা পড়ে” কলামটি গুরুত্বপূর্ণ। SyntaxError হলে ফাইলের প্রথম লাইনের console.log('Start')-ও ছাপা হয় না — কারণ engine parsing-এই আটকে গেছে (অংশ ১-এর প্রথম ধাপ)। কিন্তু ReferenceError বা TypeError হলে ভুলের আগের লাইনগুলো দিব্যি চলে, ভুলের লাইনে এসে প্রোগ্রাম থামে। দুটোই Edge-এ চালিয়ে মিলিয়ে দেখা। নিচের কোডটি নিজে চালিয়ে দেখুন — এতে একটি বানান ভুল ইচ্ছা করে রাখা:

const customerName = 'Rafi';
console.log('Start');
console.log('Welcome, ' + customerNmae);
console.log('End');

এই পাতার runner শুধু ধরন আর বার্তা দেখায়। আসল DevTools বা Node আরও বেশি তথ্য দেয় — আর সেখানেই আসল সাহায্য। একই কোড app.js নামে Node-এ চালালে যা আসে, তা অংশ ধরে ধরে পড়ি:

Start
C:\js-course\app.js:3
console.log('Welcome, ' + customerNmae);
                          ^

ReferenceError: customerNmae is not defined
    at Object.<anonymous> (C:\js-course\app.js:3:27)
    at Module._compile (node:internal/modules/cjs/loader…)
    … Node-এর ভেতরের আরও কয়েকটি লাইন …

Start
C:\js-course\app.js:3
console.log('Welcome, ' + customerNmae);
                          ^

ReferenceError: customerNmae is not defined
    at Object.<anonymous> (C:\js-course\app.js:3:27)

Start
C:\js-course\app.js:3
console.log('Welcome, ' + customerNmae);
                          ^

ReferenceError: customerNmae is not defined

ReferenceError: customerNmae is not defined
    at Object.<anonymous> (C:\js-course\app.js:3:27)   ← আপনার কোড
    at Module._compile (node:internal/…)        ← Node-এর নিজের
    at Module.load (node:internal/…)            ← Node-এর নিজের

Start
Uncaught ReferenceError: customerNmae is not defined
    at app.js:3:27              ← চাপলে Sources-এ সেই লাইন খোলে

SyntaxError আর TypeError — Node-এ যেমন দেখায়

C:\js-course\app.js:2
console.log('Total: ' + (45 + 30);
                                ^

SyntaxError: missing ) after argument list

এখানে Start নেই — parsing-এই থেমেছে। console.log(-এর বন্ধনী খোলা হয়েছিল, কিন্তু (45 + 30) বন্ধ হওয়ার পর আরেকটি ) লাগত। খেয়াল করুন, ^ যেখানে, ভুলটি অনেক সময় তার ঠিক আগে — engine যেখানে বুঝল “কিছু মিলছে না”, সেটি দেখায়, যেখানে আপনি ভুল করেছেন সেটি নয়। আর শেষের } হারালে বার্তা আসে SyntaxError: Unexpected end of input — “ফাইল শেষ, অথচ আমি তখনো বন্ধনী খুঁজছিলাম।”

Start
C:\js-course\app.js:3
shop.greet();
     ^

TypeError: shop.greet is not a function
    at Object.<anonymous> (C:\js-course\app.js:3:6)

shop আছে (তাই ReferenceError নয়), কিন্তু তার ভেতরে greet নেই, অর্থাৎ shop.greet-এর মান undefined. আর undefined-কে () দিয়ে ডাকা যায় না। AI-এর লেখা কোডে এটি খুব সাধারণ — এমন method ডাকা, যা আসলে নেই।

৭ · প্রথম ছোট প্রজেক্ট — “আজকের বাজার” বিল ভাগ

এবার সব জোড়া লাগাই। তিন বন্ধু মেসে থাকেন, আজ একজন বাজার করেছেন। প্রোগ্রামটি দাম যোগ করবে, তিনজনে ভাগ করবে, হিসাবের খুঁটিনাটি console-এ রাখবে (আপনার যাচাইয়ের জন্য), আর পরিষ্কার একটি স্বাগত-ব্যানার ও বিল দেখাবে পাতায় (বন্ধুদের জন্য)। ক্রেতার নাম আপাতত কোডেই লেখা — ফর্ম থেকে নাম নেওয়া শিখবেন পর্ব ৩৯-এ। চালিয়ে দেখুন — ওপরে পাতা, নিচে console:

// আজকের বাজার — হিসাব console-এ, ফল পাতায়
const customerName = 'রাফি';
const rice = 320;      // চাল (টাকা)
const lentils = 145;   // ডাল
const oil = 199;       // তেল
const eggs = 150;      // ডিম

const total = rice + lentils + oil + eggs;
const people = 3;
const share = total / people;

console.log('মোট:', total);
console.log('ভাগ (কাঁচা মান):', share);
console.log('ভাগ (toFixed):', share.toFixed(2));

document.querySelector('#banner').textContent = 'স্বাগতম, ' + customerName + '!';
document.querySelector('#bill').textContent =
  'আজকের বাজার ' + total + ' টাকা, ' + people + ' জনে ভাগ করলে জনপ্রতি ' + share.toFixed(2) + ' টাকা';

৮ · AI-এর যুগে — প্রথম প্রোগ্রাম থেকেই যাচাইয়ের অভ্যাস

“একটা JavaScript দিয়ে স্বাগত বার্তা দেখানোর কোড দাও” — AI কয়েক সেকেন্ডে কোড দেবে, আর সেটি চলবেও। কিন্তু ইন্টারনেটের পুরোনো টিউটোরিয়াল থেকে শেখা AI প্রায়ই এমন অভ্যাস নিয়ে আসে, যা এই পর্বে এড়াতে শিখলেন:

আরেকটি বড় অভ্যাস: error মেসেজ নিজে আগে পড়ুন। পুরো মেসেজ না পড়েই AI-কে “ঠিক করে দাও” বললে AI প্রায়ই অনুমান করে পুরো কোড নতুন করে লেখে — হয়তো অন্য জায়গায় নতুন ভুলসহ। আপনি যদি আগে বলতে পারেন “ReferenceError, লাইন ৩, নাম customerNmae”, তাহলে অর্ধেক কাজ শেষ — আর AI-এর উত্তর মিলিয়ে দেখার ক্ষমতাও আপনার হাতে।

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

• Console খুলে চালিয়েছি — একটিও লাল error বা হলুদ warning নেই
• innerHTML, document.write, var, alert খুঁজে দেখেছি; থাকলে কারণ জিজ্ঞেস করেছি বা বদলেছি
• return-এর পরে লাইন ভাঙা নেই, আর ( বা [ দিয়ে শুরু হওয়া লাইনের আগের লাইনে ; আছে
• অন্তত একটি হিসাব হাতে করে মিলিয়েছি (যেমন মোট দাম)
• ইচ্ছা করে একটি নাম ভুল লিখে দেখেছি কোন error আসে — আর মেসেজটি নিজে পড়ে বুঝতে পেরেছি