BASIC JAVASCRIPT

⚡ JavaScript – Complete Core Notes

Variables, Data Types, Scope, Operators, Functions, Conditionals, Loops aur Arrays ka comprehensive visual guide.

1️⃣ JavaScript Kya Hai?

Definition: JavaScript (JS) ek high-level, lightweight programming language hai jiska primary kaam web pages ko interactive, dynamic aur intelligent banana hota hai.

Real-life Analogy: HTML page ka kankal (structure) banata hai, CSS use look aur design (skin/clothes) deti hai, aur JavaScript use dimag (actions & logic) deti hai.

• Client-Side Execution: Yeh direct user ke browser (Chrome, Firefox, Safari) ke andar run hoti hai bina kisi extra installation ke.
• Events Handling: Button clicks, form validation, dropdown menus, sliders aur modal popups handle karti hai.
• Modern Versatility: Node.js ke aane ke baad JS ka use backend servers, databases aur mobile applications me bhi hota hai.

---

2️⃣ JavaScript Ko Web Page Me Kaise Jodein?

🔹 1. Inline JavaScript

Direct HTML tag ke event listener attribute (jaise onclick) ke andar likhi jati hai:

<button onclick="alert('Hello! Inline JS Triggered')">Click Me</button>

Live Interactive Test

🔹 2. Internal JavaScript

HTML document ke <head> ya <body> ke aakhri hisse me <script> tag ke andar likhi jati hai:

<script>
    console.log("Internal Script Loaded!");
</script>

🔹 3. External JavaScript (Best Practice)

Code ko alag .js file me rakh kar HTML page ke sath link kiya jata hai:

<!-- Body tag ke end se pehle include karein -->
<script src="main.js"></script>

• Code Reusability: Ek hi script file ko multi-pages me share kiya ja sakta hai.
• Browser Caching: File save ho jane par page faster load hota hai.

---

3️⃣ Variables (Memory Storage Containers)

Definition: Variable ek container ki tarah hota hai jo program ke chalte samay values (numbers, text) ko memory me store karta hai.

var name = "Rahul";   // Purana tarika (Avoid in modern JS)
let age = 20;         // Modern re-assignable variable
const pi = 3.14;      // Fixed/constant value

Keyword	Scope Type	Re-assignable?	Re-declarable?	Kab Use Karein
var	Function / Global	Haan	Haan (Bug prone)	Avoid karein (Legacy syntax)
let	Block Scope { }	Haan	Nahi	Jab value future me badalni ho (loops, counters)
const	Block Scope { }	Nahi	Nahi	Default choice (API URLs, fixed limits, configs)

---

4️⃣ JavaScript Data Types

JavaScript ek dynamically typed language hai, yani variable ka type declare karne ki zarurat nahi hoti; value se type detect hota hai.

Data Type	Category	Example	Description
String	Primitive	"Hello World" ya 'Dev'	Quotes ke andar text character sequence
Number	Primitive	25, 99.9, -5	Integer ya decimal dono number type hote hain
Boolean	Primitive	true ya false	Conditional checks ke liye logical state
Undefined	Primitive	let x; (Value nahi di)	Variable declare hua hai par define nahi
Null	Primitive	let y = null;	Intentional empty/blank value represent karta hai
Array	Non-Primitive	[10, 20, 30]	Ordered collection of multiple items
Object	Non-Primitive	{ name: "Rahul", age: 20 }	Key-value pairs ka data model

---

5️⃣ Operators & Expressions

Variables aur values par computations perform karne ke symbols:

Category	Operators	Example Code	Output / Meaning
Arithmetic	+, -, *, /, %	10 % 3	1 (Remainder / Modulus)
Assignment	=, +=, -=, *=	x += 5	x = x + 5
Comparison	==, ===, !=, !==, >, <	5 === "5"	false (Value aur type dono check karta hai)
Logical	&& (AND), || (OR), ! (NOT)	isLogged && isAdmin	Dono condition true hone par execute hota hai

Interview Tip (== vs ===): == loose comparison karta hai (type conversion kar deta hai, e.g. 5 == "5" is true), jabki === strict comparison karta hai (bina type conversion ke check karta hai, e.g. 5 === "5" is false). Hamesha === use karein!

---

6️⃣ Functions (Reusable Logic Blocks)

Definition: Code ka ek block jo ek specific task perform karta hai aur jise baar-baar reuse kiya ja sakta hai.

// 1. Function Declaration
function greet(name) {
    return "Namaste, " + name + "!";
}

// Function Call / Invocation
let message = greet("Rahul");
console.log(message); // "Namaste, Rahul!"

// 2. Modern ES6 Arrow Function
const square = (num) => num * num;
console.log(square(4)); // 16

---

7️⃣ Conditionals (Decision Making)

Program ko condition ke basis par decisions lene ke liye use hota hai:

let age = 20;

if (age >= 18) {
    console.log("Eligible to vote! (Adult)");
} else if (age >= 13) {
    console.log("Teenager");
} else {
    console.log("Minor");
}

---

8️⃣ Loops (Code Repetition)

Jab kisi kaam ko specific number of times baar-baar repeat karna ho.

1. For Loop (Jab count pehle se pata ho)

for (let i = 1; i <= 5; i++) {
    console.log("Count: " + i);
}

2. While Loop (Jab condition ke true hone tak run karna ho)

let i = 1;
while (i <= 5) {
    console.log("Iteration: " + i);
    i++; // Increment step miss hone par infinite loop ban jayega!
}

---

9️⃣ Arrays & Common Methods

Ek variable me ordered list of items store karne ke liye array use hota hai. Array ka index hamesha 0 se shuru hota hai.

let fruits = ["Apple", "Banana", "Mango"];

console.log(fruits[0]);        // "Apple" (First item)
fruits.push("Orange");         // Last me element add karta hai
fruits.pop();                  // Last element ko remove karta hai
console.log(fruits.length);    // Total array length batata hai

---

🔹 Professional Quick Tips

• Debugging: Kisi bhi variable ya state ko check karne ke liye hamesha console.log(variableName) ka use karein aur browser ke Developer Tools (F12) ke Console tab me output dekhein.
• Avoid Alert for debugging: alert() execution ko pause kar deta hai, isliye production code me alerts avoid karein.
• Strict Equality: Bug-free comparison ke liye hamesha === aur !== ka use karein.
• Practice Habit: JavaScript seekhne ka best tarika chote-chote interactive apps banana hai (jaise Counter app, Simple Calculator, ya Form Validator).