Setting Up — Browser Console, Node.js & VS Code
তিনটি জায়গায় JavaScript চালানো যায় — কোনটা কখন
1. Three Places to Run JavaScript
JavaScript is unique — it runs in three different environments with the same syntax. Knowing which to pick saves hours.
| Environment | Best For | Setup |
|---|---|---|
| Browser DevTools | Quick experiments, DOM, fetch, debugging a live page | Press F12 — done |
| Node.js | Servers, scripts, build tools, file work | Install once from nodejs.org |
| VS Code | Editing real projects with autocomplete, lint, debug | Free download, ~150 MB |
2. The Browser Console — Zero Install
Every modern browser ships with a full developer toolkit. To open it:
- Windows / Linux:
F12orCtrl + Shift + I - macOS:
Cmd + Option + I - Right-click any page → Inspect
- Switch to the Console tab
F12 চাপলে DevTools খোলে। সেখানে Console ট্যাবে গিয়ে যেকোনো JavaScript লেখা ও তৎক্ষণাৎ চালানো যায় — কোনো ইনস্টল লাগে না।The console is a full REPL — Read, Eval, Print, Loop. Type any expression, press Enter, see the result.
// Type these one line at a time in the Console tab.
2 + 2; // 4
const name = "Bangladesh";
console.log(`Hello, ${name}!`);
Math.sqrt(144); // 12
[1, 2, 3].map(n => n * 2); // [2, 4, 6]3. Installing Node.js
Node.js is JavaScript outside the browser — V8 engine glued to file/network/OS APIs. With Node, JS becomes a real systems language: scripts, build tools, web servers.
- Visit
nodejs.organd download the LTS (Long-Term Support) version - Run the installer; accept defaults; it adds
nodeandnpmto your PATH - Open a terminal and verify:
$ node --version
v22.11.0
$ npm --version
10.9.0nodejs.org থেকে LTS version ইনস্টল করুন। এর সাথে npm (package manager) আপনাআপনি ইনস্টল হয়ে যায়।The Node REPL
Type node alone in the terminal — you get an interactive REPL just like the browser console.
$ node
Welcome to Node.js v22.11.0.
> 2 + 2
4
> const greet = (n) => `Hello, ${n}!`
undefined
> greet("Dhaka")
'Hello, Dhaka!'
> .exitRunning a .js File
Save the snippet below as hello.js and run node hello.js in the same folder.
const os = "Bangladesh";
console.log(`Hello from Node.js, ${os}!`);
console.log(`The time is ${new Date().toLocaleTimeString()}`);4. Installing VS Code
Visual Studio Code is a free, fast, cross-platform editor — the most popular editor on Earth as of 2026, used by millions of JS developers daily.
- Download from
code.visualstudio.com(Windows / macOS / Linux) - Install with defaults
- Open a folder via File → Open Folder…
- Press
Ctrl + `(backtick) to open the integrated terminal
| Extension | Why |
|---|---|
| ESLint (Microsoft) | Catches bugs and style mistakes as you type |
| Prettier | Auto-formats code on save — no more arguments about spaces vs tabs |
| Live Server (Ritwick Dey) | One-click local web server with auto-reload |
| Code Runner | Run any .js file with one keystroke |
| JavaScript (ES6) snippets | Speeds up boilerplate (clg → console.log) |
5. Your First Project Folder
Real JS projects all share a tiny, conventional layout. Create one from scratch:
$ mkdir hello-js
$ cd hello-js
$ npm init -y # creates package.json
$ echo "console.log('Hi!')" > index.js
$ node index.js
Hi!You now have a real Node project — same shape used by Netflix, Uber, and your local startup. The package.json file lists your project name, scripts, and (eventually) dependencies.
node_modules
When you start installing packages with npm install <name>, a folder called node_modules appears. Never commit it — add it to .gitignore. The package.json is the source of truth.
6. Picking the Right Tool for the Job
Use the Browser Console when…
- Trying out a one-liner
- Debugging a live web page
- Inspecting the DOM or network
- You don't have Node installed yet
Use Node + VS Code when…
- Building anything bigger than 30 lines
- Working with files or HTTP
- Using packages from npm
- Saving the work for later
7. Glossary (শব্দকোষ)
| Term | Meaning | বাংলায় |
|---|---|---|
| DevTools | Browser's built-in developer toolkit (F12). | ব্রাউজারের ভেতরের ডেভেলপার টুলকিট। F12 চাপলে খোলে। |
| Console | The DevTools panel where console.log output appears. | DevTools-এর সেই প্যানেল যেখানে console.log-এর output দেখা যায়। |
| REPL | Read-Eval-Print-Loop — interactive prompt that runs code instantly. | Read-Eval-Print-Loop — যেখানে কোড লেখার সাথে সাথেই execute হয়। |
| LTS | Long-Term Support release of Node.js — the safe stable version. | Long-Term Support — Node.js-এর সবচেয়ে stable সংস্করণ। |
| npm | Node Package Manager — install & manage 3rd-party libraries. | Node Package Manager — package install ও manage করার tool। |
| package.json | The metadata + scripts + dependencies file every Node project has. | প্রতিটি Node project-এর নাম, script এবং dependency সংরক্ষণকারী ফাইল। |
| VS Code | Microsoft's free cross-platform code editor. | Microsoft-এর free cross-platform code editor। |
| Extension | VS Code add-on (e.g. ESLint, Prettier) that adds features. | VS Code-এ অতিরিক্ত feature যোগ করার add-on (যেমন ESLint, Prettier)। |
8. Practice Problems
Try each on your own first, then click Show Answer to compare and run.
-
Open your browser DevTools and print three lines: your name, your favourite browser, and the current year — using
console.log.DevTools খুলে তিনটি লাইন প্রিন্ট করুন — আপনার নাম, প্রিয় ব্রাউজার এবং বর্তমান year।✨ Show Answer (উত্তর দেখুন)
ans1.jsconsole.log("Name: Arif Hossain"); console.log("Browser: Chrome"); console.log(`Year: ${new Date().getFullYear()}`); -
Use the Node REPL (or this runner) to compute the area of a circle of radius 7. Use
Math.PI.৭ একক ব্যাসার্ধ একটি বৃত্তের ক্ষেত্রফল গণনা করুন।Math.PIব্যবহার করুন।✨ Show Answer (উত্তর দেখুন)
ans2.jsconst r = 7; const area = Math.PI * r * r; console.log(`Area = ${area.toFixed(2)}`);Output:
Area = 153.94।toFixed(2)দশমিকের পর ২ ঘর রাখে। -
In one paragraph, explain what exactly Node.js gives you that the browser does not.একটি অনুচ্ছেদে ব্যাখ্যা করুন — Node.js আপনাকে browser-এর চেয়ে কী বেশি দেয়।
✨ Show Answer (উত্তর দেখুন)
Answer: Node.js bundles the same V8 engine the browser uses, but adds APIs the browser deliberately blocks for security: filesystem access (
fs), child processes, low-level networking (http,net,tls), and a package ecosystem (npm) of more than 2 million libraries. Where the browser is a sandbox for safe execution of untrusted JS, Node is a trusted runtime that can read your disk, open ports, and act like any other systems language. That is why all backend work in JavaScript happens in Node, never in the browser.Node.js-এ সেই V8 engine-ই থাকে, কিন্তু সাথে browser-এর বাইরের API থাকে — file পড়া/লেখা, network port খোলা, child process run করা এবং npm-এর ২০ লক্ষ+ package ব্যবহার করা যায়। Browser হলো একটি sandbox যা untrusted code নিরাপদে চালায়। Node হলো trusted runtime — তাই সব backend কাজ Node-এ হয়, browser-এ নয়।
-
Write a tiny program that prints your operating system platform and Node version (works only in Node, but useful to read).আপনার OS-এর নাম এবং Node version প্রিন্ট করার একটি ছোট প্রোগ্রাম লিখুন (এটি Node-এ চলে, browser-এ নয়)।
✨ Show Answer (উত্তর দেখুন)
This snippet only runs inside Node — copy it to
info.jsand runnode info.js:info.jsconsole.log(`Platform: ${process.platform}`); console.log(`Architecture: ${process.arch}`); console.log(`Node version: ${process.version}`);Output (উদাহরণ):
Platform: win32 — Architecture: x64 — Node version: v22.11.0
Summary — Module 02
JavaScript runs in three places: the browser DevTools console (zero install, perfect for experiments), Node.js (server-side, file access, npm), and a code editor like VS Code that talks to both. Install Node LTS once, install VS Code once, install ESLint + Prettier — and you have a professional JavaScript workstation.