From d5429c857477348a235967e8f1c94fb9182f8393 Mon Sep 17 00:00:00 2001 From: Hanna parsa Date: Wed, 26 Jul 2023 14:08:00 +0330 Subject: [PATCH 01/24] Update article.md --- .../03-regexp-unicode/article.md | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/9-regular-expressions/03-regexp-unicode/article.md b/9-regular-expressions/03-regexp-unicode/article.md index 59e0dd2f9..decc5ac44 100644 --- a/9-regular-expressions/03-regexp-unicode/article.md +++ b/9-regular-expressions/03-regexp-unicode/article.md @@ -13,8 +13,9 @@ |𝒳| `0x1d4b3` | 4 | |𝒴| `0x1d4b4` | 4 | |😄| `0x1f604` | 4 | +|😍| `0x1F60D` |4| -بنابراین کاراکتر هایی مانند `a` و `≈` 2 بایت را اشغال می کنند، در حالی که کدهای `𝒳`، `𝒴` و `😄` طولانی تر هستند و 4 بایت دارند. +بنابراین کاراکتر هایی مانند `a` و `≈` 2 بایت را اشغال می کنند، در حالی که کدهای `𝒳`، `𝒴` و `😄`, `😍` طولانی تر هستند و 4 بایت دارند. مدت ها پیش، زمانی که زبان جاوااسکریپت ایجاد شد، رمزگذاری یونیکد ساده تر بود: هیچ کاراکتر 4 بایتی وجود نداشت. بنابراین برخی از ویژگی های زبان را به اشتباه مدیریت می کردند. @@ -25,7 +26,7 @@ alert('😄'.length); // 2 alert('𝒳'.length); // 2 ``` -...اما ما می توانیم ببینیم که فقط یک کاراکتر وجود دارد، درست است؟ نکته این است که `length` آن 4 بایت را به عنوان دو کاراکتر 2 بایتی در نظر می گیرد. این نادرست است، زیرا آنها باید فقط با هم در نظر گرفته شوند (به اصطلاح "surrogate pair"، می توانید در مورد آنها در مقاله بخوانید). +اما ما می توانیم ببینیم که فقط یک کاراکتر وجود دارد، درست است؟ نکته این است که `length` آن 4 بایت را به عنوان دو کاراکتر 2 بایتی در نظر می گیرد. این نادرست است، زیرا آنها باید فقط با هم در نظر گرفته شوند (به اصطلاح "surrogate pair"، می توانید در مورد آنها در مقاله بخوانید). به‌ طور پیش‌ فرض، عبارات باقاعده نیز "کاراکتر های طولانی" 4 بایتی را به عنوان یک جفت 2 بایتی در نظر می‌ گیرند. همانطور که در مورد رشته ها اتفاق می افتد، ممکن است به نتایج عجیب و غریب منجر شود. این را کمی بعد، در مقاله خواهیم دید. @@ -149,6 +150,19 @@ alert( str.match(regexp) ); // $2,€1,¥9 بعداً، در مقاله خواهیم دید که چگونه به دنبال اعدادی بگردیم که دارای ارقام زیادی هستند. +## کتابخانه ها + کتابخانه ها به مدیریت یونیکد در جاوا اسکریپت کمک می کنند: + + + در [XRegExp](https://xregexp.com/) که یک کتابخانه عبارات معمولی است و دارای یک افزونه رسمی برای تطبیق دسته‌ها، اسکریپت‌ها، بلوک‌ها و ویژگی‌های یونیکد است، از طریق یکی از دو ساختار زیر ساخته میشود: +- اولین ساختار: \p{...} \p{^...} \P{...} + +برای مثال، \p{Letter} با حروف الفبای مختلف مطابقت دارد در حالی که \p{^Letter} و \P{Letter} هر دو با سایر نقاط کد مطابقت دارند. [این مقاله](https://exploringjs.com/es5/ch30.html)شامل یک نمای کلی از XRegExp است. + + +- دومین ساختار: API بین‌المللی‌سازی ECMAScript که می توان به [API بین‌المللی‌سازی ECMAScript](https://exploringjs.com/es5/ch30.html#i18n_api) مراجعه کرد، ترکیب‌بندی آگاه از یونیکد (مرتب‌سازی و جستجوی رشته‌ها) و موارد دیگر را فراهم می‌کند. + + ## خلاصه پرچم `pattern:u` پشتیبانی از یونیکد را در عبارات منظم فعال می کند. From f8d6f3d0a20d8d203210a5d8f41dfc215a1c2d48 Mon Sep 17 00:00:00 2001 From: Hanna parsa Date: Wed, 26 Jul 2023 15:50:43 +0330 Subject: [PATCH 02/24] Update article.md --- 9-regular-expressions/03-regexp-unicode/article.md | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/9-regular-expressions/03-regexp-unicode/article.md b/9-regular-expressions/03-regexp-unicode/article.md index decc5ac44..4e57ead4e 100644 --- a/9-regular-expressions/03-regexp-unicode/article.md +++ b/9-regular-expressions/03-regexp-unicode/article.md @@ -150,22 +150,10 @@ alert( str.match(regexp) ); // $2,€1,¥9 بعداً، در مقاله خواهیم دید که چگونه به دنبال اعدادی بگردیم که دارای ارقام زیادی هستند. -## کتابخانه ها - کتابخانه ها به مدیریت یونیکد در جاوا اسکریپت کمک می کنند: - - - در [XRegExp](https://xregexp.com/) که یک کتابخانه عبارات معمولی است و دارای یک افزونه رسمی برای تطبیق دسته‌ها، اسکریپت‌ها، بلوک‌ها و ویژگی‌های یونیکد است، از طریق یکی از دو ساختار زیر ساخته میشود: -- اولین ساختار: \p{...} \p{^...} \P{...} - -برای مثال، \p{Letter} با حروف الفبای مختلف مطابقت دارد در حالی که \p{^Letter} و \P{Letter} هر دو با سایر نقاط کد مطابقت دارند. [این مقاله](https://exploringjs.com/es5/ch30.html)شامل یک نمای کلی از XRegExp است. - - -- دومین ساختار: API بین‌المللی‌سازی ECMAScript که می توان به [API بین‌المللی‌سازی ECMAScript](https://exploringjs.com/es5/ch30.html#i18n_api) مراجعه کرد، ترکیب‌بندی آگاه از یونیکد (مرتب‌سازی و جستجوی رشته‌ها) و موارد دیگر را فراهم می‌کند. - ## خلاصه -پرچم `pattern:u` پشتیبانی از یونیکد را در عبارات منظم فعال می کند. +پرچم `pattern:u` پشتیبانی از یونیکد را در عبارات منظم فعال می کند. یعنی دو چیز: From 40709205bee8c7f5825e570094f52599468efd80 Mon Sep 17 00:00:00 2001 From: Hanna parsa Date: Wed, 26 Jul 2023 16:07:40 +0330 Subject: [PATCH 03/24] Update article.md --- 2-ui/2-events/05-dispatch-events/article.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index 047413fd3..2eb1ec182 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -1,16 +1,15 @@ # Dispatching custom events -We can not only assign handlers, but also generate events from JavaScript. +ما نه تنها می توانیم کنترل کننده ها را اختصاص دهیم، بلکه می توانیم رویدادها را از جاوا اسکریپت نیز تولید کنیم. -Custom events can be used to create "graphical components". For instance, a root element of our own JS-based menu may trigger events telling what happens with the menu: `open` (menu open), `select` (an item is selected) and so on. Another code may listen for the events and observe what's happening with the menu. - -We can generate not only completely new events, that we invent for our own purposes, but also built-in ones, such as `click`, `mousedown` etc. That may be helpful for automated testing. +از رویدادهای سفارشی می توان برای ایجاد "مولفه های گرافیکی" استفاده کرد. به عنوان مثال، یک عنصر ریشه از منوی مبتنی بر JS خودمان ممکن است رویدادهایی را ایجاد کند که می‌گوید چه اتفاقی در منو می‌افتد: باز کردن (باز کردن منو)، انتخاب (یک مورد انتخاب شده است) و غیره. کد دیگری ممکن است به رویدادها گوش دهد و آنچه را که در منو اتفاق می افتد مشاهده کند. +ما می‌توانیم نه تنها رویدادهای کاملاً جدیدی را که برای اهداف خود اختراع می‌کنیم، بلکه همچنین رویدادهای داخلی مانند کلیک، پایین آوردن ماوس و غیره را ایجاد کنیم. ممکن است برای آزمایش خودکار مفید باشد. ## Event constructor -Built-in event classes form a hierarchy, similar to DOM element classes. The root is the built-in [Event](https://dom.spec.whatwg.org/#events) class. +کلاس های رویداد داخلی یک سلسله مراتب را تشکیل می دهند، مشابه کلاس های عنصر DOM. ریشه کلاس رویداد داخلی است. -We can create `Event` objects like this: +ما می توانیم اشیاء رویداد را مانند این ایجاد کنیم: [Event](https://dom.spec.whatwg.org/#events) ```js let event = new Event(type[, options]); From e7e49b264600d1dfcd41a190bb38c9815b03fb04 Mon Sep 17 00:00:00 2001 From: Hanna parsa Date: Wed, 26 Jul 2023 16:29:01 +0330 Subject: [PATCH 04/24] Update article.md --- 2-ui/2-events/05-dispatch-events/article.md | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index 2eb1ec182..88e00599a 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -15,14 +15,11 @@ let event = new Event(type[, options]); ``` -Arguments: +پارامتر ها: -- *type* -- event type, a string like `"click"` or our own like `"my-event"`. -- *options* -- the object with two optional properties: - - `bubbles: true/false` -- if `true`, then the event bubbles. - - `cancelable: true/false` -- if `true`, then the "default action" may be prevented. Later we'll see what it means for custom events. - - By default both are false: `{bubbles: false, cancelable: false}`. +- *نوع*: event type, یک رشته مانند `"click"` . +- *گزینه ها*: شی ای با دو ویژگی اختیاری. +- *لغو شدن (true/false)*: اگر ویزگی مقدار true را داشت عمل پیش فرض آن لغو میشود، ## dispatchEvent From 702fc03e6c65552806c9b87aac91bac4e3d7b0b5 Mon Sep 17 00:00:00 2001 From: Hanna parsa Date: Wed, 26 Jul 2023 16:41:18 +0330 Subject: [PATCH 05/24] Revert "Update article.md" --- 2-ui/2-events/05-dispatch-events/article.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index 88e00599a..2eb1ec182 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -15,11 +15,14 @@ let event = new Event(type[, options]); ``` -پارامتر ها: +Arguments: -- *نوع*: event type, یک رشته مانند `"click"` . -- *گزینه ها*: شی ای با دو ویژگی اختیاری. -- *لغو شدن (true/false)*: اگر ویزگی مقدار true را داشت عمل پیش فرض آن لغو میشود، +- *type* -- event type, a string like `"click"` or our own like `"my-event"`. +- *options* -- the object with two optional properties: + - `bubbles: true/false` -- if `true`, then the event bubbles. + - `cancelable: true/false` -- if `true`, then the "default action" may be prevented. Later we'll see what it means for custom events. + + By default both are false: `{bubbles: false, cancelable: false}`. ## dispatchEvent From d337c08f8cbcd066532daeb61cc42d1565a4fe67 Mon Sep 17 00:00:00 2001 From: Hanna parsa Date: Sat, 5 Aug 2023 08:15:14 +0330 Subject: [PATCH 06/24] Update article.md --- 2-ui/2-events/05-dispatch-events/article.md | 27 +++++++++------------ 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index 2eb1ec182..1464f3579 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -1,6 +1,6 @@ # Dispatching custom events -ما نه تنها می توانیم کنترل کننده ها را اختصاص دهیم، بلکه می توانیم رویدادها را از جاوا اسکریپت نیز تولید کنیم. +ما نه تنها می توانیم handler ها را اختصاص دهیم، بلکه می توانیم رویدادها را از جاوا اسکریپت نیز تولید کنیم. از رویدادهای سفارشی می توان برای ایجاد "مولفه های گرافیکی" استفاده کرد. به عنوان مثال، یک عنصر ریشه از منوی مبتنی بر JS خودمان ممکن است رویدادهایی را ایجاد کند که می‌گوید چه اتفاقی در منو می‌افتد: باز کردن (باز کردن منو)، انتخاب (یک مورد انتخاب شده است) و غیره. کد دیگری ممکن است به رویدادها گوش دهد و آنچه را که در منو اتفاق می افتد مشاهده کند. @@ -15,23 +15,22 @@ let event = new Event(type[, options]); ``` +پارامتر ها: Arguments: -- *type* -- event type, a string like `"click"` or our own like `"my-event"`. -- *options* -- the object with two optional properties: - - `bubbles: true/false` -- if `true`, then the event bubbles. - - `cancelable: true/false` -- if `true`, then the "default action" may be prevented. Later we'll see what it means for custom events. - - By default both are false: `{bubbles: false, cancelable: false}`. +- *نوع*: event type, یک رشته مانند `"click"` . +- *گزینه ها*: شی ای با دو ویژگی اختیاری. +- *Bubbles*:اگر true بود یعنی bubbled می شود. +- *لغو شدن (true/false)*: اگر ویزگی مقدار true را داشت عمل پیش فرض آن لغو میشود، +- به صورت پیش فرض: `{bubbles: false, cancelable: false}`. ## dispatchEvent -After an event object is created, we should "run" it on an element using the call `elem.dispatchEvent(event)`. - -Then handlers react on it as if it were a regular browser event. If the event was created with the `bubbles` flag, then it bubbles. +پس از ایجاد یک event، باید آن را روی یک element با استفاده از فراخوانی elem.dispatchEvent(event) اجرا کنیم. -In the example below the `click` event is initiated in JavaScript. The handler works same way as if the button was clicked: +سپس handler ها به آن واکنش نشان می دهند که گویی یک رویداد معمولی مرورگر است. اگر رویداد با bubble flag ها ایجاد شده باشد، bubbled می شود. +در مثال زیر رویداد کلیک در جاوا اسکریپت آغاز می شود. handler به همان روشی کار می کند که اگر روی دکمه کلیک شده باشد: ```html run no-beautify @@ -41,11 +40,9 @@ In the example below the `click` event is initiated in JavaScript. The handler w ``` -```smart header="event.isTrusted" -There is a way to tell a "real" user event from a script-generated one. +راهی برای تشخیص یک user event "واقعی" از event تولید شده توسط اسکریپت وجود دارد. -The property `event.isTrusted` is `true` for events that come from real user actions and `false` for script-generated events. -``` +ویژگی 'event.isTrusted' برای رویدادهایی که از اقدامات واقعی کاربر ناشی می شوند 'true' و برای رویدادهای تولید شده توسط اسکریپت 'false' است. ## Bubbling example From b2684dce41f2d60b5161c4e0a1d9e3d11024280f Mon Sep 17 00:00:00 2001 From: Hanna parsa Date: Mon, 7 Aug 2023 21:41:55 +0330 Subject: [PATCH 07/24] Update article.md --- 2-ui/2-events/05-dispatch-events/article.md | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index 1464f3579..63231455b 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -24,25 +24,6 @@ Arguments: - *لغو شدن (true/false)*: اگر ویزگی مقدار true را داشت عمل پیش فرض آن لغو میشود، - به صورت پیش فرض: `{bubbles: false, cancelable: false}`. -## dispatchEvent - -پس از ایجاد یک event، باید آن را روی یک element با استفاده از فراخوانی elem.dispatchEvent(event) اجرا کنیم. - -سپس handler ها به آن واکنش نشان می دهند که گویی یک رویداد معمولی مرورگر است. اگر رویداد با bubble flag ها ایجاد شده باشد، bubbled می شود. - -در مثال زیر رویداد کلیک در جاوا اسکریپت آغاز می شود. handler به همان روشی کار می کند که اگر روی دکمه کلیک شده باشد: -```html run no-beautify - - - -``` - -راهی برای تشخیص یک user event "واقعی" از event تولید شده توسط اسکریپت وجود دارد. - -ویژگی 'event.isTrusted' برای رویدادهایی که از اقدامات واقعی کاربر ناشی می شوند 'true' و برای رویدادهای تولید شده توسط اسکریپت 'false' است. ## Bubbling example From a3969ad7e65ee564f6419c26579bb4c2cfaeec74 Mon Sep 17 00:00:00 2001 From: Hanna parsa Date: Mon, 7 Aug 2023 22:28:43 +0330 Subject: [PATCH 08/24] Update article.md Translated until Custom Events --- 2-ui/2-events/05-dispatch-events/article.md | 57 ++++++++++++++------- 1 file changed, 39 insertions(+), 18 deletions(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index 63231455b..df43d117c 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -2,7 +2,9 @@ ما نه تنها می توانیم handler ها را اختصاص دهیم، بلکه می توانیم رویدادها را از جاوا اسکریپت نیز تولید کنیم. -از رویدادهای سفارشی می توان برای ایجاد "مولفه های گرافیکی" استفاده کرد. به عنوان مثال، یک عنصر ریشه از منوی مبتنی بر JS خودمان ممکن است رویدادهایی را ایجاد کند که می‌گوید چه اتفاقی در منو می‌افتد: باز کردن (باز کردن منو)، انتخاب (یک مورد انتخاب شده است) و غیره. کد دیگری ممکن است به رویدادها گوش دهد و آنچه را که در منو اتفاق می افتد مشاهده کند. +از رویدادهای سفارشی می توان برای ایجاد "مولفه های گرافیکی" استفاده کرد. به عنوان مثال، یک عنصر ریشه از منوی مبتنی بر JS خودمان ممکن است رویدادهایی را ایجاد کند که می‌گوید چه اتفاقی در منو می‌افتد: + +باز کردن (باز کردن منو)، انتخاب (یک مورد انتخاب شده است) و غیره. کد دیگری ممکن است به رویدادها گوش دهد و آنچه را که در منو اتفاق می افتد مشاهده کند. ما می‌توانیم نه تنها رویدادهای کاملاً جدیدی را که برای اهداف خود اختراع می‌کنیم، بلکه همچنین رویدادهای داخلی مانند کلیک، پایین آوردن ماوس و غیره را ایجاد کنیم. ممکن است برای آزمایش خودکار مفید باشد. ## Event constructor @@ -23,13 +25,34 @@ Arguments: - *Bubbles*:اگر true بود یعنی bubbled می شود. - *لغو شدن (true/false)*: اگر ویزگی مقدار true را داشت عمل پیش فرض آن لغو میشود، - به صورت پیش فرض: `{bubbles: false, cancelable: false}`. + + ## dispatchEvent + +پس از ایجاد یک event، باید آن را روی یک element با استفاده از فراخوانی elem.dispatchEvent(event) اجرا کنیم. + +سپس handler ها به آن واکنش نشان می دهند که گویی یک رویداد معمولی مرورگر است. اگر رویداد با bubble flag ها ایجاد شده باشد، bubbled می شود. + +در مثال زیر رویداد کلیک در جاوا اسکریپت آغاز می شود. handler به همان روشی کار می کند که اگر روی دکمه کلیک شده باشد: +```html run no-beautify + + + +``` + +راهی برای تشخیص یک user event "واقعی" از event تولید شده توسط اسکریپت وجود دارد. + +ویژگی 'event.isTrusted' برای رویدادهایی که از اقدامات واقعی کاربر ناشی می شوند 'true' و برای رویدادهای تولید شده توسط اسکریپت 'false' است. ## Bubbling example -We can create a bubbling event with the name `"hello"` and catch it on `document`. -All we need is to set `bubbles` to `true`: +می‌توانیم یک bubbling event با نام `"hello"` ایجاد کنیم و آن را در `document` بگیریم. + +تنها چیزی که نیاز داریم این است که `bubbles` را روی "true" تنظیم کنیم: ```html run no-beautify

Hello from the script!

@@ -50,16 +73,16 @@ All we need is to set `bubbles` to `true`: ``` -Notes: +نکات: -1. We should use `addEventListener` for our custom events, because `on` only exists for built-in events, `document.onhello` doesn't work. -2. Must set `bubbles:true`, otherwise the event won't bubble up. +1. باید از `addEventListener` برای custom کردن event ها استفاده کرد، زیرا `on` فقط برای built-in event وجود دارد و `document.onhello` کار نمیکند. +2. باید `bubbles:true` را set کنیم مگرنه event bubble up نخواهد شد. -The bubbling mechanics is the same for built-in (`click`) and custom (`hello`) events. There are also capturing and bubbling stages. +مکانیک bubbling برای built-in (`click`) و custom (`hello`) یکسان است. هم چنین مراحلی برای گرفتن و bubbling نیز وجود دارد. ## MouseEvent, KeyboardEvent and others -Here's a short list of classes for UI Events from the [UI Event specification](https://www.w3.org/TR/uievents): +موارد زیر شامل یک لیست کوتاه از کلاس هایی برای UI Events از [UI Event specification](https://www.w3.org/TR/uievents) هستند: - `UIEvent` - `FocusEvent` @@ -68,11 +91,11 @@ Here's a short list of classes for UI Events from the [UI Event specification](h - `KeyboardEvent` - ... -We should use them instead of `new Event` if we want to create such events. For instance, `new MouseEvent("click")`. - -The right constructor allows to specify standard properties for that type of event. + اگر میخواهید رویدادی به وجود بیاوریم، باید به جای `new Event` از کلاس های بالا استفاده کنیم. برای مثال `new MouseEvent("click")`. + + انتخاب constructor درست این امکان را میدهد که property های استاندارد را برای هر نوع از event مشخص کنیم. -Like `clientX/clientY` for a mouse event: + مانند `clientX/clientY` برای mouse event: ```js run let event = new MouseEvent("click", { @@ -86,10 +109,9 @@ let event = new MouseEvent("click", { alert(event.clientX); // 100 */!* ``` +لطفا به یاد داشته باشد: constructor های generic `Event` اجازه این کار را نمیدهد. -Please note: the generic `Event` constructor does not allow that. - -Let's try: +بیایید این روش را امتحان کنیم: ```js run let event = new Event("click", { @@ -103,10 +125,9 @@ let event = new Event("click", { alert(event.clientX); // undefined, the unknown property is ignored! */!* ``` +از نظر فنی، می‌توانیم با اختصاص مستقیم `event.clientX=100` پس از ایجاد، آن را حل کنیم. بنابراین این موضوع راحت و پیروی از قوانین است. event های ایجاد شده توسط مرورگر همیشه نوع مناسبی دارند. -Technically, we can work around that by assigning directly `event.clientX=100` after creation. So that's a matter of convenience and following the rules. Browser-generated events always have the right type. - -The full list of properties for different UI events is in the specification, for instance, [MouseEvent](https://www.w3.org/TR/uievents/#mouseevent). +لیست کاملی از property ها برای event های مختلف UI به تفکیک، برای مثال، [MouseEvent](https://www.w3.org/TR/uievents/#mouseevent). ## Custom events From 6d7d1a501d2d386f405aabd47438c4bc938522a8 Mon Sep 17 00:00:00 2001 From: Hanna parsa Date: Sat, 12 Aug 2023 10:47:41 +0330 Subject: [PATCH 09/24] Update article.md --- 2-ui/2-events/05-dispatch-events/article.md | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index df43d117c..4a6adab6b 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -130,12 +130,11 @@ alert(event.clientX); // undefined, the unknown property is ignored! لیست کاملی از property ها برای event های مختلف UI به تفکیک، برای مثال، [MouseEvent](https://www.w3.org/TR/uievents/#mouseevent). ## Custom events +برای انواع events های کاملاً جدید خودمان مانند `"hello"` باید از "CustomEvent جدید" استفاده کنیم. از نظر فنی [CustomEvent](https://dom.spec.whatwg.org/#customevent) با «رویداد» یکسان است،البته با یک استثنا. -For our own, completely new events types like `"hello"` we should use `new CustomEvent`. Technically [CustomEvent](https://dom.spec.whatwg.org/#customevent) is the same as `Event`, with one exception. +در آرگومان دوم (object) می‌توانیم یک ویژگی «detail» برای هر اطلاعات که می‌خواهیم با event ارسال کنیم، اضافه کنیم. -In the second argument (object) we can add an additional property `detail` for any custom information that we want to pass with the event. - -For instance: +برای مثال: ```html run refresh

Hello for John!

@@ -153,10 +152,9 @@ For instance: })); ``` +ویژگی "detail" می تواند هر داده ای را داشته باشد. از نظر فنی می‌توانیم بدون آن زندگی کنیم، زیرا می‌توانیم هر ویژگی را پس از ایجاد یک شی `new Event` معمولی به آن اختصاص دهیم. اما `CustomEvent` فیلد `detail` ویژه ای را برای جلوگیری از conflicts با سایر properti های رویداد فراهم می کند. -The `detail` property can have any data. Technically we could live without, because we can assign any properties into a regular `new Event` object after its creation. But `CustomEvent` provides the special `detail` field for it to evade conflicts with other event properties. - -Besides, the event class describes "what kind of event" it is, and if the event is custom, then we should use `CustomEvent` just to be clear about what it is. +علاوه بر این، event class توضیح می‌دهد که «چه نوع رویدادی» است، و اگر event is custom است، باید از `CustomEvent` استفاده کنیم تا مشخص شود که چیست. ## event.preventDefault() From e7c014504562c9865d1a814768d32b261bbb3b87 Mon Sep 17 00:00:00 2001 From: Hanna parsa Date: Sat, 12 Aug 2023 10:58:18 +0330 Subject: [PATCH 10/24] Update article.md --- 2-ui/2-events/05-dispatch-events/article.md | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index 4a6adab6b..b6078fca1 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -158,19 +158,19 @@ alert(event.clientX); // undefined, the unknown property is ignored! ## event.preventDefault() -Many browser events have a "default action", such as navigating to a link, starting a selection, and so on. +بسیاری از رویدادهای مرورگر دارای یک "default action" هستند، مانند پیمایش یک لینک، شروع یک انتخاب و غیره. -For new, custom events, there are definitely no default browser actions, but a code that dispatches such event may have its own plans what to do after triggering the event. +برای event های جدید و custom events، قطعاً هیچ اقدام پیش‌فرض مرورگر وجود ندارد، اما کدی که چنین رویدادی را ارسال می‌کند ممکن است برنامه‌های خاص خود را داشته باشد که پس از راه‌اندازی رویداد چه کاری انجام دهد. -By calling `event.preventDefault()`, an event handler may send a signal that those actions should be canceled. +با فراخوانی `event.preventDefault()`، یک کنترل کننده رویداد ممکن است سیگنالی ارسال کند که آن اقدامات باید لغو شوند. -In that case the call to `elem.dispatchEvent(event)` returns `false`. And the code that dispatched it knows that it shouldn't continue. +در آن صورت فراخوانی به `elem.dispatchEvent(event)` false برمی گردد. و کدی که آن را ارسال کرده می داند که نباید ادامه یابد. -Let's see a practical example - a hiding rabbit (could be a closing menu or something else). +بیایید یک مثال عملی ببینیم - یک خرگوش پنهان (ممکن است منوی بسته شدن یا چیز دیگری باشد). -Below you can see a `#rabbit` and `hide()` function that dispatches `"hide"` event on it, to let all interested parties know that the rabbit is going to hide. +در زیر می‌توانید یک تابع #rabbit and hide() را مشاهده کنید که رویداد "hide" را روی آن ارسال می‌کند تا به همه علاقه‌مندان اطلاع دهد که خرگوش قرار است مخفی شود. -Any handler can listen for that event with `rabbit.addEventListener('hide',...)` and, if needed, cancel the action using `event.preventDefault()`. Then the rabbit won't disappear: +هر کنترل‌کننده‌ای می‌تواند با `rabbit.addEventListener('hide',...)` به آن رویداد گوش دهد و در صورت نیاز، عمل را با استفاده از `event.preventDefault()` لغو کند. سپس خرگوش ناپدید نمی شود: ```html run refresh autorun
@@ -201,8 +201,7 @@ Any handler can listen for that event with `rabbit.addEventListener('hide',...)`
   });
 
 ```
-
-Please note: the event must have the flag `cancelable: true`, otherwise the call `event.preventDefault()` is ignored.
+نکته: event  حتما باید  flag `cancelable: true` را داشته باشد یا اینکه `event.preventDefault()` فراخوانی نمیشود. 
 
 ## Events-in-events are synchronous
 

From ab1a69931301a73900a3b39c46575afb41521bc7 Mon Sep 17 00:00:00 2001
From: Hanna parsa 
Date: Sat, 12 Aug 2023 12:05:00 +0330
Subject: [PATCH 11/24] Update article.md

---
 2-ui/2-events/05-dispatch-events/article.md | 24 +++++++++++----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md
index b6078fca1..ace473969 100644
--- a/2-ui/2-events/05-dispatch-events/article.md
+++ b/2-ui/2-events/05-dispatch-events/article.md
@@ -205,14 +205,15 @@ alert(event.clientX); // undefined, the unknown property is ignored!
 
 ## Events-in-events are synchronous
 
-Usually events are processed in a queue. That is: if the browser is processing `onclick` and a new event occurs, e.g. mouse moved, then its handling is queued up, corresponding `mousemove` handlers will be called after `onclick` processing is finished.
+معمولا رویدادها در یک صف پردازش می شوند. یعنی: اگر مرورگر در حال پردازش `onclick` باشد و یک رویداد جدید رخ دهد، به عنوان مثال: ماوس حرکت می کند، سپس handling آن در صف قرار می گیرد، پس از اتمام پردازش `onclick`، کنترل کننده های مربوط به `mousemove` فراخوانی می شوند.
 
-The notable exception is when one event is initiated from within another one, e.g. using `dispatchEvent`. Such events are processed immediately: the new event handlers are called, and then the current event handling is resumed.
+استثنا قابل توجه زمانی است که یک رویداد از درون رویداد دیگری آغاز می شود، به عنوان مثال: با استفاده از `dispatchEvent` چنین رویدادهایی بلافاصله پردازش می‌شوند: کنترل‌کننده‌های رویداد جدید فراخوانی می‌شوند و سپس مدیریت رویداد فعلی از سر گرفته می‌شود.
 
-For instance, in the code below the `menu-open` event is triggered during the `onclick`.
+به عنوان مثال، در کد زیر، رویداد  `menu-open` در حین کلیک فعال می شود.
 
-It's processed immediately, without waiting for `onclick` handler to end:
+بلافاصله پردازش می شود، بدون اینکه منتظر پایان کنترل کننده `onclick` باشد:
 
+بدون اینکه برای `onclick` handler صبر کند تا تمام شود، شروع به process شدن میشود:   
 
 ```html run autorun
 
@@ -233,15 +234,15 @@ It's processed immediately, without waiting for `onclick` handler to end:
 
 ```
 
-The output order is: 1 -> nested -> 2.
+ترتیب خروجی این است: 1 -> nested -> 2.
 
-Please note that the nested event `menu-open` is caught on the `document`. The propagation and handling of the nested event is finished before the processing gets back to the outer code (`onclick`).
+لطفاً توجه داشته باشید که منوی رویداد تودرتو که باز است در `document` وجود دارد. انتشار و مدیریت رویداد تودرتو قبل از اینکه پردازش به کد خارجی بازگردد (`onclick`) به پایان می رسد.
 
-That's not only about `dispatchEvent`, there are other cases. If an event handler calls methods that trigger other events -- they are processed synchronously too, in a nested fashion.
+این فقط مربوط به `dispatchEvent` نیست، موارد دیگری نیز وجود دارد. اگر یک کنترل کننده رویداد متدهایی را فراخوانی کند که رویدادهای دیگر را راه‌اندازی می‌کنند، آنها نیز به صورت همزمان و به صورت تودرتو پردازش می‌شوند.
 
-Let's say we don't like it. We'd want `onclick` to be fully processed first, independently from `menu-open` or any other nested events.
+بیایید بگوییم که آن را دوست نداریم. ما می خواهیم ابتدا `onclick` به طور کامل پردازش شود، مستقل از `menu-open` یا هر رویداد تو در تو.
 
-Then we can either put the `dispatchEvent` (or another event-triggering call) at the end of `onclick` or, maybe better, wrap it in the zero-delay `setTimeout`:
+سپس می‌توانیم `dispatchEvent` (یا یک تماس event-triggering) را در انتهای `onclick` قرار دهیم یا، شاید بهتر، آن را در `setTimeout` با تاخیر صفر قرار دهیم:
 
 ```html run
 
@@ -260,10 +261,11 @@ Then we can either put the `dispatchEvent` (or another event-triggering call) at
   document.addEventListener('menu-open', () => alert('nested'));
 
 ```
+حالا `dispatchEvent` یه صورت asynchronously بعد از اینکه اجرای کد فعلی به اتمام رسید،  run  میشود، که شامل `menu.onclick`. پس event handler ها به صورت جدت و مستقل فعالیت میکنند. 
+
+خروجی خ.اهد بود:1 -> 2 -> nested.
 
-Now `dispatchEvent` runs asynchronously after the current code execution is finished, including `menu.onclick`, so event handlers are totally separate.
 
-The output order becomes: 1 -> 2 -> nested.
 
 ## Summary
 

From 6bd31dc1f1cff1f124b8ad0b2f5ac72578313290 Mon Sep 17 00:00:00 2001
From: Hanna parsa 
Date: Sat, 12 Aug 2023 13:35:21 +0330
Subject: [PATCH 12/24] Update article.md

---
 2-ui/2-events/05-dispatch-events/article.md | 27 ++++++++++-----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md
index ace473969..d4f91a723 100644
--- a/2-ui/2-events/05-dispatch-events/article.md
+++ b/2-ui/2-events/05-dispatch-events/article.md
@@ -234,8 +234,7 @@ alert(event.clientX); // undefined, the unknown property is ignored!
 
 ```
 
-ترتیب خروجی این است: 1 -> nested -> 2.
-
+ترتیب خروجی این است: 1 -> تودرتو (nested) -> 2 
 لطفاً توجه داشته باشید که منوی رویداد تودرتو که باز است در `document` وجود دارد. انتشار و مدیریت رویداد تودرتو قبل از اینکه پردازش به کد خارجی بازگردد (`onclick`) به پایان می رسد.
 
 این فقط مربوط به `dispatchEvent` نیست، موارد دیگری نیز وجود دارد. اگر یک کنترل کننده رویداد متدهایی را فراخوانی کند که رویدادهای دیگر را راه‌اندازی می‌کنند، آنها نیز به صورت همزمان و به صورت تودرتو پردازش می‌شوند.
@@ -269,23 +268,23 @@ alert(event.clientX); // undefined, the unknown property is ignored!
 
 ## Summary
 
-To generate an event from code, we first need to create an event object.
+برای تولید یک event code، ابتدا باید یک event object ایجاد کنیم.
 
-The generic `Event(name, options)` constructor accepts an arbitrary event name and the `options` object with two properties:
-- `bubbles: true` if the event should bubble.
-- `cancelable: true` if the `event.preventDefault()` should work.
+سازنده  `Event(name, options)` یک نام رویداد دلخواه و `options` object را با دو ویژگی می‌پذیرد:
+-  `bubbles: true` اگر رویداد باید حباب شود.
+- `cancelable: true`  اگر `event.preventDefault()` باید کار کند.
 
-Other constructors of native events like `MouseEvent`, `KeyboardEvent` and so on accept properties specific to that event type. For instance, `clientX` for mouse events.
+سایر سازنده‌های native events مانند `MouseEvent`, `KeyboardEvent` و غیره ویژگی‌های خاص آن نوع رویداد را می‌پذیرند. به عنوان مثال، `clientX` برای رویدادهای ماوس.
 
-For custom events we should use `CustomEvent` constructor. It has an additional option named `detail`, we should assign the event-specific data to it. Then all handlers can access it as `event.detail`.
+برای custom events باید از سازنده `CustomEvent` استفاده کنیم. این یک گزینه اضافی به نام `detail` دارد، ما باید داده های رویداد خاص را به آن اختصاص دهیم. سپس همه کنترل کننده ها می توانند به عنوان `event.detail` به آن دسترسی داشته باشند.
 
-Despite the technical possibility of generating browser events like `click` or `keydown`, we should use them with great care.
+علیرغم امکان فنی ایجاد browser events مانند `click` یا `keydown`، ما باید با دقت زیادی از آنها استفاده کنیم.
 
-We shouldn't generate browser events as it's a hacky way to run handlers. That's bad architecture most of the time.
+ما نباید browser events را ایجاد کنیم زیرا این یک روش هک برای اجرای کنترلرها است. این معماری در بیشتر مواقع بد است.
 
-Native events might be generated:
+هم چنین native events ممکن است ایجاد شوند:
 
-- As a dirty hack to make 3rd-party libraries work the needed way, if they don't provide other means of interaction.
-- For automated testing, to "click the button" in the script and see if the interface reacts correctly.
+- به عنوان یک dirty hack برای اینکه کتابخانه های شخص ثالث به روش مورد نیاز کار کنند، اگر ابزارهای تعامل دیگری را ارائه ندهند.
+- برای تست خودکار، روی دکمه "click the button" در اسکریپت و ببینید که آیا رابط به درستی واکنش نشان می دهد.
 
-Custom events with our own names are often generated for architectural purposes, to signal what happens inside our menus, sliders, carousels etc.
+ همک چنین custom events با نام خود ما اغلب برای مقاصد معماری ایجاد می شوند تا نشان دهند که چه اتفاقی در منوها، اسلایدر ها و غیره می افتد.

From 2f165631a63a9cd370b5fff057f1e6514c6c3c57 Mon Sep 17 00:00:00 2001
From: Hanna parsa 
Date: Sat, 12 Aug 2023 13:42:48 +0330
Subject: [PATCH 13/24] Update article.md

---
 9-regular-expressions/03-regexp-unicode/article.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/9-regular-expressions/03-regexp-unicode/article.md b/9-regular-expressions/03-regexp-unicode/article.md
index 4e57ead4e..de2ddde2c 100644
--- a/9-regular-expressions/03-regexp-unicode/article.md
+++ b/9-regular-expressions/03-regexp-unicode/article.md
@@ -13,9 +13,8 @@
 |𝒳| `0x1d4b3` | 4 |
 |𝒴| `0x1d4b4` | 4 |
 |😄| `0x1f604` | 4 |
-|😍| `0x1F60D` |4|
 
-بنابراین کاراکتر هایی مانند `a` و `≈` 2 بایت را اشغال می کنند، در حالی که کدهای `𝒳`، `𝒴` و `😄`, `😍` طولانی تر هستند و 4 بایت دارند.
+بنابراین کاراکتر هایی مانند `a` و `≈` 2 بایت را اشغال می کنند، در حالی که کدهای `𝒳`، `𝒴` و `😄` طولانی تر هستند و 4 بایت دارند.
 
 مدت ها پیش، زمانی که زبان جاوااسکریپت ایجاد شد، رمزگذاری یونیکد ساده تر بود: هیچ کاراکتر 4 بایتی وجود نداشت. بنابراین برخی از ویژگی های زبان را به اشتباه مدیریت می کردند.
 

From 33772e918a773a287576c4034bc7c8a56074dbb9 Mon Sep 17 00:00:00 2001
From: Hanna parsa 
Date: Wed, 16 Aug 2023 11:50:11 +0330
Subject: [PATCH 14/24] Update article.md

---
 2-ui/2-events/05-dispatch-events/article.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md
index d4f91a723..303a0eaa3 100644
--- a/2-ui/2-events/05-dispatch-events/article.md
+++ b/2-ui/2-events/05-dispatch-events/article.md
@@ -18,14 +18,13 @@ let event = new Event(type[, options]);
 ```
 
 پارامتر ها: 
-Arguments:
 
 - *نوع*: event type,  یک رشته مانند `"click"` .
 - *گزینه ها*: شی ای با دو ویژگی اختیاری.
 - *Bubbles*:اگر true  بود یعنی  bubbled  می شود. 
 - *لغو شدن (true/false)*: اگر ویزگی مقدار true را داشت عمل پیش فرض آن لغو میشود،
 - به صورت پیش فرض: `{bubbles: false, cancelable: false}`.
-  
+- 
   ## dispatchEvent
 
 پس از ایجاد یک event، باید آن را روی یک element با استفاده از فراخوانی elem.dispatchEvent(event) اجرا کنیم.

From af94f311228a6253b675c4f9b478273488a4af8f Mon Sep 17 00:00:00 2001
From: Hanna parsa 
Date: Wed, 16 Aug 2023 11:53:59 +0330
Subject: [PATCH 15/24] Update article.md

---
 2-ui/2-events/05-dispatch-events/article.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md
index 303a0eaa3..8f4ab345c 100644
--- a/2-ui/2-events/05-dispatch-events/article.md
+++ b/2-ui/2-events/05-dispatch-events/article.md
@@ -153,6 +153,7 @@ alert(event.clientX); // undefined, the unknown property is ignored!
 ```
 ویژگی "detail" می تواند هر داده ای را داشته باشد. از نظر فنی می‌توانیم بدون آن زندگی کنیم، زیرا می‌توانیم هر ویژگی را پس از ایجاد یک شی `new Event` معمولی به آن اختصاص دهیم. اما `CustomEvent` فیلد  `detail` ویژه ای را برای جلوگیری از conflicts با سایر properti های رویداد فراهم می کند.
 
+
 علاوه بر این، event class توضیح می‌دهد که «چه نوع رویدادی» است، و اگر event is custom است، باید از  `CustomEvent` استفاده کنیم تا مشخص شود که چیست.
 
 ## event.preventDefault()
@@ -200,6 +201,7 @@ alert(event.clientX); // undefined, the unknown property is ignored!
   });
 
 ```
+
 نکته: event  حتما باید  flag `cancelable: true` را داشته باشد یا اینکه `event.preventDefault()` فراخوانی نمیشود. 
 
 ## Events-in-events are synchronous
@@ -234,6 +236,7 @@ alert(event.clientX); // undefined, the unknown property is ignored!
 ```
 
 ترتیب خروجی این است: 1 -> تودرتو (nested) -> 2 
+
 لطفاً توجه داشته باشید که منوی رویداد تودرتو که باز است در `document` وجود دارد. انتشار و مدیریت رویداد تودرتو قبل از اینکه پردازش به کد خارجی بازگردد (`onclick`) به پایان می رسد.
 
 این فقط مربوط به `dispatchEvent` نیست، موارد دیگری نیز وجود دارد. اگر یک کنترل کننده رویداد متدهایی را فراخوانی کند که رویدادهای دیگر را راه‌اندازی می‌کنند، آنها نیز به صورت همزمان و به صورت تودرتو پردازش می‌شوند.

From ffcbae0a21b41673132f39619b4c5e3e630ac48a Mon Sep 17 00:00:00 2001
From: Hanna parsa 
Date: Wed, 16 Aug 2023 11:56:08 +0330
Subject: [PATCH 16/24] Update article.md

---
 2-ui/2-events/05-dispatch-events/article.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md
index 8f4ab345c..fe25b28c5 100644
--- a/2-ui/2-events/05-dispatch-events/article.md
+++ b/2-ui/2-events/05-dispatch-events/article.md
@@ -7,6 +7,7 @@
 باز کردن (باز کردن منو)، انتخاب (یک مورد انتخاب شده است) و غیره. کد دیگری ممکن است به رویدادها گوش دهد و آنچه را که در منو اتفاق می افتد مشاهده کند.
 
 ما می‌توانیم نه تنها رویدادهای کاملاً جدیدی را که برای اهداف خود اختراع می‌کنیم، بلکه همچنین رویدادهای داخلی مانند کلیک، پایین آوردن ماوس و غیره را ایجاد کنیم. ممکن است برای آزمایش خودکار مفید باشد.
+
 ## Event constructor
 
 کلاس های رویداد داخلی یک سلسله مراتب را تشکیل می دهند، مشابه کلاس های عنصر DOM. ریشه کلاس رویداد داخلی است.
@@ -129,6 +130,7 @@ alert(event.clientX); // undefined, the unknown property is ignored!
 لیست کاملی از  property  ها برای event های مختلف UI به تفکیک، برای مثال، [MouseEvent](https://www.w3.org/TR/uievents/#mouseevent).
 
 ## Custom events
+
 برای انواع events های کاملاً جدید خودمان مانند  `"hello"` باید از "CustomEvent جدید" استفاده کنیم. از نظر فنی [CustomEvent](https://dom.spec.whatwg.org/#customevent) با «رویداد» یکسان است،البته با یک استثنا.
 
 در آرگومان دوم (object) می‌توانیم یک ویژگی «detail» برای هر اطلاعات که می‌خواهیم با event ارسال کنیم، اضافه کنیم.

From c8c7aa0e430785ff0eb5bea657d330bd415bbeb3 Mon Sep 17 00:00:00 2001
From: Hanna parsa 
Date: Wed, 16 Aug 2023 12:00:10 +0330
Subject: [PATCH 17/24] Update article.md

---
 9-regular-expressions/03-regexp-unicode/article.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/9-regular-expressions/03-regexp-unicode/article.md b/9-regular-expressions/03-regexp-unicode/article.md
index de2ddde2c..bb60bb036 100644
--- a/9-regular-expressions/03-regexp-unicode/article.md
+++ b/9-regular-expressions/03-regexp-unicode/article.md
@@ -25,7 +25,7 @@ alert('😄'.length); // 2
 alert('𝒳'.length); // 2
 ```
 
-اما ما می توانیم ببینیم که فقط یک کاراکتر وجود دارد، درست است؟ نکته این است که `length` آن 4 بایت را به عنوان دو کاراکتر 2 بایتی در نظر می گیرد. این نادرست است، زیرا آنها باید فقط با هم در نظر گرفته شوند (به اصطلاح "surrogate pair"، می توانید در مورد آنها در مقاله  بخوانید).
+اما ما می توانیم ببینیم که فقط یک کاراکتر وجود دارد، درست است؟ نکته این است که... `length` آن 4 بایت را به عنوان دو کاراکتر 2 بایتی در نظر می گیرد. این نادرست است، زیرا آنها باید فقط با هم در نظر گرفته شوند (به اصطلاح "surrogate pair"، می توانید در مورد آنها در مقاله  بخوانید).
 
 به‌ طور پیش‌ فرض، عبارات باقاعده نیز "کاراکتر های طولانی" 4 بایتی را به عنوان یک جفت 2 بایتی در نظر می‌ گیرند. همانطور که در مورد رشته ها اتفاق می افتد، ممکن است به نتایج عجیب و غریب منجر شود. این را کمی بعد، در مقاله  خواهیم دید.
 
@@ -149,10 +149,9 @@ alert( str.match(regexp) ); // $2,€1,¥9
 
 بعداً، در مقاله  خواهیم دید که چگونه به دنبال اعدادی بگردیم که دارای ارقام زیادی هستند.
 
-
 ## خلاصه
 
-پرچم `pattern:u`  پشتیبانی از یونیکد را در عبارات منظم فعال می کند.
+پرچم `pattern:u` پشتیبانی از یونیکد را در عبارات منظم فعال می کند.
 
 یعنی دو چیز:
 

From dd7508cb1a4a0f2720fdc178da32a001b4728bed Mon Sep 17 00:00:00 2001
From: Hanna parsa 
Date: Wed, 16 Aug 2023 12:01:58 +0330
Subject: [PATCH 18/24] Update article.md

---
 9-regular-expressions/03-regexp-unicode/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/9-regular-expressions/03-regexp-unicode/article.md b/9-regular-expressions/03-regexp-unicode/article.md
index bb60bb036..59e0dd2f9 100644
--- a/9-regular-expressions/03-regexp-unicode/article.md
+++ b/9-regular-expressions/03-regexp-unicode/article.md
@@ -25,7 +25,7 @@ alert('😄'.length); // 2
 alert('𝒳'.length); // 2
 ```
 
-اما ما می توانیم ببینیم که فقط یک کاراکتر وجود دارد، درست است؟ نکته این است که... `length` آن 4 بایت را به عنوان دو کاراکتر 2 بایتی در نظر می گیرد. این نادرست است، زیرا آنها باید فقط با هم در نظر گرفته شوند (به اصطلاح "surrogate pair"، می توانید در مورد آنها در مقاله  بخوانید).
+...اما ما می توانیم ببینیم که فقط یک کاراکتر وجود دارد، درست است؟ نکته این است که `length` آن 4 بایت را به عنوان دو کاراکتر 2 بایتی در نظر می گیرد. این نادرست است، زیرا آنها باید فقط با هم در نظر گرفته شوند (به اصطلاح "surrogate pair"، می توانید در مورد آنها در مقاله  بخوانید).
 
 به‌ طور پیش‌ فرض، عبارات باقاعده نیز "کاراکتر های طولانی" 4 بایتی را به عنوان یک جفت 2 بایتی در نظر می‌ گیرند. همانطور که در مورد رشته ها اتفاق می افتد، ممکن است به نتایج عجیب و غریب منجر شود. این را کمی بعد، در مقاله  خواهیم دید.
 

From 0d07b07bbc536cac6817c43e23571e6cea3e400c Mon Sep 17 00:00:00 2001
From: Hanna parsa 
Date: Sat, 19 Aug 2023 10:28:18 +0330
Subject: [PATCH 19/24] Update article.md

---
 2-ui/2-events/05-dispatch-events/article.md | 38 ++++++++++-----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md
index fe25b28c5..7992d3833 100644
--- a/2-ui/2-events/05-dispatch-events/article.md
+++ b/2-ui/2-events/05-dispatch-events/article.md
@@ -1,18 +1,18 @@
 # Dispatching custom events
 
-ما نه تنها می توانیم handler ها را اختصاص دهیم، بلکه می توانیم رویدادها را از جاوا اسکریپت نیز تولید کنیم.
+ما نه تنها می توانیم هندلر ها را اختصاص دهیم، بلکه می توانیم رویدادها را از جاوااسکریپت نیز تولید کنیم.
 
-از رویدادهای سفارشی می توان برای ایجاد "مولفه های گرافیکی" استفاده کرد. به عنوان مثال، یک عنصر ریشه از منوی مبتنی بر JS خودمان ممکن است رویدادهایی را ایجاد کند که می‌گوید چه اتفاقی در منو می‌افتد:
+از custom events می توان برای ایجاد "مولفه های گرافیکی" استفاده کرد. به عنوان مثال، یک عنصر ریشه از منوی مبتنی بر JS خودمان ممکن است رویدادهایی را ایجاد کند که می‌گوید چه اتفاقی در منو می‌افتد:
 
-باز کردن (باز کردن منو)، انتخاب (یک مورد انتخاب شده است) و غیره. کد دیگری ممکن است به رویدادها گوش دهد و آنچه را که در منو اتفاق می افتد مشاهده کند.
+باز کردن (باز کردن منو)، انتخاب (یک مورد انتخاب شده است) و غیره. کد دیگری ممکن است به event ها گوش دهد و آنچه را که در منو اتفاق می افتد مشاهده کند.
 
-ما می‌توانیم نه تنها رویدادهای کاملاً جدیدی را که برای اهداف خود اختراع می‌کنیم، بلکه همچنین رویدادهای داخلی مانند کلیک، پایین آوردن ماوس و غیره را ایجاد کنیم. ممکن است برای آزمایش خودکار مفید باشد.
+ما می‌توانیم نه تنها event های کاملاً جدیدی را که برای اهداف خود اختراع می‌کنیم، بلکه همچنین event های داخلی مانند کلیک، پایین آوردن ماوس و غیره را ایجاد کنیم. ممکن است برای آزمایش خودکار مفید باشد.
 
 ## Event constructor
 
-کلاس های رویداد داخلی یک سلسله مراتب را تشکیل می دهند، مشابه کلاس های عنصر DOM. ریشه کلاس رویداد داخلی است.
+کلاس های internal event یک سلسله مراتب را تشکیل می دهند، مشابه کلاس های عنصر DOM. ریشه کلاس رویداد داخلی است.
 
-ما می توانیم اشیاء رویداد را مانند این ایجاد کنیم: [Event](https://dom.spec.whatwg.org/#events) 
+ما می توانیم object event ها را مانند این ایجاد کنیم: [Event](https://dom.spec.whatwg.org/#events) 
 
 ```js
 let event = new Event(type[, options]);
@@ -30,9 +30,9 @@ let event = new Event(type[, options]);
 
 پس از ایجاد یک event، باید آن را روی یک element با استفاده از فراخوانی elem.dispatchEvent(event) اجرا کنیم.
 
-سپس handler ها به آن واکنش نشان می دهند که گویی یک رویداد معمولی مرورگر است. اگر رویداد با bubble flag ها ایجاد شده باشد، bubbled می شود.
+سپس هندلر ها به آن واکنش نشان می دهند که گویی یک event معمولی مرورگر است. اگر event با bubble flag ها ایجاد شده باشد، bubbled می شود.
 
-در مثال زیر رویداد کلیک در جاوا اسکریپت آغاز می شود. handler به همان روشی کار می کند که اگر روی دکمه کلیک شده باشد:
+در مثال زیر event کلیک در جاوااسکریپت آغاز می شود. هندلر به همان روشی کار می کند که اگر روی دکمه کلیک شده باشد:
 ```html run no-beautify
 
 
@@ -44,7 +44,7 @@ let event = new Event(type[, options]);
 
 راهی برای تشخیص یک user event "واقعی" از event تولید شده توسط اسکریپت وجود دارد.
 
-ویژگی 'event.isTrusted' برای رویدادهایی که از اقدامات واقعی کاربر ناشی می شوند 'true' و برای رویدادهای تولید شده توسط اسکریپت 'false' است.
+ویژگی 'event.isTrusted' برای event هایی که از اقدامات واقعی کاربر ناشی می شوند 'true' و برای event های تولید شده توسط اسکریپت 'false' است.
 
 
 ## Bubbling example
@@ -75,10 +75,10 @@ let event = new Event(type[, options]);
 
 نکات:
 
-1. باید از `addEventListener` برای custom  کردن  event  ها استفاده کرد، زیرا `on` فقط برای built-in event وجود دارد و `document.onhello` کار نمیکند. 
+1. باید از `addEventListener` برای custom  کردن  event ها استفاده کرد، زیرا `on` فقط برای built-in event وجود دارد و `document.onhello` کار نمیکند. 
 2. باید `bubbles:true` را  set  کنیم مگرنه event  bubble up  نخواهد شد.
 
-مکانیک bubbling برای built-in (`click`) و custom (`hello`) یکسان است.  هم چنین مراحلی برای گرفتن و bubbling نیز وجود دارد.
+مکانیک bubbling برای built-in (`click`) و custom (`hello`) یکسان است. هم چنین مراحلی برای گرفتن و bubbling نیز وجود دارد.
 
 ## MouseEvent, KeyboardEvent and others
 
@@ -91,9 +91,9 @@ let event = new Event(type[, options]);
 - `KeyboardEvent`
 - ...
 
- اگر میخواهید رویدادی به وجود بیاوریم، باید به جای `new Event` از کلاس های بالا استفاده کنیم. برای مثال `new MouseEvent("click")`.
+ اگر میخواهید event به وجود بیاوریم، باید به جای `new Event` از کلاس های بالا استفاده کنیم. برای مثال `new MouseEvent("click")`.
  
- انتخاب constructor درست این امکان را میدهد که  property های استاندارد را برای هر نوع از  event  مشخص کنیم.
+ انتخاب constructor درست این امکان را میدهد که property های استاندارد را برای هر نوع از event مشخص کنیم.
 
  مانند `clientX/clientY` برای mouse event:
 
@@ -127,11 +127,11 @@ alert(event.clientX); // undefined, the unknown property is ignored!
 ```
 از نظر فنی، می‌توانیم با اختصاص مستقیم `event.clientX=100` پس از ایجاد، آن را حل کنیم. بنابراین این موضوع راحت و پیروی از قوانین است. event های ایجاد شده توسط مرورگر همیشه نوع مناسبی دارند.
 
-لیست کاملی از  property  ها برای event های مختلف UI به تفکیک، برای مثال، [MouseEvent](https://www.w3.org/TR/uievents/#mouseevent).
+لیست کاملی از property ها برای event های مختلف UI به تفکیک، برای مثال، [MouseEvent](https://www.w3.org/TR/uievents/#mouseevent).
 
 ## Custom events
 
-برای انواع events های کاملاً جدید خودمان مانند  `"hello"` باید از "CustomEvent جدید" استفاده کنیم. از نظر فنی [CustomEvent](https://dom.spec.whatwg.org/#customevent) با «رویداد» یکسان است،البته با یک استثنا.
+برای انواع events های کاملاً جدید خودمان مانند `"hello"` باید از "CustomEvent جدید" استفاده کنیم. از نظر فنی [CustomEvent](https://dom.spec.whatwg.org/#customevent) با «رویداد» یکسان است،البته با یک استثنا.
 
 در آرگومان دوم (object) می‌توانیم یک ویژگی «detail» برای هر اطلاعات که می‌خواهیم با event ارسال کنیم، اضافه کنیم.
 
@@ -204,7 +204,7 @@ alert(event.clientX); // undefined, the unknown property is ignored!
 
 ```
 
-نکته: event  حتما باید  flag `cancelable: true` را داشته باشد یا اینکه `event.preventDefault()` فراخوانی نمیشود. 
+نکته: event حتما باید  flag `cancelable: true` را داشته باشد یا اینکه `event.preventDefault()` فراخوانی نمیشود. 
 
 ## Events-in-events are synchronous
 
@@ -212,11 +212,11 @@ alert(event.clientX); // undefined, the unknown property is ignored!
 
 استثنا قابل توجه زمانی است که یک رویداد از درون رویداد دیگری آغاز می شود، به عنوان مثال: با استفاده از `dispatchEvent` چنین رویدادهایی بلافاصله پردازش می‌شوند: کنترل‌کننده‌های رویداد جدید فراخوانی می‌شوند و سپس مدیریت رویداد فعلی از سر گرفته می‌شود.
 
-به عنوان مثال، در کد زیر، رویداد  `menu-open` در حین کلیک فعال می شود.
+به عنوان مثال، در کد زیر، رویداد `menu-open` در حین کلیک فعال می شود.
 
 بلافاصله پردازش می شود، بدون اینکه منتظر پایان کنترل کننده `onclick` باشد:
 
-بدون اینکه برای `onclick` handler صبر کند تا تمام شود، شروع به process شدن میشود:   
+بدون اینکه برای `onclick` هندلر صبر کند تا تمام شود، شروع به process شدن میشود:   
 
 ```html run autorun
 
@@ -241,7 +241,7 @@ alert(event.clientX); // undefined, the unknown property is ignored!
 
 لطفاً توجه داشته باشید که منوی رویداد تودرتو که باز است در `document` وجود دارد. انتشار و مدیریت رویداد تودرتو قبل از اینکه پردازش به کد خارجی بازگردد (`onclick`) به پایان می رسد.
 
-این فقط مربوط به `dispatchEvent` نیست، موارد دیگری نیز وجود دارد. اگر یک کنترل کننده رویداد متدهایی را فراخوانی کند که رویدادهای دیگر را راه‌اندازی می‌کنند، آنها نیز به صورت همزمان و به صورت تودرتو پردازش می‌شوند.
+این فقط مربوط به `dispatchEvent` نیست، موارد دیگری نیز وجود دارد. اگر یک کنترل کننده event متدهایی را فراخوانی کند که رویدادهای دیگر را راه‌اندازی می‌کنند، آنها نیز به صورت همزمان و به صورت تودرتو پردازش می‌شوند.
 
 بیایید بگوییم که آن را دوست نداریم. ما می خواهیم ابتدا `onclick` به طور کامل پردازش شود، مستقل از `menu-open` یا هر رویداد تو در تو.
 

From 5122f7441e23a3a29b4ddc0b482dccfad99bd408 Mon Sep 17 00:00:00 2001
From: Hanna parsa 
Date: Sun, 20 Aug 2023 07:52:22 +0330
Subject: [PATCH 20/24] Update article.md

---
 2-ui/2-events/05-dispatch-events/article.md | 45 +++++++++++----------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md
index 7992d3833..d02762c2a 100644
--- a/2-ui/2-events/05-dispatch-events/article.md
+++ b/2-ui/2-events/05-dispatch-events/article.md
@@ -6,48 +6,51 @@
 
 باز کردن (باز کردن منو)، انتخاب (یک مورد انتخاب شده است) و غیره. کد دیگری ممکن است به event ها گوش دهد و آنچه را که در منو اتفاق می افتد مشاهده کند.
 
-ما می‌توانیم نه تنها event های کاملاً جدیدی را که برای اهداف خود اختراع می‌کنیم، بلکه همچنین event های داخلی مانند کلیک، پایین آوردن ماوس و غیره را ایجاد کنیم. ممکن است برای آزمایش خودکار مفید باشد.
+ما می‌توانیم نه تنها event های کاملاً جدیدی را که برای اهداف خود اختراع می‌کنیم، بلکه همچنین event های داخلی مانند کلیک، پایین آوردن ماوس و غیره را ایجاد کنیم. ممکن است برای تست خودکار نرم افزار مفید باشد.
 
 ## Event constructor
 
-کلاس های internal event یک سلسله مراتب را تشکیل می دهند، مشابه کلاس های عنصر DOM. ریشه کلاس رویداد داخلی است.
-
-ما می توانیم object event ها را مانند این ایجاد کنیم: [Event](https://dom.spec.whatwg.org/#events) 
+کلاس های event متعلق به زبان یک سلسله مراتب را تشکیل می دهند، مشابه کلاس های عنصر DOM. ریشه آن، کلاس درون‌ساخت [Event](https://dom.spec.whatwg.org/#events) است.
 
+ما می توانیم اشیاء event را به این صورت ایجاد کنیم: 
 ```js
 let event = new Event(type[, options]);
 ```
 
 پارامتر ها: 
 
-- *نوع*: event type,  یک رشته مانند `"click"` .
-- *گزینه ها*: شی ای با دو ویژگی اختیاری.
+- *type*: event type,  یک رشته مانند `"click"` .
+- *options*: شی ای با دو ویژگی اختیاری.
 - *Bubbles*:اگر true  بود یعنی  bubbled  می شود. 
-- *لغو شدن (true/false)*: اگر ویزگی مقدار true را داشت عمل پیش فرض آن لغو میشود،
+- *cancelable (true/false)*: اگر ویزگی مقدار true را داشت عمل پیش فرض آن لغو میشود،
 - به صورت پیش فرض: `{bubbles: false, cancelable: false}`.
 - 
   ## dispatchEvent
 
-پس از ایجاد یک event، باید آن را روی یک element با استفاده از فراخوانی elem.dispatchEvent(event) اجرا کنیم.
+پس از ایجاد یک event، باید آن را روی یک element با استفاده از فراخوانی `elem.dispatchEvent(event)` اجرا کنیم.
 
 سپس هندلر ها به آن واکنش نشان می دهند که گویی یک event معمولی مرورگر است. اگر event با bubble flag ها ایجاد شده باشد، bubbled می شود.
 
-در مثال زیر event کلیک در جاوااسکریپت آغاز می شود. هندلر به همان روشی کار می کند که اگر روی دکمه کلیک شده باشد:
+در مثال زیر رویداد `click` در جاوااسکریپت آغاز می شود. هندلر به همان روشی کار می کند که اگر روی دکمه کلیک شده باشد:
 ```html run no-beautify
 
 
 
 ```
 
-راهی برای تشخیص یک user event "واقعی" از event تولید شده توسط اسکریپت وجود دارد.
+```smart header="event.isTrusted"
+
+ راهی برای تشخیص یک user event "واقعی" از event تولید شده توسط اسکریپت وجود دارد.
 
-ویژگی 'event.isTrusted' برای event هایی که از اقدامات واقعی کاربر ناشی می شوند 'true' و برای event های تولید شده توسط اسکریپت 'false' است.
+ ویژگی 'event.isTrusted' برای رویدادهایی که از اقدامات کاربر واقعی ناشی می شوند 'true' و برای رویدادهای تولید شده توسط اسکریپت 'false' است.
+```
 
 
-## Bubbling example
+## مثالی از Bubbling 
 
 
 می‌توانیم یک bubbling event با نام `"hello"` ایجاد کنیم و آن را در `document` بگیریم.
@@ -75,10 +78,10 @@ let event = new Event(type[, options]);
 
 نکات:
 
-1. باید از `addEventListener` برای custom  کردن  event ها استفاده کرد، زیرا `on` فقط برای built-in event وجود دارد و `document.onhello` کار نمیکند. 
-2. باید `bubbles:true` را  set  کنیم مگرنه event  bubble up  نخواهد شد.
+1. باید از `addEventListener` برای شخصی‌سازی eventها استفاده کرد، زیرا `on` فقط برای eventهای متعلق به زبان وجود دارد و `document.onhello` کار نمی کند. 
+2. باید `bubbles:true` را تنظیم کنیم وگرنه رویداد bubble up نخواهد شد.
 
-مکانیک bubbling برای built-in (`click`) و custom (`hello`) یکسان است. هم چنین مراحلی برای گرفتن و bubbling نیز وجود دارد.
+مکانیک bubbling برای event درون‌ساخت (`click`) و event شخصی‌سازه‌شده (`hello`) یکسان است.  هم چنین مراحلی برای capturing و bubbling نیز وجود دارد.
 
 ## MouseEvent, KeyboardEvent and others
 
@@ -109,6 +112,7 @@ let event = new MouseEvent("click", {
 alert(event.clientX); // 100
 */!*
 ```
+
 لطفا به یاد داشته باشد: constructor های generic `Event` اجازه این کار را نمیدهد.
 
 بیایید این روش را امتحان کنیم:
@@ -125,15 +129,14 @@ let event = new Event("click", {
 alert(event.clientX); // undefined, the unknown property is ignored!
 */!*
 ```
-از نظر فنی، می‌توانیم با اختصاص مستقیم `event.clientX=100` پس از ایجاد، آن را حل کنیم. بنابراین این موضوع راحت و پیروی از قوانین است. event های ایجاد شده توسط مرورگر همیشه نوع مناسبی دارند.
-
-لیست کاملی از property ها برای event های مختلف UI به تفکیک، برای مثال، [MouseEvent](https://www.w3.org/TR/uievents/#mouseevent).
+ااز نظر فنی، می‌توانیم با اختصاص مستقیم `event.clientX=100` پس از ایجاد، آن را حل کنیم. بنابراین این موضوع راحت و پیروی از قوانین است. event های ایجاد شده توسط مرورگر همیشه از نوع مناسبی هستند.
 
-## Custom events
+للیست کاملی از  propertyها برای eventهای مختلف UI در مشخصات زبان وجود دارد، برای مثال، [MouseEvent](https://www.w3.org/TR/uievents/#mouseevent).
+## event شخصی‌سازی‌شد
 
-برای انواع events های کاملاً جدید خودمان مانند `"hello"` باید از "CustomEvent جدید" استفاده کنیم. از نظر فنی [CustomEvent](https://dom.spec.whatwg.org/#customevent) با «رویداد» یکسان است،البته با یک استثنا.
+برای انواع events های کاملاً جدید خودمان مانند  `"hello"` باید از `new CustomEvent` استفاده کنیم. از نظر فنی [CustomEvent](https://dom.spec.whatwg.org/#customevent) با `Event` یکسان است،البته با یک استثنا.
 
-در آرگومان دوم (object) می‌توانیم یک ویژگی «detail» برای هر اطلاعات که می‌خواهیم با event ارسال کنیم، اضافه کنیم.
+در آرگومان دوم (object) می‌توانیم یک ویژگی `detail` برای هر اطلاعات که می‌خواهیم با event ارسال کنیم، اضافه کنیم.
 
 برای مثال:
 

From dd2e2b99ce6624c88b810aa5d251a79f3e9db233 Mon Sep 17 00:00:00 2001
From: Hanna parsa 
Date: Sun, 20 Aug 2023 07:58:28 +0330
Subject: [PATCH 21/24] Update article.md

---
 2-ui/2-events/05-dispatch-events/article.md | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md
index d02762c2a..d19f4a90d 100644
--- a/2-ui/2-events/05-dispatch-events/article.md
+++ b/2-ui/2-events/05-dispatch-events/article.md
@@ -156,10 +156,9 @@ alert(event.clientX); // undefined, the unknown property is ignored!
   }));
 
 ```
-ویژگی "detail" می تواند هر داده ای را داشته باشد. از نظر فنی می‌توانیم بدون آن زندگی کنیم، زیرا می‌توانیم هر ویژگی را پس از ایجاد یک شی `new Event` معمولی به آن اختصاص دهیم. اما `CustomEvent` فیلد  `detail` ویژه ای را برای جلوگیری از conflicts با سایر properti های رویداد فراهم می کند.
+ویژگی `detail` می تواند هر داده ای را داشته باشد. از نظر فنی می‌توانیم آن را تنظیم نکنیم، زیرا می‌توانیم هر ویژگی را پس از ایجاد یک شی `new Event` معمولی به آن اختصاص دهیم. اما `CustomEvent` فیلد  `detail` ویژه ای را برای جلوگیری از conflicts با سایر property های event فراهم می کند.
 
-
-علاوه بر این، event class توضیح می‌دهد که «چه نوع رویدادی» است، و اگر event is custom است، باید از  `CustomEvent` استفاده کنیم تا مشخص شود که چیست.
+علاوه بر این، کلاس event توضیح می‌دهد که «چه نوع رویدادی» است، و اگر event سفارشی باشد، باید از  `CustomEvent` استفاده کنیم تا مشخص شود که چیست.
 
 ## event.preventDefault()
 
@@ -173,7 +172,7 @@ alert(event.clientX); // undefined, the unknown property is ignored!
 
 بیایید یک مثال عملی ببینیم - یک خرگوش پنهان (ممکن است منوی بسته شدن یا چیز دیگری باشد).
 
-در زیر می‌توانید یک تابع #rabbit and hide() را مشاهده کنید که رویداد "hide" را روی آن ارسال می‌کند تا به همه علاقه‌مندان اطلاع دهد که خرگوش قرار است مخفی شود.
+در زیر می‌توانید یک element با آیدی `#rabbit` و یک تابع `hide()` را مشاهده کنید که رویداد `"hide"` را روی آن ارسال می‌کند تا به همه علاقه‌مندان اطلاع دهد که خرگوش قرار است مخفی شود.
 
 هر کنترل‌کننده‌ای می‌تواند با `rabbit.addEventListener('hide',...)` به آن رویداد گوش دهد و در صورت نیاز، عمل را با استفاده از  `event.preventDefault()` لغو کند. سپس خرگوش ناپدید نمی شود:
 
@@ -207,7 +206,7 @@ alert(event.clientX); // undefined, the unknown property is ignored!
 
 ```
 
-نکته: event حتما باید  flag `cancelable: true` را داشته باشد یا اینکه `event.preventDefault()` فراخوانی نمیشود. 
+نکته: event  حتما باید `cancelable: true` را داشته باشد یا اینکه `event.preventDefault()` فراخوانی نمی شود. 
 
 ## Events-in-events are synchronous
 
@@ -217,7 +216,7 @@ alert(event.clientX); // undefined, the unknown property is ignored!
 
 به عنوان مثال، در کد زیر، رویداد `menu-open` در حین کلیک فعال می شود.
 
-بلافاصله پردازش می شود، بدون اینکه منتظر پایان کنترل کننده `onclick` باشد:
+بدون اینکه برای هندلر `onclick` صبر کند تا تمام شود، پردازش می‌ شود:   
 
 بدون اینکه برای `onclick` هندلر صبر کند تا تمام شود، شروع به process شدن میشود:   
 
@@ -248,7 +247,7 @@ alert(event.clientX); // undefined, the unknown property is ignored!
 
 بیایید بگوییم که آن را دوست نداریم. ما می خواهیم ابتدا `onclick` به طور کامل پردازش شود، مستقل از `menu-open` یا هر رویداد تو در تو.
 
-سپس می‌توانیم `dispatchEvent` (یا یک تماس event-triggering) را در انتهای `onclick` قرار دهیم یا، شاید بهتر، آن را در `setTimeout` با تاخیر صفر قرار دهیم:
+سپس می‌توانیم `dispatchEvent` (یا یک فراخوانی event-triggering) را در انتهای `onclick` قرار دهیم یا، شاید بهتر، آن را در `setTimeout` با تاخیر صفر قرار دهیم:
 
 ```html run
 
@@ -269,11 +268,11 @@ alert(event.clientX); // undefined, the unknown property is ignored!
 ```
 حالا `dispatchEvent` یه صورت asynchronously بعد از اینکه اجرای کد فعلی به اتمام رسید،  run  میشود، که شامل `menu.onclick`. پس event handler ها به صورت جدت و مستقل فعالیت میکنند. 
 
-خروجی خ.اهد بود:1 -> 2 -> nested.
+خروجی به این ترتیب خواهد بود: 1 -> 2 -> nested.
 
 
 
-## Summary
+## خلاصه
 
 برای تولید یک event code، ابتدا باید یک event object ایجاد کنیم.
 

From 3654fa9dc4bc4e4eeef46d26fc17a648e65492fc Mon Sep 17 00:00:00 2001
From: Hanna parsa 
Date: Sun, 20 Aug 2023 08:01:31 +0330
Subject: [PATCH 22/24] Update article.md

---
 2-ui/2-events/05-dispatch-events/article.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md
index d19f4a90d..587ec1f13 100644
--- a/2-ui/2-events/05-dispatch-events/article.md
+++ b/2-ui/2-events/05-dispatch-events/article.md
@@ -16,7 +16,6 @@
 ```js
 let event = new Event(type[, options]);
 ```
-
 پارامتر ها: 
 
 - *type*: event type,  یک رشته مانند `"click"` .
@@ -49,7 +48,6 @@ let event = new Event(type[, options]);
  ویژگی 'event.isTrusted' برای رویدادهایی که از اقدامات کاربر واقعی ناشی می شوند 'true' و برای رویدادهای تولید شده توسط اسکریپت 'false' است.
 ```
 
-
 ## مثالی از Bubbling 
 
 

From 2432baca46cb809978613edb6fc6bca7bad0fa9a Mon Sep 17 00:00:00 2001
From: Mahdi Hashemi 
Date: Sun, 20 Aug 2023 10:10:01 +0330
Subject: [PATCH 23/24] fix small problems, line syncing

---
 2-ui/2-events/05-dispatch-events/article.md | 34 ++++++++++-----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md
index 587ec1f13..fe6ba1af0 100644
--- a/2-ui/2-events/05-dispatch-events/article.md
+++ b/2-ui/2-events/05-dispatch-events/article.md
@@ -2,9 +2,7 @@
 
 ما نه تنها می توانیم هندلر ها را اختصاص دهیم، بلکه می توانیم رویدادها را از جاوااسکریپت نیز تولید کنیم.
 
-از custom events می توان برای ایجاد "مولفه های گرافیکی" استفاده کرد. به عنوان مثال، یک عنصر ریشه از منوی مبتنی بر JS خودمان ممکن است رویدادهایی را ایجاد کند که می‌گوید چه اتفاقی در منو می‌افتد:
-
-باز کردن (باز کردن منو)، انتخاب (یک مورد انتخاب شده است) و غیره. کد دیگری ممکن است به event ها گوش دهد و آنچه را که در منو اتفاق می افتد مشاهده کند.
+از custom events می توان برای ایجاد "مولفه های گرافیکی" استفاده کرد. به عنوان مثال، یک عنصر ریشه از منوی مبتنی بر JS خودمان ممکن است رویدادهایی را ایجاد کند که می‌گوید چه اتفاقی در منو می‌افتد: باز کردن (باز کردن منو)، انتخاب (یک مورد انتخاب شده است) و غیره. کد دیگری ممکن است به event ها گوش دهد و آنچه را که در منو اتفاق می افتد مشاهده کند.
 
 ما می‌توانیم نه تنها event های کاملاً جدیدی را که برای اهداف خود اختراع می‌کنیم، بلکه همچنین event های داخلی مانند کلیک، پایین آوردن ماوس و غیره را ایجاد کنیم. ممکن است برای تست خودکار نرم افزار مفید باشد.
 
@@ -13,17 +11,20 @@
 کلاس های event متعلق به زبان یک سلسله مراتب را تشکیل می دهند، مشابه کلاس های عنصر DOM. ریشه آن، کلاس درون‌ساخت [Event](https://dom.spec.whatwg.org/#events) است.
 
 ما می توانیم اشیاء event را به این صورت ایجاد کنیم: 
+
 ```js
 let event = new Event(type[, options]);
 ```
+
 پارامتر ها: 
 
 - *type*: event type,  یک رشته مانند `"click"` .
 - *options*: شی ای با دو ویژگی اختیاری.
-- *Bubbles*:اگر true  بود یعنی  bubbled  می شود. 
-- *cancelable (true/false)*: اگر ویزگی مقدار true را داشت عمل پیش فرض آن لغو میشود،
-- به صورت پیش فرض: `{bubbles: false, cancelable: false}`.
-- 
+  - *Bubbles*:اگر true  بود یعنی  bubbled  می شود. 
+  - *cancelable (true/false)*: اگر ویزگی مقدار true را داشت عمل پیش فرض آن لغو میشود،
+  
+  به صورت پیش فرض: `{bubbles: false, cancelable: false}`.
+
   ## dispatchEvent
 
 پس از ایجاد یک event، باید آن را روی یک element با استفاده از فراخوانی `elem.dispatchEvent(event)` اجرا کنیم.
@@ -47,13 +48,11 @@ let event = new Event(type[, options]);
 
  ویژگی 'event.isTrusted' برای رویدادهایی که از اقدامات کاربر واقعی ناشی می شوند 'true' و برای رویدادهای تولید شده توسط اسکریپت 'false' است.
 ```
-
 ## مثالی از Bubbling 
 
-
 می‌توانیم یک bubbling event با نام `"hello"` ایجاد کنیم و آن را در `document` بگیریم.
 
-تنها چیزی که نیاز داریم این است که `bubbles` را روی "true" تنظیم کنیم:
+تنها چیزی که نیاز داریم این است که `bubbles` را روی `true` تنظیم کنیم:
 
 ```html run no-beautify
 

Hello from the script!

@@ -127,9 +126,11 @@ let event = new Event("click", { alert(event.clientX); // undefined, the unknown property is ignored! */!* ``` + ااز نظر فنی، می‌توانیم با اختصاص مستقیم `event.clientX=100` پس از ایجاد، آن را حل کنیم. بنابراین این موضوع راحت و پیروی از قوانین است. event های ایجاد شده توسط مرورگر همیشه از نوع مناسبی هستند. -للیست کاملی از propertyها برای eventهای مختلف UI در مشخصات زبان وجود دارد، برای مثال، [MouseEvent](https://www.w3.org/TR/uievents/#mouseevent). +لیست کاملی از propertyها برای eventهای مختلف UI در مشخصات زبان وجود دارد، برای مثال، [MouseEvent](https://www.w3.org/TR/uievents/#mouseevent). + ## event شخصی‌سازی‌شد برای انواع events های کاملاً جدید خودمان مانند `"hello"` باید از `new CustomEvent` استفاده کنیم. از نظر فنی [CustomEvent](https://dom.spec.whatwg.org/#customevent) با `Event` یکسان است،البته با یک استثنا. @@ -154,6 +155,7 @@ alert(event.clientX); // undefined, the unknown property is ignored! })); ``` + ویژگی `detail` می تواند هر داده ای را داشته باشد. از نظر فنی می‌توانیم آن را تنظیم نکنیم، زیرا می‌توانیم هر ویژگی را پس از ایجاد یک شی `new Event` معمولی به آن اختصاص دهیم. اما `CustomEvent` فیلد `detail` ویژه ای را برای جلوگیری از conflicts با سایر property های event فراهم می کند. علاوه بر این، کلاس event توضیح می‌دهد که «چه نوع رویدادی» است، و اگر event سفارشی باشد، باید از `CustomEvent` استفاده کنیم تا مشخص شود که چیست. @@ -212,11 +214,10 @@ alert(event.clientX); // undefined, the unknown property is ignored! استثنا قابل توجه زمانی است که یک رویداد از درون رویداد دیگری آغاز می شود، به عنوان مثال: با استفاده از `dispatchEvent` چنین رویدادهایی بلافاصله پردازش می‌شوند: کنترل‌کننده‌های رویداد جدید فراخوانی می‌شوند و سپس مدیریت رویداد فعلی از سر گرفته می‌شود. -به عنوان مثال، در کد زیر، رویداد `menu-open` در حین کلیک فعال می شود. +به عنوان مثال، در کد زیر، رویداد `menu-open` در حین `onclick` فعال می شود. -بدون اینکه برای هندلر `onclick` صبر کند تا تمام شود، پردازش می‌ شود: +بدون اینکه برای `onclick` هندلر صبر کند تا تمام شود، شروع به پردازش می شود: -بدون اینکه برای `onclick` هندلر صبر کند تا تمام شود، شروع به process شدن میشود: ```html run autorun @@ -264,12 +265,11 @@ alert(event.clientX); // undefined, the unknown property is ignored! document.addEventListener('menu-open', () => alert('nested')); ``` + حالا `dispatchEvent` یه صورت asynchronously بعد از اینکه اجرای کد فعلی به اتمام رسید، run میشود، که شامل `menu.onclick`. پس event handler ها به صورت جدت و مستقل فعالیت میکنند. خروجی به این ترتیب خواهد بود: 1 -> 2 -> nested. - - ## خلاصه برای تولید یک event code، ابتدا باید یک event object ایجاد کنیم. @@ -291,4 +291,4 @@ alert(event.clientX); // undefined, the unknown property is ignored! - به عنوان یک dirty hack برای اینکه کتابخانه های شخص ثالث به روش مورد نیاز کار کنند، اگر ابزارهای تعامل دیگری را ارائه ندهند. - برای تست خودکار، روی دکمه "click the button" در اسکریپت و ببینید که آیا رابط به درستی واکنش نشان می دهد. - همک چنین custom events با نام خود ما اغلب برای مقاصد معماری ایجاد می شوند تا نشان دهند که چه اتفاقی در منوها، اسلایدر ها و غیره می افتد. + همچنین eventهای سفارشی با نام خود ما اغلب برای مقاصد معماری ایجاد می شوند تا نشان دهند که چه اتفاقی در منوها، اسلایدرها و غیره می افتد. From 42c92cf5fb9a724bb4e1f9d32367dad108418995 Mon Sep 17 00:00:00 2001 From: Mahdi Hashemi Date: Sun, 20 Aug 2023 10:10:50 +0330 Subject: [PATCH 24/24] translate title --- 2-ui/2-events/05-dispatch-events/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index fe6ba1af0..e95a1c7f0 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -1,4 +1,4 @@ -# Dispatching custom events +# Dispatchکردن eventهای شخصی سازی شده ما نه تنها می توانیم هندلر ها را اختصاص دهیم، بلکه می توانیم رویدادها را از جاوااسکریپت نیز تولید کنیم.