How to Run JavaScript

What you’ll build or solve

You’ll run a simple .js file and see the output.

When this approach works best

This approach works best when you want a fast way to test JavaScript without setting up a framework.

Use it when you:

  • Practice syntax, loops, or functions in small files.
  • Test logic before adding it to a larger project.
  • Add basic interactivity to a static HTML page.

Skip this approach when:

  • You are inside a framework project like React or Next.js that already has its own run command.
  • You need bundlers, TypeScript, or advanced build tooling.

Prerequisites

  • A code editor such as VS Code
  • For Node.js: Node installed on your system
  • For browser runs: a modern browser (Chrome, Firefox, Edge, Safari)

No extra setup is required.


Step-by-step instructions

1) Create a JavaScript file for testing

Create a new file named app.js and add:

console.log("JavaScript is running!");

Save the file.

What to look for: this file will be used in the next two steps. You only need one simple console.log to confirm execution.


2) Run JavaScript with Node.js

This is the most common way to run JavaScript outside a browser.

Open your terminal and navigate to the folder that contains app.js.

macOS or Linux

cd path/to/your/folder
node app.js

Windows PowerShell

cdpath\to\your\folder
nodeapp.js

If everything is set up correctly, you’ll see:

JavaScript is running!

What to look for

  • The output appears immediately in the terminal.
  • If you see node: command not found, install Node.js and restart your terminal.
  • If you see a file not found error, confirm you are in the correct folder.

This method is best for scripts, automation, backend code, and practice exercises.


3) Run JavaScript in a browser

Use this method when your code interacts with the page, such as buttons or text.

Create a file named index.html in the same folder:

<!doctype html>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<title>Run JavaScript</title>
</head>
<body>
<h1>Check the Console</h1>

<scriptsrc="./app.js"></script>
</body>
</html>

Now double-click index.html to open it in your browser.

Open the DevTools Console:

  • Chrome or Edge: Ctrl+Shift+I (Windows/Linux), Cmd+Option+I (Mac)
  • Firefox: Ctrl+Shift+I or Cmd+Option+I

Then click the Console tab.

You should see:

JavaScript is running!

What to look for

  • The message appears in the Console tab.
  • If nothing appears, refresh the page.
  • If you get errors about null elements, move the <script> tag to the end of <body> as shown above.

This method is required when your code uses browser features like document, window, or event listeners.


Examples you can copy

Example 1: Simple math in Node

app.js:

constresult=5*4;
console.log("Result:",result);

Run:

node app.js

You’ll see:

Result: 20

Example 2: Update the page text (Browser)

Update app.js:

document.addEventListener("DOMContentLoaded", () => {
constheading=document.querySelector("h1");
heading.textContent="JavaScript loaded successfully!";
});

Open index.html again and refresh.

The heading text will change when the page loads.


Example 3: Button click interaction (Browser)

Update index.html:

<!doctype html>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<title>Run JavaScript</title>
</head>
<body>
<buttonid="btn">Click me</button>

<scriptsrc="./app.js"></script>
</body>
</html>

Update app.js:

JavaScript

document.addEventListener("DOMContentLoaded", () => {
constbutton=document.querySelector("#btn");

button.addEventListener("click", () => {
console.log("Button clicked");
  });
});

Open the Console, click the button, and watch the message appear.

This confirms your JavaScript runs in response to user actions.


Common mistakes and how to fix them

Mistake 1: Running Node in the wrong folder

What you might do: run node app.js from your home directory.

Why it breaks: Node cannot find the file, so it throws a module or file error.

Fix:

cd path/to/project
node app.js

Mistake 2: Using browser APIs in Node

What you might do:

JavaScript

document.querySelector("h1");

Why it breaks: Node does not have a DOM, so document is undefined.

Fix: run DOM-related code inside an HTML page in a browser.


Mistake 3: Script runs before the page loads

What you might do: place <script> in <head> and query elements immediately.

Why it breaks: the HTML elements do not exist yet.

Fix: move the script tag to the end of <body> or use DOMContentLoaded.

Correct pattern:

JavaScript

document.addEventListener("DOMContentLoaded", () => {
console.log("Page ready");
});

Troubleshooting

If you see node: command not found, install Node.js and restart your terminal.

If you see Cannot find module, check the file name and folder.

If the browser shows nothing, open DevTools Console and refresh.

If you see document is not defined, you are running browser code in Node.

If changes do not appear, save the file and refresh the browser.


Quick recap

  • Create a simple app.js file.
  • Run it in Node using node app.js.
  • Or link it in an HTML file and open it in a browser.
  • Use the Console to confirm your code executes.
  • Check your folder and environment for errors.