[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. |
When you open the Console tab, you will see a screen like this.
Try typing some code into the console.
// Try typing these into the console.
console.log("Hello, Yagami Iori!");
alert("Hello!");
1 + 2 // Result: 3
The results will be displayed as shown below.
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 Southtown!";
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.
However, there are cases where placing it inside <head> is preferable. For example, tracking tags like Google Analytics need to load as early as possible, so they are placed in <head>. You can also use the defer attribute, which downloads the script without blocking HTML parsing and executes it after parsing is complete, making it safe to place in <head>.
<!-- defer: Executes after HTML parsing is complete. --> <script src="script.js" defer></script>
When in doubt, placing scripts just before </body> works fine. For details on the defer and async attributes, see <script>.
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. Homebrew is a package manager for macOS. If it is not installed, follow the instructions on the official site (https://brew.sh/) to install it. |
hello.js
console.log("Hello from Southtown!");
Run the following command in a terminal.
node hello.js Hello from Southtown!
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.
Uninstalling Node.js
To uninstall the Node.js version installed via Homebrew, run the following command.
brew uninstall node
Choosing an Editor
| Tool | Description |
|---|---|
| Visual Studio Code (commonly known as VSCode) | Currently the most popular editor. Installing the JavaScript/TypeScript extension pack gives you powerful code completion and debugging. Available on Windows, macOS, and Linux. |
| Sublime Text | A lightweight, extremely fast editor. Its simple interface lets you focus on coding. Available on Windows, macOS, and Linux. |
| Hidemaru Editor | A legendary Japanese text editor first released in 1993. Lightweight, fast, and equipped with a powerful macro system. Windows only, one-time purchase. |
| WebStorm | A JavaScript-dedicated IDE by JetBrains. Offers advanced refactoring, debugging, and framework support out of the box. Paid. |
These days, Visual Studio Code seems to be the most widely used editor, but the webmaster personally loves simple and lightweight editors, so he currently uses Sublime Text. Feel free to use this as a reference.
A note about Hidemaru Editor: first released in 1993, Hidemaru is lightweight, features powerful search and replace with regular expressions, and can be customized with macros. In modern terms, macros are similar to add-ons — and Hidemaru had this capability back in the 1990s, a remarkably forward-thinking design that makes it a truly wonderful editor.
The webmaster himself used Hidemaru Editor for programming from the Windows 3.1 era through Windows 7, and owes a great deal to it over the years. Its developer, Hideo Saito, continues to update Hidemaru to this day — it runs perfectly on Windows 11 and other 64-bit versions of Windows. You can purchase Hidemaru Editor from here — it is a one-time purchase for around 4,000 yen (about $27), and having it on a Windows machine can be surprisingly handy.
(´-`).｡oO(The webmaster wanted to give a personal shout-out to Mr. Saito, who he has relied on for years...)
(´-`).｡oO(And yet, after 30+ years of use, the total cost has been just around $27... it's hard to find anything with better value for money...)
If you find any errors or copyright issues, please contact us.
シェアする