Welcome to JavaScript!
Welcome to modern software engineering! JavaScript is the programming language that breathes life into static HTML pages. While HTML structures content and CSS styles it, JavaScript adds dynamic behavior, making web applications interactive, responsive, and engaging.
In this lesson, we will set up a professional development workspace for 2026 and write your first JavaScript script.
---
Step-by-Step Environment Setup
- To write and run JavaScript, you need two primary tools:
- A text editor (code editor).
- A web browser (execution environment).
Let's configure these tools step-by-step.
- #### Step 1: Install Visual Studio Code (VS Code)
- Head over to the official Visual Studio Code Website and download the version compatible with your operating system (Windows, macOS, or Linux).
- Run the installer and proceed with the default configuration.
- Open VS Code once installed. This is your [Integrated Development Environment] (IDE), where you will write all your source code.
- #### Step 2: Install the Live Server Extension
- To run web projects in real-time, we will use a local development server.
- Inside VS Code, click on the Extensions icon on the left sidebar (or press
Ctrl+Shift+X/Cmd+Shift+X). - Search for Live Server (by Ritwick Dey).
- Click Install. This utility reloads your browser automatically whenever you modify your code.
- #### Step 3: Install Node.js (Optional but Recommended)
- For running JavaScript outside of a browser environment, developers use Node.js.
- Go to the official Node.js Downloads Page and download the LTS (Long-Term Support) version.
- Follow the installer instructions. This tool installs the Chrome V8 Engine onto your local computer, allowing command-line execution of your code.
---
Your First Project Directory
- Let's create a dynamic project structure. Follow these steps:
- Create a new folder on your computer named
javascript-basics. - In VS Code, go to File > Open Folder... and select your newly created folder.
- Create a new file named
index.htmland paste the following skeleton HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning JavaScript 2026</title>
</head>
<body>
<h1>Welcome to JavaScript!</h1>
<p>Open your browser console to see the output.</p>
<script src="app.js"></script>
</body>
</html>
- Create a second file named
app.jsin the same directory. Write the following code:
console.log("Hello from app.js! JavaScript is working perfectly.");
- Right-click anywhere inside
index.htmland choose Open with Live Server. Your browser will launch, displaying the page.
#### Visual Output Demonstration:
* Your browser will display a basic webpage saying: "Welcome to JavaScript!".
* Right-click anywhere on the webpage and select Inspect (or press F12), then navigate to the Console tab.
* You will see the output:
Hello from app.js! JavaScript is working perfectly.
---
Understanding the Developer Console
The browser's developer console is your sandbox. It compiles and runs JavaScript line-by-line using a process known as the [REPL] (Read-Eval-Print Loop).
Inside the browser console, you can execute code directly. Try typing:
alert("Welcome to learning JavaScript!");
An interactive popup window will immediately display on your screen.
To learn more about standard JS execution standards, check the official documentation at MDN Web Docs JavaScript Guide.
---
Frequently Asked Questions (FAQs)
#### Q1: What is the difference between client-side and server-side JavaScript?
* Client-side JavaScript runs directly inside the user's web browser (e.g., handling button clicks, animations, form validation). Server-side JavaScript runs on a server (using Node.js) to access databases, read files, and handle web requests.
#### Q2: Why is the ` tag placed at the bottom of the HTML file?
* Placing the tag right before the closing ` tag ensures that all HTML elements are fully loaded by the browser before JavaScript executes. This prevents errors when trying to select elements that do not exist in the DOM yet.
#### Q3: Do I need a powerful computer to learn JavaScript?
* No, JavaScript runs inside any standard browser. Any entry-level computer or Chromebook capable of running a modern web browser and a basic text editor is sufficient.
