[Setup] JavaScript Development Environment

This page explains how to set up a JavaScript development environment. Because JavaScript runs in any browser, you can get started immediately without installing anything special.

Running Code in the Browser Developer Tools

This is the easiest approach. You can try JavaScript right away using the console in the browser's built-in developer tools.

Step	Action
1	Open a browser (Chrome is recommended).
2	Open the developer tools with the `F12` key (on macOS: `Cmd + Option + I`).
3	Click the `Console` tab.
4	Type JavaScript code into the console and press `Enter` to run it immediately.

// Try typing these into the console.
console.log("Hello, JavaScript!");
alert("Hello!");
1 + 2  // Result: 3

Writing JavaScript in the HTML script Element

This method writes JavaScript inside a <script> element in an HTML file. The script runs as soon as you open the HTML file in a browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Test</title>
</head>
<body>
  <h1>JavaScript Test</h1>
  <script>
    document.write("Output from JavaScript!");
  </script>
</body>
</html>

Paste the code above into a text editor, save it as index.html, and open it in a browser.

Loading an External JavaScript File

This method separates JavaScript code into its own file (.js) and loads it from HTML. This is the standard approach in real-world development.

First, create a file called script.js.

// script.js
console.log("Executed from an external file!");
document.getElementById("output").textContent = "Hello from script.js!";

Next, load this JS file from your HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Loading an External JS File</title>
</head>
<body>
  <p id="output"></p>
  <script src="script.js"></script>
</body>
</html>

It is recommended to place the <script> element just before </body>. This ensures that the HTML has finished loading before JavaScript runs, which prevents errors when accessing elements.

Running JavaScript with Node.js (Supplementary)

By installing Node.js, you can run JavaScript from a terminal (command prompt) without a browser. It is used for server-side development and building tools.

OS	Installation Method
Windows	Download and run the installer from nodejs.org.
macOS	Use the installer from the official website, or run `brew install node` with Homebrew.

// hello.js
console.log("Hello from Node.js!");

Run the following command in a terminal.

node hello.js
Hello from Node.js!

Command Not Found

If the terminal shows node: command not found after installing Node.js, the PATH may not be configured correctly. Follow the steps below to check and set it up.

1. Locate the command

Check where the node command is installed.

which node

If it is not found, check the common installation paths.

ls /usr/local/bin/node
ls /opt/homebrew/bin/node

2. Check your shell

echo $SHELL

If the output is /bin/zsh, edit ~/.zshrc. If it is /bin/bash, edit ~/.bashrc.

3. Add the path to PATH

Once you know the installation path, add it to your shell configuration file.

For macOS (zsh):

echo 'export PATH="/usr/local/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

For Linux (bash):

echo 'export PATH="/usr/local/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

On Windows, go to "System Properties" → "Environment Variables" → "Path" and add the folder where Node.js is installed.

If you find any errors or copyright issues, please contact us.

Home

JavaScript Dictionary