translate Browser environment, specs into AR

Author: abdelrhman_ali

2-ui/1-document/01-browser-environment/article.md

@@ -1,115 +1,124 @@
-# Browser environment, specs
+# بيئة المتصفح ومواصفاته
 
-The JavaScript language was initially created for web browsers. Since then it has evolved and become a language with many uses and platforms.
+تم إنشاء لغة javascript فى البداية لمتصفحات الويب , منذ ذلك الحين وأصبح لها استخدمات ومنصات عديدة.
 
-A platform may be a browser, or a web-server or another *host*, even a coffee machine. Each of them provides platform-specific functionality. The JavaScript specification calls that a *host environment*.
+قد تكون تلك المنصة متصفح , خادم ويب او مضيف آخر ولكن لكل واحد منهم وظيفته الخاصة التى يقوم بها .خصائص الjavascript تسمى هذا بيئة المضيف.
 
-A host environment provides own objects and functions additional to the language core. Web browsers give a means to control web pages. Node.js provides server-side features, and so on.
+توفر بيئة العمل كائنات و وظائف خاصة إلى جزهر اللغة , تعتبر المتصفحات وسيلة للتحكم بصفحات الويب , وتوفر الnode.js خواص إلى جانب الخادم, وما إلى ذلك.
 
-Here's a bird's-eye view of what we have when JavaScript runs in a web-browser:
+إليك نظرة شاملة لما لدينا عند تشغيل جافا سكريبت في متصفح ويب:
 
 ![](windowObjects.svg)
 
-There's a "root" object called `window`. It has two roles:
+لدينا كائن الجذر `window` , له دورين:
 
-1. First, it is a global object for JavaScript code, as described in the chapter <info:global-object>.
-2. Second, it represents the "browser window" and provides methods to control it.
+1. أولا, هو كائن عالمى لشفرة javascript ,كما وصِف فى فصل <info:global-object>
 
-For instance, here we use it as a global object:
+2. ثانيًا ، يمثل "نافذة المتصفح" ويوفر طرقًا للتحكم فيها.
+
+على سبيل المثال ، نستخدمها هنا ككائن عام:
 
 ```js run
 function sayHi() {
   alert("Hello");
 }
 
-// global functions are methods of the global object:
+// الدالات العامة هي طرق الكائن العام:
 window.sayHi();
 ```
 
-And here we use it as a browser window, to see the window height:
+وهنا نستخدمها كنافذة متصفح لرؤية ارتفاع النافذة:
 
 ```js run
-alert(window.innerHeight); // inner window height
+alert(window.innerHeight); // ارتفاع النافذة الداخلية
 ```
 
-There are more window-specific methods and properties, we'll cover them later.
+هناك المزيد من الأساليب والخصائص الخاصة بالنافذة ، وسنغطيها لاحقًا.
 
 ## DOM (Document Object Model)
 
-Document Object Model, or DOM for short, represents all page content as objects that can be modified.
+يمثل نموذج كائن المستند ، أو اختصار DOM ، محتوى الصفحة بالكامل ككائنات يمكن تعديلها.
+
+كائن `document` هو "نقطة الدخول" الرئيسية للصفحة. يمكننا تغيير أو إنشاء أي شيء على الصفحة باستخدامه.
 
-The `document` object is the main "entry point" to the page. We can change or create anything on the page using it.
+على سبيل المثال:
 
-For instance:
 ```js run
-// change the background color to red
+// تغيير لون الخلفية إلى اللون الأحمر
 document.body.style.background = "red";
 
-// change it back after 1 second
-setTimeout(() => document.body.style.background = "", 1000);
+// تغييره مرة أخرى بعد ثانية واحدة
+setTimeout(() => (document.body.style.background = ""), 1000);
 ```
 
-Here we used `document.body.style`, but there's much, much more. Properties and methods are described in the specification:
+استخدمنا هنا `document.body.style` ، ولكن هناك الكثير والكثير. يتم وصف الخصائص والأساليب في المواصفات:
 
-- **DOM Living Standard** at <https://dom.spec.whatwg.org>
+- **DOM الحالة القياسية** فى <https://dom.spec.whatwg.org>
 
-```smart header="DOM is not only for browsers"
-The DOM specification explains the structure of a document and provides objects to manipulate it. There are non-browser instruments that use DOM too.
+```smart header="DOM ليس فقط للمتصفحات"
+توضح مواصفات DOM بنية المستند وتوفر كائنات لمعالجته. هناك أدوات غير متصفح تستخدم DOM أيضًا.
 
-For instance, server-side scripts that download HTML pages and process them can also use DOM. They may support only a part of the specification though.
+على سبيل المثال ، يمكن للبرامج النصية من جانب الخادم التي تقوم بتنزيل صفحات HTML ومعالجتها أيضًا استخدام DOM. قد يدعمون جزءًا فقط من المواصفات بالرغم من ذلك.
 ```
 
-```smart header="CSSOM for styling"
-CSS rules and stylesheets are structured in a different way than HTML. There's a separate specification, [CSS Object Model (CSSOM)](https://www.w3.org/TR/cssom-1/), that explains how they are represented as objects, and how to read and write them.
+```smart header="CSSOM للتصنيف"
+يتم تنظيم قواعد CSS وأوراق الأنماط بطريقة مختلفة عن HTML. هناك مواصفات منفصلة ، [CSS Object Model (CSSOM)](https://www.w3.org/TR/cssom-1/), يشرح كيف يتم تمثيلها ككائنات ، وكيفية قراءتها وكتابتها.
+them.
 
-CSSOM is used together with DOM when we modify style rules for the document. In practice though, CSSOM is rarely required, because usually CSS rules are static. We rarely need to add/remove CSS rules from JavaScript, but that's also possible.
+يتم استخدام CSSOM مع DOM عند تعديل قواعد النمط للمستند. من الناحية العملية ، نادرًا ما تكون CSSOM مطلوبة ، لأن قواعد CSS عادة ما تكون ثابتة. نادرًا ما نحتاج إلى إضافة / إزالة قواعد CSS من JavaScript ، ولكن هذا ممكن أيضًا.
 ```
 
 ## BOM (Browser Object Model)
 
-The Browser Object Model (BOM) represents additional objects provided by the browser (host environment) for working with everything except the document.
+يمثل نموذج كائن المتصفح (BOM) كائنات إضافية يوفرها المتصفح (البيئة المضيفة) للعمل مع كل شيء باستثناء المستند.
+
+على سبيل المثال:
 
-For instance:
+- يوفر كائن [navigator](mdn:api/Window/navigator) معلومات أساسية حول المتصفح ونظام التشغيل. هناك العديد من الخصائص ، لكن الأكثر شهرة هما:
+  `navigator.userAgent` -- حول المتصفح الحالي ، و `navigator.platform` -- حول النظام الأساسي (يمكن أن يساعد على الاختلاف بين Windows / Linux / Mac إلخ).
 
-- The [navigator](mdn:api/Window/navigator) object provides background information about the browser and the operating system. There are many properties, but the two most widely known are: `navigator.userAgent` -- about the current browser, and `navigator.platform` -- about the platform (can help to differ between Windows/Linux/Mac etc).
-- The [location](mdn:api/Window/location) object allows us to read the current URL and can redirect the browser to a new one.
+- يسمح لنا كائن [location](mdn:api/Window/location) بقراءة عنوان URL الحالي ويمكنه إعادة توجيه المتصفح إلى عنوان جديد.
 
-Here's how we can use the `location` object:
+إليك كيفية استخدام كائن `location`:
 
 ```js run
-alert(location.href); // shows current URL
+alert(location.href); //يظهر URL الحالى
 if (confirm("Go to Wikipedia?")) {
-  location.href = "https://wikipedia.org"; // redirect the browser to another URL
+  location.href = "https://wikipedia.org"; //إعادة توجيه المتصفح إلى عنوان URL آخر
 }
 ```
 
-Functions `alert/confirm/prompt` are also a part of BOM: they are directly not related to the document, but represent pure browser methods of communicating with the user.
+تعد `alert/confirm/prompt` الوظائف أيضًا جزءًا من DOM المواد: فهي لا تتعلق مباشرة بالمستند ، ولكنها تمثل طرق متصفح خالصة للتواصل مع المستخدم.
 
-```smart header="Specifications"
-BOM is the part of the general [HTML specification](https://html.spec.whatwg.org).
+```smart header="مواصفات"
+BOM هو جزء من مواصفات[HTML specification](https://html.spec.whatwg.org).
 
-Yes, you heard that right. The HTML spec at <https://html.spec.whatwg.org> is not only about the "HTML language" (tags, attributes), but also covers a bunch of objects, methods and browser-specific DOM extensions. That's "HTML in broad terms". Also, some parts have additional specs listed at <https://spec.whatwg.org>.
+نعم سمعت ذلك جيدا. مواصفات HTML في  <https://html.spec.whatwg.org>لا تتعلق فقط بـ "لغة HTML" (العلامات ، السمات) ،ولكنه يغطي أيضًا مجموعة من الكائنات والأساليب وإضافات DOM الخاصة بالمتصفح. هذا هو "HTML بعبارات عامة".أيضًا ، تحتوي بعض الأجزاء على مواصفات إضافية مدرجة في <https://spec.whatwg.org>
 ```
 
-## Summary
+## ملخص
 
-Talking about standards, we have:
+بالحديث عن المعايير ، لدينا:
 
-DOM specification
-: Describes the document structure, manipulations and events, see <https://dom.spec.whatwg.org>.
+DOM مواصفات
+: يصف هيكل الوثيقة والتلاعب والأحداث ، راجع <https://dom.spec.whatwg.org>.
 
-CSSOM specification
-: Describes stylesheets and style rules, manipulations with them and their binding to documents, see <https://www.w3.org/TR/cssom-1/>.
+CSSOM مواصفات
+: يصف أوراق الأنماط وقواعد الأنماط والتلاعب بها وربطها بالمستندات ، راجع <https://www.w3.org/TR/cssom-1/>.
 
-HTML specification
-: Describes the HTML language (e.g. tags) and also the BOM (browser object model) -- various browser functions: `setTimeout`, `alert`, `location` and so on, see <https://html.spec.whatwg.org>. It takes the DOM specification and extends it with many additional properties and methods.
+HTML مواصفات
+: تصف لغة HTML (مثل العلامات) وكذلك BOM (طراز كائن المتصفح) - وظائف المتصفح المختلفة:
+`setTimeout`, `alert`, `location` وما إلى ذلك, راجع <https://html.spec.whatwg.org>. يأخذ مواصفات DOM ويوسعها بالعديد من الخصائص والأساليب الإضافية.
 
-Additionally, some classes are described separately at <https://spec.whatwg.org/>.
+بالإضافة إلى ذلك ، يتم وصف بعض الفئات بشكل منفصل في
+<https://spec.whatwg.org/>.
 
-Please note these links, as there's so much stuff to learn it's impossible to cover and remember everything.
+يرجى ملاحظة هذه الروابط ، حيث أن هناك الكثير من الأشياء لمعرفة أنه من المستحيل تغطية وتذكر كل شيء.
 
-When you'd like to read about a property or a method, the Mozilla manual at <https://developer.mozilla.org/en-US/search> is also a nice resource, but the corresponding spec may be better: it's more complex and longer to read, but will make your fundamental knowledge sound and complete.
+عندما ترغب في القراءة عن خاصية أو طريقة ما ، فإن دليل Mozilla على
+<https://developer.mozilla.org/en-US/search> هو أيضًا مورد جيد ، ولكن المواصفات المقابلة قد تكون أفضل: إنها أكثر تعقيدًا وأطول وقتًا للقراءة ، ولكنها ستجعل معرفتك الأساسية سليمة وكاملة.
 
-To find something, it's often convenient to use an internet search "WHATWG [term]" or "MDN [term]", e.g <https://google.com?q=whatwg+localstorage>, <https://google.com?q=mdn+localstorage>.
+للعثور على شيء ما ، غالبًا ما يكون من الملائم استخدام البحث على الإنترنت
+"WHATWG [مصطلح]" او "MDN [مصطلح]", e.g <https://google.com?q=whatwg+localstorage>, <https://google.com?q=mdn+localstorage>.
 
-Now we'll get down to learning DOM, because the document plays the central role in the UI.
+سنبدأ الآن في تعلم DOM ، لأن المستند يلعب الدور المركزي في واجهة المستخدم.