Introduction

JavaScript or JS (as it is often called) is a programming language that is used to make a website interactive. It is one of the core technologies for building web applications, alongside HTML and CSS.

There are different ways to run the JavaScript code. You can run it directly in web browsers like Chrome, Microsoft Edge, Mozilla Firefox, Apple Safari, and Opera. You can also run it with technologies like Node.js to build server-side applications. Also, you can use frameworks like React and Angular.

In this tutorial, we will focus on two popular ways to run JS code. They are

From the web browser.
From the command line with node.js.

This tutorial is for beginner software developers and technical writers with basic knowledge of HTML, CSS, and how to use programming tools like VS Code, web browsers, etc.

For more information, see How to Create the YouTube Subscribe Button with HTML and CSS.

Prerequisite

The required tools to complete this tutorial include:

A web browser to view your website (eg Google Chrome, Mozilla Firefox, Microsoft Edge, Apple Safari, Opera Mini).
A code editor to write the HTML and CSS code ( eg Visual Studio Code or VS Code, Vim, Sublime Text, Notepad).

To install any of these tools, see the Installation section in “How to Create the YouTube Subscribe Button with HTML and CSS.”

How to Run JS Code from the Web Browser

Step 1. Create a folder and open it with VS Code

Create a folder on your laptop.
Right-click on the folder and select “Open with Code.”

Step 2: Create an HTML and JavaScript File inside the Folder

Create a new file inside the folder from step 1 and save it as index.html.
Create another file and save it as script.js.

Step 3. Link the JavaScript File to the HTML File

In the index.html file, add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>JavaScript Example</title>
</head>
<body>
  <h1>JavaScript Test</h1>
  <script src="script.js"></script>
</body>
</html>

Note: The <script> tag with the src attribute links the external JavaScript file (script.js) to the HTML file. Place it just before the closing </body> tag for better performance.

For more information on these HTML codes, see Write the HTML Code in “How to Create the YouTube Subscribe Button with HTML and CSS.”

Step 4. Write JavaScript Code

In the script.js file, add some JavaScript code, for example:

console.log('hello world!');
alert('JavaScript is working');

Step 5. Open the HTML File in a Browser

Right-click on the index.html file.
Select Open with Live Server (if you have the Live Server extension installed). This automatically opens the HTML file in your default browser and runs the linked JavaScript.

If you don't have Live Server installed, see Open the HTML File with Live Server in “How to Create the YouTube Subscribe Button with HTML and CSS.”

Step 6. View Output in the Developer Console

After you have opened the HTML file in your web browser, on the same page, open the Developer Tools. To do this, press Ctrl + Shift + I on Windows, Cmd + Option + I on macOS or right-click a space on the page and select “Inspect” from the options displayed.
Go to the Console tab to see the console.log output.
Reload the page. The alert will appear as a popup when you do this.

You just learned how to run your JavaScript code in a web browser. You can make changes to your script.js file, save it, and refresh the browser to see the updates.

How to Run a JS Project From the Command Line with Node.js

Node.js is a runtime environment that allows you to run JavaScript projects outside of a browser. Runtime environment refers to a platform that provides the necessary tools and resources for a program to run. To use Node.js to run your JS project, follow the steps below:

Step 1. Install Node.js

Download and install Node.js from the official website: https://nodejs.org/.
Follow the installation instructions for your operating system.
Verify installation. To do this:
- Open your VS Code.
- In the title area, click the three dots after Run (if Terminal is not listed).
- Select Terminal > New Terminal.
- On the new terminal, click + to choose the command line option you want to use (I use PowerShell)

Enter the code below:

node -v

This will display the installed version of Node.js.

Step 2: Run Your JavaScript File

Enter node followed by the file name. For example:

node (filename)

You’ll see the output in the terminal:

Step 3: Debugging and Errors

If there’s an error in your code, Node.js will display an error message and point to the issue in your script. In the above screenshot, the first code hello world worked. But the second alert code didn’t. Why is this?

The error ReferenceError: alert is not defined occurs because the alert function is part of the browser's JavaScript runtime (used for displaying popup messages in web browsers) and is not available in Node.js, which runs JavaScript outside the browser.

Node.js does not provide browser-specific features like alert. Instead, it focuses on server-side features like file systems, networking, and process management.

To debug this error:

Replace alert with Node.js compatible code like console.log instead of alert.
Enter the node command from Step 2 again.

Both codes work. No errors.

This is how to run your JS code on the command line. Select any options that work for you (web browser or node.js) and start running your JS code.

Stay Happy Coding!

How to Run JavaScript Code

Table of contents