خصائص الصفحة في لغة JavaScript

خصائص الصفحة في لغة JavaScript

يا هلا! اليوم بنتكلم عن خصائص الصفحة اللي تقدر توصل لها وتتحكم فيها باستخدام JavaScript. الموضوع ده أساسي عشان تبني صفحات تتفاعل صح مع المستخدمين وتتكيف مع أحجام الشاشات المختلفة. يلا بينا نشوف أهم الخصائص دي.

1. أبعاد نافذة المتصفح (Viewport Dimensions)

دي أبعاد الجزء المرئي من المتصفح اللي بيظهر فيه المحتوى، بدون ما نحسب شريط المهام أو أي شيء ثاني خارج منطقة العرض.

  • window.innerWidth: عرض النافذة المرئي بالبكسل.
  • window.innerHeight: ارتفاع النافذة المرئي بالبكسل.

ملاحظة: الخصائص دي بتشمل أشرطة التمرير (scrollbars) لو كانت ظاهرة.

مثال: 

console.log('عرض النافذة: ' + window.innerWidth + 'px');
console.log('ارتفاع النافذة: ' + window.innerHeight + 'px');

2. أبعاد المحتوى (Document Body Dimensions)

دي الأبعاد الفعلية لمحتوى الصفحة نفسها، عادةً بنستخدمها عشان نعرف أبعاد العنصر أو .

  • document.documentElement.clientWidth: عرض المحتوى بدون أشرطة التمرير.
  • document.documentElement.clientHeight: ارتفاع المحتوى بدون أشرطة التمرير.
  • document.body.clientWidth: عرض عنصر (قد يختلف عن documentElement لو فيه هوامش أو تنسيقات معينة).
  • document.body.clientHeight: ارتفاع عنصر .

توضيح: document.documentElement بيشير لعنصر ، وهو الأفضل للاعتماد عليه في أغلب الحالات لمعرفة أبعاد المحتوى الكلي للصفحة.

مثال: 

console.log('عرض المحتوى (documentElement): ' + document.documentElement.clientWidth + 'px');
console.log('ارتفاع المحتوى (documentElement): ' + document.documentElement.clientHeight + 'px');

3. موقع التمرير (Scroll Position)

لو الصفحة طويلة أو عريضة، المستخدم ممكن يعمل لها تمرير. الخصائص دي بتعرفك مكانه فين.

  • window.scrollX (أو window.pageXOffset): عدد البكسلات اللي تم تمريرها أفقياً من بداية الصفحة.
  • window.scrollY (أو window.pageYOffset): عدد البكسلات اللي تم تمريرها عمودياً من بداية الصفحة.

نصيحة: scrollX و scrollY هم الأحدث والأكثر تفضيلاً، لكن pageXOffset و pageYOffset متوافقين بشكل أكبر مع المتصفحات القديمة.

كمان فيه خصائص على document.documentElement بتدي نفس النتيجة:

  • document.documentElement.scrollLeft
  • document.documentElement.scrollTop

مثال: 

window.addEventListener('scroll', () => {
    console.log('موقع التمرير الأفقي: ' + window.scrollX + 'px');
    console.log('موقع التمرير العمودي: ' + window.scrollY + 'px');
});

4. الحجم الكلي للمستند (Full Document Size)

دي بتديك الحجم الكلي للمحتوى، حتى لو كان خارج منطقة العرض الحالية.

  • document.documentElement.scrollWidth: العرض الكلي للمحتوى القابل للتمرير.
  • document.documentElement.scrollHeight: الارتفاع الكلي للمحتوى القابل للتمرير.

مثال: 

console.log('العرض الكلي للمستند: ' + document.documentElement.scrollWidth + 'px');
console.log('الارتفاع الكلي للمستند: ' + document.documentElement.scrollHeight + 'px');

5. كائن الموقع (window.location)

الكائن ده بيحتوي على معلومات مفصلة عن عنوان URL الحالي للصفحة. مفيد جداً لو عايز تعدل على الـ URL أو تجيب جزء معين منه.

  • window.location.href: عنوان URL الكامل.
  • window.location.protocol: البروتوكول (مثلاً http: أو https:).
  • window.location.host: اسم المضيف والبورت (مثلاً www.example.com:8080).
  • window.location.pathname: المسار للملف (مثلاً /pages/index.html).
  • window.location.search: جزء الاستعلام (query string) بالكامل (مثلاً ?id=123&name=test).
  • window.location.hash: الجزء الخاص بالـ hash (مثلاً #section1).

مثال: 

console.log('عنوان URL الحالي: ' + window.location.href);
console.log('جزء الاستعلام: ' + window.location.search);

// لتغيير الصفحة برمجياً
// window.location.href = 'https://new-url.com';

6. كائن المتصفح (window.navigator)

الكائن ده بيدي معلومات عن المتصفح نفسه ونظام التشغيل اللي بيشتغل عليه.

  • window.navigator.userAgent: سلسلة نصية بتوصف المتصفح ونظام التشغيل.
  • window.navigator.platform: منصة نظام التشغيل (مثلاً Win32 أو MacIntel).
  • window.navigator.cookieEnabled: هل الكوكيز مفعلة في المتصفح؟ (true أو false).

مثال: 

console.log('وكيل المستخدم (User Agent): ' + window.navigator.userAgent);
console.log('منصة التشغيل: ' + window.navigator.platform);

الخلاصة

الخصائص دي بتفتح لك أبواب كتير عشان تخلي صفحات الويب بتاعتك ذكية وتتكيف مع أي بيئة. استخدمها صح عشان تبني تجربة مستخدم ممتازة!