From b2d7a58a0fb7029bd6ccfe5d1fa1fed284a1908b Mon Sep 17 00:00:00 2001
From: Hanna parsa <hanaparsa8080@gmail.com>
Date: Mon, 21 Aug 2023 09:14:07 +0330
Subject: [PATCH 01/20] Update article.md

---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index 9ddaad16a..c56685cbe 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -7,9 +7,9 @@
 
 ## Syntax
 
-`MutationObserver` is easy to use.
+استفاده از `MutationObserver` بسیار ساده است.
 
-First, we create an observer with a callback-function:
+اول از ههمه، یک observer با استفاده از callback-function می سازیم:  
 
 ```js
 let observer = new MutationObserver(callback);

From 7381d3703eca16dc8ed28e172135d30fb533d089 Mon Sep 17 00:00:00 2001
From: Hanna parsa <hanaparsa8080@gmail.com>
Date: Mon, 21 Aug 2023 10:50:41 +0330
Subject: [PATCH 02/20] Update article.md

---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index c56685cbe..ea15a9dc0 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -15,7 +15,7 @@
 let observer = new MutationObserver(callback);
 ```
 
-And then attach it to a DOM node:
+و بعد observer را به DOM node، attach  می کند.
 
 ```js
 observer.observe(node, config);

From 909c9ddb06f18f64692a2a76009066e905a29ccd Mon Sep 17 00:00:00 2001
From: Hanna parsa <hanaparsa8080@gmail.com>
Date: Mon, 21 Aug 2023 13:18:15 +0330
Subject: [PATCH 03/20] Update article.md

---
 .../3-events-change-input/article.md              | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md
index 19f20e2fe..869a2d260 100644
--- a/2-ui/4-forms-controls/3-events-change-input/article.md
+++ b/2-ui/4-forms-controls/3-events-change-input/article.md
@@ -1,23 +1,21 @@
 # Events: change, input, cut, copy, paste
 
-بیایید event های مختلفی را که همراه با به روز رسانی داده ها هستند، پوشش دهیم.
-## Event: change
-
-در event `change` وقتی که element تغیرات را متوقف می کند، trigger شدن رخ می دهد.
-
+Let's cover various events that accompany data updates.
 
-در ورودی های متن به این معنی است که event زمانی رخ می دهد که فوکوس خود را از دست بدهد.
+## Event: change
 
-به عنوان مثال، وقتی که در فایل زیر تایپ می کنیم--هیچ event  وجود ندارد. اما وقتی تمرکزمان را روی قسمت دیگری ببریم، مثلا، کلیک کردن روی دکمه--آن وقت یک `change` event خواهیم داشت.
+The `change` event triggers when the element has finished changing.
 
+For text inputs that means that the event occurs when it loses focus.
 
+For instance, while we are typing in the text field below -- there's no event. But when we move the focus somewhere else, for instance, click on a button -- there will be a `change` event:
 
 ```html autorun height=40 run
 <input type="text" onchange="alert(this.value)">
 <input type="button" value="Button">
 ```
 
-برای باقی  element ها: `select`, `input type=checkbox/radio` دقیقا وقتی که selection تغییر می کند trigger می شود:
+For other elements: `select`, `input type=checkbox/radio` it triggers right after the selection changes:
 
 ```html autorun height=40 run
 <select onchange="alert(this.value)">
@@ -29,6 +27,7 @@
 ```
 
 
+
 ## Event: input
 
 The `input` event triggers every time after a value is modified by the user.

From e4dca146522d482712e2b246aacb0a812e33d695 Mon Sep 17 00:00:00 2001
From: Hanna parsa <hanaparsa8080@gmail.com>
Date: Mon, 21 Aug 2023 13:19:11 +0330
Subject: [PATCH 04/20] Update article.md

---
 2-ui/4-forms-controls/3-events-change-input/article.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md
index 869a2d260..097217f52 100644
--- a/2-ui/4-forms-controls/3-events-change-input/article.md
+++ b/2-ui/4-forms-controls/3-events-change-input/article.md
@@ -27,7 +27,6 @@ For other elements: `select`, `input type=checkbox/radio` it triggers right afte
 ```
 
 
-
 ## Event: input
 
 The `input` event triggers every time after a value is modified by the user.

From 51b00eb9e50607503ce3ee768aac2dd4d7501afe Mon Sep 17 00:00:00 2001
From: Hanna parsa <hanaparsa8080@gmail.com>
Date: Wed, 23 Aug 2023 13:09:06 +0330
Subject: [PATCH 05/20] Update article.md

---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index ea15a9dc0..d4df85606 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -20,9 +20,8 @@ let observer = new MutationObserver(callback);
 ```js
 observer.observe(node, config);
 ```
-
-`config` is an object with boolean options "what kind of changes to react on":
-- `childList` -- changes in the direct children of `node`,
+ (کانفیگ)`config` یک شی با  boolean options "به چه نوع تغییراتی باید واکنش نشان داد" است:
+- `childList` --  `node` از direct children تغییراتی در 
 - `subtree` -- in all descendants of `node`,
 - `attributes` -- attributes of `node`,
 - `attributeFilter` -- an array of attribute names, to observe only selected ones.

From d7127b355a7c3ab004e81df2fd84f0d2acfd22df Mon Sep 17 00:00:00 2001
From: Hanna parsa <hanaparsa8080@gmail.com>
Date: Fri, 25 Aug 2023 14:08:31 +0330
Subject: [PATCH 06/20] Update article.md

---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index d4df85606..ee77f42f4 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -22,9 +22,9 @@ observer.observe(node, config);
 ```
  (کانفیگ)`config` یک شی با  boolean options "به چه نوع تغییراتی باید واکنش نشان داد" است:
 - `childList` --  `node` از direct children تغییراتی در 
-- `subtree` -- in all descendants of `node`,
-- `attributes` -- attributes of `node`,
-- `attributeFilter` -- an array of attribute names, to observe only selected ones.
+- `subtree` --`node` در همه فرزندان 
+- `attributes` -- attributes های `node`,
+- `attributeFilter` --که فقط سلکت شده ها را ببینیم ،attribute name یک ارایه از
 - `characterData` -- whether to observe `node.data` (text content),
 
 Few other options:

From 1bd8618c35eea264916baf972e79b13e460e42a2 Mon Sep 17 00:00:00 2001
From: Hanna parsa <hanaparsa8080@gmail.com>
Date: Mon, 28 Aug 2023 09:09:45 +0330
Subject: [PATCH 07/20] Update article.md

---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index ee77f42f4..ea37bb189 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -94,7 +94,7 @@ mutationRecords = [{
 }];
 ```
 
-So, `MutationObserver` allows to react on any changes within DOM subtree.
+پس، `MutationObserver` اجازه می دهد که به هر اغییری در DOM subtree واکنش نشان دهیم.
 
 ## Usage for integration
 

From 46b41054f9c0977d13226146b3625c6d5efca3bd Mon Sep 17 00:00:00 2001
From: Hanna parsa <hanaparsa8080@gmail.com>
Date: Mon, 28 Aug 2023 09:11:39 +0330
Subject: [PATCH 08/20] Update article.md

---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index ea37bb189..d6c0d27d3 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -75,7 +75,7 @@ mutationRecords = [{
 }];
 ```
 
-If we make more complex editing operations, e.g. remove the `<b>edit</b>`, the mutation event may contain multiple mutation records:
+اگر ما ادیت های پیچیده تری را اجرا کنیم، مانند ریمو کردن `<b>edit</b>`، آن گاه mutation event ممکن است شامل تعدادی mutation records باشد:   
 
 ```js
 mutationRecords = [{

From 83ce997cc324d8c45c39486c86b196a0e9aeac56 Mon Sep 17 00:00:00 2001
From: Hanna parsa <hanaparsa8080@gmail.com>
Date: Mon, 28 Aug 2023 09:14:49 +0330
Subject: [PATCH 09/20] Update article.md

---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index d6c0d27d3..2bb505577 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -64,7 +64,7 @@ observer.observe(elem, {
 </script>
 ```
 
-If we run this code in the browser, then focus on the given `<div>` and change the text inside `<b>edit</b>`, `console.log` will show one mutation:
+اگر ما این کد را در browser run کنیم، و بعد روی `<div>` داده شده و تغییرات درون `<b>edit</b>` تمرکز کنیم، `console.log` یک mutation نشان می دهد:    
 
 ```js
 mutationRecords = [{

From 1a5ddf0e6ef5a618033a0c58eb0cd1272589494c Mon Sep 17 00:00:00 2001
From: Hanna parsa <hanaparsa8080@gmail.com>
Date: Mon, 28 Aug 2023 09:17:45 +0330
Subject: [PATCH 10/20] Update article.md

---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index 2bb505577..7780b4738 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -35,7 +35,7 @@ Then after any changes, the `callback` is executed: changes are passed in the fi
 
 [MutationRecord](https://dom.spec.whatwg.org/#mutationrecord) objects have properties:
 
-- `type` -- mutation type, one of
+- `type` -- mutation type, یکی از موارد زیر
     - `"attributes"`: attribute modified
     - `"characterData"`: data modified, used for text nodes,
     - `"childList"`: child elements added/removed,
@@ -45,7 +45,7 @@ Then after any changes, the `callback` is executed: changes are passed in the fi
 - `attributeName/attributeNamespace` -- the name/namespace (for XML) of the changed attribute,
 - `oldValue` -- the previous value, only for attribute or text changes, if the corresponding option is set `attributeOldValue`/`characterDataOldValue`.
 
-For example, here's a `<div>` with a `contentEditable` attribute. That attribute allows us to focus on it and edit.
+برای مثال، در مثال زیر یک `<div>` با یک `contentEditable` وجود دارد. این attribute به ما اجازه میدهد روی آن و ادیت کردن آن تمرکز کنیم.  
 
 ```html run
 <div contentEditable id="elem">Click and <b>edit</b>, please</div>

From f528a8acc11a277202cf9e946812a270be128358 Mon Sep 17 00:00:00 2001
From: Hanna parsa <hanaparsa8080@gmail.com>
Date: Mon, 28 Aug 2023 09:20:42 +0330
Subject: [PATCH 11/20] Update article.md

---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index 7780b4738..65be922cb 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -26,6 +26,7 @@ observer.observe(node, config);
 - `attributes` -- attributes های `node`,
 - `attributeFilter` --که فقط سلکت شده ها را ببینیم ،attribute name یک ارایه از
 - `characterData` -- whether to observe `node.data` (text content),
+- `characterData` -- ایا `node.data` (text content) را مشاهده کنیم یا نه 
 
 Few other options:
 - `attributeOldValue` -- if `true`, pass both the old and the new value of attribute to callback (see below), otherwise only the new one (needs `attributes` option),

From e8803b47708a056493e757d92f76b68cd635c17e Mon Sep 17 00:00:00 2001
From: Hanna parsa <hanaparsa8080@gmail.com>
Date: Mon, 28 Aug 2023 09:33:43 +0330
Subject: [PATCH 12/20] Update article.md

---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index 65be922cb..44e5bf63e 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -28,9 +28,9 @@ observer.observe(node, config);
 - `characterData` -- whether to observe `node.data` (text content),
 - `characterData` -- ایا `node.data` (text content) را مشاهده کنیم یا نه 
 
-Few other options:
-- `attributeOldValue` -- if `true`, pass both the old and the new value of attribute to callback (see below), otherwise only the new one (needs `attributes` option),
-- `characterDataOldValue` -- if `true`, pass both the old and the new value of `node.data` to callback (see below), otherwise only the new one (needs `characterData` option).
+چند گزینه دیگر:
+- `attributeOldValue` --بود هم مقدار قذیم و هم مقدار جدید attribute به callback  پاس داده می شود `true` اگر 
+- `characterDataOldValue` --(needs `characterData` option) پاس می دهیم، در غیر این صورت فقط مقدار جدید را callback را یه  `node.data` بود هم مقدار جدید و هم مقدار قدیم `true` اگر
 
 Then after any changes, the `callback` is executed: changes are passed in the first argument as a list of [MutationRecord](https://dom.spec.whatwg.org/#mutationrecord) objects, and the observer itself as the second argument.
 

From 77afb4e500d910c24c219bb3e605697453904d58 Mon Sep 17 00:00:00 2001
From: Hanna parsa <hanaparsa8080@gmail.com>
Date: Mon, 28 Aug 2023 09:58:49 +0330
Subject: [PATCH 13/20] Update article.md

---
 .../01-mutation-observer/article.md           | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index 44e5bf63e..5acd98215 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -99,25 +99,26 @@ mutationRecords = [{
 
 ## Usage for integration
 
-When such thing may be useful?
+چه زمانی این اتفاقات به صورت دیفالت رخ می دهند؟
 
-Imagine the situation when you need to add a third-party script that contains useful functionality, but also does something unwanted, e.g. shows ads `<div class="ads">Unwanted ads</div>`.
+شرایطی را تصور کنید که باید یک اسکریپت شخص ثالث اضافه کنید که حاوی عملکرد مفید باشد، اما همچنین کاری ناخواسته انجام دهد، به عنوان مثال تبلیغات `<div class="ads">Unwanted ads</div>` را نشان می دهد.
 
-Naturally, the third-party script provides no mechanisms to remove it.
 
-Using `MutationObserver`, we can detect when the unwanted element appears in our DOM and remove it.
+به طور طبیعی، اسکریپت شخص ثالث هیچ مکانیزمی برای حذف آن ارائه نمی دهد.
 
-There are other situations when a third-party script adds something into our document, and we'd like to detect, when it happens, to adapt our page, dynamically resize something etc.
+با استفاده از `MutationObserver`، می توانیم تشخیص دهیم که عنصر ناخواسته در DOM ما ظاهر می شود و آن را حذف می کنیم.
 
-`MutationObserver` allows to implement this.
+موقعیت‌های دیگری هم وجود دارد که یک اسکریپت شخص ثالث چیزی را به سند ما اضافه می‌کند، و ما می‌خواهیم زمانی که این اتفاق می‌افتد، صفحه خود را تطبیق دهیم، اندازه چیزی را به صورت پویا تغییر اندازه دهیم و غیره.
+
+ هم چنین `MutationObserver` امکان اجرای این را فراهم می کند.
 
 ## Usage for architecture
 
-There are also situations when `MutationObserver` is good from architectural standpoint.
+همچنین شرایطی وجود دارد که `MutationObserver` از نظر معماری خوب است.
 
-Let's say we're making a website about programming. Naturally, articles and other materials may contain source code snippets.
+فرض کنید در حال ساخت یک وب سایت در مورد برنامه نویسی هستیم. به طور طبیعی، مقالات و سایر مطالب ممکن است حاوی کد منبع باشند.
 
-Such snippet in an HTML markup looks like this:
+چنین قطعه ای در نشانه گذاری HTML به شکل زیر است:
 
 ```html
 ...
@@ -130,7 +131,9 @@ Such snippet in an HTML markup looks like this:
 
 For better readability and at the same time, to beautify it, we'll be using a JavaScript syntax highlighting library on our site, like [Prism.js](https://prismjs.com/). To get syntax highlighting for above snippet in Prism, `Prism.highlightElem(pre)` is called, which examines the contents of such `pre` elements and adds special tags and styles for colored syntax highlighting into those elements, similar to what you see in examples here, on this page.
 
-When exactly should we run that highlighting method? Well, we can do it on `DOMContentLoaded` event, or put the script at the bottom of the page. The moment our DOM is ready, we can search for elements `pre[class*="language"]` and call `Prism.highlightElem` on them:
+برای خوانایی بهتر و در عین حال برای زیباتر کردن آن، از کتابخانه برجسته سازی نحوی جاوا اسکریپت در سایت خود مانند [Prism.js](https://prismjs.com/) استفاده خواهیم کرد. برای دریافت برجسته‌سازی نحو برای قطعه بالا در `(Prism.highlightElem(pre`  نامیده می‌شود، که محتویات چنین عناصر`pre`را بررسی می‌کند و تگ‌ها و سبک‌های خاصی را برای برجسته کردن نحو رنگی به آن عناصر اضافه می‌کند، مشابه آنچه می‌بینید. در مثال های اینجا، در این صفحه.
+
+دقیقاً چه زمانی باید آن روش برجسته سازی را اجرا کنیم؟ خوب، می‌توانیم این کار را در رویداد  `DOMContentLoaded` انجام دهیم یا اسکریپت را در پایین صفحه قرار دهیم. لحظه‌ای که DOM ما آماده است، می‌توانیم عناصر `pre[class*="language"]` را جستجو کنیم و روی آنها  `Prism.highlightElem` را صدا کنیم:
 
 ```js
 // highlight all code snippets on the page

From 946cde61ddaa85cb5f1e0b67454f6abc79ff25fc Mon Sep 17 00:00:00 2001
From: Hanna parsa <hanaparsa8080@gmail.com>
Date: Mon, 28 Aug 2023 12:00:12 +0330
Subject: [PATCH 14/20] Update article.md

---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index 5acd98215..bc5cf54c8 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -128,10 +128,7 @@ mutationRecords = [{
 </code></pre>
 ...
 ```
-
-For better readability and at the same time, to beautify it, we'll be using a JavaScript syntax highlighting library on our site, like [Prism.js](https://prismjs.com/). To get syntax highlighting for above snippet in Prism, `Prism.highlightElem(pre)` is called, which examines the contents of such `pre` elements and adds special tags and styles for colored syntax highlighting into those elements, similar to what you see in examples here, on this page.
-
-برای خوانایی بهتر و در عین حال برای زیباتر کردن آن، از کتابخانه برجسته سازی نحوی جاوا اسکریپت در سایت خود مانند [Prism.js](https://prismjs.com/) استفاده خواهیم کرد. برای دریافت برجسته‌سازی نحو برای قطعه بالا در `(Prism.highlightElem(pre`  نامیده می‌شود، که محتویات چنین عناصر`pre`را بررسی می‌کند و تگ‌ها و سبک‌های خاصی را برای برجسته کردن نحو رنگی به آن عناصر اضافه می‌کند، مشابه آنچه می‌بینید. در مثال های اینجا، در این صفحه.
+ کردن آن، از کتابخانه برجسته سازی نحوی جاوا اسکریپت در سایت خود مانند [Prism.js](https://prismjs.com/) استفاده خواهیم کرد. برای دریافت syntax highlighting برای قطعه بالا درprism، که `Prism.highlightElem(pre)` نامیده می‌شود، که محتویات چنین عناصر`pre`را بررسی می‌کند و تگ‌ها و سبک‌های خاصی را برای  syntax highlighting رنگی به آن عناصر اضافه می‌کند، مشابه آنچه در این صفحه می بینید.
 
 دقیقاً چه زمانی باید آن روش برجسته سازی را اجرا کنیم؟ خوب، می‌توانیم این کار را در رویداد  `DOMContentLoaded` انجام دهیم یا اسکریپت را در پایین صفحه قرار دهیم. لحظه‌ای که DOM ما آماده است، می‌توانیم عناصر `pre[class*="language"]` را جستجو کنیم و روی آنها  `Prism.highlightElem` را صدا کنیم:
 

From 04633a911dcf3ff6010caa779a4732da356e48ca Mon Sep 17 00:00:00 2001
From: Hanna parsa <hanaparsa8080@gmail.com>
Date: Mon, 28 Aug 2023 12:09:42 +0330
Subject: [PATCH 15/20] Update article.md

---
 .../01-mutation-observer/article.md           | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index bc5cf54c8..a471240e6 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -207,13 +207,13 @@ let demoElem = document.getElementById('highlight-demo');
 observer.observe(demoElem, {childList: true, subtree: true});
 ```
 
-Here, below, there's an HTML-element and JavaScript that dynamically fills it using `innerHTML`.
+در اینجا، در زیر، یک عنصر HTML و جاوااسکریپت وجود دارد که به صورت پویا با استفاده از `innerHTML` آن را پر می کند.
 
-Please run the previous code (above, observes that element), and then the code below. You'll see how `MutationObserver` detects and highlights the snippet.
+لطفا کد قبلی را اجرا کنید (در بالا، آن عنصر را مشاهده کنید)، و سپس کد زیر را اجرا کنید. خواهید دید که چگونه  `MutationObserver` قطعه را شناسایی و برجسته می کند.
 
-<p id="highlight-demo" style="border: 1px solid #ddd">A demo-element with <code>id="highlight-demo"</code>, run the code above to observe it.</p>
+<p id="highlight-demo" style="border: 1px solid #ddd">یک عنصر آزمایشی با <code>id="highlight-demo"</code>، کد بالا را اجرا کنید تا آن را مشاهده کنید.</ p>
 
-The following code populates its `innerHTML`, that causes the `MutationObserver` to react and highlight its contents:
+کد زیر `innerHTML` خود را پر می کند، که باعث می شود`MutationObserver` واکنش نشان داده و محتوای آن را برجسته کند:
 
 ```js run
 let demoElem = document.getElementById('highlight-demo');
@@ -228,19 +228,19 @@ demoElem.innerHTML = `A code snippet is below:
 `;
 ```
 
-Now we have `MutationObserver` that can track all highlighting in observed elements or the whole `document`. We can add/remove code snippets in HTML without thinking about it.
+اکنون `MutationObserver` را داریم که می تواند تمام برجسته سازی ها در عناصر مشاهده شده یا کل `document` را ردیابی کند. ما می‌توانیم تکه‌های کد را بدون فکر کردن در HTML اضافه یا حذف کنیم.
 
 ## Additional methods
 
-There's a method to stop observing the node:
+روشی برای توقف مشاهده گره وجود دارد:
 
-- `observer.disconnect()` -- stops the observation.
+- `observer.disconnect()` - مشاهده را متوقف می کند.
 
-When we stop the observing, it might be possible that some changes were not yet processed by the observer. In such cases, we use
+وقتی مشاهده را متوقف می کنیم، ممکن است برخی از تغییرات هنوز توسط ناظر پردازش نشده باشد. در چنین مواردی استفاده می کنیم
 
-- `observer.takeRecords()` -- gets a list of unprocessed mutation records - those that happened, but the callback has not handled them.
+-`observer.takeRecords()` - لیستی از سوابق جهش پردازش نشده را دریافت می کند - مواردی که اتفاق افتاده اند، اما پاسخ تماس آنها را مدیریت نکرده است.
 
-These methods can be used together, like this:
+این روش ها را می توان با هم استفاده کرد، مانند:
 
 ```js
 // get a list of unprocessed mutations
@@ -266,8 +266,8 @@ The mere fact that a DOM node is observed doesn't prevent the garbage collection
 
 ## Summary  
 
-`MutationObserver` can react to changes in DOM - attributes, text content and adding/removing elements.
+ پس`MutationObserver` می تواند به تغییرات در DOM - ویژگی ها، محتوای متن و افزودن/حذف عناصر واکنش نشان دهد.
 
-We can use it to track changes introduced by other parts of our code, as well as to integrate with third-party scripts.
+ما می‌توانیم از آن برای ردیابی تغییرات ایجاد شده توسط بخش‌های دیگر کدمان و همچنین برای ادغام با اسکریپت‌های شخص ثالث استفاده کنیم.
 
-`MutationObserver` can track any changes. The config "what to observe" options are used for optimizations, not to spend resources on unneeded callback invocations.
+هم چنین `MutationObserver` می تواند هر تغییری را ردیابی کند. تنظیمات "چه چیزی را مشاهده کنیم" برای بهینه سازی استفاده می شود، نه برای صرف منابع در فراخوانی های غیر ضروری.

From 3e276e965dd214071cc1766eebebe859c9ac3d3a Mon Sep 17 00:00:00 2001
From: Hanna parsa <hanaparsa8080@gmail.com>
Date: Tue, 29 Aug 2023 08:22:59 +0330
Subject: [PATCH 16/20] Update article.md

---
 .../01-mutation-observer/article.md           | 54 ++++++++++---------
 1 file changed, 28 insertions(+), 26 deletions(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index a471240e6..469ebcf6b 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -1,7 +1,7 @@
 
 # Mutation observer
 
- همان طور که می دانیم `MutationObserver` یک شی داخلی است که یک عنصر DOM را مشاهده می کند و هنگامی که تغییری را تشخیص می دهد یک تماس برگشتی ایجاد می کند.
+ همان طور که می دانیم `MutationObserver` یک inner object است که یک عنصر DOM را مشاهده می کند و هنگامی که تغییری را تشخیص می دهد یک تماس برگشتی ایجاد می کند.
 
 ابتدا نگاهی به نحو می اندازیم و سپس یک مورد استفاده در دنیای واقعی را بررسی می کنیم تا ببینیم چنین چیزی در کجا ممکن است مفید باشد.
 
@@ -9,7 +9,7 @@
 
 استفاده از `MutationObserver` بسیار ساده است.
 
-اول از ههمه، یک observer با استفاده از callback-function می سازیم:  
+اول از همه، یک observer با استفاده از callback-function می سازیم:  
 
 ```js
 let observer = new MutationObserver(callback);
@@ -32,19 +32,20 @@ observer.observe(node, config);
 - `attributeOldValue` --بود هم مقدار قذیم و هم مقدار جدید attribute به callback  پاس داده می شود `true` اگر 
 - `characterDataOldValue` --(needs `characterData` option) پاس می دهیم، در غیر این صورت فقط مقدار جدید را callback را یه  `node.data` بود هم مقدار جدید و هم مقدار قدیم `true` اگر
 
-Then after any changes, the `callback` is executed: changes are passed in the first argument as a list of [MutationRecord](https://dom.spec.whatwg.org/#mutationrecord) objects, and the observer itself as the second argument.
+سپس پس از هر تغییری، `callback` اجرا می‌شود: تغییرات در آرگومان اول به‌عنوان فهرستی از اشیاء [MutationRecord](https://dom.spec.whatwg.org/#mutationrecord) و خود مشاهده‌گر به‌عنوان استدلال دوم است.
 
-[MutationRecord](https://dom.spec.whatwg.org/#mutationrecord) objects have properties:
+
+  شی (object) های [MutationRecord](https://dom.spec.whatwg.org/#mutationrecord) properties هایی دارند:
 
 - `type` -- mutation type, یکی از موارد زیر
     - `"attributes"`: attribute modified
     - `"characterData"`: data modified, used for text nodes,
     - `"childList"`: child elements added/removed,
-- `target` -- where the change occurred: an element for `"attributes"`, or text node for `"characterData"`, or an element for a `"childList"` mutation,
-- `addedNodes/removedNodes`  -- nodes that were added/removed,
-- `previousSibling/nextSibling` -- the previous and next sibling to added/removed nodes,
-- `attributeName/attributeNamespace` -- the name/namespace (for XML) of the changed attribute,
-- `oldValue` -- the previous value, only for attribute or text changes, if the corresponding option is set `attributeOldValue`/`characterDataOldValue`.
+- `target` -- `"childList"` mutation برای  element و یا `"characterData"` برای  text node یا `"attributes"` جایی که تغییر رخ داده است: یک عنصر برای 
+- `addedNodes/removedNodes` -- شده اند added/removed هایی که (nodes)نود
+- `previousSibling/nextSibling` --added/removed nodes خواهر یا برادر قبلی یا جدید، 
+- `attributeName/attributeNamespace` --  changed attribute (XML) برای namespace اسم یا 
+- `oldValue` --  .تنظیم شود `attributeOldValue`/`characterDataOldValue` مقدار قبلی، فقط برای تغییر ویژگی یا متن می باشد، اگر گزینه مربوطه
 
 برای مثال، در مثال زیر یک `<div>` با یک `contentEditable` وجود دارد. این attribute به ما اجازه میدهد روی آن و ادیت کردن آن تمرکز کنیم.  
 
@@ -137,20 +138,20 @@ mutationRecords = [{
 document.querySelectorAll('pre[class*="language"]').forEach(Prism.highlightElem);
 ```
 
-Everything's simple so far, right? We find code snippets in HTML and highlight them.
 
-Now let's go on. Let's say we're going to dynamically fetch materials from a server. We'll study methods for that [later in the tutorial](info:fetch). For now it only matters that we fetch an HTML article from a webserver and display it on demand:
+حالا بیایید ادامه دهیم. فرض کنید می خواهیم مطالب را به صورت پویا از یک سرور واکشی کنیم. ما روش‌هایی را برای آن مطالعه خواهیم کرد [later in the tutorial](info:fetch). در حال حاضر فقط مهم است که یک مقاله HTML را از یک وب سرور واکشی کنیم و آن را در صورت درخواست نمایش دهیم:
 
 ```js
 let article = /* fetch new content from server */
 articleElem.innerHTML = article;
 ```
 
-The new `article` HTML may contain code snippets. We need to call `Prism.highlightElem` on them, otherwise they won't get highlighted.
 
-**Where and when to call `Prism.highlightElem` for a dynamically loaded article?**
+در HTML `article` جدید ممکن است حاوی کدهایی باشد. باید`Prism.highlightElem` را روی آنها صدا کنیم، در غیر این صورت برجسته نمی‌شوند.
+
+**کجا و چه زمانی برای یک مقاله بارگذاری شده پویا با `Prism.highlightElem` تماس بگیرید؟**
 
-We could append that call to the code that loads an article, like this:
+می‌توانیم آن فراخوان را به کدی که یک مقاله را بارگیری می‌کند، اضافه کنیم، مانند این:
 
 ```js
 let article = /* fetch new content from server */
@@ -162,21 +163,22 @@ snippets.forEach(Prism.highlightElem);
 */!*
 ```
 
-...But, imagine if we have many places in the code where we load our content - articles, quizzes, forum posts, etc. Do we need to put the highlighting call everywhere, to highlight the code in content after loading? That's not very convenient.
 
-And what if the content is loaded by a third-party module? For example, we have a forum written by someone else, that loads content dynamically, and we'd like to add syntax highlighting to it. No one likes patching third-party scripts.
+...اما، تصور کنید اگر ما مکان های زیادی در کد داشته باشیم که در آن محتوای خود را بارگذاری می کنیم - مقالات، آزمون ها، پست های انجمن و غیره. این خیلی راحت نیست.
+
+و اگر محتوا توسط یک ماژول شخص ثالث بارگذاری شود چه؟ به عنوان مثال، ما یک انجمن داریم که توسط شخص دیگری نوشته شده است، که محتوا را به صورت پویا بارگیری می کند، و مایلیم برجسته سازی نحوی را به آن اضافه کنیم. هیچ کس وصله اسکریپت های شخص ثالث را دوست ندارد.
 
-Luckily, there's another option.
+خوشبختانه، گزینه دیگری وجود دارد.
 
-We can use `MutationObserver` to automatically detect when code snippets are inserted into the page and highlight them.
+می‌توانیم از `MutationObserver` استفاده کنیم تا به‌طور خودکار زمانی که قطعه‌های کد در صفحه درج می‌شوند، شناسایی کرده و آن‌ها را برجسته کنیم.
 
-So we'll handle the highlighting functionality in one place, relieving us from the need to integrate it.
+بنابراین ما عملکرد برجسته سازی را در یک مکان مدیریت می کنیم و ما را از نیاز به ادغام آن رها می کنیم.
 
 ### Dynamic highlight demo
 
-Here's the working example.
+و مثالی که کار می کند.
 
-If you run this code, it starts observing the element below and highlighting any code snippets that appear there:
+اگر این کد را اجرا کنید، شروع به مشاهده element زیر می کند و هر قطعه کدی را که در آنجا ظاهر می شود برجسته می کند:
 
 ```js run
 let observer = new MutationObserver(mutations => {
@@ -254,14 +256,14 @@ observer.disconnect();
 ```
 
 
-```smart header="Records returned by `observer.takeRecords()` are removed from the processing queue"
-The callback won't be called for records, returned by `observer.takeRecords()`.
+```  پس smart header="سوابق برگردانده شده توسط `observer.takeRecords()` از صف پردازش حذف می شوند"
+تماس برگشتی برای رکوردها که توسط 'observer.takeRecords()' برگردانده شده است، فراخوانی نمی شود.
 ```
 
-```smart header="Garbage collection interaction"
-Observers use weak references to nodes internally. That is, if a node is removed from the DOM, and becomes unreachable, then it can be garbage collected.
+```smart header="تعامل جمع آوری زباله"
+ناظران از ارجاعات ضعیف به گره ها در داخل استفاده می کنند. به این معنا که اگر یک گره از DOM حذف شود و غیرقابل دسترسی شود، می‌توان زباله‌ها را جمع‌آوری کرد.
 
-The mere fact that a DOM node is observed doesn't prevent the garbage collection.
+صرف این واقعیت که یک گره DOM مشاهده می شود مانع از جمع آوری زباله نمی شود.
 ```
 
 ## Summary  

From 35b4634d8cc4a490d9eb55b82a7e248394f5fe59 Mon Sep 17 00:00:00 2001
From: Hanna parsa <hanaparsa8080@gmail.com>
Date: Tue, 29 Aug 2023 08:24:05 +0330
Subject: [PATCH 17/20] Update article.md


From 6fca7009eb42fa66b83b3da55d42967d86d60a04 Mon Sep 17 00:00:00 2001
From: Hanna parsa <hanaparsa8080@gmail.com>
Date: Tue, 29 Aug 2023 08:25:16 +0330
Subject: [PATCH 18/20] Update article.md

---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index 469ebcf6b..e8b475758 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -36,7 +36,6 @@ observer.observe(node, config);
 
 
   شی (object) های [MutationRecord](https://dom.spec.whatwg.org/#mutationrecord) properties هایی دارند:
-
 - `type` -- mutation type, یکی از موارد زیر
     - `"attributes"`: attribute modified
     - `"characterData"`: data modified, used for text nodes,
@@ -77,8 +76,7 @@ mutationRecords = [{
 }];
 ```
 
-اگر ما ادیت های پیچیده تری را اجرا کنیم، مانند ریمو کردن `<b>edit</b>`، آن گاه mutation event ممکن است شامل تعدادی mutation records باشد:   
-
+اگر ما ادیت های پیچیده تری را اجرا کنیم، مانند ریمو کردن `<b>edit</b>`، آن گاه mutation event ممکن است شامل تعدادی mutation records باشد:  
 ```js
 mutationRecords = [{
   type: "childList",

From 4edaf33524e06f5ca11f7bd664fb02a2212d4d7f Mon Sep 17 00:00:00 2001
From: Hanna parsa <hanaparsa8080@gmail.com>
Date: Wed, 30 Aug 2023 09:14:12 +0330
Subject: [PATCH 19/20] Update article.md

---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index e8b475758..10ae14dc0 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -5,7 +5,7 @@
 
 ابتدا نگاهی به نحو می اندازیم و سپس یک مورد استفاده در دنیای واقعی را بررسی می کنیم تا ببینیم چنین چیزی در کجا ممکن است مفید باشد.
 
-## Syntax
+## سینتکس
 
 استفاده از `MutationObserver` بسیار ساده است.
 
@@ -96,7 +96,7 @@ mutationRecords = [{
 
 پس، `MutationObserver` اجازه می دهد که به هر اغییری در DOM subtree واکنش نشان دهیم.
 
-## Usage for integration
+## کاربرد های integration
 
 چه زمانی این اتفاقات به صورت دیفالت رخ می دهند؟
 
@@ -111,7 +111,7 @@ mutationRecords = [{
 
  هم چنین `MutationObserver` امکان اجرای این را فراهم می کند.
 
-## Usage for architecture
+## کاربرد های architecture
 
 همچنین شرایطی وجود دارد که `MutationObserver` از نظر معماری خوب است.
 
@@ -172,7 +172,7 @@ snippets.forEach(Prism.highlightElem);
 
 بنابراین ما عملکرد برجسته سازی را در یک مکان مدیریت می کنیم و ما را از نیاز به ادغام آن رها می کنیم.
 
-### Dynamic highlight demo
+### داینامیک highlight demo
 
 و مثالی که کار می کند.
 
@@ -230,7 +230,7 @@ demoElem.innerHTML = `A code snippet is below:
 
 اکنون `MutationObserver` را داریم که می تواند تمام برجسته سازی ها در عناصر مشاهده شده یا کل `document` را ردیابی کند. ما می‌توانیم تکه‌های کد را بدون فکر کردن در HTML اضافه یا حذف کنیم.
 
-## Additional methods
+## متد های اضافه
 
 روشی برای توقف مشاهده گره وجود دارد:
 
@@ -264,7 +264,7 @@ observer.disconnect();
 صرف این واقعیت که یک گره DOM مشاهده می شود مانع از جمع آوری زباله نمی شود.
 ```
 
-## Summary  
+## خلاصه  
 
  پس`MutationObserver` می تواند به تغییرات در DOM - ویژگی ها، محتوای متن و افزودن/حذف عناصر واکنش نشان دهد.
 

From e3b44ad34dafc1df9bd588ead7dddf8a3fcd9e0e Mon Sep 17 00:00:00 2001
From: Hanna parsa <hanaparsa8080@gmail.com>
Date: Fri, 1 Sep 2023 19:53:48 +0330
Subject: [PATCH 20/20] Update article.md

---
 2-ui/4-forms-controls/3-events-change-input/article.md | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md
index 030eb9144..21298b94c 100644
--- a/2-ui/4-forms-controls/3-events-change-input/article.md
+++ b/2-ui/4-forms-controls/3-events-change-input/article.md
@@ -1,6 +1,5 @@
 # Events: change, input, cut, copy, paste
 
-
 بیایید eventهای مختلفی که همراه با آپدیت داده‌ها هستند پوشش دهیم.
 
 ## Event: change
@@ -11,16 +10,13 @@
 
 برای مثال وقتی که ما داریم در text field زیر تایپ می‌کنیم -- هیچ eventای وجود ندارد. اما وقتی focus را به جایی دیگر منتقل می‌کنیم، برای مثال، روی یک button کلیک می‌کنیم، یک `change` event به وجود خواهد آمد:
 
-
 ```html autorun height=40 run
 <input type="text" onchange="alert(this.value)">
 <input type="button" value="Button">
 ```
 
-
 برای دیگر elementها: `select` و `input type=checkbox/radio` دقیقا بعد از آن که انتخاب تغییر می‌کند فعال می‌شود:
 
-
 ```html autorun height=40 run
 <select onchange="alert(this.value)">
   <option value="">چیزی را انتخاب کنید</option>