Module ০ · JavaScript জিনিসটা কী, কোথায় চলে, আর engine এটা চালায় কীভাবে

প্রথম run: console, Node, আর Playground

Freeপড়াlesson ৫ / ৬

এই lesson-এ যা শিখবে

এক লাইন JavaScript তিন জায়গায় চালাতে পারবে: browser console-এ, file থেকে Node.js-এ, আর Playground-এ।
console.log কী ছাপে বুঝিয়ে বলতে পারবে, আর একটা program আর কী কী উপায়ে output দেখাতে পারে তার নাম বলতে পারবে।
Comment লিখতে পারবে, আর প্রতিটা statement semicolon দিয়ে শেষ করতে পারবে।

নিজে পরীক্ষা না করে Zara কিছুই বিশ্বাস করে না। তাই আসল program লেখার আগে সে একটা লাইন, console.log("Hello");, তিনটা আলাদা জায়গায় চালায়। একটা browser-এ, laptop-এর একটা file-এ, আর Playground-এ।

তিন জায়গাতেই ছাপে Hello। এই lesson-এর মূল কথা এটাই। JavaScript একটাই ভাষা। আজকের পর তুমি এটা চালানোর তিনটা জায়গা চিনবে, তাই code কোথায় লিখবে সেটা নিয়ে আর ভাবতে হবে না।

এখন তোমার জন্য যেটা সবচেয়ে সহজ, সেটা বেছে নাও। Playground-এর জন্য কিছু install করতে হয় না, আর প্রতিটা lesson-এর Run button এটাই ব্যবহার করে।

প্রথম জায়গা: browser console

প্রতিটা desktop browser তার developer tools-এর ভেতরে একটা console লুকিয়ে রাখে। এটা একটা text box, যেখানে JavaScript টাইপ করলে সঙ্গে সঙ্গে ফল দেখা যায়। এক লাইন চালিয়ে দেখার সবচেয়ে দ্রুত জায়গা এটাই।

Browser	Windows আর Linux	Mac
Chrome	`Ctrl+Shift+J`	`Cmd+Option+J`
Firefox	`Ctrl+Shift+K`	`Cmd+Option+K`
Edge	`Ctrl+Shift+J`	`Cmd+Option+J`

যেকোনোটা F12 চাপলেও খোলে; তারপর Console নামের tab-এ click করো। নিচের box-এ click করে console.log("Hello"); লেখো, তারপর Enter চাপো। দুইটা লাইন ফিরে আসবে:

Hello
undefined

প্রথম লাইনটা তোমার output। ধূসর undefined-টা হলো console তোমাকে জানাচ্ছে যে লাইনটা নিজে কোনো মান ফেরত দেয়নি। এটা error না; প্রতিটা console এটা করে, তুমি পাত্তা না দিলেও চলবে।

আরেকটা চমক আছে। Chrome বা Firefox-এর console-এ প্রথমবার code paste করলে সে হয়তো রাজি হবে না, তোমাকে allow pasting লিখতে বলবে। এটা মানুষকে সেই প্রতারকদের হাত থেকে বাঁচায়, যারা বলে "এটা তোমার console-এ paste করো"। একবার লিখে দাও, তারপর paste কাজ করবে।

তাহলে browser console এক লাইন চালায়, Enter চাপার সঙ্গে সঙ্গে।

দ্বিতীয় জায়গা: Node.js, file থেকে

এক লাইনের জন্য console দারুণ, বিশ লাইনের জন্য ঝামেলার। আসল program হলে সেটা একটা file-এ save করো, আর Node দিয়ে file-টা চালাও।

nodejs.org থেকে Node.js install করো। LTS (long-term support) লেখা version-টা নাও। 22 বা তার উপরের যেকোনো version এই track-এর সবকিছু চালায়।
একটা terminal খুলে লেখো node --version। এটা v22 বা তার বেশি দিয়ে শুরু হওয়া একটা version ছাপবে।
যেকোনো text editor-এ console.log("Hello"); লাইনটা hello.js নামের একটা file-এ save করো।
Terminal-এ ওই file-এর folder-এ যাও, তারপর লেখো node hello.js।

Terminal ছাপবে Hello, পরে কোনো undefined ছাড়া। ওই বাড়তি লাইনটা শুধু console যোগ করে; file থেকে চালানো program ঠিক ততটুকুই ছাপে, যতটুকু সে log করে।

শুধু node লিখলে Node-এর নিজের console খোলে, যার নাম REPL (read, evaluate, print, loop)। এটা browser console-এর মতোই কাজ করে। বের হতে লেখো .exit।

তাহলে Node একটা command দিয়েই পুরো file চালায়: node, তারপর file-এর নাম।

তৃতীয় জায়গা: Playground

Playground একটা Progsity মেশিনে সেই একই Node.js 22 চালায়, তাই তোমাকে কিছুই install করতে হয় না। এই lesson-গুলোর প্রতিটা Run link example-টা আগে থেকে লিখে দিয়ে এটা খোলে। ফাঁকা page থেকে শুরু করতে চাইলে ভাষা বাছো JavaScript (Node.js), আর version Node.js 22।

Screen-এর চারটা অংশ জরুরি:

Editor, যেখানে তোমার code থাকে।
Run, যেটা code মেশিনে পাঠিয়ে চালায়।
Standard Input (stdin), একটা box, যেখানে এমন text থাকে যা তোমার program পড়তে পারে। এটা Run চাপার আগে লিখতে হয়।
Output, সঙ্গে একটা badge যেটা বলে run কীভাবে শেষ হলো: Success, Compile error বা Runtime error, যেমনটা lesson 04 বুঝিয়েছে।

Input box-টা কাজে লাগবে Module 1 থেকে। প্রতিটা judged problem তোমার program-কে input দেয় stdin দিয়ে, আর নিচের Example 4-এ তার প্রথম ঝলক দেখবে।

ছবি 1। এই track-এর প্রতিটা program-এর চেহারা: কিছু ঢোকে, program সেটা নিয়ে কাজ করে, কিছু বের হয়।

তাহলে Playground হলো input box আর output-এর জায়গাসহ Node.js 22, এক click দূরে।

console.log কী ছাপে

console.log-কে যা দেবে তা-ই ছাপে, তারপর নতুন লাইনে চলে যায়। জিনিসগুলো দিতে হয় ওর গোল bracket-এর ভেতরে, comma দিয়ে আলাদা করে। এই জিনিসগুলোকে বলে argument।

একটা console.log statement

console.log("Total:", 250 + 120);

console হলো output-এর সেই tool, যেটা এই lesson-এর প্রতিটা জায়গায় আছে।
.log হলো তুমি ওকে যা করতে বলছ: একটা লাইন ছাপো।
( … )-এর ভেতরে থাকে argument-গুলো, মানে যা ছাপা হবে, comma দিয়ে আলাদা করা।
"Total:" হলো text, quote-এর ভেতরে লেখা; 250 + 120 একটা যোগফল, আগে হিসাব হয়।
; statement শেষ করে, এই track-এর প্রতিটা statement যেমন করে।

তিনটা নিয়মেই প্রায় সবকিছু হয়ে যায়। Quote-এর ভেতরের text ছাপা হয় quote ছাড়া। একটা সংখ্যা বা যোগফল ছাপা হয় তার মান হিসেবে। কয়েকটা argument ছাপা হয় এক লাইনে, প্রতিটার মাঝে একটা করে space দিয়ে।

Example 1: Zara যে লাইনটা চালিয়েছিল

এই track-এর সবচেয়ে ছোট program, আর তিন জায়গাতেই এটা একইভাবে চলে।

console.log("Hello");

Hello

Playground-এ আর Node-এ output বলতে এটুকুই। Browser console-এ এর নিচে ধূসর undefined-টাও দেখবে।

Compiler-এ চালাও

Example 2: দুইটা argument, আর একটা সংখ্যা

এক লাইনে text আর একটা সংখ্যা, তারপর text আর একটা যোগফল।

console.log("Zara", 3);
console.log("Total:", 250 + 120);
console.log();
console.log("a", "b", "c");

Zara 3
Total: 370

a b c

Comma তোমার হয়ে space বসিয়ে দেয়। ছাপার আগেই 250 + 120-এর হিসাব হয়ে যায়। ফাঁকা একটা console.log() একটা ফাঁকা লাইন ছাপে, যেটা একটা report-এ ফাঁক রাখতে কাজে লাগে।

Compiler-এ চালাও

Output দেখানোর আরও উপায়

একটা program কিছু দেখানোর একমাত্র উপায় console.log না। তবে তিন জায়গাতেই কাজ করে শুধু এটাই।

উপায়	কোথায় কাজ করে	এই track-এ
`console.log`	Browser, Node, Playground	সব জায়গায়
`alert`	শুধু browser-এ: একটা pop-up box	নাম বলা হয়েছে, ব্যবহার হয় না (lesson 02-এর মাথা খাটাও)
`document.write`	শুধু browser-এ: সরাসরি page-এ লেখে	নাম বলা হয়েছে, ব্যবহার হয় না; পুরনো, এড়িয়ে চলাই ভালো
`process.stdout.write`	Node আর Playground-এ: নতুন লাইন ছাড়া ছাপে	পরে, যখন output-এর গতি জরুরি হবে

তাই এই track output-এর জন্য শুধু console.log-এর উপরই ভরসা করে, কারণ এটা সব জায়গায় চলে।

Semicolon আর comment

একটা statement হলো একটা সম্পূর্ণ নির্দেশ, যেমন একটা console.log(...) call। এই track প্রতিটা statement শেষ করে একটা semicolon দিয়ে, ;। বাদ পড়া semicolon JavaScript প্রায়ই নিজে বসিয়ে নিতে পারে, কিন্তু সব সময় না। একটা জায়গায় এতে গোলমাল বাধে, Module 1 সেটা দেখাবে। নিজে লিখে দিলে প্রশ্নটাই থাকে না। তাই কথাটা এখানে একবার বলা হলো, এরপর আমরা শুধু লিখে যাব।

একটা comment হলো এমন text, যেটা engine পুরোপুরি এড়িয়ে যায়। এটা পরের মানুষটার জন্য একটা নোট, যে code-টা পড়বে। প্রায়ই সেই মানুষটা এক মাস পরের তুমি। দুইটা রূপ আছে: // লাইনের বাকিটা comment বানিয়ে দেয়, আর /* ... */ দুই চিহ্নের মাঝের সবকিছু comment বানায়, দরকার হলে কয়েক লাইন জুড়ে।

Example 3: যে comment engine এড়িয়ে যায়

পাঁচ লাইন লেখা, দুই লাইন output।

// Zara's first program: two lines of output.
console.log("Hello"); // a comment can follow the code
/* A comment can also
   cover several lines. */
console.log("Goodbye");

Hello
Goodbye

একটা লাইনে //-এর পরের সবকিছু, আর /* আর */-এর মাঝের সবকিছু, program চলার আগেই বাদ পড়ে যায়। ভালো comment-এ কী লেখা থাকে, Module 1 সেটা দেখাবে।

Compiler-এ চালাও

Example 4: input box-এর প্রথম ঝলক

Playground-এর Standard Input box-এ Zara লেখো, তারপর এটা চালাও। প্রথম লাইনটা ওই box-এর সবকিছু পড়ে নেয়।

const input = require("fs").readFileSync(0, "utf8");
console.log("You typed: " + input.trim());

You typed: Zara

প্রথম লাইনটা নিয়ে এখনই মাথা ঘামিয়ো না। Module 1 এটা শব্দ ধরে ধরে বুঝিয়ে দেবে, কারণ প্রতিটা judged problem এরকম লাইন দিয়েই শুরু হয়। আপাতত শুধু খেয়াল করো, তুমি যা লিখেছ program সেটাই ছেপেছে।

Compiler-এ চালাও

এটা কোথায় কাজে লাগছে

Browser-এর developer tools। Frontend developer-রা কাজের সময় console খুলে রাখে, একটা লাইন চালিয়ে দেখতে আর তাদের page কী log করছে সেটা পড়তে।
Node-এর REPL। File না বানিয়ে এক লাইন JavaScript কী করে সেটা দেখার সবচেয়ে দ্রুত উপায় হলো terminal-এ node লেখা।
Server log। Vercel আর Heroku-র মতো hosting platform-এ একটা Node server console.log দিয়ে যা ছাপে, সেটাই তার log হিসেবে জমা হয়। মানে আজ যে tool শিখছ, চালু একটা server সেটা দিয়েই সমস্যার খবর দেয়।
Progsity Playground আর judge। এই track-এর প্রতিটা judged problem তোমার program যা ছাপে, সেটা লাইন ধরে ধরে প্রত্যাশিত উত্তরের সঙ্গে মেলায়।

যে ভুলগুলো সবাই করে

১. বড় হাতের C।

Console.log("Hi");

Node.js 22 বলে ReferenceError: Console is not defined। JavaScript বড় হাতের আর ছোট হাতের অক্ষর আলাদা ধরে, আর output-এর tool-টা হলো console, পুরোটাই ছোট হাতের। Phone আর কিছু editor লাইনের প্রথম অক্ষর নিজে থেকেই বড় হাতের করে দেয়, ভুলটা সাধারণত এভাবেই হয়।

২. Quote দিতে ভুলে যাওয়া।

console.log(Hello);

Node.js 22 বলে ReferenceError: Hello is not defined। Quote না থাকলে Hello-কে কোনো কিছুর নাম হিসেবে পড়া হয়, আর ওই নামে কিছু নেই। যে text হুবহু ছাপাতে চাও, সেটা সব সময় quote-এর ভেতরে যায়।

৩. Document থেকে paste করা বাঁকা quote।

console.log(“Hi”);

Playground একটা Compile error দেখায়: SyntaxError: Invalid or unexpected token। Word processor আর chat app "-কে বাঁকা quote বানিয়ে দেয়, আর JavaScript সেটা নেয় না। Code লেখো code editor-এ বা Playground-এ, কখনো word processor-এ না।

৪. Node-এর console-এর ভেতরে terminal-এর command লেখা।

আগে node লিখে তারপর node hello.js লিখলে Node-এর REPL উত্তর দেয় Uncaught SyntaxError: Unexpected identifier 'hello'। তুমি তো আগেই Node-এর ভেতরে ঢুকে গেছ, আর সে command না, JavaScript আশা করছে। .exit লেখো, তারপর সাধারণ terminal-এ node hello.js চালাও।

মাথা খাটাও

চালানোর আগে আন্দাজ করো, এই program কোন দুইটা লাইন ছাপবে:

console.log(1, 2);
console.log("1" + 2);

প্রথম লাইনে comma আছে, যেটা এই lesson বুঝিয়েছে। দ্বিতীয়টায় quote-এর ভেতরের text আর একটা সংখ্যার মাঝে +। চালিয়ে মিলিয়ে নাও, আর দ্বিতীয় উত্তরটা মনে রেখো: কেন এমন হয়, Module 2 ঠিকঠাক বুঝিয়ে দেবে।

অনুশীলন ১সহজ

এমন একটা program লেখো যেটা তিনটা console.log statement দিয়ে হুবহু এই তিনটা লাইন ছাপে:

Name: Zara
Track: JavaScript
Lesson: 05

নিজে যাচাই করো। তিন জায়গার অন্তত দুইটায় এটা চালাও। Output অক্ষরে অক্ষরে মিলতে হবে, প্রতিটা লাইন আলাদা। কোনো লাইনে semicolon না থাকলে বসিয়ে দাও।

অনুশীলন ২মাঝারি

দুইটা argument সহ একটা console.log দিয়ে এক লাইনে একটা শব্দ আর একটা সংখ্যা ছাপো। Output হতে হবে:

Apples: 12

নিয়ম। 12-কে একটা সংখ্যা হতে হবে, তাই এটা quote-এর ভেতরে থাকবে না। Space নিজে টাইপ করবে না।

নিজে যাচাই করো। Colon আর 12-এর মাঝে ঠিক একটা space থাকবে। দুইটা দেখলে বুঝবে, একটা তুমি টাইপ করেছ আর আরেকটা comma বসিয়েছে।

অনুশীলন ৩কঠিন

Playground-এ Example 4 খোলো, আর Standard Input box ফাঁকা রাখো। Run চাপার আগে লিখে রাখো, তোমার ধারণায় এটা কী ছাপবে। তারপর চালাও।

নিয়ম। দুই বাক্যে output-টা ব্যাখ্যা করো: program কী পড়ল, আর লাইনটা কেন error না।

নিজে যাচাই করো। Program তবুও একটা লাইন ছাপে। ভাবো, input box-এ কী ছিল, আর text-এর সঙ্গে "কিছু না" জুড়লে কী পাওয়া যায়। ফাঁকা input-এর কথায় Module 1 আবার ফিরবে, কারণ judged test-এ এটা ব্যবহার হয়।

যে প্রশ্নগুলো সবার মনে আসে

Browser console আমার লাইনের পরে undefined ছাপে কেন?

তুমি যে লাইনই লেখো, console তার মান দেখায়। console.log তোমার text ছাপে, কিন্তু কোনো মান ফেরত দেয় না। আর "কোনো মান নেই" দেখানো হয় undefined হিসেবে। File থেকে চালানো program এটা কখনো দেখায় না।
Semicolon কি সত্যিই লাগে?

প্রায়ই JavaScript নিজেই বসিয়ে নেয়, এজন্যই online-এর কিছু code-এ semicolon থাকে না। এই track প্রতিবার লেখে, কারণ যে এক জায়গায় JavaScript ভুল আন্দাজ করে, সেটা ধরা কঠিন।
Single quote না double quote?

JavaScript দুইটাই নেয়। এক রকম রাখতে এই track double quote লেখে। Module 1 এ নিয়ে আরও বলবে।
Node.js-এর কোন version install করব?

nodejs.org-এ যেটায় LTS লেখা আছে। Version 22 বা তার উপরের যেকোনোটা এখানকার প্রতিটা lesson চালায়, আর Playground চালায় 22।
Phone-এ কি এগুলো করা যায়?

Phone-এর browser-এ console সহজে খোলে না, আর phone-এ Node install করা ঝামেলার। Playground phone-এর browser-এ চলে, তাই phone-এ ওটাই ব্যবহার করো।

মূল কথা

এক লাইন JavaScript তিন জায়গায় চলে: browser console, file থেকে Node.js, আর Playground।
Browser console একটা ধূসর undefined যোগ করে; file থেকে চালানো program শুধু যা log করে তা-ই ছাপে।
console.log তার argument-গুলো মাঝে একটা করে space দিয়ে ছাপে, তারপর নতুন লাইন শুরু করে।
alert আর document.write শুধু browser-এ কাজ করে; console.log সব জায়গায়।
এই track প্রতিটা statement ; দিয়ে শেষ করে, আর comment লেখা হয় // বা /* ... */ দিয়ে।

Module 1-এ শুরু হবে আসল program লেখা: সংখ্যা, text, মানের নাম দেওয়া, আর প্রতিটা judged problem যেভাবে input পড়ে সেভাবে input পড়া।

Module test

এই module এর উপর দশটা প্রশ্ন। 70% পেলে pass, আর যতবার খুশি দেওয়া যায়।

Module test দিন

lesson ৫ শেষ

শেষ হলে চিহ্ন দিন, অগ্রগতি আপনার সাথে থাকবে।

পরেরটা: Module test: JavaScript জিনিসটা কী

পরের lesson