Course topics

By WebNest Studio Engineering Team

JavaScript Tutorial

Setting Up a JavaScript Environment

JavaScript can run in two very different places: inside a web browser, where it was born, and outside the browser via Node.js, which lets you run JavaScript as a standalone program the same way you would run a Python or Ruby script. Knowing how to use both environments — the browser console for quick experiments, and Node.js for real scripts and tooling — is a foundational skill before moving on to more advanced JavaScript topics.

Why it matters

JavaScript runs in two places: in the browser, where it drives web pages, and in Node.js, where it runs servers and build tools. The quickest way to learn it is to type a line and see the result at once, which is exactly what the console gives you. Being comfortable there is the first step to everything else.

Experimenting in the Browser Console

Every browser's DevTools (F12, then the Console tab) includes a live JavaScript interpreter tied to the current page. Typing an expression and pressing Enter evaluates it immediately and prints the result — no file, no setup, nothing to save. This makes the console the fastest way to test a small idea, like how Array.prototype.map behaves or what a particular date format looks like, before writing it into real code.

Installing Node.js

Node.js is a JavaScript runtime built on Chrome's V8 engine that lets JavaScript run outside any browser — on a server, in a build tool, or as a command-line script. Download the LTS (Long-Term Support) version from nodejs.org and install it; this also installs npm (Node Package Manager) automatically. Verify the install by running node -v and npm -v in a terminal, which print the installed version numbers.

Using npm and Running a Script File

npm is used to install reusable packages published by other developers (for example, npm install lodash downloads that library into a local node_modules folder) and to run project scripts defined in a package.json file. To run a plain JavaScript file directly, save it with a .js extension and run node script.js from a terminal in that folder — Node executes the file top to bottom and prints any console.log output to the terminal.

Examples

Quick experimentation in the browser console

JavaScript
// Typed directly into DevTools Console, not saved to a file
const nums = [1, 2, 3, 4, 5];
nums.filter(n => n % 2 === 0).map(n => n * 10);
Output
[20, 40] — the console immediately evaluates and prints the resulting array, with no file or setup needed.

Running a standalone script with Node.js

JavaScript
// script.js
function greet(name) {
  return `Hello, ${name}! This ran outside the browser.`;
}

console.log(greet('Webnest'));
console.log('Node version check:', process.version);
Output
Hello, Webnest! This ran outside the browser.
Node version check: v20.11.0

Common Mistakes

  • Trying to use browser-only globals like "document" or "window" inside a Node.js script — Node has no DOM, since there is no browser page involved.
  • Forgetting to save the file before running "node script.js," so Node executes an older, stale version of the code.
  • Running "node" with no filename and expecting it to run a script — with no argument, Node opens an interactive REPL prompt instead of executing a file.
  • Installing packages globally out of habit when a project-local install (the npm default) is what most tooling and tutorials expect.

Exercise

Print a greeting, then print the result of a calculation to confirm that multiplication is done before addition.

Expected output: Hello, JavaScript then 14

JavaScript · starter code
// TODO: log the text "Hello, JavaScript"

// TODO: log the result of 2 + 3 * 4
Show hints
  • console.log(value) prints a value to the console.
  • Text goes in quotation marks; a calculation does not.
Show solution
JavaScript · solution
console.log("Hello, JavaScript");

console.log(2 + 3 * 4);

Quick quiz

1. What is Node.js?

  • A. A web browser
  • B. A code editor
  • C. A runtime that executes JavaScript outside the browser
  • D. A JavaScript framework for user interfaces
Show answer

C. It is built on the V8 engine and is used for servers, scripts and tooling.

2. Which command runs a file named app.js with Node.js?

  • A. js app.js
  • B. run app.js
  • C. npm app.js
  • D. node app.js
Show answer

D. npm is the package manager; node is the runtime.

3. What is npm used for?

  • A. Installing and managing JavaScript packages
  • B. Styling pages
  • C. Writing HTML
  • D. Debugging in the browser
Show answer

A. It reads the project's dependencies from package.json.

Interview questions

What is the difference between JavaScript in the browser and in Node.js?

Show answer

The language is the same, but the surroundings differ. A browser provides the DOM, window, document, fetch and storage, and restricts access to the user's computer for security. Node.js has no DOM; it provides access to the file system, the network, processes and operating system through its own modules. Code that uses only the core language runs in both.

What is package.json?

Show answer

It is the manifest of a JavaScript project. It records the project's name and version, the packages it depends on and their version ranges, and named scripts such as start, build and test that are run with npm run. Running npm install reads it and downloads the dependencies into node_modules.

Key Points to Remember

  • The browser console is ideal for quick, throwaway experiments tied to the currently loaded page.
  • Node.js runs JavaScript outside the browser and is installed from nodejs.org, bundling npm alongside it.
  • npm installs third-party packages and can run scripts defined in package.json.
  • "node script.js" executes a JavaScript file from the terminal, printing console.log output directly to that terminal.

Practice in the playground

Write and run your own code for this topic, or start from the exercise or an example. Shows a live preview of your HTML, CSS and JavaScript. Your code for each topic is kept in this browser.

Run the examples

Change an input, predict the result, then compare it with the output. Explain why the result changes.

WebNest Studio

Written by

WebNest Studio Engineering Team

Practical lessons from developers working with Java, Python, React, databases and production systems.

Led by Vansh Duggal, Founder, WebNest Studio · Full-stack & software engineering