111- دروس جافا سكربت – – JS Browser BOM History

## مقدمة إلى BOM والتاريخ في جافاسكريبت

عند العمل مع جافاسكريبت في متصفحات الويب، يعتبر الـ BOM (نموذج كائن المتصفح – Browser Object Model) جزءًا مهمًا من هذه البيئة. يوفر BOM واجهات برمجية للتفاعل مع المتصفح نفسه خارج نطاق الـ DOM (نموذج كائن المستند – Document Object Model). ومن بين هذه الواجهات، تعد واجهة `History` واحدة من الأدوات الأساس التي تستخدم للتفاعل مع جلسة التصفح الخاصة بالمستخدم.

## واجهة History

تتيح واجهة `History` للمطورين التحكم في سجل المتصفح، مما يسمح لهم بالتنقل بين الصفحات التي تم زيارتها خلال الجلسة الحالية. يمكن استخدام هذه الواجهة لتقديم تجربة مستخدم سلسة دون الحاجة إلى إعادة تحميل الصفحة.

### الخصائص والطرق الأساسية

1. **الخاصية `length`:**
– ترجع عدد [شركة برمجة مصرية] الإدخالات في سجل الجلسة.
– مثال:

console.log(window.history.length); // يعرض عدد الصفحات في سجل الجلسة الحالي
     

2. **الطريقة `back()`:**
– تنقل المستخدم إلى الصفحة السابقة في السجل، تعادل النقر على زر “الرجوع” في المتصفح.
– مثال:

document.getElementById('backButton').addEventListener('click', function() {
       window.history.back();
     });
     

3. **الطريقة `forward()`:**
– تنقل المستخدم إلى الصفحة التالية في السجل، تعادل النقر على زر “التقدم” في المتصفح.
– مثال:

document.getElementById('forwardButton').addEventListener('click', function() {
       window.history.forward();
     });
     

4. **الطريقة `go()`:**
– تنقل المستخدم [شركة برمجة مصرية] إلى صفحة معينة في السجل بناءً على رقم الصفحة النسبي.
– مثال:

// الانتقال إلى الصفحة السابقة
     window.history.go(-1);

     // الانتقال إلى الصفحة التالية
     window.history.go(1);

     // الانتقال إلى الصفحة الثانية في السجل
     window.history.go(2);
     

5. **الطريقة `pushState()`:**
– تضيف حالة جديدة إلى السجل دون إعادة تحميل الصفحة.
– مثال:

window.history.pushState({page: 1}, "Title 1", "?page=1");
     

6. **الطريقة `replaceState()`:**
– تستبدل الحالة الحالية في السجل بحالة جديدة.
– مثال:

window.history.replaceState({page: 2}, "Title 2", "?page=2");
     

### استخدام `pushState` و `replaceState`

تعتبر `pushState` و `replaceState` من الأدوات القوية التي تتيح للمطورين تحديث عنوان الـ URL وحالة السجل دون إعادة تحميل الصفحة، مما يسمح بإنشاء تطبيقات أحادية الصفحة (Single Page Applications) بسهولة.

#### مثال تطبيقي:

document.getElementById('changePage').addEventListener('click', function() {
  const stateObj = { page: "home" };
  window.history.pushState(stateObj, "Home Page", "home.html");
  document.title = "Home Page";
  document.getElementById('content').innerHTML = "<h1>Welcome to the Home Page</h1>";
});

في هذا المثال، عند النقر على الزر، يتم تغيير عنوان الصفحة وعنوان الـ URL إلى “home.html” دون إعادة تحميل الصفحة، ويتم تحديث محتوى الصفحة ديناميكيًا.

### الاستماع إلى تغييرات السجل

يمكن للمطورين الاستماع إلى تغييرات السجل باستخدام حدث `popstate`. يُطلق هذا الحدث عندما يتغير حالة السجل النشطة.

#### مثال:

window.addEventListener('popstate', function(event) {
  if (event.state) {
    console.log('State changed:', event.state);
    document.getElementById('content').innerHTML = `<h1>${event.state.page} Page</h1>`;
  }
});

بهذا الشكل، يمكن التعامل مع تغييرات السجل بشكل ديناميكي وتحديث المحتوى بناءً على الحالة الجديدة.

## الخاتمة

تعد واجهة `History` جزءًا لا يتجزأ من BOM وتوفر للمطورين الأدوات اللازمة للتحكم في جلسة التصفح وتقديم تجربة مستخدم سلسة وديناميكية. من خلال استخدام `pushState` و `replaceState` والقدرة على الاستماع إلى تغييرات السجل، يمكن إنشاء تطبيقات ويب تفاعلية ومتقدمة تلبي احتياجات المستخدمين الحديثة.