Set Up and Run JavaScript
Set Up and Run JavaScript
An editor saves source text, while a runtime executes it. Save this program as school.js and run node school.js, or paste it into a browser console. Open developer tools to inspect console output rather than expecting it to appear inside the page.
Before this topic, review What Is JavaScript? if its terms are unfamiliar.
What you’ll learn
- Explain set up and run javascript through the school example.
- Trace the shown operations and distinguish their result from displayed output.
- Make the practice change and explain its consequence: Changing the string changes the message. Save and rerun the file to execute the edit.
Work through the school example
This is JavaScript using language features and the host console. Read the initial values, then follow each operation to its displayed result. A declaration names a value, a function call performs an operation, and console.log displays its arguments.
JavaScript · school.js · complete example
console.log("School ready");
Expected output
School readyIntroduction
Before writing your first line of JavaScript, you need to create the right environment. Think of it like a well-equipped kitchen before you start cooking. This guide will walk you through setting up a JavaScript environment using the browser console, Node.js, and Visual Studio Code (VS Code).
1. Using Browser Console
Every modern web browser (Chrome, Firefox, Safari, Edge) has a built-in JavaScript engine. The browser console is the simplest and fastest way to run small snippets of JavaScript.
How to Open the Console
- Chrome: Right-click on a webpage → Inspect → Console tab
- Firefox: Right-click → Inspect Element → Console
- Edge: F12 or Right-click → Inspect → Console
Example Code
console.log("Hello from the browser!");
Expected Output
Hello from the browser!
Why use it? It's instant. Great for testing small pieces of code or debugging.
2. Setting Up Node.js
Node.js lets you run JavaScript outside the browser — on your computer, like any other programming language. It's essential for building backend services, running development tools, and testing JavaScript apps.
Installation Steps
- Visit nodejs.org
- Download the LTS (Long Term Support) version suitable for your OS
- Run the installer and follow the prompts
Verify Installation
node -v
npm -v
What You Should See
v20.x.x (or your installed Node version)
10.x.x (npm version)
Running JavaScript in Node.js
// Save this as hello.js
console.log("Hello from Node.js");
Run it in Terminal
node hello.js
Expected Output
Hello from Node.js
Pro Tip: You can use node alone to enter a REPL (interactive shell) for quick tests.
3. Setting Up VS Code
Visual Studio Code is a powerful, lightweight editor with great support for JavaScript. It’s the preferred choice for most developers.
Download & Install
- Go to code.visualstudio.com
- Download the appropriate version for your OS
- Follow the installation steps
Create Your First Project
- Open VS Code
- Create a folder, e.g.,
js-learning - Open this folder in VS Code (File → Open Folder)
- Create a file
app.js - Add your JavaScript code
// app.js
let name = "VS Code";
console.log("Running JavaScript in " + name);
Run from Terminal
node app.js
Expected Output
Running JavaScript in VS Code
Optional but Helpful Extensions
- ESLint: Helps catch errors and follow best practices
- Prettier: Auto-formats your code
- Live Server: Instantly reloads your browser when you save HTML/JS
Comparing the Environments
| Environment | Best For | Pros | Cons |
|---|---|---|---|
| Browser Console | Quick experiments, DOM testing | No setup, instant access | Not suited for full apps |
| Node.js | Backend, tools, scripts | Runs JS anywhere, access to npm | No DOM access |
| VS Code | Full development | Powerful editor, extensions | Requires Node for execution |
Conclusion
You now have three solid ways to start writing JavaScript — each serving a unique purpose. Start with the browser for instant feedback, use Node.js for backend or tool development, and adopt VS Code for full-fledged projects. With this setup, you’re ready to dive deeper into the JavaScript universe with confidence.
Recognize the important boundary
Install Node from its official website when using a local runtime. Browser-only DOM code needs a browser, not an ordinary Node script.
Try a small variation
JavaScript · original source for practice
console.log("School ready");
Your task: Replace School ready with Class ready. Predict the result before running the edited program.
The source is repeated here. If the edit targets the HTML rather than the script, use the markup repeated below; the worked answer also repeats the changed markup.
Worked answer and reasoning
Changing the string changes the message. Save and rerun the file to execute the edit.
JavaScript · complete worked variation
console.log("Class ready");
Expected output
Class readyPredict the original program
JavaScript · original program for this question
console.log("School ready");
Keep the useful idea
An editor saves source text, while a runtime executes it. Save this program as school.js and run node school.js, or paste it into a browser console. Open developer tools to inspect console output rather than expecting it to appear inside the page.
Check your variation against this explanation: Changing the string changes the message. Save and rerun the file to execute the edit.
Use the JavaScript array reference library for individual array operations and boundary tests to check a rule independently.
Reaching the recap and completing the quizzes are separate milestones.