BOM اختصار لـ Browser Object Model، وهو نموذج كائني (Object Model) يوفره المتصفح للتعامل مع النافذة والبيئة المحيطة بالصفحة (وليس المحتوى نفسه). يمكن القول إن BOM يمكّنك من الوصول إلى أشياء مثل:

• النافذة (Window)
• عناوين الصفحات
• التنقل بين الصفحات
• فتح نوافذ جديدة
• التفاعل مع المستخدم (مثل alert)
• معرفة معلومات عن الجهاز أو المتصفح

🧱 مكونات BOM الرئيسية:

1. window

هو الكائن الأساسي الذي يحتوي على كل شيء. كل كائن في BOM تقريبًا هو جزء من window.

مثال:

console.log(window.innerWidth);  // عرض النافذة
console.log(window.innerHeight); // ارتفاع النافذة

أو بدون كتابة window:

alert("مرحباً!"); // هي نفس window.alert("مرحباً!");

2. navigator

هو كائن مدمج في JavaScript يوفر معلومات حول المتصفح، مثل نوعه، نظام التشغيل، اللغة، دعم بعض الميزات، الاتصال، والمزيد

🔍 أهم خصائص navigator واستخداماتها:

مثال:

console.log("المتصفح:", navigator.userAgent);
console.log("اللغة:", navigator.language);
console.log("النظام:", navigator.platform);
console.log("هل متصل بالإنترنت؟", navigator.onLine ? "نعم" : "لا");

التحقق من تفعيل الكوكيز:

if (navigator.cookieEnabled) {
  console.log("الكوكيز مفعلة ✅");
} else {
  console.log("الكوكيز غير مفعلة ❌");
}

5. نسخ نص إلى الحافظة:

navigator.clipboard.writeText("مرحبا بك!").then(() => {
  console.log("تم نسخ النص ✅");
});

⚠️ يحتاج HTTPS أو localhost وبعض الأذونات.

📌 ملاحظات مهمة:

• بعض الخصائص قد تختلف حسب المتصفح.
• بعض الخصائص تحتاج إذن من المستخدم (مثل الموقع الجغرافي، الحافظة).
• لا يُستخدم navigator لجمع معلومات حساسة أو تتبع المستخدم بدون إذن.

3. location

✅ ما هو window.location؟

window.location هو كائن تابع لـ window يُستخدم للوصول إلى عنوان الصفحة الحالية (URL) أو تعديله أو إعادة التوجيه إلى صفحات أخرى.

بمعنى آخر: هو أداة للتحكم في رابط الصفحة.

📌 استخدامات window.location:

🧱 خصائص window.location بالتفصيل:

1. href

يمثل الرابط الكامل (الرابط الكامل للصفحة).

console.log(location.href);
// مثال: "https://example.com/about?lang=ar#contact"

✅ يمكنك أيضًا تغيير الرابط به:

location.href = "https://google.com"; // ينقل المستخدم إلى جوجل

2. protocol

يعطي نوع البروتوكول المستخدم (http أو https).

console.log(location.protocol); // مثال: "https:"

3. host

يعطي النطاق + البورت (إن وجد).

console.log(location.host); // مثال: "example.com" أو "localhost:3000"

4. hostname

يعطي اسم النطاق فقط بدون البورت.

console.log(location.hostname); // مثال: "example.com"

5. port

يعيد رقم البورت المستخدم، إن وُجد.

console.log(location.port); // مثال: "3000"

6. pathname

يعطي المسار بعد اسم الموقع.

console.log(location.pathname);
// إذا كنت على: https://example.com/products/item
// الناتج سيكون: "/products/item"

7. search

يعطي الاستعلام الموجود في الرابط (Query String).

console.log(location.search);
// مثال: "?lang=ar&page=2"

8. hash

يعطي الجزء الموجود بعد # في الرابط (ويسمى Anchor).

console.log(location.hash);
// مثال: "#contact"

9. assign(url)

ينقل المستخدم إلى رابط جديد مع إمكانية العودة باستخدام زر الرجوع.

location.assign("https://openai.com");

10. replace(url)

ينقل المستخدم إلى رابط جديد بدون إمكانية الرجوع باستخدام زر الرجوع (يستبدل الصفحة الحالية).

location.replace("https://google.com");

11. reload(forceReload)

يعيد تحميل الصفحة.

• إذا كانت true: يتم تجاهل الكاش.
• إذا كانت false أو غير موجودة: يتم التحميل من الكاش.

location.reload();           // إعادة تحميل عادية
location.reload(true);       // إعادة تحميل من السيرفر (بدون كاش)

🧪 أمثلة عملية شاملة:

✅ مثال 1: عرض كل أجزاء الرابط

console.log("الرابط الكامل:", location.href);
console.log("البروتوكول:", location.protocol);
console.log("اسم النطاق:", location.hostname);
console.log("المسار:", location.pathname);
console.log("الاستعلام:", location.search);
console.log("الهاش:", location.hash);

✅ مثال 2: إعادة توجيه الزائر تلقائيًا بعد 5 ثواني

setTimeout(() => {
  location.href = "https://google.com";
}, 5000);

✅ مثال 3: رابط يحتوي على استعلامات – استخراج قيمة lang

// إذا كان الرابط مثلاً: https://example.com/?lang=ar
const queryString = location.search; // "?lang=ar"
const urlParams = new URLSearchParams(queryString);

console.log(urlParams.get("lang")); // "ar"

✅ مثال 4: تحديث الصفحة يدويًا بزر

<button onclick="location.reload()">إعادة تحميل الصفحة</button>

📌 ملخص سريع:

4. history

يُستخدم للتنقل بين الصفحات التي زارها المستخدم داخل نفس الجلسة.

🧰 أهم خصائص ودوال history:

📌 استخدامات عملية:

🧪 1. معرفة عدد الصفحات في سجل الجلسة:

مثال:

console.log("عدد الصفحات في السجل:", history.length);

🔙 2. الانتقال للصفحة السابقة:

history.back(); // يعادل زر الرجوع في المتصفح

history.forward(); // يعادل زر التقدم في المتصفح

🔁 4. الانتقال بخطوات مخصصة:

history.go(-1); // صفحة للخلف
history.go(1);  // صفحة للأمام
history.go(-2); // صفحتين للخلف

  <button onclick="history.back()">⬅️ الرجوع</button>
  <button onclick="history.forward()">➡️ التقدم</button>
  <button onclick="history.go(-1)">🔙 صفحة للخلف</button>

history.length لا يعطي عدد كل صفحات التاريخ، فقط عدد الصفحات التي تم زيارتها في الجلسة الحالية لنفس التبويب.

history.go(0) تعني إعادة تحميل الصفحة الحالية.

لا يمكنك رؤية أو الوصول لمحتوى السجل لحماية خصوصية المستخدم، فقط تستطيع التنقل فيه.

5. screen

🧠 ما هو screen في JavaScript؟

هو كائن من كائنات BOM يوفر معلومات عن شاشة الجهاز مثل:

عمق الألوان

العرض الكامل للشاشة

الطول الكامل

مساحة العرض المتاحة (بعد خصم شريط المهام)

🧰 أهم خصائص screen:

مثال:

console.log(screen.width);  // عرض الشاشة الكلي
console.log(screen.height); // ارتفاع الشاشة الكلي

6. alert, prompt, confirm

طرق للتفاعل مع المستخدم.

أمثلة:

alert("هذه رسالة تنبيه");
let name = prompt("ما اسمك؟");
let confirmed = confirm("هل أنت متأكد؟");

🧩 الفرق بين BOM و DOM

🧪 مثال عملي يدمج بين BOM و DOM

<button onclick="showInfo()">اعرض معلومات المتصفح</button>

<script>
  function showInfo() {
    alert("عرض الشاشة: " + screen.width + "x" + screen.height);
    alert("نوع المتصفح: " + navigator.userAgent);
    alert("الرابط الحالي: " + location.href);
  }
</script>