JavaScript
الـ JS من الأساسيات للـ AJAX

// var — function-scoped (قديم)
var x = 10;
var x = 20; // OK — ممكن تعيد التعريف
x = 30;    // OK — ممكن تعدّل

// let — block-scoped (ES6 ✅)
let y = 10;
// let y = 20; ❌ لا يمكن إعادة التعريف
y = 20;    // OK — ممكن تعدّل

// const — block-scoped, read-only (ES6 ✅)
const PI = 3.14;
// PI = 3.15; ❌ TypeError — لا يمكن التغيير!
// const PI; ❌ لازم تعطيها قيمة وقت التعريف!

var X = 10;       // global variable
function myfunc() {
  let x = 20;   // مختلف! lowercase 'x' وlet
}
document.write(X);  // ⚡ Output: 10

// ليه؟ لأن:
// 1. document.write بيقرأ X الـ global مش x الـ local
// 2. X (uppercase) ≠ x (lowercase) — case-sensitive!
// 3. الـ function مش اتنفذت حتى لو تعرفت

var a = 10;  // property of window (var)
b = 20;      // implicit global (no var/let/const)

console.log(window.a); // 10
console.log(window.b); // 20

delete a; // false — var variables can't be deleted
delete b; // true — implicit globals CAN be deleted

console.log(a); // 10 (still exists)
console.log(b); // ReferenceError! (was deleted)

// عدد طرق تعريف الـ variable:
var x = 1;  // 1
let y = 2;  // 2
const z = 3; // 3 ← إجمالي: 3 طرق!

// 1. Function Declaration — التقليدي
function add(a, b) {
  return a + b;
}

// 2. Function Expression — بتخزنها في variable
const add = function(a, b) {
  return a + b;
};

// 3. Arrow Function (ES6) — الأقصر والأجمل!
const add = (a, b) => a + b;
// لو statement واحدة: مش محتاج {} ولا return!

// Default Parameters (ES6)
function greet(name = "Guest") {
  return "Hello " + name;
}
greet();        → "Hello Guest"
greet("Ahmed"); → "Hello Ahmed"

// reduce(callback, initialValue)
// callback(accumulator, currentValue)

// Q21 final-2024: initial = 2
var numbers = [1,2,3,4];
function myfunc(total, value) { return total + value; }
var sum = numbers.reduce(myfunc, 2);
// Start: total=2 (initial), value=1 → 3
// Next:  total=3, value=2 → 5
// Next:  total=5, value=3 → 8
// End:   total=8, value=4 → 12 ✅

// Q22 final-2024: no initial value, subtraction
var numbers = [170, 50, 25];
function myfunc(total, value) { return total - value; }
var sum = numbers.reduce(myfunc);
// Start: total=170 (first element!), value=50 → 120
// End:   total=120, value=25 → 95 ✅

// Q45 mid-2023: initial = 3
var numbers = [1,2,3,4];
var sum = numbers.reduce(myfunc, 3);
// 3+1+2+3+4 = 13 → None of previous (d)!

var numbers = [10, 20, 30];
function myFunction(value) { return value > 10; }

// find() → أول element يطابق فقط
numbers.find(myFunction);   → 20 (not [20,30]!) ← Q28 final-2024

// filter() → كل elements تطابق
numbers.filter(myFunction); → [20, 30] (array!)
typeof(numbers.filter(myFunction)) → "object" ← Q31 final-2024

// some() → يرجع boolean
numbers.some(myFunction);   → true (boolean, not array!)
typeof(numbers.some(myFunction)) → "boolean" ← Q49 mid-2023

// map() مع boolean function (Q46 mid-2023):
[45,4,9,16,25].map(v => v > 18)
→ [true, false, false, false, true] ← مش [45,25]!

// indexOf vs lastIndexOf — Q32 final-2024
var numbers = [10, 20, 10, 30];
//              0    1    2    3
var y = numbers.lastIndexOf(10); → 2 (last occurrence)
var z = numbers.indexOf(30);     → 3
document.write(y + z); → 5 ✅

// concat — Q34 final-2024
var quiz = [1, 2, 3];
var result = quiz.concat(6, 7, 8);
document.write(result); → 1,2,3,6,7,8 ✅

// pop() — Q68/Q69 final-2024
var myNumbers = [1, 2, 3];
var x = myNumbers.pop(); → x = 3 (LAST element removed!)
// myNumbers is now [1, 2]

// flat() — Q78 final-2024
const myArr = [1, 2, [3, [4, 5, 6], 7], 8];
const newArr = myArr.flat(); // depth=1 by default
→ [1, 2, 3, [4, 5, 6], 7, 8] → written: 1,2,3,4,5,6,7,8

// flat(2) — Q79 final-2025
const myArr = [1, 2, [3, [4, 5, 6, 7], 8]];
myArr.flat(2); → [1, 2, 3, 4, 5, 6, 7, 8] ✅

// {1:"red"} is NOT an array! Q67 final-2024
var colors = {1:"red", 2:"green"}; ← Object, not Array!
// Array uses []. Object uses {}.

// Class Definition
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  
  // Getter - final-2025 Q44
  get carName() {
    return this.name;
  }
}
let myCar1 = new Car("Ford", 2014);

// Inheritance (extends & super)
class Model extends Car {
  constructor(name, year, model) {
    super(name, year); // ⚡ Calls parent's constructor!
    this.model = model;
  }
}
// Constructor: function to initialize properties
// super(): calls the parent constructor

// 1. By ID (بيرجع Single Element)
document.getElementById("demo");

// 2. By Tag Name (بيرجع Collection of elements)
var p_list = document.getElementsByTagName("p");
var count = p_list.length; // عدد البرجرافات

// 3. By Class Name
document.getElementsByClassName("center");

// 4. By CSS Selectors
// querySelector: بيرجع أول عنصر بس!
// querySelectorAll: بيرجع NodeList (لكل العناصر اللي بتطابق)
var nodes = document.querySelectorAll("div > p"); ← Q49 final-2025

async function f() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve('done!'), 1000);
  });
  
  // الكلمة دي هتجبر الكود إنه يوقف انتظار للوعد ده أنه يتحقق!
  let result = await promise; 
  console.log(result); // Output: done! (بعد مرور 1 ثانية)
}
f();

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    // 4 يعني الطلب خلص وكل حاجة تمام!
    // 200 يعني الـ Status طالعة Successful
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  // true معناها ان الطلب Asynchronous (بيتم في الخلفية)
  xhttp.open("GET", "data.txt", true);
  xhttp.send();
}

// تقنية Fetch أحدث وأسهل بكتير لأنها بتعتمد على استخدام الـ Promises!
fetch("data.txt")
  .then(response => response.text())
  .then(text_data => {
    document.getElementById("demo").innerHTML = text_data;
  });