Topic01 / 72

Introduction to JavaScript

What & Why

JavaScript is the only programming language that runs natively in web browsers, enabling dynamic content, interactive UIs, and real-time updates without page reloads. It also runs on servers via Node.js, making it a full-stack language.

Syntax

javascript

1// In HTML
2<script src="app.js"></script>
3
4// Variables
5let name = "Priya";
6const age = 22;
7var oldStyle = "avoid this";  // function-scoped, hoisted
8
9// Output
10console.log("Hello,", name);
11alert("Welcome!");
12document.getElementById("output").textContent = "Hello";

Real-World Example

A dynamic greeting on a dashboard page:

example.ts

javascript

1const user = { name: "Rahul", role: "admin" };
2const hour = new Date().getHours();
3
4let greeting;
5if (hour < 12)      greeting = "Good morning";
6else if (hour < 17) greeting = "Good afternoon";
7else                greeting = "Good evening";
8
9document.getElementById("greeting").textContent =
10  `${greeting}, ${user.name}! 👋`;

Pitfalls & Interview Tips

⚠️Use const by default, let when you need to reassign. Never use var — it's function-scoped and causes hoisting bugs.
⚠️JavaScript is case-sensitive: userName and username are different variables.
💡Interview tip: JavaScript is single-threaded but uses an event loop for async operations — it doesn't truly 'multi-thread'.

1// In HTML 2<script src="app.js"></script> 3 4// Variables 5let name = "Priya"; 6const age = 22; 7var oldStyle = "avoid this"; // function-scoped, hoisted 8 9// Output 10console.log("Hello,", name); 11alert("Welcome!"); 12document.getElementById("output").textContent = "Hello";

1const user = { name: "Rahul", role: "admin" }; 2const hour = new Date().getHours(); 3 4let greeting; 5if (hour < 12) greeting = "Good morning"; 6else if (hour < 17) greeting = "Good afternoon"; 7else greeting = "Good evening"; 8 9document.getElementById("greeting").textContent = 10 `${greeting}, ${user.name}! 👋`;