cf.completefrontendCode editorOpen lab
THE JAVASCRIPT FIELD GUIDE
Lesson 2.1 · Your first programs Interactive article

Setting up your tools

Install a friendly editor, use the browser console for quick experiments, install Node.js LTS, run a JavaScript file, and know when an online playground is enough.

12 min + experimentsBeginnerBy Updated How this lesson was made
By the end, you can
  • 01
    Choose the right surfaceTell the editor, console, terminal, Node.js, and playgrounds apart.
  • 02
    Run a real fileCreate hello.js, run it with node hello.js, and read the printed output.
  • 03
    Troubleshoot setupCheck node --version, understand PATH errors, and restart a terminal after installing.

Your JavaScript workshop

JavaScript starts with a surprisingly small toolkit. You need a place to write code, a place to try quick ideas, and a way to run files outside the browser. The previous lessons introduced JavaScript, its history, engines, runtimes, and manuals. This lesson turns that map into a working desk.

Think of your setup as a workshop. The editor is the workbench where you build things you want to keep. The browser console is a scratchpad for tiny experiments. The terminal is the control panel where you type commands. Node.js is a second stage that runs your scripts outside the browser. Online playgrounds are a fully equipped rental kitchen: useful when you cannot install tools or want to share a quick idea.

Real-life analogyA workshop for code

Good workshops have different surfaces for different jobs. You do not write a permanent blueprint on a sticky note, and you do not test a tiny measurement by rebuilding the whole table. JavaScript tools work the same way: choose the surface that matches the job.

In real life: Workbench
In JavaScript: Editor: write and save files
In real life: Scratchpad
In JavaScript: DevTools console: quick experiments
In real life: Control panel
In JavaScript: Terminal: run commands
In real life: Second stage
In JavaScript: Node.js: run JavaScript outside the browser

Where the analogy stops: A real workshop has separate machines. On your computer, VS Code can show the editor and an integrated terminal in the same window, and the browser console is part of DevTools.

Definition

A JavaScript development environment is the set of tools you use to write, run, inspect, and share JavaScript programs.

VS Code: your workbench

INTERACTIVE

A code editor is a text editor that understands programming files. Visual Studio Code is a popular free choice, but the ideas transfer to other editors too: files on the left, code in the middle, commands and status around the edges.

Install VS Code from its official site, open a folder for your practice files, and create a file named hello.js. Save early and often. A saved file is something Node.js can run; unsaved text in the editor is only a draft.

Tour a code editor window
Try it yourself

Editor: This is where code you want to keep belongs. VS Code colors syntax, matches brackets, and points out many typos before you run the file. Shortcut: Type and save with Cmd/Ctrl+S.

A simplified mock of VS Code, made from buttons and labels—not a screenshot—so keyboard and screen-reader users can explore it too.

The Command Palette is worth learning on day one: press Cmd+Shift+P on Mac or Ctrl+Shift+P on Windows/Linux and type the action you want. Quick Open (Cmd/Ctrl+P) jumps to a file by name. The integrated terminal toggles with Ctrl+` (the backtick key, left of 1 on US keyboards), the same terminal you can also open from your operating system.

The DevTools console

INTERACTIVE

The browser console is still the fastest place to ask “what does this expression do?” You already used it for 2 + 2 in Why JavaScript?. Now add a few habits that make it practical.

  • Enter runs what you typed.
  • Shift+Enter starts a new line so you can write a tiny program first.
  • The up arrow usually brings back previous commands.
  • Use the clear button or console.clear() to clean the view.
  • Errors show up in red, often with a file name and line number.
  • $_ is a Chrome/Edge convenience for the last result; do not depend on it in code.
Try the console habits
Console inputPop out in the code editor (opens in a new tab)JavaScript
const tool = "console";const note = "Use Shift+Enter for a new line";console.log(tool + ": " + note);
Console outputShift+Enter
console: Use Shift+Enter for a new line
Try it yourself

Use Shift+Enter to add lines, then press Enter to run the whole mini-program.

This is a safe simulation of common DevTools console moves. Open your real console to try them in your browser.
Console output is not saved

The console is perfect for experimenting, but refreshing the page or closing DevTools can remove your typed work. When an idea matters, move it into a file in your editor.

Installing Node.js

CHECKLIST

Node.js lets you run JavaScript from the terminal. In the Engines, runtimes & hosts lesson you saw the big idea: Node.js combines the V8 JavaScript engine with host APIs such as the file system. For this course, install the LTS version. LTS means “Long-Term Support”: the steady version most learners and teams should choose.

  1. Download Node.js LTS from the official Node.js website.
  2. Run the installer and accept the default PATH option if it asks.
  3. Close and reopen your terminal so it sees the new command.
  4. Type node --version and npm --version.
Example terminal sessionShell
$ node --versionv22.0.0   # example: your LTS version may differ$ npm --version10.0.0    # example: yours may differ$ node hello.jsOpening hello.jsHello, Mina!Ready for the next lesson.

Your numbers will differ from the example. That is okay. The important part is that both commands print a version instead of an error. npm is installed with Node.js; you will use it later for packages and project scripts.

Setup command meanings
CommandWhat it checksGood resultCommon problem
node --versionCan the terminal find Node.js?A version such as v22...command not found or 'node' is not recognized
npm --versionCan the terminal find npm?A version numberNode installed incompletely or terminal needs restart
node hello.jsCan Node run your file?Your program's printed linesWrong folder, wrong file name, or a syntax error

Running a file

STEP THROUGH

Create a file named hello.js in your practice folder. A JavaScript file runs from the first statement to the last. The terminal output is only what the program prints with console.log or what an error reports.

Run hello.js from top to bottom
Step 0 of 5Ready
Your turn: follow the blue line

This is a guided replay of running node hello.js: predict each terminal line, then step through the file top to bottom.

Running in
  1. script
Next: line 1
Click the blue line to take the next stepPop out in the code editor (opens in a new tab)JavaScript
console.log("Opening hello.js");const message = "Hello, " + learner + "!";console.log(message);console.log("Ready for the next lesson.");
CallStoreChangeResultRun = next line. Ran = already executed.
Recent returnsNothing yet. Start with the blue line.
Change line 1: which name should the file greet?

Changing the name starts a fresh replay. Predict the second printed line before you step.

A guided replay recorded from real JavaScript calls, not an engine debugger. Step follows executed statements; Back reviews a snapshot. Reset starts a fresh run.

To run the same file yourself, open a terminal in the folder that contains hello.js and type node hello.js. If Node says it cannot find the file, check the folder and spelling. If JavaScript reports a syntax error, read the line number and compare it with your editor.

Real-life analogyNode.js is a second stage

The same actor can perform on two stages. On the browser stage, the props are buttons, forms, and a page. On the Node.js stage, the props include files, folders, and terminal input/output.

In real life: Browser stage
In JavaScript: JavaScript can interact with a web page
In real life: Node stage
In JavaScript: JavaScript can read files, run tools, and print to a terminal
In real life: Same actor, different props
In JavaScript: Same language, different host APIs

Where the analogy stops: Node.js is not a browser. There is no document or page button unless a tool creates one. Browser JavaScript and Node.js share the language, not every available object.

Online playgrounds

PRACTICAL

Sometimes the right setup is no setup. Online playgrounds such as CodePen, JSFiddle, and StackBlitz let you write and run snippets in a browser. They are excellent for sharing a reproduction, testing a tiny idea on a borrowed computer, or following a lesson when installation is not possible yet.

A playground is not a safe place for secrets, private company code, or anything you cannot share with a third party. It is also not a full replacement for learning local files: real projects need folders, version control, installed packages, and terminal commands.

Rental kitchen rule

Use a playground like a rental kitchen: great for trying a recipe, not where you store your only copy of the cookbook.

Where would you do this?

SORTER

The best tool depends on the job. Sort each task into the place you would normally do it. There is no shame in changing surfaces: quick console experiments often become saved editor files later.

Choose the right JavaScript surface
  • Write app.js that you want to keep and edit tomorrow
  • Try 0.1 + 0.2 quickly
  • Run node hello.js
  • Share a runnable snippet with a friend without installing anything
  • Rename a folder of practice files
  • Read the red error from a page you are testing
  • Check whether Node.js is installed with node --version
  • Try a tiny idea on someone else’s computer
Try it yourself
0 of 8 correct

Drag or select each card into the place you would usually do that task.

Choose a category for every card. You can change an answer at any time; Reset clears them all.

Where you will use this

A normal beginner workflow looks like this:

  1. Open your course folder in VS Code.
  2. Create or edit a file such as hello.js.
  3. Save the file.
  4. Open the terminal in that same folder.
  5. Run node hello.js.
  6. Read output or errors, edit, save, and run again.

You will still use the browser console constantly: to test one expression, inspect an error on a page, or try a three-line idea with Shift+Enter. You will use online playgrounds when you need a link that someone else can open immediately.

Common misconceptions

CLARIFY
  • “VS Code runs JavaScript by itself.” It edits files. Node.js or a browser runs the code.
  • “The console is only for mistakes.” It is also a scratchpad for experiments and a place to print messages.
  • “npm and Node.js are the same thing.” Node runs JavaScript; npm helps manage packages and scripts.
  • “Online playgrounds mean I never need local tools.” Playgrounds are convenient, but projects need local folders and terminal commands.
  • “An error means the setup is broken.” Many errors simply mean a typo, wrong folder, or file not saved.
Similar tools, different jobs
ToolBest forNot for
EditorKeeping and organizing filesInstant one-off calculations
Browser consoleQuick experiments and page errorsLong-term saved work
TerminalCommands such as node hello.jsEditing many lines comfortably
Node.jsRunning JavaScript files outside the browserShowing a web page by itself
Online playgroundSharing quick runnable demosPrivate code or secrets

Practice exercises

5 EXERCISES
Exercise 1 · Warm-upCheck Node.js and npm

Install Node.js LTS if needed, then check both version commands. Type the word that describes what a successful command prints.

Answer, then press Check. Spacing and letter case don’t matter.

    Exercise 2 · Warm-upPredict terminal output

    Read the program and predict the two lines it prints.

    Starter codePop out in the code editor (opens in a new tab)JavaScript
    const file = "hello.js";
console.log("Running " + file);
console.log("Done");

    Answer, then press Check. Spacing and letter case don’t matter.

      Exercise 3 · PracticeUse a multi-line console scratchpad

      In the browser console, enter a two-line program that stores 0.1 + 0.2 in total and prints it.

      Answer, then press Check. Spacing and letter case don’t matter.

        Exercise 4 · PracticeCreate and run hello.js

        Create hello.js, paste the starter code, save it, and run it with Node.js. What greeting appears?

        Starter codePop out in the code editor (opens in a new tab)JavaScript
        const learner = "Mina";
console.log("Hello, " + learner + "!");

        Answer, then press Check. Spacing and letter case don’t matter.

          Exercise 5 · ChallengeFind the typo

          This file fails when you run it. Type the corrected second line.

          Starter codePop out in the code editor (opens in a new tab)JavaScript
          const tool = "Node";
consle.log("Use " + tool);

          Answer, then press Check. Spacing and letter case don’t matter.

            Check your understanding

            7 QUESTIONS
            Lesson quiz · 7 questionsScore: first tries count

            1. Question 1 of 7Which tool is the best place to edit a JavaScript file you want to keep?

              Choose an answer to see the explanation.

            2. Question 2 of 7What does this program print?

              Read the code, then predictPop out in the code editor (opens in a new tab)JavaScript
              const file = "hello.js";
console.log("Running " + file);
console.log("Done");

              Choose an answer to see the explanation.

            3. Question 3 of 7You installed Node.js, but node --version still says command not found. What should you try first?

              Choose an answer to see the explanation.

            4. Question 4 of 7In most browser consoles, what does Shift+Enter do while you are typing?

              Choose an answer to see the explanation.

            5. Question 5 of 7Which command asks Node.js to run a file named hello.js?

              Choose an answer to see the explanation.

            6. Question 6 of 7What does this print?

              Read the code, then predictPop out in the code editor (opens in a new tab)JavaScript
              const learner = "Mina";
console.log("Hello, " + learner + "!");

              Choose an answer to see the explanation.

            7. Question 7 of 7When is an online playground the best choice?

              Choose an answer to see the explanation.

            Key takeaways

            • Use an editor such as VS Code for code you want to keep.
            • Use the browser console as a fast scratchpad and error viewer.
            • Install Node.js LTS so the node command can run JavaScript files.
            • The terminal runs commands; it is not the same thing as JavaScript code.
            • Online playgrounds are great for quick, shareable experiments, not secrets.

            A development environment is your editor, console, terminal, runtime, and sharing tools working together so you can write and run programs.

            Up next: Hello, world! You will put code on a page and in a file without diving deeply into script tags yet.

            CompleteFrontend Clear concepts. Working examples.