Merge pull request #124 from javascript-tutorial/sync-445bda39

Sync with upstream @ 445bda3

Author: 3imed-jaberi

1-js/02-first-steps/09-comparison/article.md

@@ -9,7 +9,9 @@
 - يساوي: `a == b` ، يرجى ملاحظة أن علامة المساواة المزدوجة` = `تعني اختبار المساواة ، في حين أن كلمة واحدة` a = b` تعني  تعيين أو مساواة .
 - لا تساوي. في الرياضيات يكون الترميز <code>&ne;</code> ،لكن في JavaScript تكتب هكذا <code>a != b</code>.
 
-في هذه المقالة سنتعلم المزيد عن الأنواع المختلفة من المقارنات ، وكيف تجعلها JavaScript ، بما في ذلك الخصائص المهمة.
+في هذه المقالة سنتعلم المزيد عن الأنواع المختلفة من المقارنات ، وكيف تجعلها JavaScript، بما في ذلك الخصائص المهمة.
+
+في النهاية ستجد وصفة جيدة لتجنب المشاكل المتعلقة بـ "مراوغات JavaScript".
 
 ## Boolean هي النتيجة
 
@@ -201,9 +203,8 @@ alert( undefined == 0 ); // false (3)
 
 لماذا راجعنا هذه الأمثلة؟ هل يجب أن نتذكر هذه الخصائص المميزة طوال الوقت؟ حسنًا ، ليس حقًا. في الواقع ، ستصبح هذه الأشياء الصعبة مألوفة تدريجيًا بمرور الوقت ، ولكن هناك طريقة صلبة للتهرب من المشاكل معها:
 
-فقط تعامل مع أي مقارنة بـ "undefined / null" باستثناء المساواة الصارمة `===` مع رعاية استثنائية.
-
-لا تستخدم المقارنات `> => <<=` مع متغير قد يكون `فارغًا / غير محدد` ، ما لم تكن متأكدًا حقًا مما تفعله. إذا كان المتغير يمكن أن يكون له هذه القيم ، تحقق منها بشكل منفصل.
+- فقط تعامل مع أي مقارنة بـ "undefined / null" باستثناء المساواة الصارمة `===` مع رعاية استثنائية.
+- لا تستخدم المقارنات `> => <<=` مع متغير قد يكون `فارغًا / غير محدد` ، ما لم تكن متأكدًا حقًا مما تفعله. إذا كان المتغير يمكن أن يكون له هذه القيم ، تحقق منها بشكل منفصل.
 
 ## ملخص
 

1-js/05-data-types/02-number/article.md

@@ -121,8 +121,6 @@ alert( 123456..toString(36) ); // 2n9c
 | -1.1 | -2         | -1        | -1         | -1         |
 | -1.6 | -2         | -1        | -2         | -1         |
 
-
-
 تُعَطِّي هذه التوابع جميع الاحتمالات الممكنة للتعامل مع الجزء العشري للعدد، لكن ماذا إن كنا نريد تقريب العدد إلى خانة محدَّدة بعد الفاصلة العشرية؟
 
 مثلًا، لدينا العدد `1.2345` ونريد تقريب إلى خانتين لنحصل على `1.23` فقط. يوجد طريقتين للقيام بذلك:

1-js/09-classes/01-class/article.md

@@ -377,27 +377,6 @@ setTimeout(button.click, 1000); // undefined
 1. قم بتمرير دالة مجمعة ، مثل `setTimeout (() => button.click ()، 1000)`.
 2. ربط طريقة الاعتراض ، على سبيل المثال في المنشئ:
 
-```js run
-class Button {
-  constructor(value) {
-    this.value = value;
-*!*
-    this.click = this.click.bind(this);
-*/!*
-  }
-
-  click() {
-    alert(this.value);
-  }
-}
-
-let button = new Button("hello");
-
-*!*
-setTimeout(button.click, 1000); // hello
-*/!*
-```
-
 توفر حقول class بنية أكثر أناقة للحل الأخير:
 
 ```js run

1-js/09-classes/02-class-inheritance/article.md

@@ -232,7 +232,9 @@ let rabbit = new Rabbit("White Rabbit", 10); // Error: this is not defined.
 
 عفوًا! لدينا خطأ. الآن لا يمكننا إنشاء الأرانب. ماذا حصل؟
 
-الإجابة المختصرة هي: يجب على منشئو الفصول الموروثة استدعاء `super (...)` و (!) قبل ذلك باستخدام `this`.
+الاجابة السريعة:
+
+- **الإجابة المختصرة هي: يجب على منشئو الفصول الموروثة استدعاء `super (...)` و (!) قبل ذلك باستخدام `this`.**
 
 ...لكن لماذا؟ ماذا يجري هنا؟ في الواقع ، يبدو الشرط غريبًا.
 
@@ -280,6 +282,99 @@ alert(rabbit.earLength); // 10
 */!*
 ```
 
+### Overriding class fields: a tricky note
+
+```warn header="Advanced note"
+This note assumes you have a certain experience with classes, maybe in other programming languages.
+
+It provides better insight into the language and also explains the behavior that might be a source of bugs (but not very often).
+
+If you find it difficult to understand, just go on, continue reading, then return to it some time later.
+```
+
+We can override not only methods, but also class fields.
+
+Although, there's a tricky behavior when we access an overridden field in parent constructor, quite different from most other programming languages.
+
+Consider this example:
+
+```js run
+class Animal {
+  name = 'animal'
+
+  constructor() {
+    alert(this.name); // (*)
+  }
+}
+
+class Rabbit extends Animal {
+  name = 'rabbit';
+}
+
+new Animal(); // animal
+*!*
+new Rabbit(); // animal
+*/!*
+```
+
+Here, class `Rabbit` extends `Animal` and overrides `name` field with its own value.
+
+There's no own constructor in `Rabbit`, so `Animal` constructor is called.
+
+What's interesting is that in both cases: `new Animal()` and `new Rabbit()`, the `alert` in the line `(*)` shows `animal`.
+
+**In other words, parent constructor always uses its own field value, not the overridden one.**
+
+What's odd about it?
+
+If it's not clear yet, please compare with methods.
+
+Here's the same code, but instead of `this.name` field we call `this.showName()` method:
+
+```js run
+class Animal {
+  showName() {  // instead of this.name = 'animal'
+    alert('animal');
+  }
+
+  constructor() {
+    this.showName(); // instead of alert(this.name);
+  }
+}
+
+class Rabbit extends Animal {
+  showName() {
+    alert('rabbit');
+  }
+}
+
+new Animal(); // animal
+*!*
+new Rabbit(); // rabbit
+*/!*
+```
+
+Please note: now the output is different.
+
+And that's what we naturally expect. When the parent constructor is called in the derived class, it uses the overridden method.
+
+...But for class fields it's not so. As said, the parent constructor always uses the parent field.
+
+Why is there the difference?
+
+Well, the reason is in the field initialization order. The class field is initialized:
+- Before constructor for the base class (that doesn't extend anything),
+- Imediately after `super()` for the derived class.
+
+In our case, `Rabbit` is the derived class. There's no `constructor()` in it. As said previously, that's the same as if there was an empty constructor with only `super(...args)`.
+
+So, `new Rabbit()` calls `super()`, thus executing the parent constructor, and (per the rule for derived classes) only after that its class fields are initialized. At the time of the parent constructor execution, there are no `Rabbit` class fields yet, that's why `Animal` fields are used.
+
+This subtle difference between fields and methods is specific to JavaScript
+
+Luckily, this behavior only reveals itself if an overridden field is used in the parent constructor. Then it may be difficult to understand what's going on, so we're explaining it here.
+
+If it becomes a problem, one can fix it by using methods or getters/setters instead of fields.
 
 ## Super: الأجزاء الداخلية ، [[HomeObject]]
 
@@ -532,4 +627,4 @@ rabbit.eat();  // Error calling super (because there's no [[HomeObject]])
      - لذا ليس من الآمن نسخ طريقة باستخدام "super" من كائن إلى آخر.
 
 أيضا:
-- لا تحتوي وظائف السهم على "هذا" أو "فائق" خاص بها ، لذا فهي تتناسب بشفافية مع السياق المحيط.
+- لا تحتوي وظائف السهم على "هذا" أو "فائق" خاص بها ، لذا فهي تتناسب بشفافية مع السياق المحيط.

1-js/13-modules/01-modules-intro/article.md

@@ -1,4 +1,3 @@
-
 # مقدّمة إلى الوِحدات
 
 سنرى سريعًا بينما تطبيقنا يكبُر حجمًا وتعقيدًا بأنّ علينا تقسيمه إلى ملفات متعدّدة، أو ”وِحدات“ (module). عادةً ما تحتوي الوِحدة على صنف أو مكتبة فيها دوالّ.
@@ -57,6 +56,9 @@ sayHi('John'); // Hello, John!
 
 يجلب المتصفّح الوِحدة تلقائيًا ويقيم الشيفرة البرمجية بداخلها (ويستورد جميع الوحدات المتعلقة بها إن لزم الأمر)، وثمّ يشغلها.
 
+```warn header="Modules work only via HTTP(s), not in local files"
+If you try to open a web-page locally, via `file://` protocol, you'll find that `import/export` directives don't work. Use a local web-server, such as [static-server](https://www.npmjs.com/package/static-server#getting-started) or use the "live server" capability of your editor, such as VS Code [Live Server Extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) to test modules.
+```
 
 ## ميزات الوِحدات الأساسية
 =======

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

@@ -2,11 +2,11 @@
 
 The JavaScript language was initially created for web browsers. Since then it has evolved and become a language with many uses and platforms.
 
-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*.
+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*.
 
 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.
 
-Here's a bird's-eye view of what we have when JavaScript runs in a web-browser:
+Here's a bird's-eye view of what we have when JavaScript runs in a web browser:
 
 ![](windowObjects.svg)
 
@@ -49,9 +49,7 @@ document.body.style.background = "red";
 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** at <https://dom.spec.whatwg.org>
+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).
 
 ```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.
@@ -60,9 +58,9 @@ For instance, server-side scripts that download HTML pages and process them can
 ```
 
 ```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.
+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 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 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.
 ```
 
 ## BOM (Browser Object Model)

2-ui/1-document/07-modifying-document/article.md

@@ -48,54 +48,35 @@ DOM التعديل هو مفتاح إنشاء صفحات "حية".
     let textNode = document.createTextNode('Here I am');
     ```
 
+في حالتنا، تكون الرسالة `div` مع فئة` تنبيه 'و HTML فيها:
+
 ### إنشاء الرسالة
 
-في حالتنا ، تكون الرسالة `div` مع فئة` تنبيه 'و HTML فيها:
+في حالتنا، إنشاء `div` الرسالة ينطلب 3 مراحل:
 
 ```js
+// 1. Create <div> element
 let div = document.createElement('div');
+
+// 2. Set its class to "alert"
 div.className = "alert";
+
+// Fill it with the content
 div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
 ```
 
-لقد أنشأنا العنصر ، ولكن حتى الآن إنه متغير فقط. لا يمكننا رؤية العنصر على الصفحة ، لأنه ليس جزءًا من المستند حتى الآن.
+لقد أنشأنا العنصر ، ولكن حتى الآن إنه متغير فقط. لا يمكننا رؤية العنصر على الصفحة ، لأنه ليس جزءًا من المستند حتى الآن
 
 ## طرق الإدراج
 
-لعرض "div" ، نحتاج إلى إدراجه في مكان ما في "المستند". على سبيل المثال ، في `document.body`.
-
-هناك طريقة خاصة `append` لذلك:` document.body.append (div) `.
-
-إليك الكود الكامل:
-
-```html run height="80"
-<style>
-.alert {
-  padding: 15px;
-  border: 1px solid #d6e9c6;
-  border-radius: 4px;
-  color: #3c763d;
-  background-color: #dff0d8;
-}
-</style>
-
-<script>
-  let div = document.createElement('div');
-  div.className = "alert";
-  div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
-
-*!*
-  document.body.append(div);
-*/!*
-</script>
-```
+لعرض "div" ، نحتاج إلى إدراجه في مكان ما في "المستند". على سبيل المثال ، في `document.body`. هناك طريقة خاصة `append` لذلك:` document.body.append (div) `.
 
 توفر هذه المجموعة من الطرق المزيد من الطرق لإدراج:
 
 - `node.append (... nodes or strings)` - إلحاق عقد أو سلاسل في نهاية `node` ،
 - `node.prepend (... العقد أو السلاسل)` - إدراج العقد أو السلاسل في بداية `العقدة` ،
 - `node.before (... nodes or strings)` –- أدخل العقد أو السلاسل قبل `node` ،
-- `العقدة بعد (... العقد أو السلاسل)` - - إدراج العقد أو السلاسل بعد `العقدة` ،
+- `node.after(...nodes or strings)` - إدراج العقد أو السلاسل بعد `العقدة` ،
 - `node.replaceWith (... العقد أو السلاسل)` - - يستبدل `العقدة` بالعقد أو السلاسل المعطاة.
 
 فيما يلي مثال على استخدام هذه الأساليب لإضافة عناصر إلى قائمة والنص قبلها / بعدها:
@@ -150,7 +131,7 @@ after
 </script>
 ```
 
-يتم إدراج كل النص * كنص *.
+يتم إدراج كل النص * كنص *. 
 
 إذن HTML النهائي هو:
 
@@ -166,7 +147,7 @@ after
 
 لذلك ، لا يمكن استخدام هذه الطرق إلا لإدراج عقد DOM أو أجزاء نصية.
 
-ولكن ماذا لو أردنا إدراج HTML "كـ html" ، مع عمل جميع العلامات والأشياء ، مثل `elem.innerHTML`؟
+ولكن ماذا لو أردنا إدراج HTML "كـ html" ، مع عمل جميع العلامات والأشياء ، مثل `elem.innerHTML`?
 
 ## insertAdjacentHTML / Text / Element
 
@@ -545,4 +526,4 @@ ul.append(...getListContent()); // append + "..." operator = friends!
 - لإلحاق HTML بالصفحة قبل أن ينتهي التحميل:
     - `document.write (html)`
 
-    بعد تحميل الصفحة تقوم هذه المكالمة بمسح المستند. غالبا ما ينظر إليها في النصوص القديمة.
+    بعد تحميل الصفحة تقوم هذه المكالمة بمسح المستند. غالبا ما ينظر إليها في النصوص القديمة.

9-regular-expressions/06-regexp-boundary/article.md

@@ -25,7 +25,7 @@ So, it matches the pattern `pattern:\bHello\b`, because:
 
 1. At the beginning of the string matches the first test `pattern:\b`.
 2. Then matches the word `pattern:Hello`.
-3. Then the test `pattern:\b` matches again, as we're between `subject:o` and a space.
+3. Then the test `pattern:\b` matches again, as we're between `subject:o` and a comma.
 
 The pattern `pattern:\bHello\b` would also match. But not `pattern:\bHell\b` (because there's no word boundary after `l`) and not `Java!\b` (because the exclamation sign is not a wordly character `pattern:\w`, so there's no word boundary after it).