BOM (Browser Object Model) في JavaScript

دليل شامل لأوامر BOM (Browser Object Model) في JavaScript

يُعد BOM (Browser Object Model) جزءًا أساسيًا من واجهة برمجة التطبيقات (API) التي توفرها المتصفحات للتفاعل مع البيئة المحيطة بالصفحة. يمكّن BOM المطورين من التحكم في نافذة المتصفح، التفاعل مع عنوان URL، التنقل بين الصفحات، التحقق من حالة الإنترنت، والمزيد.

يمثل BOM مجموعة من الكائنات التي تسمح للمطورين بالوصول إلى ميزات مثل نافذة المتصفح (window)، الموقع (location)، التنقل (history)، الشاشة (screen)، ومعلومات المستخدم والمتصفح (navigator).

في هذه المقالة، سنستعرض الأوامر المختلفة التي يوفرها BOM مع شرح وافٍ لكل منها وأمثلة عملية توضح كيفية استخدامها.

1. أوامر window

1.1 window.alert()

• الوصف: يعرض رسالة تنبيه للمستخدم.
• الاستخدام:

  alert("مرحبًا بك!");
  

1.2 window.confirm()

• الوصف: يعرض رسالة تأكيد، ويعيد true إذا ضغط المستخدم “موافق” أو false إذا ضغط “إلغاء”.
• الاستخدام:

  const result = confirm("هل أنت متأكد؟");
  

1.3 window.prompt()

• الوصف: يعرض نافذة إدخال للحصول على قيمة من المستخدم.
• الاستخدام:

  const name = prompt("ما اسمك؟");
  

1.4 window.open()

• الوصف: يفتح نافذة أو تبويب جديد.
• الاستخدام:

  window.open("https://google.com", "_blank");
  

1.5 window.close()

• الوصف: يغلق نافذة مفتوحة باستخدام window.open().
• الاستخدام:

  const win = window.open("https://example.com");
  win.close();
  

1.6 window.focus()

• الوصف: يركز على نافذة مفتوحة.
• الاستخدام:

  const win = window.open("https://example.com");
  win.focus();
  

1.7 window.moveTo()

• الوصف: ينقل نافذة المتصفح إلى موقع معين على الشاشة.
• الاستخدام:

  window.moveTo(100, 100);
  

1.8 window.resizeTo()

• الوصف: يغير حجم نافذة المتصفح.
• الاستخدام:

  window.resizeTo(500, 500);
  

1.9 window.scrollTo()

• الوصف: يمرر الصفحة إلى إحداثيات معينة.
• الاستخدام:

  window.scrollTo(0, 200);
  

1.10 window.scrollBy()

• الوصف: يمرر الصفحة بمقدار معين من الإحداثيات.
• الاستخدام:

  window.scrollBy(0, 50);
  

---

2. أوامر navigator

2.1 navigator.userAgent

• الوصف: يعرض معلومات عن نوع المتصفح.
• الاستخدام:

  console.log(navigator.userAgent);
  

2.2 navigator.language

• الوصف: يعرض لغة المتصفح الحالية.
• الاستخدام:

  console.log(navigator.language);
  

2.3 navigator.platform

• الوصف: يعرض نظام تشغيل المستخدم.
• الاستخدام:

  console.log(navigator.platform);
  

2.4 navigator.onLine

• الوصف: يتحقق مما إذا كان المستخدم متصلًا بالإنترنت.
• الاستخدام:

  console.log(navigator.onLine);
  

2.5 navigator.cookieEnabled

• الوصف: يتحقق مما إذا كانت الكوكيز مفعلة.
• الاستخدام:

  console.log(navigator.cookieEnabled);
  

2.6 navigator.geolocation.getCurrentPosition()

• الوصف: يحصل على الموقع الجغرافي للمستخدم (يتطلب إذنًا).
• الاستخدام:

  navigator.geolocation.getCurrentPosition((position) => {
    console.log(position.coords.latitude, position.coords.longitude);
  });
  

2.7 navigator.clipboard.writeText()

• الوصف: ينسخ نصًا إلى الحافظة.
• الاستخدام:

  navigator.clipboard.writeText("نسخ هذا النص");
  

2.8 navigator.hardwareConcurrency

• الوصف: يعرض عدد أنوية وحدة المعالجة المركزية للجهاز.
• الاستخدام:

  console.log(navigator.hardwareConcurrency);
  

2.9 navigator.permissions.query()

• الوصف: يتحقق من حالة الإذن لميزة معينة.
• الاستخدام:

  navigator.permissions.query({ name: "geolocation" }).then((result) => {
    console.log(result.state);
  });
  

2.10 navigator.vibrate()

• الوصف: يهتز الجهاز (إن كان مدعومًا).
• الاستخدام:

  navigator.vibrate(200);
  

---

3. أوامر location

3.1 location.href

• الوصف: يعرض أو يغير رابط الصفحة الحالي.
• الاستخدام:

  console.log(location.href);
  location.href = "https://example.com";
  

3.2 location.hostname

• الوصف: يعرض اسم المضيف (host) للرابط الحالي.
• الاستخدام:

  console.log(location.hostname);
  

3.3 location.pathname

• الوصف: يعرض المسار للصفحة الحالية.
• الاستخدام:

  console.log(location.pathname);
  

3.4 location.search

• الوصف: يعرض معلمات الاستعلام (Query Parameters) في الرابط.
• الاستخدام:

  console.log(location.search);
  

3.5 location.hash

• الوصف: يعرض الجزء بعد # في الرابط.
• الاستخدام:

  console.log(location.hash);
  

3.6 location.protocol

• الوصف: يعرض البروتوكول (http أو https).
• الاستخدام:

  console.log(location.protocol);
  

3.7 location.assign()

• الوصف: ينقل المستخدم إلى رابط جديد.
• الاستخدام:

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

3.8 location.replace()

• الوصف: يستبدل الصفحة الحالية دون إضافتها إلى سجل التصفح.
• الاستخدام:

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

3.9 location.reload()

• الوصف: يعيد تحميل الصفحة الحالية.
• الاستخدام:

  location.reload();
  

3.10 location.port

• الوصف: يعرض رقم المنفذ.
• الاستخدام:

  console.log(location.port);
  

---

4. أوامر history

4.1 history.back()

• الوصف: يعود إلى الصفحة السابقة.
• الاستخدام:

  history.back();
  

4.2 history.forward()

• الوصف: ينتقل إلى الصفحة التالية.
• الاستخدام: