Labels

JavaScript Roadmap — Day 1: Introduction to JavaScript

 

JavaScript · Day 1 of 180
Beginner Phase

Introduction to JavaScript

Your first step into one of the world's most popular programming languages. Let's understand what JavaScript is and write your very first program.

Day 1 / 180
Beginner Phase

What is JavaScript?

JavaScript is a high-level, interpreted programming language that runs in web browsers and server environments like Node.js. It was created in 1995 by Brendan Eich in just 10 days — and became one of the most popular languages in the world.

Unlike compiled languages (like C++ or Java), JavaScript code is executed line-by-line by the JavaScript engine. This means you can write code, refresh your browser, and see results instantly — no build step needed.

Think of it this way
HTML builds the structure of a page. CSS makes it look good. JavaScript makes it do things — like respond to clicks, show/hide content, fetch data, validate forms, and much more.

Your First JavaScript Program

Every programmer's first program is "Hello, World!" — a simple output that confirms your setup is working. In JavaScript, there are two ways to do this:

JavaScript — Method 1: Console 
// This prints to the browser's developer console
// Open it with F12 → Console tab

console.log("Hello, JavaScript!");

// You can also log numbers and calculations
console.log(2 + 2);        // Output: 4
console.log("I am learning JS!");
HTML — Embedding JavaScript 
<!DOCTYPE html>
<html>
<head>
  <title>My First JS Page</title>
</head>
<body>

  <!-- Method 2: Alert box -->
  <script>
    alert("Welcome to JavaScript Learning!");
    console.log("Page loaded!");
  </script>

</body>
</html>

How JavaScript Works

Term What It Means Example
JS Engine Software that reads and runs JS code V8 (Chrome), SpiderMonkey (Firefox)
ECMAScript The official standard that JS follows ES6, ES2022, ES2024
Runtime Where JS runs — in the browser or server Browser, Node.js
Console Developer tool to test and debug JS F12 → Console tab
Script Tag HTML element to embed JS in a page <script> ... </script>
Dynamic Typing Variables can hold any data type let x = 5; x = "hello";

Key Concepts for Day 1

🔧 Interpreted vs Compiled
JavaScript is interpreted – code runs line by line without needing compilation. Languages like C++ must be compiled into machine code first. JavaScript's engine reads and runs your code directly.
⚡ JIT Compilation
Modern JS engines use Just-In-Time (JIT) compilation — they compile frequently used code to machine code while running. This makes JavaScript much faster than pure interpretation.
🧵 Single-Threaded
JavaScript runs on one thread — it does one thing at a time. But it uses an event loop to handle async operations (like fetching data) without blocking the page. This is what makes JS feel fast.
🌐 Client vs Server
Client-side JS runs in the browser — it handles UI, clicks, and animations. Server-side JS runs in Node.js and handles databases, APIs, and file systems. Same language, two very different environments.

Today's Practice Tasks

Task 1 — Hello JavaScript

Open your browser DevTools (F12 → Console tab) and type these commands:

// Try these one by one in the console
console.log("Hello, JavaScript!");
console.log(2 + 2);
console.log(10 * 5);
alert("My first JavaScript alert!");
Task 2 — HTML + JavaScript File

Create a file called index.html and paste this code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Day 1 - JavaScript</title>
</head>
<body>
  <h1>My First JavaScript Page</h1>

  <script>
    // This runs when the page loads
    console.log("JavaScript is running!");

    // Store your name in a variable
    let myName = "Waheed";
    console.log("Hello, " + myName + "!");
  </script>
</body>
</html>
Mini Exercise — Explore DevTools
1. Open any website (even Google)
2. Press F12 to open DevTools
3. Click the Console tab
4. Type: console.log(2 + 2) and press Enter
5. Then type: alert("Hello!")
6. See the difference between console output and alert popup!

Learn More — Research Topics

1
Google: "How JavaScript Engine Works V8 Architecture"
2
Read: "Difference between Interpreted and Compiled Languages"
3
Explore: "ECMAScript specifications and JavaScript versions MDN"
Coming Next
Day 2 — Setting Up Your Development Environment
VS Code, Node.js, Chrome DevTools — everything you need to code like a pro
View Full Roadmap →
Enjoying this roadmap?
Follow Muhammad Waheed Asghar for daily JavaScript tips and updates!
Labels: