1.4 Separation of concerns and Execution in Node

After writing JavaScript directly between the script tags of an HTML file, the next step is to extract the script and separate it from the HTML markup. Why does that matter? Think about your house: in your bedroom you keep your bed and clothes, but you don't store clothes in the kitchen. The same principle applies to code. HTML is about content; JavaScript is about behavior. Keeping them in separate files is what we call separation of concerns.

Moving the script to an external file

Create a new file called index.js in the same folder as index.html and move the JavaScript code into it. The HTML file now needs to reference the script through the src attribute (short for "source") on the script element, pointing to index.js. The browser knows that the executable code is located in this external file.

  • HTML: <script src="index.js"></script>
  • JS file: console.log("Hello everyone");

Reload the page and open the browser console: you should see the same message as before. The behavior is identical, but the project is now organized in a cleaner, more maintainable way.

The same JavaScript file can also be executed outside the browser using Node.js. Make sure Node is installed on your machine; otherwise download it from nodejs.org. Open the Node command prompt (or any terminal), navigate to your project folder, and run node index.js. You will get the same output in the terminal. That is the power of JavaScript: the same code runs in a browser and on a server through Node. See you in the next chapter where we'll talk about variables.

Summary

This lesson introduces separation of concerns—the principle of keeping HTML (content) separate from JavaScript (behavior) for better code organization. It demonstrates moving JavaScript into a dedicated file (index.js) and executing the code in two environments: the browser console and Node.js via the command line, highlighting how the same JavaScript runs identically in both contexts.

Key points

  • Separation of concerns keeps HTML and JavaScript separate, improving code maintainability and organization
  • Reference external JavaScript files in HTML using the <script src="filename.js"></script> tag
  • JavaScript executes in the browser console and displays output through console.log messages
  • Node.js enables executing JavaScript outside the browser by running node filename.js in the command line
  • Both browser and Node environments execute identical JavaScript code with the same behavior and output

FAQ

Why should we separate JavaScript from HTML?

Separation of concerns follows the principle that each component should have a single responsibility. HTML handles content, JavaScript handles behavior. This makes code more organized, maintainable, and easier to debug—just as you keep clothes in the bedroom, not the kitchen.

How do I run JavaScript with Node.js?

Install Node.js from nodejs.org, open your command line, navigate to your project directory, and execute node index.js (or your filename). The output appears directly in the terminal.

Is there a difference between running JavaScript in the browser versus Node.js?

Both environments execute the same JavaScript code identically. The main difference is the output location: the browser shows console output in the browser console, while Node.js displays it in the terminal. The language syntax and behavior remain consistent.