JavaScript Foundations

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First JS</title>
</head>
<body>
  <h1>Hello World</h1>

  <!-- THE SCRIPT TAG GOES HERE, at the END of body -->
  <script src="script.js"></script>
</body>
</html>

// This is a comment — the computer completely ignores it.
// Comments are notes for YOU, the human reader.

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

let name = "Altamash";     // I can change this later
const birthYear = 2005;   // I can NEVER change this

// ===== const: the value is LOCKED =====
const birthYear = 2005;
console.log(birthYear);     // → 2005

// birthYear = 2006;           // ❌ CRASH! TypeError: Assignment to constant variable
// You physically cannot change a const. JavaScript stops and shows an error.

// ===== let: the value can be UPDATED =====
let score = 0;
console.log(score);          // → 0

score = 10;                   // ✅ This is fine — let allows it
console.log(score);          // → 10

score = score + 5;           // ✅ Take the old value (10), add 5, store 15
console.log(score);          // → 15

// ✅ Good names — descriptive, camelCase
const firstName = "Altamash";
const userAge = 20;
const isLoggedIn = true;
let totalPrice = 499.99;

// ❌ Bad names — avoid these
// let x = "Altamash";         // What is "x"? Nobody knows
// let first_name = "Al";      // Use camelCase, not snake_case
// let 2cool = "yes";           // Can't start with a number
// let let = "hello";           // "let" is a reserved word

// ===== STRING: Text data =====
const greeting = "Hello, Altamash!";  // double quotes
const city = 'Delhi';               // single quotes (same thing)
const message = `Welcome back`;      // backtick quotes (special — we'll explain)

// ===== NUMBER: Numeric data =====
const age = 20;                     // whole number (integer)
const price = 99.99;               // decimal number (float)
const temperature = -5;             // negative number

// ===== BOOLEAN: true or false =====
const isLoggedIn = true;            // yes, the user is logged in
const hasPermission = false;        // no, they don't have permission

// ===== NULL: intentionally empty =====
let selectedUser = null;            // no user selected yet (on purpose)

// ===== UNDEFINED: not yet assigned =====
let middleName;                     // declared but no value given
console.log(middleName);           // → undefined

// NUMBERS: math works normally
console.log(25 + 25);       // → 50    (addition)

// STRINGS: + glues them together (concatenation)
console.log("25" + "25");   // → "2525" (joined like text, NOT math!)

// This is WHERE bugs happen.
// You THINK you're adding numbers, but one is a string → you get text joining.
// This happens constantly when reading from input fields (forms always give strings).

console.log(5 + 3);    // → 8    Addition
console.log(10 - 4);   // → 6    Subtraction
console.log(6 * 7);    // → 42   Multiplication
console.log(20 / 4);   // → 5    Division
console.log(17 % 5);   // → 2    Remainder (modulo)
console.log(2 ** 3);   // → 8    Exponent (2 to the power of 3)

const pricePerItem = 299;
const quantity = 3;
const subtotal = pricePerItem * quantity;   // 299 * 3 = 897
const tax = subtotal * 0.18;                // 18% GST = 161.46
const total = subtotal + tax;                // 897 + 161.46 = 1058.46

console.log(subtotal);  // → 897
console.log(tax);       // → 161.46
console.log(total);     // → 1058.46

const name = "Altamash";
const age = 20;

// ❌ OLD WAY: String concatenation (messy, error-prone)
console.log("Hi, I'm " + name + " and I'm " + age + " years old.");
// You have to manually add spaces, track quotes... it's painful

// ✅ NEW WAY: Template literal (clean, readable)
console.log(`Hi, I'm ${name} and I'm ${age} years old.`);
// Reads like plain English! Variables drop right in.

const price = 200;
const qty = 3;

// You can do math inside ${} !
console.log(`Total: ₹${price * qty}`);
// → "Total: ₹600"

// Multi-line text — template literals can span multiple lines
const card = `
  Name: ${name}
  Age:  ${age}
  City: Delhi
`;
console.log(card);
// Prints a nice multi-line text block

console.log(typeof "Hello");      // → "string"
console.log(typeof 42);           // → "number"
console.log(typeof true);         // → "boolean"
console.log(typeof undefined);    // → "undefined"
console.log(typeof null);         // → "object"  ⚠️ FAMOUS BUG!

// ===== THE + OPERATOR: The Troublemaker =====
console.log("5" + 3);     // → "53"   String wins! Number becomes string. Text joined.
console.log(5 + "3");     // → "53"   Same thing — string on either side = text joining
console.log("Hello" + 5); // → "Hello5"  Number converted to string, then joined

// ===== THE -, *, / OPERATORS: They Only Do Math =====
console.log("5" - 3);     // → 2     String "5" converted to number 5, then 5-3=2
console.log("5" * 3);     // → 15    String "5" → number 5, then 5*3=15
console.log("10" / 2);    // → 5     String "10" → number 10, then 10/2=5

// ===== WHAT HAPPENS WITH NON-NUMERIC STRINGS? =====
console.log("hello" - 3); // → NaN   "hello" can't become a number → Not a Number
console.log("hello" * 2); // → NaN   Same — nonsensical math gives NaN

// ===== String → Number =====
const userInput = "42";                    // from a form field (always a string!)
const actualNumber = Number(userInput);    // convert it to a real number
console.log(actualNumber + 8);             // → 50 (correct math!)
console.log(typeof actualNumber);          // → "number"

// What happens if the string isn't a valid number?
console.log(Number("hello"));               // → NaN (Not a Number)
console.log(Number(""));                    // → 0 (empty string becomes 0)
console.log(Number(true));                 // → 1 (true = 1, false = 0)

// ===== Number → String =====
const score = 95;
const scoreText = String(score);          // convert to text
console.log(typeof scoreText);             // → "string"

// ===== Anything → Boolean =====
console.log(Boolean(0));                    // → false (0 is "falsy")
console.log(Boolean(""));                   // → false (empty string is "falsy")
console.log(Boolean("hello"));              // → true  (non-empty string is "truthy")
console.log(Boolean(42));                   // → true  (non-zero number is "truthy")

const age = 20;

// "Is age greater than 18?"
console.log(age > 18);     // → true   (20 is greater than 18)

// "Is age less than 18?"
console.log(age < 18);     // → false  (20 is NOT less than 18)

// "Is age greater than or equal to 20?"
console.log(age >= 20);    // → true   (20 equals 20, so yes)

// "Is age less than or equal to 19?"
console.log(age <= 19);    // → false  (20 is NOT less than or equal to 19)

// "Is age EXACTLY equal to 20?" (strict equality)
console.log(age === 20);   // → true   (same value AND same type)

// "Is age NOT equal to 20?"
console.log(age !== 20);   // → false  (it IS 20, so "not equal" is false)

const age = 22;
const hasID = true;
const isBanned = false;

// AND (&&): ALL conditions must be true
// "Is age >= 18 AND does the person have an ID?"
console.log(age >= 18 && hasID);       // → true  (both are true)
console.log(age >= 18 && !hasID);      // → false (one is false = whole thing false)

// OR (||): AT LEAST ONE condition must be true
// "Is this person a member OR did they pay at the door?"
const isMember = false;
const paidEntry = true;
console.log(isMember || paidEntry);    // → true  (paidEntry is true, that's enough)

// NOT (!): Flips true → false, false → true
console.log(!true);                     // → false
console.log(!false);                    // → true
console.log(!isBanned);                 // → true  ("is NOT banned" = true)

const temperature = 35;

if (temperature > 30) {
  console.log("It's hot! Stay hydrated. 🥵");
} else {
  console.log("Nice weather! Go for a walk. 😊");
}
// → "It's hot! Stay hydrated. 🥵" (because 35 > 30 is true)

const score = 85;

if (score >= 90) {
  console.log("Grade: A — Excellent!");
} else if (score >= 80) {
  console.log("Grade: B — Good job!");
} else if (score >= 70) {
  console.log("Grade: C — Keep practicing.");
} else if (score >= 60) {
  console.log("Grade: D — Needs improvement.");
} else {
  console.log("Grade: F — Let's review and retry.");
}
// → "Grade: B — Good job!" (because 85 >= 80 is the first true condition)

const name = "Altamash";

// .length — how many characters? (a property, NOT a method)
console.log(name.length);              // → 8

// .toUpperCase() — convert to ALL CAPS
console.log(name.toUpperCase());      // → "ALTAMASH"

// .toLowerCase() — convert to all lowercase
console.log(name.toLowerCase());      // → "altamash"

// .includes() — does this text contain a substring?
console.log(name.includes("tam"));     // → true
console.log(name.includes("xyz"));     // → false

// .slice(start, end) — extract a piece of the string
console.log(name.slice(0, 4));        // → "Alta" (characters 0,1,2,3)
console.log(name.slice(4));           // → "mash" (from position 4 to the end)

// .trim() — remove spaces from both ends
const messy = "   hello   ";
console.log(messy.trim());            // → "hello" (spaces gone!)

// .replace() — swap out text
console.log(name.replace("mash", "MASH")); // → "AltaMASH"