javascript-course-chapter-02
Chapter 2: Development Environment
Learn how to prepare your computer, editor, browser, and tools for writing JavaScript.
Goal: Set up a beginner-friendly JavaScript workspace using VS Code, browser tools, Node.js, npm, and clean project folders.
2.1 Editors and IDEs
An editor is a program where you write code. An IDE is a bigger program that includes editing, debugging, running, and project tools. VS Code is a popular beginner-friendly editor for JavaScript.
Example: Simple HTML file with JavaScript
<!-- This line tells the browser this is an HTML5 page. -->
<!DOCTYPE html>
<!-- This starts the HTML document. -->
<html>
<!-- This starts the visible page area. -->
<body>
<!-- This heading appears on the page. -->
<h1>My First JavaScript File</h1>
<!-- This script tag is where JavaScript can be written. -->
<script>
// This prints a message in the browser console.
console.log("Editor is ready!");
</script>
</body>
</html>
Explanation: You write this code in an editor, save it as an HTML file, open it in a browser, and check the console output.
2.2 VS Code Setup
VS Code helps you write JavaScript with colors, auto-complete, file explorer, terminal, and extensions. Create a folder, open it in VS Code, then create your HTML, CSS, and JS files.
Example: Connect JavaScript file to HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VS Code Setup</title>
</head>
<body>
<h1>VS Code JavaScript Setup</h1>
<!-- This connects the external JavaScript file. -->
<script src="script.js"></script>
</body>
</html>
// script.js
// This message confirms the JavaScript file is connected.
console.log("script.js is connected correctly.");
Output:script.js is connected correctly.
Explanation: The HTML file loads the external JavaScript file using the script tag.
2.3 Browser Developer Tools
Browser Developer Tools help you inspect HTML, CSS, JavaScript, console messages, errors, network requests, storage, and performance.
Example: Inspect page element
<!-- This paragraph has an id so JavaScript can find it. -->
<p id="welcome">Old text</p>
<script>
// Find the paragraph by id.
const paragraph = document.querySelector("#welcome");
// Change the text inside the paragraph.
paragraph.textContent = "New text from JavaScript!";
</script>
Output:New text from JavaScript!
Explanation: In DevTools, you can inspect the paragraph and see that JavaScript changed the text.
2.4 Console
The console is where developers test code, print values, and read errors. Beginners should practice with console.log() often.
Example: Print values in console
// Store the student name.
const studentName = "Ali";
// Store the course name.
const courseName = "JavaScript";
// Print both values in one sentence.
console.log(studentName + " is learning " + courseName + ".");
Output:Ali is learning JavaScript.
Explanation: console.log() helps you see what your code is doing while learning or fixing bugs.
2.5 Debugging Tools
Debugging means finding and fixing mistakes in code. Browser DevTools lets you pause code, check variables, and run code step by step.
Example: Find a calculation mistake
// Store the price of one item.
const price = 10;
// Store the quantity.
const quantity = 3;
// Multiply price by quantity.
const total = price * quantity;
// Print the total to check if it is correct.
console.log(total);
Explanation: If the answer is wrong, you can inspect each variable in the console or debugger.
2.6 Node.js Installation
Node.js lets JavaScript run outside the browser. With Node.js, you can run JavaScript in the terminal and build backend apps.
Example: Run JavaScript with Node.js
// app.js
// This line prints a message in the terminal.
console.log("Node.js is working!");
Output:Node.js is working!
Explanation: After installing Node.js, you can use the node command to run JavaScript files.
2.7 npm Installation
npm is installed with Node.js. It helps you install packages, manage projects, and run commands.
Example: Create package.json
# This command creates a package.json file.
npm init -y
{
"name": "my-javascript-project",
"version": "1.0.0",
"main": "app.js",
"scripts": {
"start": "node app.js"
}
}
Output:package.json file created
Explanation: package.json stores project information and commands for your JavaScript project.
2.8 Project Structure
A clean project structure makes your code easier to find, read, and maintain.
Example: Beginner folder structure
my-project/
│
├── index.html
├── css/
│ └── style.css
│
├── js/
│ └── script.js
│
└── images/
└── logo.png
<!-- Connect CSS file. -->
<link rel="stylesheet" href="css/style.css">
<!-- Connect JavaScript file. -->
<script src="js/script.js"></script>
Output:HTML, CSS, JavaScript, and images are organized in separate folders.
Explanation: Separating files keeps your project professional and easy to update.
2.9 Extensions
Extensions add extra features to VS Code. Useful beginner extensions include Live Server, Prettier, ESLint, and JavaScript snippets.
Example: Live Server workflow
<!-- Save this file as index.html. -->
<h1>Live Server Test</h1>
<script>
// This message appears in the browser console.
console.log("Live Server refreshed the page.");
</script>
Output:Live Server refreshed the page.
Explanation: Live Server opens your page in the browser and refreshes automatically when you save changes.
2.10 Best Practices
Best practices are good habits that make your JavaScript code clean, readable, and easier to fix.
Example: Clean beginner JavaScript
// Use clear variable names.
const firstName = "Sara";
// Use const when the value does not change.
const course = "JavaScript";
// Use a function to organize reusable code.
function showMessage(name, subject) {
// Return a clear message.
return name + " is learning " + subject + ".";
}
// Print the function result.
console.log(showMessage(firstName, course));
Output:Sara is learning JavaScript.
Explanation: Good names, simple functions, comments, and clean formatting help beginners understand code faster.
