Merge branch 'master' of github.com:javascript-tutorial/ar.javascript.info

Author: dvmhmdsd

1-js/01-getting-started/3-code-editors/article.md

@@ -1,46 +1,46 @@
-# Code editors
+# محررات الأكواد
 
-A code editor is the place where programmers spend most of their time.
+محرر الأكواد هو المكان الذي يقضي فيه المبرمجون معظم وقتهم.
 
-There are two main types of code editors: IDEs and lightweight editors. Many people use one tool of each type.
+يوجد نوعين من محررات الأكواد: IDEs ( بيئة التطوير الكاملة)و المحررات البسيطة. العديد من الناس يستخدمون أداة واحدة لكل نوع.
 
 ## IDE
 
-The term [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) (Integrated Development Environment) refers to a powerful editor with many features that usually operates on a "whole project." As the name suggests, it's not just an editor, but a full-scale "development environment."
+مصطلح [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) (Integrated Development Environment) يشير إلى محرر بإمكانات هائلة، مع العديد من المميزات التي تعمل عادة على " مشروع كامل". كما يوحي الاسم، فهو ليس مجرد محرر أكواد، ولكنه "بيئة تطوير" واسعة النطاق.
 
-An IDE loads the project (which can be many files), allows navigation between files, provides autocompletion based on the whole project (not just the open file), and integrates with a version management system (like [git](https://git-scm.com/)), a testing environment, and other "project-level" stuff.
+ IDE تقوم بتحميل المشروع ) الذي يمكن أن يتكون من العديد من الملفات)، ويسمح بالتنقل بين الملفات، ويوفر خاصة الإكمال التلقائي المعتمدة على المشروع ككل ( وليس الملف المفتوح فقط) , كما أنه يمكن أن يرتبط مع أنظمة إدارة الإصدار  (مثل [git](https://git-scm.com/)), وبيئة الاختبار, وغيرها من الأشياء على مستوى المشروع.
 
-If you haven't selected an IDE yet, consider the following options:
+إذا لم تقم باختيار IDE بعد ، ففكر في الخيارات التالية:
 
-- [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, free).
-- [WebStorm](http://www.jetbrains.com/webstorm/) (cross-platform, paid).
+- [فيجوال ستديو كود](https://code.visualstudio.com/) (يعمل على أكثر من نظام تشغيل, مجاني).
+- [ويب ستورم](http://www.jetbrains.com/webstorm/) (يعمل على أكثر من نظام تشغيل, مدفوع).
 
-For Windows, there's also "Visual Studio", not to be confused with "Visual Studio Code". "Visual Studio" is a paid and mighty Windows-only editor, well-suited for the .NET platform. It's also good at JavaScript. There's also a free version [Visual Studio Community](https://www.visualstudio.com/vs/community/).
+بالنسبة للويندوز، يمكن استخدام برنامج فيجوال ستديو، لايجب الخلط بينه وبين الفيجوال ستديو كود، فيجوال ستديو هو محرر  مدفوع يعمل على نظام ويندوز فقك، ومناسب تماماً لبيئة الدوت نت. أنه أيضاً جيد للجافاسكريبت. كما يوجد إصدار مجاني منه [Visual Studio Community](https://www.visualstudio.com/vs/community/).
 
-Many IDEs are paid, but have a trial period. Their cost is usually negligible compared to a qualified developer's salary, so just choose the best one for you.
+.عادة ما تكون تكلفتها ضئيلة للغاية مقارنة براتب المطور المؤهل ، لذلك فقط اختر الأفضل بالنسبة لك.العديد من بيئات التطوير مدفوعة، لكن لها فترة سماحية
 
-## Lightweight editors
+## المحررات البسيطة
 
-"Lightweight editors" are not as powerful as IDEs, but they're fast, elegant and simple.
+المحررات البسيطة"  ليست بقوة ال"  IDEs لكنها سريعة, وأنيقة وبسيطة
 
-They are mainly used to open and edit a file instantly.
+يتم استخدامها بشكل رئيسي لفتح وتحرير ملف على الفور.
 
-The main difference between a "lightweight editor" and an "IDE" is that an IDE works on a project-level, so it loads much more data on start, analyzes the project structure if needed and so on. A lightweight editor is much faster if we need only one file.
+الفارق الرئيسي بين المحررات البسيطة و "بيئة التطوير" هو أن بيئة التطوير تعمل على مستوى المشروع، لذلك فإنها تقوم بتحميل المزيد من البيانات عند البدء، وتحليل هيكل المشروع إذا لزم ذلك. أما المحررات البسيطة فإنها أسرع في حال نريد ملف واحد فقط.
 
-In practice, lightweight editors may have a lot of plugins including directory-level syntax analyzers and autocompleters, so there's no strict border between a lightweight editor and an IDE.
+من الناحية العملية ، قد تحتوي المحررات البسيطة على الكثير من المكونات الإضافية بما في ذلك محللات بناء الجملة على مستوى الدليل وأجهزة الإكمال التلقائي ، لذلك لا توجد حدود صارمة بين المحرر البسيط و IDE.
 
-The following options deserve your attention:
+الخيارات التالية تستحق انتباهك:
 
-- [Atom](https://atom.io/) (cross-platform, free).
-- [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, free).
-- [Sublime Text](http://www.sublimetext.com) (cross-platform, shareware).
-- [Notepad++](https://notepad-plus-plus.org/) (Windows, free).
-- [Vim](http://www.vim.org/) and [Emacs](https://www.gnu.org/software/emacs/) are also cool if you know how to use them.
+- [Atom](https://atom.io/) (يعمل على العديد من أنظمة التشغيل, مجاني).
+- [Visual Studio Code](https://code.visualstudio.com/) (يعمل على العديد من أنظمة التشغيل, مجاني).
+- [Sublime Text](http://www.sublimetext.com) (يعمل على العديد من أنظمة التشغيل, برنامج مشاركة).
+- [Notepad++](https://notepad-plus-plus.org/) (الويندوز, مجاني).
+- [Vim](http://www.vim.org/) و [Emacs](https://www.gnu.org/software/emacs/)  رائعة إذا كنت تعرف كيفية استخدامها.
 
-## Let's not argue
+## دعونا لانتشاجر
 
-The editors in the lists above are those that either I or my friends whom I consider good developers have been using for a long time and are happy with.
+المحررات التي بالقائمة الأعلى هي التي نقوم باستخدامها أنا وأصدقائي، والذين أعتقد أنهم مطورون جيدون يستخدمونها منذ وقت طويل وتسعدهم.
 
-There are other great editors in our big world. Please choose the one you like the most.
+يوجد أيضاً محررات رائعة في عالمنا الكبير، الرجاء اختيار المحرر الذي تفضله.
 
-The choice of an editor, like any other tool, is individual and depends on your projects, habits, and personal preferences.
+اختيار المحرر، مثل أي أداة أخرى، هو اختيار فردي ويعتمد على مشروعاتك، وعاداتك، وتفضيلاتك الشخصية.

2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md

@@ -1,8 +1,8 @@
-# Outer corners
+# الزوايا الخارجية
 
-Outer corners are basically what we get from [elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect).
+الزوايا الخارجية هي في الأساس ما نحصل عليه من [elem.getBoundingClientRect ()] (https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect).
 
-Coordinates of the upper-left corner `answer1` and the bottom-right corner `answer2`:
+إحداثيات الزاوية العلوية اليسرى `answer1` والزاوية اليمنى السفلى` answer2`:
 
 ```js
 let coords = elem.getBoundingClientRect();
@@ -11,19 +11,17 @@ let answer1 = [coords.left, coords.top];
 let answer2 = [coords.right, coords.bottom];
 ```
 
-# Left-upper inner corner
+# الزاوية الداخلية اليسرى العليا
 
-That differs from the outer corner by the border width. A reliable way to get the distance is `clientLeft/clientTop`:
+هذا يختلف عن الزاوية الخارجية بعرض الحدود. طريقة موثوقة للحصول على المسافة هي `clientLeft / clientTop`:
 
 ```js
 let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop];
 ```
 
-# Right-bottom inner corner
-
-In our case we need to substract the border size from the outer coordinates.
-
-We could use CSS way:
+# الزاوية الداخلية اليمنى السفلية
+في حالتنا ، نحتاج إلى طرح حجم الحدود من الإحداثيات الخارجية.
+يمكننا استخدام طريقة CSS:
 
 ```js
 let answer4 = [
@@ -32,11 +30,12 @@ let answer4 = [
 ];
 ```
 
-An alternative way would be to add `clientWidth/clientHeight` to coordinates of the left-upper corner. That's probably even better:
+هناك طريقة بديلة تتمثل في إضافة "clientWidth / clientHeight" إلى إحداثيات الزاوية العلوية اليسرى. ربما هذا أفضل:
 
 ```js
 let answer4 = [
   coords.left + elem.clientLeft + elem.clientWidth,
   coords.top + elem.clientTop + elem.clientHeight
 ];
 ```
+

2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md

@@ -1,24 +1,24 @@
-importance: 5
+5
 
 ---
 
-# Find window coordinates of the field
+# البحث عن إحداثيات النافذة للحقل
 
-In the iframe below you can see a document with the green "field".
+في iframe أدناه ، يمكنك رؤية مستند يحتوي على "الحقل" الأخضر.
 
-Use JavaScript to find window coordinates of corners pointed by with arrows.
+استخدم JavaScript للعثور على إحداثيات النوافذ ذات الزوايا المشار إليها بالسهام.
 
-There's a small feature implemented in the document for convenience. A click at any place shows coordinates there.
+هناك ميزة صغيرة تم تنفيذها في المستند من أجل الراحة. تظهر نقرة في أي مكان إحداثيات هناك.
 
 [iframe border=1 height=360 src="source" link edit]
 
-Your code should use DOM to get window coordinates of:
+يجب أن يستخدم الرمز الخاص بك DOM للحصول على إحداثيات النافذة لـ:
 
-1. Upper-left, outer corner (that's simple).
-2. Bottom-right, outer corner (simple too).
-3. Upper-left, inner corner (a bit harder).
-4. Bottom-right, inner corner (there are several ways, choose one).
+1. الزاوية العلوية اليسرى ، (هذا بسيط).
+2. الزاوية اليمنى السفلية ، (بسيطة أيضًا).
+3. الزاوية اليسرى العليا ، الداخلية (أصعب قليلاً).
+4. الزاوية اليمنى السفلية (هناك عدة طرق ، اختر واحدة).
 
-The coordinates that you calculate should be the same as those returned by the mouse click.
+يجب أن تكون الإحداثيات التي تحسبها هي نفس الإحداثيات التي تم إرجاعها بواسطة النقر بالماوس.
 
-P.S. The code should also work if the element has another size or border, not bound to any fixed values.
+ملاحظة. يجب أن تعمل الشفرة أيضًا إذا كان للعنصر حجم أو حد آخر ، غير مرتبط بأي قيم ثابتة.

2-ui/1-document/11-coordinates/2-position-at/solution.md

@@ -1,4 +1,4 @@
-In this task we only need to accurately calculate the coordinates. See the code for details.
+في هذه المهمة نحتاج فقط لحساب الإحداثيات بدقة. انظر الرمز للحصول على التفاصيل.
 
-Please note: the elements must be in the document to read `offsetHeight` and other properties.
-A hidden (`display:none`) or out of the document element has no size.
+يرجى ملاحظة: يجب أن تكون العناصر في المستند لقراءة `offsetHeight` وخصائص أخرى.
+العنصر المخفي (`display: none`) أو خارج عنصر المستند ليس له حجم.

2-ui/1-document/11-coordinates/2-position-at/task.md

@@ -1,18 +1,18 @@
-importance: 5
-
+درجة الأهمية: 5
 ---
 
-# Show a note near the element
+# عرض ملاحظة بالقرب من العنصر
 
-Create a function `positionAt(anchor, position, elem)` that positions `elem`, depending on `position` near `anchor` element.
+إنشاء وظيفة `positionAt (مرساة ، موضع ، elem)` تضع مواضع `elem` ، اعتمادًا على` position` بالقرب من عنصر `anchor`.
 
-The `position` must be a string with any one of 3 values:
-- `"top"` - position `elem` right above `anchor`
-- `"right"` - position `elem` immediately at the right of `anchor`
-- `"bottom"` - position `elem` right below `anchor`
+يجب أن يكون "الموضع" عبارة عن سلسلة تحتوي على أي قيمة من 3 قيم:
+- `` top '' - ضع `elem` فوق` anchor` مباشرة
+- "" right "" - ضع "elem" مباشرة على يمين "anchor"
+- "أسفل" "- ضع" elem "أسفل" anchor "مباشرة
 
-It's used inside function `showNote(anchor, position, html)`, provided in the task source code, that creates a "note" element with given `html` and shows it at the given `position` near the `anchor`.
+يتم استخدامه داخل الوظيفة `showNote (anchor ، position ، html)` ، المتوفرة في شفرة مصدر المهمة ، والتي تنشئ عنصر "note" مع `html` معينًا وتعرضه في" الموضع "القريب من" anchor ".
 
-Here's the demo of notes:
+إليك عرض الملاحظات:
 
 [iframe src="solution" height="350" border="1" link]
+

2-ui/1-document/11-coordinates/3-position-at-absolute/solution.md

@@ -1,4 +1,4 @@
-The solution is actually pretty simple:
+الحل بسيط للغاية:
 
-- Use `position:absolute` in CSS instead of `position:fixed` for `.note`.
-- Use the function [getCoords()](info:coordinates#getCoords) from the chapter <info:coordinates> to get document-relative coordinates.
+- استخدم "الموضع: مطلق" في CSS بدلاً من "الموضع: ثابت" لـ ". ملاحظة".
+- استخدم الوظيفة [getCoords ()] (info: إحداثيات # getCoords) من الفصل <info: إحداثيات> للحصول على إحداثيات نسبية للdocument.

2-ui/1-document/11-coordinates/3-position-at-absolute/task.md

@@ -1,11 +1,12 @@
 importance: 5
+الأهمية: 5
 
 ---
 
-# Show a note near the element (absolute)
+# إظهار ملاحظة بالقرب من العنصر (مطلق)
 
-Modify the solution of the [previous task](info:task/position-at) so that the note uses `position:absolute` instead of `position:fixed`.
+قم بتعديل حل [المهمة السابقة] (info: task / position-at) بحيث تستخدم الملاحظة "الموضع: مطلق" بدلاً من "الموضع: ثابت".
 
-That will prevent its "runaway" from the element when the page scrolls.
+وذلك سيمنع "هربه" من العنصر عند تمرير الصفحة.
 
-Take the solution of that task as a starting point. To test the scroll, add the style `<body style="height: 2000px">`.
+خذ حل هذه المهمة كنقطة انطلاق. لاختبار التمرير ، أضف النمط `<body style =" height: 2000px ">`.

2-ui/1-document/11-coordinates/4-position-inside-absolute/task.md

@@ -1,17 +1,18 @@
-importance: 5
+الأهمية: 5
 
 ---
 
-# Position the note inside (absolute)
+# ضع الملاحظة في الداخل (مطلق)
 
-Extend the previous task <info:task/position-at-absolute>: teach the function  `positionAt(anchor, position, elem)` to insert `elem` inside the `anchor`.
+تمديد المهمة السابقة
+ <info:task/position-at-absolute>: علم الوظيفة `الموضع (المرساة ، الموضع ، العنصر)` لإدراج `عنصر` داخل` المرساة`.
 
-New values for `position`:
+القيم الجديدة لـ "الموضع":
 
-- `top-out`, `right-out`, `bottom-out` -- work the same as before, they insert the `elem` over/right/under `anchor`.
-- `top-in`, `right-in`, `bottom-in` -- insert `elem` inside the `anchor`: stick it to the upper/right/bottom edge.
+- `top-out` و` right-out` و` bottom-out` - تعمل كما كانت من قبل ، حيث تقوم بإدخال` elem` over / right / under `anchor`.
+- "أعلى" ، "يمين" ، "أسفل" - أدخل "عنصر" داخل "المرساة": ألصقه بالحافة العلوية / اليمنى / السفلية.
 
-For instance:
+على سبيل المثال:
 
 ```js
 // shows the note above blockquote
@@ -21,8 +22,8 @@ positionAt(blockquote, "top-out", note);
 positionAt(blockquote, "top-in", note);
 ```
 
-The result:
+النتائج:
 
-[iframe src="solution" height="310" border="1" link]
+[iframe src = "solution" height = "310" border = "1" link]
 
-As the source code, take the solution of the task <info:task/position-at-absolute>.
+كرمز المصدر ، خذ حل المهمة <info:task/position-at-absolute>.