Module ১ · প্রথম program: console, let আর const, type, typeof
এক লাইন করে একটা program: console.log, সংখ্যা আর text
এই lesson-এ যা শিখবে
- ছোট একটা program লিখতে পারবে, যেটা লেখা, একটা সংখ্যা আর একটা যোগফল ছাপে।
- ছয়টা arithmetic operator ব্যবহার করতে পারবে, আর বুঝিয়ে বলতে পারবে
7 / 2কেন 3.5 ছাপে, 3 না। - প্রথম program ভুল টাইপ হলে Node 22 যে message দেখায়, সেগুলো পড়তে পারবে, আর প্রতিটা ঠিক করতে পারবে।
Maria-র নানু বিরিয়ানির রেসিপিটা একটা কার্ডে লিখে রাখেন। কার্ডে ধাপগুলো পরপর লেখা, আর ক্রমটা জরুরি: চাল আগে ধোবে, তারপর রাঁধবে, উল্টোটা কখনো না। Program-ও ঠিক এরকম একটা তালিকা। Computer ওটা উপর থেকে পড়ে, এক লাইন করে, আর প্রতিটা লাইন যা বলে হুবহু তাই করে। এই lesson রেসিপির কার্ডটাকে একটা program বানাবে, তারপর সেই program-কে দিয়ে অঙ্ক করাবে।
রেসিপির কার্ড, এবার program হিসেবে
এই হলো কার্ডটা, JavaScript-এর চার লাইনে। প্রতিটা লাইন একটা করে ধাপ ছাপে।
console.log("1. Wash the rice.");
console.log("2. Fry the onions until brown.");
console.log("3. Add the meat and the spices.");
console.log("4. Add the rice and cook on low heat.");
1. Wash the rice.
2. Fry the onions until brown.
3. Add the meat and the spices.
4. Add the rice and cook on low heat.
চার লাইন ঢুকল, চার লাইন বেরোল, একই ক্রমে। প্রতিটা console.log নিজের লেখাটা ছাপে, তারপর নতুন লাইনে চলে যায়। তাই লাইন ভাঙাটা তোমাকে নিজে টাইপ করতে হয় না।
প্রতিটা লাইন একটা statement: একটা পুরো নির্দেশ, শেষে একটা semicolon। Engine প্রথম statement চালায়, তারপর দ্বিতীয়টা, এভাবে শেষটা পর্যন্ত। Statement ফুরিয়ে গেলে program শেষ।
তাহলে program হলো statement-এর একটা তালিকা, উপর থেকে নিচে চলে, আর console ঠিক সেই ক্রমেই দেখায় ওরা কী ছাপল।
একটা statement, টুকরো ধরে ধরে
প্রথম লাইনটা খুলে দেখা যাক। এতে ছয়টা টুকরো আছে, আর প্রতিটার নিজের একটা কাজ আছে।
| টুকরো | এটা কী |
|---|---|
console | একটা তৈরি করা object, Node আর প্রতিটা browser তোমার program-কে এটা দিয়ে দেয়। এর ভেতরে ছাপার tool রাখা আছে। |
. | "এর ভেতর থেকে এটা নাও।" Dot-টা console-এর ভেতরে হাত ঢুকিয়ে ওর একটা tool বের করে আনে। |
log | যে tool ছাপে। এভাবে যে tool চালানো হয়, তাকে বলে function (Module 5)। |
( ... ) | Call: function-টা এখনই চালাও, bracket-এর ভেতরে যা আছে সেটা দিয়ে। ভেতরে যা বসে, তার নাম argument। |
"1. Wash the rice." | একটা string: quote-এর মাঝে একটুকরো লেখা। Quote দুইটা ছাপা হয় না। |
; | Statement-এর শেষ, বাক্যের শেষে দাঁড়ির মতো। |
একটা console.log statement
console.log(value1, value2, ...);
console.logহলো ছাপার function, বানান হুবহু এরকম, সব ছোট হাতের অক্ষরে।value1, value2, ...হলো argument: যতগুলো খুশি value, মাঝে comma দিয়ে।- Value-গুলো এক লাইনে ছাপা হয়, দুইটার মাঝে একটা করে space, তারপর লাইন শেষ।
;statement-টা শেষ করে। এই track সব সময় এটা লেখে, আর কেন, সেটা বলবে lesson 06।
JavaScript বড় হাতের অক্ষর আলাদা করে দেখে। console.log কাজ করে, আর Console.log লিখলে program একটা error দিয়ে থেমে যায়, নিচের "যে ভুলগুলো সবাই করে" অংশে দেখবে। তাই একটা statement মানে বাঁধা ক্রমে কয়েকটা টুকরো, আর প্রতিটা টুকরোর বানান হুবহু ঠিক।
এক call-এ কয়েকটা value
console.log যতগুলো খুশি argument নেয়। ক্রম ধরে ছাপে, প্রতি জোড়ার মাঝে একটা করে space দিয়ে। সংখ্যার জন্য quote লাগে না।
console.log("Rice:", 450, "taka");
console.log("Items:", 3);
console.log(2026);
console.log();
console.log("The line above is empty.");
Rice: 450 taka
Items: 3
2026
The line above is empty.
Output-এর প্রথম লাইনটা দেখো। Colon-এর পরে তুমি কোনো space টাইপ করোনি, তবু একটা space আছে। Argument-গুলোর মাঝের space console.log নিজেই বসায়, তাই "Rice:"-এর নিজের কোনো space লাগে না। কোনো argument ছাড়া call করলে একটা ফাঁকা লাইন ছাপা হয়।
তাই comma দিয়ে value আলাদা করো, space-গুলো console.log তোমার হয়ে বসিয়ে দেবে।
অঙ্ক: ছয়টা operator
Program-এর ভেতরের একটা সংখ্যা অঙ্কে অংশ নিতে পারে। 120 + 45 লেখো, engine ছাপার আগে হিসাবটা করে ফেলবে। Code-এর যে টুকরো একটা value তৈরি করে, যেমন 120 + 45, তাকে বলে expression। মাঝখানের চিহ্নটা হলো operator।
console.log(120 + 45);
console.log(120 - 45);
console.log(12 * 5);
console.log(7 / 2);
console.log(7 % 2);
console.log(2 ** 10);
165
75
60
3.5
1
1024
| Operator | নাম | উদাহরণ | ফল |
|---|---|---|---|
+ | যোগ | 120 + 45 | 165 |
- | বিয়োগ | 120 - 45 | 75 |
* | গুণ | 12 * 5 | 60 |
/ | ভাগ | 7 / 2 | 3.5 |
% | ভাগশেষ | 7 % 2 | 1 |
** | power | 2 ** 10 | 1024 |
ক্রমটা স্কুলের অঙ্কের মতোই। *, / আর % আগে হয়, + আর - পরে, আর ** হয় সবার আগে। Bracket থাকলে সেটা তারও আগে।
console.log(2 + 3 * 4);
console.log((2 + 3) * 4);
console.log(10 - 4 - 3);
console.log(2 * 3 ** 2);
14
20
3
18
2 + 3 * 4 মানে 2 + 12, আর bracket দিলে সেটা হয়ে যায় 5 * 4। 10 - 4 - 3 বাঁ দিক থেকে হিসাব হয়, তাই এটা 6 - 3। ক্রম নিয়ে সন্দেহ হলে bracket দিয়ে দাও: খরচ নেই, আর পরের পাঠক তোমাকে ধন্যবাদ দেবে। তাই expression-এর হিসাব আগে হয়, স্কুলের ক্রমে, আর console.log-এর কাছে পৌঁছায় শুধু তার value-টা।
ভাগ করলে ভগ্নাংশ থেকে যায়
7 / 2 ছাপল 3.5। JavaScript-এ পূর্ণসংখ্যা আর দশমিক, দুইটার জন্য একই রকম সংখ্যা, তাই ভাগ কখনো ভগ্নাংশটা ফেলে দেয় না। ওই এক রকম সংখ্যাকে কাছ থেকে দেখাবে lesson 03।
শুধু পূর্ণ অংশটা চাইলে সেটা স্পষ্ট করে চেয়ে নাও, Math.floor দিয়ে। এটা argument-টাকে নিচের দিকে নামিয়ে আনে, সমান বা তার নিচের পূর্ণসংখ্যায়। Math হলো আরেকটা তৈরি করা object, console-এর মতোই, সংখ্যার tool-এ ভরা।
console.log(7 / 2);
console.log(Math.floor(7 / 2));
console.log(10 / 3);
console.log(9 / 3);
3.5
3
3.3333333333333335
3
9 / 3 ছাপে 3, 3.0 না, কারণ ফল পূর্ণসংখ্যা হলে পূর্ণসংখ্যা হিসেবেই ছাপা হয়। 10 / 3-এর শেষে আছে একটা 5, যেখানে তুমি হয়তো 3 আশা করেছিলে। ওই শেষ অঙ্কটা সত্যি, আর ওটা কোথা থেকে আসে, বলবে lesson 03।
C জানা থাকলে
C-তে দুইটা int value-র মধ্যে 7 / 2 হলো 3: integer division ভগ্নাংশটা ফেলে দেয়। JavaScript-এ কোনো int type নেই, তাই একই expression-এর ফল 3.5। C-র অভ্যাস এখানে নিয়ে এলে উত্তর ভুল আসবে, অথচ কোনো error আসবে না। Positive সংখ্যার C-র মতো ভাগ চাইলে লেখো Math.floor(a / b)।
তাই / সব সময় ভগ্নাংশ রাখে, আর জেনেবুঝে সেটা ফেলতে চাইলে Math.floor।
ভাগশেষ আর power
% দেয় ভাগের পরের ভাগশেষ। 17 % 5 হলো 2, কারণ 17-এ 5 তিনবার যায়, আর 2 বাকি থাকে। এর সবচেয়ে চেনা কাজ হলো একটা সংখ্যা জোড় কি না দেখা: জোড় n-এর জন্য n % 2 হয় 0, আর বিজোড়ের জন্য 1।
Negative সংখ্যায় উত্তরের চিহ্ন বাঁ দিকেরটা মানে। Bob আশা করে -7 % 3 হবে 2, কিন্তু হয় না।
console.log(17 % 5);
console.log(-7 % 3);
console.log(7 % -3);
console.log(4.5 % 2);
2
-1
1
0.5
-7 % 3 হলো -1: -7 থেকে দুইবার 3 বের করে নাও, বাকি থাকে -1, চিহ্নটা -7-এর। % দশমিকেও কাজ করে, তাই 4.5 % 2 হলো 0.5।
** একটা সংখ্যার power বের করে। 2 ** 10 মানে দশটা 2 পরপর গুণ করা, 1024। Power 0.5 হলে সেটা বর্গমূল, তাই 2 ** 0.5 ছাপে 1.4142135623730951। তাই % হলো ভাগশেষ, চিহ্ন বাঁ দিকেরটা, আর ** হলো power।
Quote-এর ভেতরে লেখা
String double quote বা single quote, দুইটার মাঝেই বসতে পারে। "Hello" আর 'Hello' একই string। এই track double quote লেখে, কারণ Prettier-এর default ওটাই, আর Prettier হলো সেই formatter যেটা বেশিরভাগ JavaScript team চালায় (lesson 06)।
লেখার ভেতরেই quote থাকলে দুই রকম quote কাজে আসে। String-টা অন্য রকম quote-এ রাখো, নয়তো quote-এর আগে একটা backslash দাও।
console.log("It's Zara's turn.");
console.log('She said "go".');
console.log("She said \"go\".");
It's Zara's turn.
She said "go".
She said "go".
\"-এর backslash engine-কে বলে, এই quote-টা লেখার অংশ, string-এর শেষ না। একে বলে escape, আর backslash-টা ছাপা হয় না। তাই string যে রকম quote দিয়ে খোলে, সেই রকম quote দিয়েই বন্ধ হয়, আর ভেতরের quote হয় অন্য রকমের, নয়তো escape করা।
একটা statement-ই একটা পুরো program। Zara সবকিছুর আগে Playground-এ এটাই চালায়।
console.log("Hello, JavaScript.");
Hello, JavaScript.
শুরুর কোনো প্রস্তুতির লাইন নেই, শেষের কোনো লাইনও নেই। File-এ একটাই statement, engine সেটা চালায়, আর program শেষ।
Run in CompilerKenji কেনে 60 টাকা করে দুইটা খাতা, 25 টাকার একটা কলম আর 450 টাকার একটা ব্যাগ। যোগ-গুণের কাজটা সে program-কে দিয়ে করায়।
console.log("Notebooks:", 2 * 60);
console.log("Pen:", 25);
console.log("Bag:", 450);
console.log("Total:", 2 * 60 + 25 + 450);
Notebooks: 120
Pen: 25
Bag: 450
Total: 595
2 * 60 + 25 + 450 মানে 120 + 25 + 450, কারণ * আগে হয়। Label-গুলো string আর টাকার অঙ্কগুলো expression, এক call-এই পাশাপাশি।
একটা সিনেমা 135 মিনিটের, আর Amara এটাকে ঘণ্টা আর মিনিটে দেখতে চায়। Math.floor দেয় পুরো ঘণ্টাগুলো, আর % দেয় বাকি মিনিট।
console.log("Film length:", 135, "minutes");
console.log("That is", Math.floor(135 / 60), "h", 135 % 60, "min");
Film length: 135 minutes
That is 2 h 15 min
135 / 60 হলো 2.25, আর Math.floor সেটাকে বানায় 2। 135 % 60 হলো দুই ঘণ্টা পুরো হওয়ার পরে যা বাকি থাকে, 15। এই জুটি, Math.floor আর %, সেকেন্ড, মিনিট, সেন্টিমিটার আর খুচরা পয়সাও এভাবেই ভাগ করে।
Alice-এর তিনটা পরীক্ষার নম্বর: 72, 65 আর 80। সে গড়টা চায়, আর হিসাবের ক্রমটাও নিজের চোখে দেখতে চায়।
console.log("Sum:", 72 + 65 + 80);
console.log("Average:", (72 + 65 + 80) / 3);
console.log("Without brackets:", 72 + 65 + 80 / 3);
Sum: 217
Average: 72.33333333333333
Without brackets: 163.66666666666666
Bracket যোগটা আগে করিয়ে নেয়। Bracket না থাকলে শুধু 80-কে 3 দিয়ে ভাগ করা হয়, আর "গড়" হয়ে যায় প্রতিটা নম্বরের চেয়েও বড়। ভুল program-এর প্রথম লক্ষণ এটাই: এমন উত্তর, যেটা সত্যি হতেই পারে না। ষোলোটা অঙ্কের বদলে 72.33 কীভাবে ছাপতে হয়, দেখাবে Module 2।
Run in Compilerএটা কোথায় কাজে লাগে
- Chrome DevTools. Web page-এর প্রতিটা
console.logছাপা হয় browser-এর developer tools-এর Console panel-এ। Frontend developer-রা কাজের সময় ওই panel খুলেই রাখে। - Node.js server. Node-এ
console.logলেখে standard output-এ, মানে program-এর মূল output-এর ধারায়। Container ওখানে যা ছাপে, Docker সব রেখে দেয়, আরdocker logsসেটা দেখায়। - এই track-এর judge. Judge করা problem-এর উত্তর হলো তোমার program standard output-এ যা ছাপে, সেটাই। তাই এই track-এর প্রতিটা উত্তর জমা পড়ে
console.logদিয়েই। - Debugging. Program-এর মাঝখানে একটা
console.logবসালে ওই মুহূর্তের একটা value দেখা যায়। বেশিরভাগ beginner প্রথমে এই tool-টাই ধরে। VS Code-এ একটা আসল debugger-ও আছে, যেটা program-কে একটা লাইনে থামিয়ে রাখে (Module 17)।
যে ভুলগুলো সবাই করে
১. Quote ছাড়া লেখা।
console.log(Hello);
Playground-এ run শেষ হয় Runtime error দিয়ে, সাথে ReferenceError: Hello is not defined। Quote না থাকলে Hello একটা নাম, আর ওই নামে এখনো কিছু নেই (নাম বানানো শেখাবে lesson 02)। লেখো console.log("Hello");। Quote তুমি ভুলবে, কারণ তোমার চোখে শব্দটা লেখার মতোই দেখায়, আর তুমি কী বোঝাতে চাইছ, engine সেটা দেখতে পায় না।
২. Quote দুইটা মেলে না।
console.log("Hello');
Program শুরুই হয় না: SyntaxError: Invalid or unexpected token। String খুলেছে double quote দিয়ে, তাই শেষ হবে শুধু আরেকটা double quote-এ, আর সেটা নেই। Word processor থেকে paste করা বাঁকা quote, যেমন “Hello”, থেকেও একই message আসে। দুই মাথায় একই সোজা quote দাও।
৩. বড় হাতের C।
Console.log("Hello");
ReferenceError: Console is not defined। JavaScript-এর কাছে Console আর console দুইটা আলাদা নাম, আর আছে শুধু দ্বিতীয়টা। তুমি বড় হাতের C টাইপ করবে, কারণ বাক্য তো বড় হাতের অক্ষর দিয়েই শুরু হয়। Dot-এর পরে বানান ভুল হলে, যেমন console.lg, আসে অন্য message: TypeError: console.lg is not a function।
৪. Power-এর আগে minus চিহ্ন।
console.log(-2 ** 2);
Program শুরুই হয় না: SyntaxError: Unary operator used immediately before exponentiation expression. Parenthesis must be used to disambiguate operator precedence। এর মানে 4 না -4, এই নিয়ে গণিতবিদ আর programmer-দের মধ্যে মতের মিল নেই, তাই JavaScript আন্দাজ করতে রাজি না। 4 চাইলে লেখো (-2) ** 2, -4 চাইলে -(2 ** 2)।
David-এর একটা ছোট দোকান আছে। একজন কাস্টমার কেনেন 15 টাকা করে 3 কাপ চা, 20 টাকা করে 2টা সমুচা আর 55 টাকার 1টা কেক। একটা রসিদ ছাপো: প্রতিটা জিনিসের জন্য এক লাইন, তার দামসহ, তারপর মোট। প্রতিটা গুণ আর যোগফল program-কে দিয়েই করাও।
Output. হুবহু এই চার লাইন।
Tea: 45
Samosa: 40
Cake: 55
Total: 140
// Print the receipt, one console.log per line.
// Write the costs as sums, such as 3 * 15, not as 45.
Grade হয় না। তোমার output উপরের চার লাইনের সঙ্গে মিলিয়ে দেখো, character ধরে ধরে।
Run in CompilerZara একটা বাগানে বেড়া দিচ্ছে, যেটা 12 মিটার লম্বা আর 5 মিটার চওড়া। ঘাসের বীজের জন্য তার লাগবে বাগানের ক্ষেত্রফল, আর বেড়ার জন্য পরিসীমা।
Output. হুবহু এই দুই লাইন।
Area: 60
Perimeter: 34
// The area is length times width.
// The perimeter is twice the length plus twice the width.
// Use brackets where the order matters.
Grade হয় না। তারপর 12-কে 12.5 করে দাও, আর দুইটা উত্তরই হাতে হিসাব করে মিলিয়ে নাও।
Run in Compilerসচরাচর যে প্রশ্নগুলো আসে
শুধু
printনা লিখেconsole.logকেন?JavaScript বানানো হয়েছিল web page-এর জন্য, আর ভাষাটার নিজের কোনো ছাপার statement নেই। Browser আর Node, দুইজনেই তোমার program-এর হাতে ছাপার জন্য একটা
consoleobject ধরিয়ে দেয়। Browser-এprint()-এর মানে আগে থেকেই অন্য কিছু: ওটা page-টা কাগজে ছাপার dialog খোলে।Semicolon কি লিখতেই হবে?
অনেক সময় ওটা ছাড়াও program চলে, কারণ engine কিছু নিয়ম মেনে বাদ পড়া semicolon নিজেই বসিয়ে নেয়। ওই নিয়মগুলোর একটা case মানুষকে চমকে দেয়। এই track প্রতিটা semicolon লেখে, আর case-টা দেখাবে lesson 06।
"450"আর450কি একই?না। প্রথমটা লেখা, যেটায় শুধু অঙ্কগুলো দেখা যাচ্ছে, আর দ্বিতীয়টা একটা সংখ্যা।
console.logদুইটা একইভাবে ছাপে, তাই পার্থক্যটা চোখে পড়ে না।+কিন্তু দুইটাকে এক চোখে দেখে না, Module 2-এ দেখবে।10 / 3-এর শেষে 5 কেন?JavaScript-এ সংখ্যা রাখা হয় binary-তে, আর বেশিরভাগ দশমিক ভগ্নাংশ হুবহু রাখা যায় না। শেষ অঙ্কটা সেই খুব ছোট পার্থক্যটাই দেখায়। বিখ্যাত উদাহরণটা,
0.1 + 0.2, দেখাবে lesson 03।
মূল কথা
- Program হলো statement-এর একটা তালিকা, উপর থেকে নিচে চলে; প্রতিটা শেষ হয় semicolon দিয়ে।
console.logতার argument-গুলো এক লাইনে ছাপে, মাঝে space দিয়ে, তারপর লাইন শেষ করে।- ছয়টা operator হলো
+ - * / % **, হিসাব হয় স্কুলের ক্রমে; bracket সবার আগে। /ভগ্নাংশ রাখে, তাই7 / 2হলো 3.5;Math.floorজেনেবুঝে সেটা ফেলে দেয়, আর%হলো ভাগশেষ, চিহ্ন বাঁ দিকেরটা।- String বসে মিলে যাওয়া দুইটা quote-এর মাঝে; এই track double quote লেখে।
- টাইপে ভুল হলে Node message দিয়ে program থামায়:
SyntaxErrorমানে program শুরুই হয়নি, আরReferenceErrorবাTypeErrorআসে যে লাইনে আটকেছে সেখান থেকে।
এরপর lesson 02 একটা value-কে একটা নাম দেবে, যাতে program একটা সংখ্যা রেখে দিতে পারে আর পরে সেটা বদলাতে পারে।
lesson ১ শেষ
শেষ হলে চিহ্ন দিন, অগ্রগতি আপনার সাথে থাকবে।
পরেরটা: let আর const: একটা value-র একটা নাম, আর var না কেন