ما هو BOM في لغة JavaScript؟
مرحباً يا رفاق! اليوم راح نتكلم عن شي مهم جداً في عالم جافاسكريبت وهو BOM. لا تخاف، الموضوع بسيط ومباشر.
وش يعني BOM؟
اختصار BOM يعني Browser Object Model (نموذج كائن المتصفح). ببساطة، هو مجموعة من الكائنات اللي بتسمح لجافاسكريبت تتفاعل مع المتصفح نفسه. تخيل إن المتصفح عنده "أبواب" و"نوافذ" و"أزرار" خاصة فيه، الـ BOM هو المفتاح اللي يخليك تتحكم فيها. أهم شي تعرفه إن الـ window object هو الكائن الأب لكل كائنات الـ BOM.
ملاحظة سريعة: الـ BOM مش جزء قياسي من W3C (مثل الـ DOM)، يعني ممكن تلاقي اختلافات بسيطة في كيفية تطبيق المتصفحات له، لكن الكائنات الأساسية موجودة في كل مكان.
أهم كائنات الـ BOM
1. كائن window
هذا هو الملك! window هو الكائن العام (Global Object) في المتصفح. كل المتغيرات والدوال اللي تعرفها في نطاق عام بتصير جزء من الكائن window. هو يمثل نافذة المتصفح المفتوحة.
تقدر تستخدمه لـ:
- فتح نوافذ جديدة:
window.open() - إغلاق نوافذ:
window.close() - عرض تنبيهات:
window.alert() - تحديد وقت لتنفيذ كود:
window.setTimeout()وwindow.setInterval()
مثال:
window.alert("مرحباً من نافذة المتصفح!");
let userName = window.prompt("ما اسمك؟");
console.log("الاسم هو: " + userName);2. كائن navigator
هذا الكائن يعطيك معلومات عن المتصفح اللي المستخدم قاعد يستخدمه.
مثال:
console.log("اسم المتصفح: " + navigator.appName); // قد يكون قديم، الأفضل استخدام userAgent
console.log("إصدار المتصفح: " + navigator.appVersion);
console.log("نظام التشغيل: " + navigator.platform);
console.log("وكيل المستخدم (User Agent): " + navigator.userAgent);3. كائن screen
يعطيك معلومات عن شاشة المستخدم، مثل الأبعاد والعرض المتاح.
مثال:
console.log("عرض الشاشة بالبكسل: " + screen.width);
console.log("ارتفاع الشاشة بالبكسل: " + screen.height);
console.log("العرض المتاح (بدون شريط المهام): " + screen.availWidth);
console.log("الارتفاع المتاح (بدون شريط المهام): " + screen.availHeight);4. كائن location
هذا الكائن يخليك تتعامل مع عنوان URL الحالي للصفحة.
تقدر تستخدمه لـ:
- الحصول على الـ URL الحالي:
location.href - تغيير الـ URL (الانتقال لصفحة أخرى):
location.href = "https://www.example.com" - إعادة تحميل الصفحة:
location.reload()
مثال:
console.log("الـ URL الحالي: " + location.href);
console.log("اسم المضيف (Host): " + location.hostname);
console.log("المسار (Path): " + location.pathname);
// للانتقال لصفحة أخرى (اذا حبيت تجربها، حطها في زر مثلاً)
// location.href = "https://www.google.com";5. كائن history
يسمح لك بالتعامل مع سجل تصفح المستخدم (الصفحات اللي زارها في نفس التبويب).
تقدر تستخدمه لـ:
- الرجوع للصفحة السابقة:
history.back() - التقدم للصفحة التالية:
history.forward() - الانتقال لعدد معين من الصفحات:
history.go(-2)(للوراء صفحتين)
مثال:
console.log("عدد الصفحات في السجل: " + history.length);
// history.back(); // يرجع صفحة للخلف
// history.forward(); // يتقدم صفحة للأمامالفرق بين BOM و DOM (مهم جداً!)
كثير يلخبطون بينهم، بس الموضوع بسيط:
- DOM (Document Object Model): يتعامل مع محتوى الصفحة (عناصر HTML، النصوص، الصور). هو تمثيل هيكلي للصفحة تقدر تعدل عليه. الكائن الأساسي فيه هو
document. - BOM (Browser Object Model): يتعامل مع المتصفح نفسه (النافذة، السجل، الشاشة، الـ URL). هو الكائن الأب لـ DOM، يعني
windowيحتوي علىdocument.
تذكر:
windowهو الكائن الأب للكل.window.documentهو اللي يعطيك الـ DOM.
خلاصة القول
الـ BOM يعطيك القوة للتحكم في بيئة المتصفح، من معلومات الشاشة لعنوان الـ URL وسجل التصفح. فهمك له بيساعدك تبني تطبيقات ويب تفاعلية أكثر وتستفيد من قدرات المتصفح بشكل كامل. استمر في التجربة والممارسة، وراح تشوف كيف الموضوع سهل وممتع!