Setup & Running JavaScript

How to run your first JavaScript program — in the browser console, in an HTML file, and with Node.js.

What it is, in plain English: JavaScript runs in two places: inside your web browser (no install needed — just open the browser's developer tools) and in Node.js (a program you install that runs JS on your computer or server). You can start writing JS right now, in your browser, before installing anything.

Three ways to run JavaScript

Unlike Python (where you install Python and run files from a terminal), JavaScript has multiple homes. Here are the three ways to run it, from easiest to most powerful:

Way 1: The browser console (zero setup — start right now)

Every modern browser has a built-in JavaScript console. You can run JS instantly:

Open any browser (Chrome, Firefox, Edge, Safari)
Press F12 (Windows/Linux) or Cmd + Option + J (Mac)
Click the Console tab
Type console.log("Hello, world!") and press Enter

You'll see Hello, world! printed immediately. That's JavaScript running. The console is perfect for experimenting — type any JS expression and see the result instantly.

Tip: The browser console is not just for beginners — professional developers use it constantly to test ideas, inspect values, and debug problems.

Way 2: A script tag in an HTML file

This is how JavaScript reaches users on websites. Create two files:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My First JS Page</title>
</head>
<body>
  <h1>Hello from HTML</h1>

  <!-- Load your JS file here, at the end of body -->
  <script src="script.js"></script>
</body>
</html>

script.js

// This is your JavaScript file
console.log("Hello from JavaScript!");

// This changes what the user sees on the page
document.querySelector('h1').textContent = "JavaScript changed this!";

Open index.html in your browser. Open the console (F12). You'll see "Hello from JavaScript!" printed, and the heading will have changed.

Important: Put the <script> tag at the end of <body>, not in <head>. If it's in the head, the script runs before the HTML elements exist — and document.querySelector finds nothing. (The defer attribute is the modern fix for this, but end-of-body is the simplest approach for beginners.)

Way 3: Node.js (JavaScript outside the browser)

Node.js lets you run JavaScript on your computer like a regular program — read files, build servers, write command-line tools. To install:

Windows / Mac:

Go to nodejs.org
Download the LTS version (Long Term Support — the stable one)
Run the installer, click through the defaults
Open a terminal (Command Prompt on Windows, Terminal on Mac) and type:

node --version

You should see something like v20.11.0. Node.js is installed.

Linux:

# Ubuntu/Debian
sudo apt update && sudo apt install nodejs npm

# Or use nvm (Node Version Manager) — recommended for developers:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install --lts

Running a file with Node.js

Create a file called hello.js:

hello.js

// JavaScript running in Node.js
console.log("Hello from Node.js!");

let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(n => n * 2);
console.log("Doubled:", doubled);

Run it in your terminal:

node hello.js

Output:

Hello from Node.js!
Doubled: [ 2, 4, 6, 8, 10 ]

The Node.js REPL

Type node in your terminal (no filename) to open the REPL — an interactive prompt where you type JS and see results immediately. Like the browser console, but in your terminal. Press Ctrl+C twice to exit.

$ node
> 2 + 2
4
> let name = "Codex"
undefined
> console.log("Hello " + name)
Hello Codex
undefined
> .exit

Try It Yourself

VS Code setup + the defer attribute

Setting up VS Code for JavaScript

VS Code is the most popular editor for JavaScript. Install it from code.visualstudio.com.

Essential extensions:

ESLint — catches errors before you run code. Install ESLint globally: npm install -g eslint
Prettier — auto-formats your code on save. Add "editor.formatOnSave": true to VS Code settings
JavaScript (ES6) code snippets — shortcuts for common patterns

Create a .vscode/settings.json in your project root:

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "files.insertFinalNewline": true
}

The defer and async attributes

When the browser parses HTML and hits a <script> tag, it stops parsing, fetches the script, executes it, then continues. This blocks page rendering.

Attribute	What it does	When to use
none	Blocks HTML parsing while fetching + executing	Scripts that must run before page content (rare)
`defer`	Fetches in parallel, executes after HTML is parsed, in order	Most scripts — the safe default for `<head>`
`async`	Fetches in parallel, executes as soon as fetched (order not guaranteed)	Independent scripts (analytics, ads) that don't depend on each other

<!-- Modern pattern — scripts in <head> with defer -->
<head>
  <script src="script.js" defer></script>
</head>

npm and package.json

Node Package Manager (npm) comes with Node.js. It installs third-party packages.

# Initialise a project (creates package.json)
npm init -y

# Install a package (saves to package.json + node_modules/)
npm install lodash

# Install a development-only tool (not shipped with your app)
npm install --save-dev eslint

# Run a script defined in package.json
npm run build

package.json

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "start": "node index.js",
    "test": "node test.js"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "eslint": "^8.0.0"
  }
}

Never commit node_modules/ to Git. Add it to .gitignore. Your teammates run npm install to recreate it from package.json.

Module systems, toolchains, and runtime internals

ES Modules vs CommonJS

Two module systems exist in the JS ecosystem:

	ES Modules (ESM)	CommonJS (CJS)
Syntax	`import x from 'y'` / `export`	`const x = require('y')` / `module.exports`
Origin	TC39 standard (ES2015)	Node.js (pre-standard)
Loading	Static (analysable at parse time)	Dynamic (runs at runtime)
Top-level await	Supported (ES2022)	Not supported
File extension	`.mjs` or `.js` with `"type":"module"` in package.json	`.cjs` or default .js

ESM is the future. New projects should use ESM. When working with older packages that only export CJS, use import() (dynamic import) which works from ESM.

Modern JavaScript toolchains

Browser JS typically goes through a build step before shipping:

Bundler (Vite, webpack, Rollup, esbuild, Parcel) — combines many files into one (or few) bundles, handles imports, tree-shakes unused code
Transpiler (Babel, SWC, TypeScript compiler) — converts modern JS to older JS for browser compatibility, or TypeScript to plain JS
Minifier (Terser, esbuild) — removes whitespace and renames variables to minimise file size

Modern bundlers (Vite, Parcel) handle all three. The output is optimised static assets ready for CDN deployment.

Source maps

Minified/transpiled code is unreadable. Source maps (.map files) map minified code back to original source lines — the browser devtools use them to show you your original code in the debugger, not the minified version. Generate with --source-map flags or bundler config.

Node.js internals: libuv and the C++ event loop

Node.js is built on V8 (the JS engine) and libuv (a C library for async I/O). libuv provides the event loop, thread pool, and OS-level async wrappers. When you do fs.readFile(), Node.js passes it to libuv, which uses the OS's async file API (epoll on Linux, kqueue on macOS, IOCP on Windows). The thread pool (default 4 threads, configurable via UV_THREADPOOL_SIZE) handles operations the OS can't do asynchronously (some DNS lookups, file system operations on certain platforms).

This is why Node.js is excellent for I/O-heavy workloads but not CPU-heavy ones: a single CPU-bound operation blocks the entire event loop.

Official Sources

The Codex links only to official documentation and the ECMAScript specification. No third-party tutorials.