بيئة المتصفح ومواصفاته

تم إنشاء لغة JavaScript فى البداية لمتصفحات الويب، منذ ذلك الحين أصبح لها استخدمات ومنصات عديدة.

قد تكون تلك المنصة متصفح، خادوم ويب او مضيف آخر ولكن لكل واحد منهم وظيفته الخاصة التى يقوم بها .خصائص الـ JavaScript تسمى هذا ببيئة المضيف.

توفر بيئة العمل كائنات و وظائف خاصة إلى نواة اللغة. تعتبر المتصفحات وسيلة للتحكم بصفحات الويب. وتوفر الـ Node.js خواص من جانب الخادم, وما إلى ذلك.

إليك نظرة شاملة لما لدينا عند تشغيل جافا سكريبت في متصفح ويب:

لدينا كائن “الجذر” window . له دورين:

1. أولا، هو كائن عام لشفرة JavaScript، كما وصِف فى فصل الكائن العمومي Global object
2. ثانيًا، يمثل “نافذة المتصفح” ويوفر طرقا للتحكم فيها. على سبيل المثال، نستخدمها هنا ككائن عام:

function sayHi() {
  alert("Hello");
}

// الدالات العامة هي طرق الكائن العام:
window.sayHi();

وهنا نستخدمها كنافذة متصفح لرؤية ارتفاع النافذة:

alert(window.innerHeight); // ارتفاع النافذة الداخلية

هناك المزيد من الأساليب والخصائص الخاصة بالنافذة، وسنغطيها لاحقًا.

DOM (Document Object Model)

يمثل نموذج كائن المستند، أو اختصار DOM، محتوى الصفحة بالكامل ككائنات يمكن تعديلها.

كائن document هو “نقطة الدخول” الرئيسية للصفحة. يمكننا تغيير أو إنشاء أي شيء على الصفحة باستخدامه.

على سبيل المثال:

// تغيير لون الخلفية إلى اللون الأحمر
document.body.style.background = "red";

// تغييره مرة أخرى بعد ثانية واحدة
setTimeout(() => document.body.style.background = "", 1000);

استخدمنا هنا document.body.style، ولكن هناك الكثير والكثير. يتم وصف الخصائص والأساليب في المواصفات: DOM الحالة القياسية فى https://dom.spec.whatwg.org

يتم استخدام CSSOM مع الـ DOM عند تعديل قواعد النمط للمستند. من الناحية العملية، نادرًا ما تكون CSSOM مطلوبة، لأن قواعد CSS عادة ما تكون ثابتة. نادرًا ما نحتاج إلى إضافة/إزالة قواعد الـ CSS من الـ JavaScript، ولكن هذا ممكن أيضًا.

BOM (Browser Object Model)

يمثل نموذج كائن المتصفح (BOM) كائنات إضافية يوفرها المتصفح (البيئة المضيفة) للعمل مع كل شيء باستثناء المستند.

على سبيل المثال:

• يوفر كائن navigator معلومات أساسية حول المتصفح ونظام التشغيل. هناك العديد من الخصائص ، لكن الأكثر شهرة هما: navigator.userAgent – حول المتصفح الحالي، و navigator.platform – حول النظام الأساسي (يمكن أن يساعد على تحديد الاختلاف بين Windows/Linux/Mac إلخ).
• يسمح لنا كائن location بقراءة عنوان URL الحالي ويمكنه إعادة توجيه المتصفح إلى عنوان جديد.

إليك كيفية استخدام كائن location:

alert(location.href); //يظهر الـ URL الحالى
if (confirm("Go to Wikipedia?")) {
  location.href = "https://wikipedia.org"; //إعادة توجيه المتصفح إلى عنوان URL آخر
}

تعد الدوال alert/confirm/prompt جزءًا من الـ BOM: فهي لا تتعلق مباشرة بالمستند، ولكنها تمثل طرق متصفح خالصة للتواصل مع المستخدم.

ملخص

بالحديث عن المعايير، لدينا:

مواصفات الـ DOM

يصف هيكل الوثيقة والتلاعب والأحداث، راجع https://dom.spec.whatwg.org.

مواصفات الـ CSSOM

يصف أوراق الأنماط وقواعد الأنماط والتلاعب بها وربطها بالمستندات، راجع https://www.w3.org/TR/cssom-1/.

مواصفات الـ HTML

تصف لغة HTML (مثل العلامات) وكذلك BOM (طراز كائن المتصفح) – وظائف المتصفح المختلفة: setTimeout, alert, location وما إلى ذلك، راجع https://html.spec.whatwg.org. يأخذ مواصفات الـ DOM ويوسعها بالعديد من الخصائص والأساليب الإضافية.

بالإضافة إلى ذلك، يتم وصف بعض الفئات بشكل منفصل في https://spec.whatwg.org/.

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

عندما ترغب في القراءة عن خاصية أو طريقة ما، فإن دليل Mozilla على https://developer.mozilla.org/en-US/search هو أيضًا مورد جيد، ولكن المواصفات المقابلة قد تكون أفضل: إنها أكثر تعقيدًا وأطول وقتًا للقراءة، ولكنها ستجعل معرفتك الأساسية سليمة وكاملة.

للعثور على شيء ما، غالبًا ما يكون من الملائم استخدام البحث على الإنترنت “WHATWG [مصطلح]” او “MDN [مصطلح]”, مثل https://google.com?q=whatwg+localstorage, https://google.com?q=mdn+localstorage.

سنبدأ الآن في تعلم الـ DOM, لأن المستند يلعب الدور المركزي في واجهة المستخدم.