معلومات المتصفح في لغة JavaScript

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

1. كائن Navigator: عن المتصفح نفسه

الكائن navigator بيعطيك معلومات عن المتصفح نفسه. تخيل إنه بطاقة تعريف المتصفح.

console.log(navigator.userAgent); // بيعطيك سلسلة تعريف المتصفح (User Agent String)
console.log(navigator.platform);  // نظام التشغيل (مثال: Win32, MacIntel)
console.log(navigator.cookieEnabled); // هل الكوكيز مفعلة؟ (true/false)
console.log(navigator.onLine);    // هل المتصفح متصل بالإنترنت؟ (true/false)

ملاحظة: navigator.userAgent ممكن يكون طويل ومعقد، وفيه معلومات كثيرة عن المتصفح ونظام التشغيل.

2. كائن Screen: عن شاشة المستخدم

الكائن screen بيعطيك معلومات عن شاشة المستخدم اللي بيعرض عليها الموقع. مفيد للتعامل مع تصميمات الشاشات المختلفة (Responsive Design).

console.log(screen.width);         // عرض الشاشة بالبكسل
console.log(screen.height);        // طول الشاشة بالبكسل
console.log(screen.availWidth);    // العرض المتاح (بدون شريط المهام مثلاً)
console.log(screen.availHeight);   // الطول المتاح
console.log(screen.colorDepth);    // عمق الألوان بالبت (مثال: 24, 32)

ملاحظة: هذي المعلومات عن الشاشة الكلية، مو عن نافذة المتصفح نفسها.

3. كائن Location: عن عنوان الموقع (URL)

الكائن location بيعطيك كل التفاصيل عن الـ URL اللي المستخدم فاتحه حالياً. تقدر تستخدمه عشان تغير الـ URL أو تعرف أجزاء منه.

console.log(location.href);     // الـ URL الكامل
console.log(location.hostname); // اسم النطاق (مثال: www.example.com)
console.log(location.pathname); // المسار بعد اسم النطاق (مثال: /pages/about.html)
console.log(location.port);     // رقم المنفذ (إذا كان موجود)
console.log(location.protocol); // البروتوكول (مثال: http:, https:)
console.log(location.search);   // جزء الاستعلام (Query String) (مثال: ?id=123&cat=tech)
console.log(location.hash);     // جزء الـ Hash (مثال: #section2)

// تقدر تغير الـ URL أيضاً:
// location.href = "https://www.google.com"; // بيحولك لـ Google
// location.reload(); // بيسوي إعادة تحميل للصفحة

ملاحظة: تغيير location.href أو استخدام location.assign() بيخلي المتصفح ينتقل لصفحة جديدة.

4. كائن History: سجل التصفح

الكائن history بيعطيك إمكانية تتفاعل مع سجل التصفح الخاص بالمتصفح. يعني تقدر ترجع خطوة لوراء أو تتقدم خطوة.

history.back();    // بيرجعك للصفحة السابقة
history.forward(); // بيقدمك للصفحة التالية (إذا كنت رجعت قبلها)
history.go(-2);    // بيرجعك صفحتين لوراء
history.go(1);     // بيقدمك صفحة واحدة للأمام
console.log(history.length); // عدد الصفحات في سجل الجلسة الحالية

ملاحظة: لأسباب أمنية، ما تقدر تعرف الـ URLs اللي في سجل التصفح، بس تقدر تتنقل بينها.

خلاصة الكلام

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

← السابقالفهرس