DEV Community

Cover image for Getting Started with JavaScript: Browser and Node.js Basics
Martín Aguirre
Martín Aguirre

Posted on

Getting Started with JavaScript: Browser and Node.js Basics

#webdev #javascript #node #programming

Introduction

JavaScript is an object-oriented programming language, dynamically typed, and primarily effective for the development of interactive web projects. It can powerfully manipulate the structure of web pages and provides a wide range of features and flexibility. On the other hand, with the help of Node.js, it can also perform elegantly on the server as a backend development alternative to other languages, and excels at speed, asynchronism and modularity.

Browser vs Node.js

JavaScript was originally created to run in the browser, where it brings websites to life with interactivity, animations, and dynamic behavior. Every modern browser today has a built-in JavaScript engine that makes this possible.

But JavaScript is not limited to the browser. Thanks to Node.js, it can also run directly on your computer, outside of any web page. This opened the door for JavaScript to be used on the backend, powering servers, handling files, and building applications that go far beyond the browser.

In this article, we’ll explore both approaches. We’ll start with the browser, the traditional home of JavaScript, and then move on to Node.js to see how the same language can be used in a completely different environment.

JavaScript in The Browser

The traditional way:

  1. Create a folder
  2. Open it using a text editor (Visual Studio Code, as a main recommendation)
  3. Create an HTML file named index.html
  4. Create a JavaScript file named script.js
  5. Add your code inside script.js and connect it to the HTML file

Minimum boilerplate HTML code to copy and paste on your index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First JavaScript Practice</title>
</head>
<body>
  <!-- JavaScript will be loaded at the bottom -->
  <script src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

We have a basic HTML structure, with a script tag where the JavaScript code is injected with the help of the src attribute where we reference the location of our script.js file, which in this case is in the same folder as index.html.

Minimum boilerplate JavaScript code to copy and paste in your script.js file:

console.log('Hello World from script.js')
Enter fullscreen mode Exit fullscreen mode

Now open the index.html file in your browser.

To see the result, open the Developer Tools console:

  • On Windows/Linux: press F12 or Ctrl + Shift + I
  • On macOS: press Cmd + Option + I

At this point, you should see "Hello World from script.js" printed in your browser's console.

For example:

Console message screenshot

A Little More Interaction

Printing to the console is a highly useful resource in JavaScript, but let’s actually change something on the page. Update your HTML's body like this:

<body>
  <h1 id="title">Welcome!</h1>
  <button onclick="changeText()">Click Me</button>
  <script src="script.js"></script>
</body>
Enter fullscreen mode Exit fullscreen mode

And inside script.js:

function changeText() {
  const title = document.getElementById("title")
  title.textContent = "You clicked the button!"
}
Enter fullscreen mode Exit fullscreen mode

Now, when you open the page and click the button, the <h1> text gets updated.

Congratulations! — You have just learned a little about DOM manipulation and events, two of the most important ideas in browser-based JavaScript.

Other Ways to Show Messages

Besides console.log, JavaScript also provides quick pop-ups:

alert("Hello World!")        // Shows a browser alert
prompt("What is your name?") // Asks for user input
Enter fullscreen mode Exit fullscreen mode

These are quite good for experimenting, but in real projects, developers usually prefer updating the page or using the console.

Developer Tools Tip

The browser console isn’t just for logging messages; it’s also where errors and warnings will appear.
If something doesn’t work, go and check the console first. It’s like your best friend when it comes to debugging.

At this point, you know how to:

  • Run JavaScript inside the browser
  • Log messages and errors
  • Interact with the page (DOM manipulation)
  • Handle simple user events

This sets a decent foundation. Next, let’s see how JavaScript can run outside the browser with Node.js.

JavaScript with Node.js

So far, we’ve seen how JavaScript runs inside the browser. But JavaScript can also run outside of the browser thanks to Node.js.

Node.js is a runtime environment that allows you to execute JavaScript directly on your computer. This is extremely powerful because it enables you to build backend servers, APIs, file-processing tools, and much more incredible things that the browser alone cannot do.

Installing Node.js

  1. Go to https://nodejs.org
  2. Download the Long-Term Support version, or LTS. (Recommended for most users)
  3. Install it following the setup wizard (Default settings are fine)
  4. Verify installation by opening your terminal (or command prompt), and typing: 
node -v
Enter fullscreen mode Exit fullscreen mode

If everything went as expected, it should print the installed version number (for example: v20.0.0).

Your First Node.js Script

Let’s create a new folder and a file named app.js:

// app.js
console.log("Hello World from Node.js")
Enter fullscreen mode Exit fullscreen mode

Now, open the terminal and run the following command:

node app.js
Enter fullscreen mode Exit fullscreen mode

The output you should see:

Hello World from Node.js
Enter fullscreen mode Exit fullscreen mode

Congratulations! — You’ve just run JavaScript outside of the browser with Node.js.

What’s the Difference?

In the browser, JavaScript has access to the DOM (web page structure), events like onclick, and browser-specific APIs like alert or prompt.

In Node.js, those resources do not exist. Instead, Node gives you access to things like:

  • The file system (read/write files)
  • Your computer’s operating system info
  • Networking (create servers, handle HTTP requests)

A Simple HTTP Server Example

One of the most common things to do with Node.js is create a simple web server. Here’s the smallest example using Node’s built-in http module:

// server.js
const http = require("http")

const server = http.createServer((req, res) => {
  res.writeHead(200, { "Content-Type": "text/plain" })
  res.end("Hello World from my Node.js server!")
})

server.listen(3000, () => {
  console.log("Server is running at http://localhost:3000")
})
Enter fullscreen mode Exit fullscreen mode

Run the server with:

node server.js
Enter fullscreen mode Exit fullscreen mode

Then open your browser and visit http://localhost:3000
You should see the following:

Hello World from my Node.js server!
Enter fullscreen mode Exit fullscreen mode

For example:

Web page message screenshot

Finally, press Ctrl + C to stop the server and free the port.

At this point, you now have an elementary understanding of:

  • How to install and run Node.js
  • The difference between running JavaScript in the browser vs in Node.js
  • How to create and run your first simple Node.js web server

Conclusion

In this article, you’ve learned how to run JavaScript in two different environments:

  • Inside the browser, where it can interact with web pages, handle user events, and update the DOM.
  • Inside Node.js, where it runs directly on your computer and can work with files, networks, and servers.

Understanding both sides is important, because JavaScript is one of the few languages that can power the entire web stack — from the user's interface, to the server logic running in the background.

Thank you for your time!

If you’d like to support my writing, you can buy me a coffee here: PayPal.me/martinxcvi ☕

Cover photo by Growtika on Unsplash

Top comments (0)