Browser and Node Environments

JavaScript syntax can run in multiple hosts. Browsers provide document and DOM events; Node supplies server and filesystem tools. Detecting a host facility is different from assuming every JavaScript program has it.

Before this topic, review Your First JavaScript Program if its terms are unfamiliar.

This is JavaScript in Node.js. Read the initial values, then follow each operation to its displayed result. A declaration names a value, a function call performs an operation, and console.log displays its arguments.

JavaScript is a versatile language that can run in two major environments: the browser and Node.js. While the language syntax remains consistent, the environment drastically affects what your code can access, how it behaves, and how it's executed.

When JavaScript runs in the browser (like Chrome, Firefox, Edge), it's embedded into HTML files and executed by the browser's JavaScript engine—such as V8 in Chrome. It's mainly used for client-side interactivity like handling clicks, updating DOM, fetching data, and managing browser events.

Using Browser Console

The easiest way to test JavaScript in the browser is by using the Developer Console. Here's how:

• Right-click on any webpage > Click Inspect > Go to the Console tab.
• Type any JavaScript expression, and it executes immediately.

<script>
  console.log("Hello from the browser!");
  document.title = "JavaScript Rocks";
</script>

Hello from the browser!

Notice how we can access the document object — this is because it's part of the Browser Object Model (BOM) and DOM API.

Browser-Specific Features

• window, document, alert(), fetch()
• Manipulating the DOM
• Listening to user events like clicks, hovers, etc.

Node.js is a runtime environment that lets you run JavaScript on the server, outside of the browser. It's built on Chrome’s V8 engine, but it does not include browser APIs like document or window.

Running JavaScript with Node.js

To run JavaScript with Node.js, install Node from nodejs.org. Then, create a file like app.js and run it using the terminal:

console.log("Hello from Node.js");

Hello from Node.js

Node.js-Specific Features

• require() for module imports
• fs for file system access
• http for server creation

const fs = require('fs');
fs.writeFileSync('example.txt', 'Created by Node.js');

✔ File 'example.txt' created with content: Created by Node.js

This will create a text file, something impossible in the browser directly due to security restrictions.

Visual Studio Code (VS Code) is the most popular editor for writing JavaScript for both environments. Here's how to use it effectively:

For Browser Projects

1. Create an HTML file and a separate script.js
2. Link your JS file inside HTML using <script src="script.js"></script>
3. Use the Live Server extension to auto-reload your page

For Node.js Projects

1. Create a .js file and run it with node filename.js
2. Use terminal inside VS Code to execute commands
3. Install packages using npm install

Example 1: Accessing the DOM

In Browser

document.body.style.background = "lightblue";

Changes background color of current page

In Node.js

console.log(document); // ReferenceError

ReferenceError: document is not defined

Example 2: File Creation

In Node.js

const fs = require('fs');
fs.writeFileSync('note.txt', 'This is from Node');

(note.txt created in the same directory)

In Browser

fs.writeFileSync('note.txt', 'Try this'); // Not defined

Uncaught ReferenceError: fs is not defined

While JavaScript is the common language across both platforms, the tools, APIs, and use cases are quite different. Understanding the environments is crucial for writing effective code. Use the browser for UI and event-driven scripts, and Node.js for backend logic, automation, and tooling.

As you advance, you’ll likely combine both worlds—Node.js for server-side processing and browser JavaScript for front-end interactivity. Mastering both opens up the full power of modern JavaScript development.

Run this particular example in Node.js. In a browser, document normally exists and the line is object. Host differences do not make let or functions different languages.

Your task: Replace document with process. Predict the result before running the edited program.

The source is repeated here. If the edit targets the HTML rather than the script, use the markup repeated below; the worked answer also repeats the changed markup.

Node provides process. This output is specific to Node, not a portable browser assumption.

JavaScript syntax can run in multiple hosts. Browsers provide document and DOM events; Node supplies server and filesystem tools. Detecting a host facility is different from assuming every JavaScript program has it.

Check your variation against this explanation: Node provides process. This output is specific to Node, not a portable browser assumption.

Use the JavaScript array reference library for individual array operations and boundary tests to check a rule independently.