JavaScript Installation and Environment Setup
JavaScript runs in two main environments: browsers (client-side) and Node.js (server-side). This guide covers setting up both.
Browser JavaScript
What You Need
Modern browsers come with JavaScript engines built-in:
- Chrome/Edge: V8 engine
- Firefox: SpiderMonkey engine
- Safari: JavaScriptCore engine
Getting Started
-
Open your browser’s developer tools:
- Windows/Linux:
F12orCtrl+Shift+I - Mac:
Cmd+Option+I
- Windows/Linux:
-
Navigate to the Console tab
-
Type JavaScript directly:
console.log("Hello, JavaScript!");
Creating Your First HTML File
Create a file named index.html:
<!DOCTYPE html>
<html>
<head>
<title>My First JavaScript</title>
</head>
<body>
<h1>JavaScript in Browser</h1>
<script>
console.log("Hello from inline script!");
</script>
</body>
</html>
Open this file in your browser and check the console.
External JavaScript Files
Create script.js:
console.log("Hello from external file!");
Update index.html:
<!DOCTYPE html>
<html>
<head>
<title>My First JavaScript</title>
</head>
<body>
<h1>JavaScript in Browser</h1>
<script src="script.js"></script>
</body>
</html>
Node.js Setup
Installation
Windows/Mac/Linux:
- Visit nodejs.org
- Download the LTS (Long Term Support) version
- Run the installer and follow the prompts
- Verify installation:
node --version
npm --version
Your First Node.js Program
Create hello.js:
console.log("Hello from Node.js!");
Run it:
node hello.js
Node.js REPL
The REPL (Read-Eval-Print Loop) lets you test code interactively:
node
Then type:
> console.log("Hello!");
Hello!
> 2 + 2
4
> .exit
Package Management with npm
What is npm?
npm (Node Package Manager) is the default package manager for Node.js. It comes with Node.js automatically.
Creating a Project
mkdir my-project
cd my-project
npm init -y
This creates package.json:
{
"name": "my-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Installing Packages
Install a package locally:
npm install lodash
This creates a node_modules folder and updates package.json.
Install globally (available system-wide):
npm install -g nodemon
Using Installed Packages
Create index.js:
const _ = require('lodash');
const numbers = [1, 2, 3, 4, 5];
console.log(_.reverse(numbers));
Run it:
node index.js
IDE Setup
VS Code (Recommended)
- Download from code.visualstudio.com
- Install the JavaScript (ES6) code snippets extension
- Install the Prettier extension for code formatting
Essential Extensions
- ESLint: Linting and error detection
- Thunder Client: API testing
- Live Server: Local development server
Environment Variables
Create a .env file:
API_KEY=your_key_here
DATABASE_URL=mongodb://localhost
Install dotenv:
npm install dotenv
Use in your code:
require('dotenv').config();
console.log(process.env.API_KEY);
Checking Your Setup
Create verify.js:
console.log("Node.js version:", process.version);
console.log("npm version:", require('child_process').execSync('npm --version').toString());
console.log("Current directory:", process.cwd());
console.log("Platform:", process.platform);
Run it:
node verify.js
Common Issues
“node: command not found”
- Node.js isn’t installed or not in PATH
- Restart your terminal after installation
“npm: command not found”
- npm should come with Node.js
- Reinstall Node.js
Permission errors on Mac/Linux
- Use
sudocarefully or use a Node version manager like nvm
Related Resources
Official Documentation
- Node.js Official Documentation
- npm Official Documentation
- MDN Web Docs - JavaScript
- ECMAScript Specification
Tools & Editors
Learning Resources
Next Steps
- Learn Variables: JavaScript Variables: var, let, const Explained
- Understand Data Types: JavaScript Data Types Fundamentals
- Master Functions: Functions: Definition, Parameters, Return Values
- Handle Errors: Error Handling in JavaScript
- Set Up IDE: IDE Setup: VS Code for JavaScript
- Manage Packages: npm: Package Management Fundamentals
Summary
You now have JavaScript running in both browsers and Node.js. You can write code in the browser console, create HTML files with scripts, or use Node.js for server-side development. npm gives you access to thousands of packages to extend JavaScript’s capabilities.
Comments