Merge pull request #85 from abdelrhmanali29/document

document

Author: OmarioHassan

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

@@ -1,114 +1,113 @@
-# 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 "smart" coffee machine, if it can run JavaScript. 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.
-
-For instance, here we use it as a global object:
+1. أولا، هو كائن عام لشفرة JavaScript، كما وصِف فى فصل <info: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);
 ```
 
-Here we used `document.body.style`, but there's much, much more. Properties and methods are described in the specification: [DOM Living Standard](https://dom.spec.whatwg.org).
+استخدمنا هنا `document.body.style`، ولكن هناك الكثير والكثير. يتم وصف الخصائص والأساليب في المواصفات: **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"
-There's also a separate specification, [CSS Object Model (CSSOM)](https://www.w3.org/TR/cssom-1/) for CSS rules and stylesheets, that explains how they are represented as objects, and how to read and write them.
+يتم استخدام CSSOM مع الـ DOM عند تعديل قواعد النمط للمستند. من الناحية العملية، نادرًا ما تكون CSSOM مطلوبة، لأن قواعد CSS عادة ما تكون ثابتة. نادرًا ما نحتاج إلى إضافة/إزالة قواعد الـ CSS من الـ JavaScript، ولكن هذا ممكن أيضًا.
 
-CSSOM is used together with DOM when we modify style rules for the document. In practice though, CSSOM is rarely required, because we rarely need to modify CSS rules from JavaScript (usually we just add/remove CSS classes, not modify their CSS rules), but that's also possible.
+```smart header="CSSOM للتصنيف"
+يتم تنظيم قواعد CSS وأوراق الأنماط بطريقة مختلفة عن HTML. هناك مواصفات منفصلة، [CSS Object Model (CSSOM)](https://www.w3.org/TR/cssom-1/), يشرح كيف يتم تمثيلها ككائنات، وكيفية قراءتها وكتابتها.
 ```
 
 ## 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:
+على سبيل المثال:
 
-- 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.
+- يوفر كائن [navigator](mdn:api/Window/navigator) معلومات أساسية حول المتصفح ونظام التشغيل. هناك العديد من الخصائص ، لكن الأكثر شهرة هما: `navigator.userAgent` -- حول المتصفح الحالي، و `navigator.platform` -- حول النظام الأساسي (يمكن أن يساعد على تحديد الاختلاف بين Windows/Linux/Mac إلخ).
+- يسمح لنا كائن [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` جزءًا من الـ BOM: فهي لا تتعلق مباشرة بالمستند، ولكنها تمثل طرق متصفح خالصة للتواصل مع المستخدم.
 
-```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>.
+بالحديث عن المعايير، لدينا:
 
-CSSOM specification
-: Describes stylesheets and style rules, manipulations with them and their binding to documents, see <https://www.w3.org/TR/cssom-1/>.
+مواصفات الـ DOM
+: يصف هيكل الوثيقة والتلاعب والأحداث، راجع <https://dom.spec.whatwg.org>.
 
-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.
+مواصفات الـ CSSOM
+: يصف أوراق الأنماط وقواعد الأنماط والتلاعب بها وربطها بالمستندات، راجع <https://www.w3.org/TR/cssom-1/>.
 
-Additionally, some classes are described separately at <https://spec.whatwg.org/>.
+مواصفات الـ HTML
+: تصف لغة HTML (مثل العلامات) وكذلك BOM (طراز كائن المتصفح) - وظائف المتصفح المختلفة: `setTimeout`, `alert`, `location` وما إلى ذلك، راجع <https://html.spec.whatwg.org>. يأخذ مواصفات الـ DOM ويوسعها بالعديد من الخصائص والأساليب الإضافية.
 
-Please note these links, as there's so much stuff to learn it's impossible to cover and remember everything.
+بالإضافة إلى ذلك، يتم وصف بعض الفئات بشكل منفصل في <https://spec.whatwg.org/>.
 
-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.
+يرجى ملاحظة هذه الروابط، حيث أن هناك الكثير من الأشياء لمعرفة أنه من المستحيل تغطية وتذكر كل شيء.
 
-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>.
+عندما ترغب في القراءة عن خاصية أو طريقة ما، فإن دليل Mozilla على <https://developer.mozilla.org/en-US/search> هو أيضًا مورد جيد، ولكن المواصفات المقابلة قد تكون أفضل: إنها أكثر تعقيدًا وأطول وقتًا للقراءة، ولكنها ستجعل معرفتك الأساسية سليمة وكاملة.
 
-Now we'll get down to learning DOM, because the document plays the central role in the UI.
+للعثور على شيء ما، غالبًا ما يكون من الملائم استخدام البحث على الإنترنت "WHATWG [مصطلح]" او "MDN [مصطلح]", مثل <https://google.com?q=whatwg+localstorage>, <https://google.com?q=mdn+localstorage>.
 
+سنبدأ الآن في تعلم الـ DOM, لأن المستند يلعب الدور المركزي في واجهة المستخدم.