From 0f522a4329bd25227fb599fde5790f71cb8ec723 Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Mon, 13 Sep 2021 22:56:15 +0430 Subject: [PATCH 01/49] first commit by me --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index f5afca5e5..b944782fc 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -6,7 +6,7 @@ libs: # DOM tree -The backbone of an HTML document is tags. +ستون فقرات سند html برچسب ها هستند. According to the Document Object Model (DOM), every HTML tag is an object. Nested tags are "children" of the enclosing one. The text inside a tag is an object as well. From 53cdc713b4450597d0173a852239eb81f2f44665 Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Fri, 7 Jan 2022 21:16:30 +0330 Subject: [PATCH 02/49] An example of the DOM --- 2-ui/1-document/02-dom-nodes/article.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index b944782fc..b4c782d17 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -8,29 +8,29 @@ libs: ستون فقرات سند html برچسب ها هستند. -According to the Document Object Model (DOM), every HTML tag is an object. Nested tags are "children" of the enclosing one. The text inside a tag is an object as well. +طبق مدل Document Object (DOM)، هر تگ HTML یک شی است. تگ های داخلی "فرزندانِ" برچسب های دربرگیرنده هستند. متن داخل تگ نیز یک شی است. -All these objects are accessible using JavaScript, and we can use them to modify the page. +همه این اشیا با استفاده از جاوا اسکریپت قابل دسترسی هستند و ما می توانیم از آنها برای تغییر صفحه استفاده کنیم. -For example, `document.body` is the object representing the `` tag. +به عنوان مثال، `document.body` شیئی است که تگ `` را نشان می دهد. -Running this code will make the `` red for 3 seconds: +با اجرای این کد، `` به مدت 3 ثانیه قرمز می شود: ```js run -document.body.style.background = 'red'; // make the background red +document.body.style.background = 'red'; // پس زمینه را قرمز کن -setTimeout(() => document.body.style.background = '', 3000); // return back +setTimeout(() => document.body.style.background = '', 3000); // برگرد ``` -Here we used `style.background` to change the background color of `document.body`, but there are many other properties, such as: +در اینجا ما از `style.background` برای تغییر رنگ پس زمینه `document.body` استفاده کردیم، اما ویژگی های زیادِ دیگری وجود دارد، مانند: -- `innerHTML` -- HTML contents of the node. -- `offsetWidth` -- the node width (in pixels) -- ...and so on. +- `innerHTML` -- HTML محتویاتِ گره +- `offsetWidth` -- عرض گره (بر حسب پیکسل) +- غیره و ... -Soon we'll learn more ways to manipulate the DOM, but first we need to know about its structure. +به زودی راه های بیشتری برای دستکاری DOM یاد خواهیم گرفت، اما ابتدا باید ساختار آن را بدانیم. -## An example of the DOM +## نمونه ای از DOM Let's start with the following simple document: From e97a4d1014bbe44951db0c9ac1820b44bcd8eb0f Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Fri, 7 Jan 2022 21:39:50 +0330 Subject: [PATCH 03/49] every tree node --- 2-ui/1-document/02-dom-nodes/article.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index b4c782d17..a1cfab387 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -32,21 +32,21 @@ setTimeout(() => document.body.style.background = '', 3000); // برگرد ## نمونه ای از DOM -Let's start with the following simple document: +بیایید با سند ساده زیر شروع کنیم: ```html run no-beautify - About elk + درباره گوزن شمالی - The truth about elk. + حقیقت درباره گوزن شمالی. ``` -The DOM represents HTML as a tree structure of tags. Here's how it looks: +اینجا چگونه به نظر می رسد که DOM اچ تی ام ال را به عنوان یک ساختار درختی از برچسب ها نشان می دهد:
@@ -56,8 +56,9 @@ let node1 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node1, 'div.domtree', 690, 320); + ```online -On the picture above, you can click on element nodes and their children will open/collapse. +در تصویر بالا، می توانید روی گره های عنصر کلیک کنید و فرزندان آنها باز می شوند. ``` Every tree node is an object. From 8865d99d666d9921411f419642ee5e3816118d8b Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Sat, 8 Jan 2022 07:16:55 +0330 Subject: [PATCH 04/49] tags --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index a1cfab387..bcf46ddaf 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -61,7 +61,7 @@ drawHtmlTree(node1, 'div.domtree', 690, 320); در تصویر بالا، می توانید روی گره های عنصر کلیک کنید و فرزندان آنها باز می شوند. ``` -Every tree node is an object. +هر گره ی درخت یک شی است. Tags are *element nodes* (or just elements) and form the tree structure: `` is at the root, then `` and `` are its children, etc. From fcc4e7cc1e3b3946f5f584ee9ae77957f04c60a3 Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Sat, 8 Jan 2022 13:10:10 +0330 Subject: [PATCH 05/49] a space --- 2-ui/1-document/02-dom-nodes/article.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index bcf46ddaf..1adf8571b 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -63,16 +63,16 @@ drawHtmlTree(node1, 'div.domtree', 690, 320); هر گره ی درخت یک شی است. -Tags are *element nodes* (or just elements) and form the tree structure: `` is at the root, then `` and `` are its children, etc. +تگها *گره های عنصر* (عناصر) هستند و ساختار درختی را تشکیل می دهند: `` در ریشه است، سپس `` و `` فرزندان آن هستند و .... -The text inside elements forms *text nodes*, labelled as `#text`. A text node contains only a string. It may not have children and is always a leaf of the tree. +متن داخل عناصر *گره های متنی* را تشکیل می دهد که با عنوان `text#` برچسب گذاری شده اند. یک گره متنی فقط شامل یک رشته است. ممکن است فرزندی نداشته باشد و همیشه برگ درخت باشد. -For instance, the `` tag has the text `"About elk"`. +به عنوان مثال تگِ `<title>` متن `"درباره ی گوزن شمالی"` را دارد. -Please note the special characters in text nodes: +لطفاً به کاراکترهای خاص در گره های متن توجه کنید: -- a newline: `↵` (in JavaScript known as `\n`) -- a space: `␣` +- یک خط جدید: `↵` (در جاوااسکریپت به `n\` شناخته میشود.) +- یک فاصله(space) : `␣` Spaces and newlines are totally valid characters, like letters and digits. They form text nodes and become a part of the DOM. So, for instance, in the example above the `<head>` tag contains some spaces before `<title>`, and that text becomes a `#text` node (it contains a newline and some spaces only). From e713af0a3db584e67be6d5d787a60ca65fbd9512 Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Sat, 8 Jan 2022 13:21:58 +0330 Subject: [PATCH 06/49] historical --- 2-ui/1-document/02-dom-nodes/article.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 1adf8571b..3ee2bfe59 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -4,9 +4,8 @@ libs: --- -# DOM tree - -ستون فقرات سند html برچسب ها هستند. +# درخت DOM +ستون فقرات سند html تگ ها هستند. طبق مدل Document Object (DOM)، هر تگ HTML یک شی است. تگ های داخلی "فرزندانِ" برچسب های دربرگیرنده هستند. متن داخل تگ نیز یک شی است. @@ -46,7 +45,7 @@ setTimeout(() => document.body.style.background = '', 3000); // برگرد </html> ``` -اینجا چگونه به نظر می رسد که DOM اچ تی ام ال را به عنوان یک ساختار درختی از برچسب ها نشان می دهد: +اینجا چگونه به نظر می رسد که DOM اچ تی ام ال را به عنوان یک ساختار درختی از تگ ها نشان می دهد: <div class="domtree"></div> @@ -74,9 +73,9 @@ drawHtmlTree(node1, 'div.domtree', 690, 320); - یک خط جدید: `↵` (در جاوااسکریپت به `n\` شناخته میشود.) - یک فاصله(space) : `␣` -Spaces and newlines are totally valid characters, like letters and digits. They form text nodes and become a part of the DOM. So, for instance, in the example above the `<head>` tag contains some spaces before `<title>`, and that text becomes a `#text` node (it contains a newline and some spaces only). +فاصله ها و خطوط جدید کاراکترهای کاملاً معتبری هستند، مانند حروف و اعداد. آنها گره های متنی را تشکیل می دهند و بخشی از DOM می شوند. بنابراین، برای مثال، در مثال بالا، تگ `<head>` حاوی چند فاصله قبل از `<title>` است، و آن متن به یک گره `text#` تبدیل می‌شود (که فقط حاوی یک خط جدید و چند فاصله است). -There are only two top-level exclusions: +فقط دو استثناء سطح بالا وجود دارد: 1. Spaces and newlines before `<head>` are ignored for historical reasons. 2. If we put something after `</body>`, then that is automatically moved inside the `body`, at the end, as the HTML spec requires that all content must be inside `<body>`. So there can't be any spaces after `</body>`. From 4fd343efd15304034fe6e757fddd3366abfe7b5c Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Sat, 8 Jan 2022 14:56:23 +0330 Subject: [PATCH 07/49] space-only --- 2-ui/1-document/02-dom-nodes/article.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 3ee2bfe59..8a4be1672 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -50,7 +50,7 @@ setTimeout(() => document.body.style.background = '', 3000); // برگرد <div class="domtree"></div> <script> -let node1 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n "},{"name":"TITLE","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"About elk"}]},{"name":"#text","nodeType":3,"content":"\n"}]},{"name":"#text","nodeType":3,"content":"\n"},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n The truth about elk.\n\n\n"}]}]} +let node1 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n "},{"name":"TITLE","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"درباره گوزن شمالی"}]},{"name":"#text","nodeType":3,"content":"\n"}]},{"name":"#text","nodeType":3,"content":"\n"},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n حقیقت درباره گوزن شمالی.\n\n\n"}]}]} drawHtmlTree(node1, 'div.domtree', 690, 320); </script> @@ -76,16 +76,16 @@ drawHtmlTree(node1, 'div.domtree', 690, 320); فاصله ها و خطوط جدید کاراکترهای کاملاً معتبری هستند، مانند حروف و اعداد. آنها گره های متنی را تشکیل می دهند و بخشی از DOM می شوند. بنابراین، برای مثال، در مثال بالا، تگ `<head>` حاوی چند فاصله قبل از `<title>` است، و آن متن به یک گره `text#` تبدیل می‌شود (که فقط حاوی یک خط جدید و چند فاصله است). فقط دو استثناء سطح بالا وجود دارد: -1. Spaces and newlines before `<head>` are ignored for historical reasons. -2. If we put something after `</body>`, then that is automatically moved inside the `body`, at the end, as the HTML spec requires that all content must be inside `<body>`. So there can't be any spaces after `</body>`. +1. فاصله ها و خطوط جدید قبل از `<head>` به دلایل تاریخی نادیده گرفته می شوند. +2. اگر چیزی را بعد از `</body>` قرار دهیم، در پایان به طور خودکار به داخل `body` منتقل می‌شود، زیرا مشخصات HTML ایجاب می‌کند که تمام محتوا باید داخل `<body>` باشد. بنابراین هیچ فاصله ای بعد از `</body>` وجود ندارد. -In other cases everything's straightforward -- if there are spaces (just like any character) in the document, then they become text nodes in the DOM, and if we remove them, then there won't be any. +در موارد دیگر همه چیز سر راست است -- اگر در سند فاصله وجود داشته باشد(دقیقاً مانند هر کاراکتری)، آنها به گره های متنی در DOM تبدیل می شوند، و اگر آنها را حذف کنیم، وجود نخواهند داشت. -Here are no space-only text nodes: +در اینجا هیچ گره متنی صرفا-فاصله وجود ندارد: ```html no-beautify <!DOCTYPE HTML> -<html><head><title>About elkThe truth about elk. +درباره ی گوزن شمالیحقیقت در مورد گوزن شمالی. ```
From ad3a397fff3693b58b79434906f30098c13040ae Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Sat, 8 Jan 2022 23:10:40 +0330 Subject: [PATCH 08/49] Hi dad --- 2-ui/1-document/02-dom-nodes/article.md | 28 ++++++++++++------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 8a4be1672..a5a935da2 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -97,20 +97,20 @@ drawHtmlTree(node2, 'div.domtree', 690, 210); ```smart header="Spaces at string start/end and space-only text nodes are usually hidden in tools" -Browser tools (to be covered soon) that work with DOM usually do not show spaces at the start/end of the text and empty text nodes (line-breaks) between tags. +ابزارهای مرورگر (به زودی نشان داده خواهد شد) که با DOM کار می کنند معمولاً فاصله ها را در ابتدا / انتهای متن و گره های متنِ خالیِ بین تگ ها(خطوط شکسته) را نشان نمی دهند. -Developer tools save screen space this way. +ابزارهای توسعه دهنده(ابزارهای مرورگر) از این طریق فضای صفحه را حفظ می کنند. -On further DOM pictures we'll sometimes omit them when they are irrelevant. Such spaces usually do not affect how the document is displayed. +در ادامه ی تصاویر DOM ، گاهی اوقات زمانی که نامربوط هستند آنها را حذف می کنیم. چنین فضاهایی معمولاً بر نحوه نمایش سند تأثیر نمی گذارد. ``` -## Autocorrection +## تصحیح خودکار -If the browser encounters malformed HTML, it automatically corrects it when making the DOM. +اگر مرورگر با HTML نادرست مواجه شود، هنگام ساخت DOM به طور خودکار آن را تصحیح می کند. -For instance, the top tag is always ``. Even if it doesn't exist in the document, it will exist in the DOM, because the browser will create it. The same goes for ``. +به عنوان مثال، تگ بالا همیشه `` است. حتی اگر در سند وجود نداشته باشد، در DOM وجود خواهد داشت، زیرا مرورگر آن را ایجاد می کند. `` هم همینطور. -As an example, if the HTML file is the single word `"Hello"`, the browser will wrap it into `` and ``, and add the required ``, and the DOM will be: +به عنوان مثال، اگر فایل HTML تنها کلمه `"Hello"` باشد، مرورگر آن را با `` و `` می پیچد و `` ضروری را اضافه می‌کند و DOM اینطور خواهد بود:
@@ -121,18 +121,18 @@ let node3 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node3, 'div.domtree', 690, 150); -While generating the DOM, browsers automatically process errors in the document, close tags and so on. +هنگام تولید DOM، مرورگرها به طور خودکار خطاهای سند را پردازش می کنند، تگ ها را می بندند و غیره. -A document with unclosed tags: +سندی با تگ های بسته نشده: ```html no-beautify -

Hello -

  • Mom -
  • and -
  • Dad +

    سلام +

  • مامان +
  • و +
  • بابا ``` -...will become a normal DOM as the browser reads tags and restores the missing parts: +...وقتی مرورگر تگ ها را می خواند و قسمت های از دست رفته را بازیابی می کند، به یک DOM معمولی تبدیل می شود:
    From 63625e62004623472ed9ad0027905ecfebe7cf2c Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Sun, 9 Jan 2022 15:16:53 +0330 Subject: [PATCH 09/49] comment --- 2-ui/1-document/02-dom-nodes/article.md | 35 +++++++++++++------------ 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index a5a935da2..fbe9957f1 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -142,16 +142,17 @@ let node4 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node4, 'div.domtree', 690, 360); -````warn header="Tables always have ``" -An interesting "special case" is tables. By DOM specification they must have `` tag, but HTML text may omit it. Then the browser creates `` in the DOM automatically. +```` +warn header="جداول همیشه تگ `` دارند." -For the HTML: +یک چیز جالب "مورد خاص" جداول است. بر اساس مشخصات DOM، آنها باید تگ `` داشته باشند، اما متن HTML ممکن است آن را از قلم انداخته باشد. سپس مرورگر به صورت خودکار `` را در DOM ایجاد می کند. -```html no-beautify -
    1
    -``` +برای HTML: -DOM-structure will be: + ```html no-beautify +
    1
    + ``` +ساختار DOM اینطور خواهد بود:
    -You see? The `` appeared out of nowhere. We should keep this in mind while working with tables to avoid surprises. +می بینی؟ `` از ناکجاآباد ظاهر شد. هنگام کار با جداول باید این را در نظر داشته باشیم تا از غافلگیری جلوگیری کنیم. ```` -## Other node types +## انواع دیگر گره ها -There are some other node types besides elements and text nodes. +علاوه بر عناصر و گره های متن، انواع گره های دیگری نیز وجود دارد. -For example, comments: +به عنوان مثال، نظرات: ```html - The truth about elk. + حقیقت در مورد گوزن.
      -
    1. An elk is a smart
      2. +
    2. گوزن شمالی باهوش است
      3. *!* */!* -
    3. ...and cunning animal!
      4. +
    4. ...و حیوانی حیله گر!
    @@ -188,14 +189,14 @@ For example, comments:
    -We can see here a new tree node type -- *comment node*, labeled as `#comment`, between two text nodes. +ما می‌توانیم در اینجا یک نوع گره درختی جدید ببینیم -- *گره comment*، با برچسب `comment#`، بین دو گره متن. -We may think -- why is a comment added to the DOM? It doesn't affect the visual representation in any way. But there's a rule -- if something's in HTML, then it also must be in the DOM tree. +ممکن است فکر کنیم -- چرا یک comment به DOM اضافه شده است؟ به هیچ وجه بر نمایش بصری تأثیر نمی گذارد. اما یک قانون وجود دارد - اگر چیزی در HTML است، باید در درخت DOM نیز باشد. **Everything in HTML, even comments, becomes a part of the DOM.** From 83210721453fcc568f4c02e24782ddd0068333f7 Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Mon, 10 Jan 2022 10:05:23 +0330 Subject: [PATCH 10/49] document obj --- 2-ui/1-document/02-dom-nodes/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index fbe9957f1..391101706 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -198,11 +198,11 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); ممکن است فکر کنیم -- چرا یک comment به DOM اضافه شده است؟ به هیچ وجه بر نمایش بصری تأثیر نمی گذارد. اما یک قانون وجود دارد - اگر چیزی در HTML است، باید در درخت DOM نیز باشد. -**Everything in HTML, even comments, becomes a part of the DOM.** +**همه چیز در HTML، حتی comments، بخشی از DOM می شود.** -Even the `` directive at the very beginning of HTML is also a DOM node. It's in the DOM tree right before ``. Few people know about that. We are not going to touch that node, we even don't draw it on diagrams, but it's there. +حتی دستور `<...DOCTYPE!>` در همان ابتدای HTML نیز یک گره DOM است. درست قبل از `` در درخت DOM قرار دارد. تعداد کمی از مردم در مورد آن می دانند. ما قرار نیست به آن دست بزنیم، حتی آن را روی نمودارها نمی کشیم، اما آنجاست. -The `document` object that represents the whole document is, formally, a DOM node as well. +شی `document` که کل سند را نشان می دهد، به طور رسمی، یک گره DOM نیز هست. There are [12 node types](https://dom.spec.whatwg.org/#node). In practice we usually work with 4 of them: From 10e53f6894821f39d4009f530e27dff9b9d9523f Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Mon, 10 Jan 2022 20:40:58 +0330 Subject: [PATCH 11/49] Real-Time --- 2-ui/1-document/02-dom-nodes/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 391101706..19371b3f6 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -204,14 +204,14 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); شی `document` که کل سند را نشان می دهد، به طور رسمی، یک گره DOM نیز هست. -There are [12 node types](https://dom.spec.whatwg.org/#node). In practice we usually work with 4 of them: +12 نوع گره وجود دارد. در عمل ما معمولا با 4 مورد از آنها کار می کنیم [12 node types](https://dom.spec.whatwg.org/#node) : -1. `document` -- the "entry point" into DOM. +1. "نقطه ی ورود" به `document` -- DOM 2. element nodes -- HTML-tags, the tree building blocks. 3. text nodes -- contain text. 4. comments -- sometimes we can put information there, it won't be shown, but JS can read it from the DOM. -## See it for yourself +## خودتان آن را ببینید To see the DOM structure in real-time, try [Live DOM Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/). Just type in the document, and it will show up as a DOM at an instant. From 23f5896f016890de7188d6817170a313debd221b Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Mon, 10 Jan 2022 21:32:57 +0330 Subject: [PATCH 12/49] dev tools --- 2-ui/1-document/02-dom-nodes/article.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 19371b3f6..cd7e94878 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -213,19 +213,19 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); ## خودتان آن را ببینید -To see the DOM structure in real-time, try [Live DOM Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/). Just type in the document, and it will show up as a DOM at an instant. +برای دیدن ساختار Dom به صورت real-time , امتحان کنید [Live DOM Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/). فقط در سند تایپ کنید و درجا به عنوان یک DOM نشان داده خواهد شد. -Another way to explore the DOM is to use the browser developer tools. Actually, that's what we use when developing. +راه دیگر برای کشف DOM استفاده از ابزارهای توسعه دهنده مرورگر است. در واقع، این همان چیزی است که ما هنگام توسعه استفاده می کنیم. -To do so, open the web page [elk.html](elk.html), turn on the browser developer tools and switch to the Elements tab. +برای انجام این کار،این صفحه را باز کنید [elk.html](elk.html), ابزارهای توسعه دهنده مرورگر را فعال کنید و به تب Elements بروید. -It should look like this: +باید شبیه به این باشه: ![](elk.svg) -You can see the DOM, click on elements, see their details and so on. +می توانید DOM را ببینید، روی عناصر کلیک کنید، جزئیات آنها را ببینید و غیره. -Please note that the DOM structure in developer tools is simplified. Text nodes are shown just as text. And there are no "blank" (space only) text nodes at all. That's fine, because most of the time we are interested in element nodes. +لطفاً توجه داشته باشید که ساختار DOM در ابزارهای توسعه دهنده ساده شده است. گره های متن درست به صورت متن نشان داده می شوند. و هیچ گره متنی "خالی" (فقط فاصله) وجود ندارد. این خوب است، زیرا اغلب ما به گره های عنصر علاقه مندیم.. Clicking the button in the left-upper corner allows us to choose a node from the webpage using a mouse (or other pointer devices) and "inspect" it (scroll to it in the Elements tab). This works great when we have a huge HTML page (and corresponding huge DOM) and would like to see the place of a particular element in it. From f36301679d63e3eba839ef81fcc942838075b322 Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Tue, 11 Jan 2022 12:16:46 +0330 Subject: [PATCH 13/49] interaction --- 2-ui/1-document/02-dom-nodes/article.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index cd7e94878..9655b7c3e 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -217,7 +217,7 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); راه دیگر برای کشف DOM استفاده از ابزارهای توسعه دهنده مرورگر است. در واقع، این همان چیزی است که ما هنگام توسعه استفاده می کنیم. -برای انجام این کار،این صفحه را باز کنید [elk.html](elk.html), ابزارهای توسعه دهنده مرورگر را فعال کنید و به تب Elements بروید. +برای انجام این کار،این صفحه را باز کنید [elk.html](elk.html), ابزارهای توسعه دهنده مرورگر را فعال کنید و به زبانه Elements بروید. باید شبیه به این باشه: @@ -227,19 +227,19 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); لطفاً توجه داشته باشید که ساختار DOM در ابزارهای توسعه دهنده ساده شده است. گره های متن درست به صورت متن نشان داده می شوند. و هیچ گره متنی "خالی" (فقط فاصله) وجود ندارد. این خوب است، زیرا اغلب ما به گره های عنصر علاقه مندیم.. -Clicking the button in the left-upper corner allows us to choose a node from the webpage using a mouse (or other pointer devices) and "inspect" it (scroll to it in the Elements tab). This works great when we have a huge HTML page (and corresponding huge DOM) and would like to see the place of a particular element in it. +با کلیک روی دکمه ی در گوشه سمت چپ بالا می توانیم با استفاده از ماوس (یا سایر دستگاه های اشاره گر) یک گره از صفحه وب انتخاب کرده و آن را "inspect" کنیم (در زبانه elements به ان scroll کنید). وقتی یک صفحه HTML بزرگ (و DOM بزرگ مربوطه) داریم و می‌خواهیم جای یک عنصر خاص را در آن ببینیم، عالی عمل می‌کند. -Another way to do it would be just right-clicking on a webpage and selecting "Inspect" in the context menu. +راه دیگر برای انجام این کار فقط کلیک راست بر روی یک صفحه وب و انتخاب "Inspect" در منوی context است. ![](inspect.svg) -At the right part of the tools there are the following subtabs: -- **Styles** -- we can see CSS applied to the current element rule by rule, including built-in rules (gray). Almost everything can be edited in-place, including the dimensions/margins/paddings of the box below. -- **Computed** -- to see CSS applied to the element by property: for each property we can see a rule that gives it (including CSS inheritance and such). -- **Event Listeners** -- to see event listeners attached to DOM elements (we'll cover them in the next part of the tutorial). -- ...and so on. +در قسمت سمت راست ابزارها زیر زبانه های زیر وجود دارد: +- **Styles** -- می‌توانیم CSS را ببینیم که قانون به قانون بر عنصر فعلی اعمال می‌شود، از جمله قوانین داخلی (خاکستری رنگ). تقریباً همه چیز را می توان در جای خود ویرایش کرد، از جمله ابعاد / حاشیه های بیرونی / حاشیه های داخلی از طریق جعبه ی زیری. +- **Computed** -- برای مشاهده CSS اعمال شده بر روی عنصر توسط ویژگی: برای هر ویژگی می‌توانیم قاعده‌ای را ببینیم که به آن می‌دهد (از جمله وراثت CSS و غیره). +- **Event Listeners** -- برای دیدن event listener متصل به عناصر DOM (ما آنها را در قسمت بعدی آموزش پوشش خواهیم داد). +- ...و غیره. -The best way to study them is to click around. Most values are editable in-place. +بهترین راه برای مطالعه آنها کلیک کردن در داخل آنها است. اکثر مقادیر درجا قابل ویرایش هستند. ## Interaction with console From decbc2f9a5d78ee4782da1760df5e7fd8c925f11 Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Tue, 11 Jan 2022 12:29:34 +0330 Subject: [PATCH 14/49] key:Esc --- 2-ui/1-document/02-dom-nodes/article.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 9655b7c3e..b70c8aaee 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -241,16 +241,16 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); بهترین راه برای مطالعه آنها کلیک کردن در داخل آنها است. اکثر مقادیر درجا قابل ویرایش هستند. -## Interaction with console +## تعامل با کنسول -As we work the DOM, we also may want to apply JavaScript to it. Like: get a node and run some code to modify it, to see the result. Here are few tips to travel between the Elements tab and the console. +همانطور که ما روی DOM کار می کنیم، ممکن است بخواهیم جاوا اسکریپت را نیز روی آن اعمال کنیم. مانند: یک گره بگیرید و کدی را برای تغییر آن اجرا کنید تا نتیجه را ببینید. در اینجا چند نکته برای جابجایی بین زبانه Elements و کنسول وجود دارد. -For the start: +برای شروع: -1. Select the first `
  • ` in the Elements tab. -2. Press `key:Esc` -- it will open console right below the Elements tab. +1. اولین `
  • ` را در زبانه Elements انتخاب کنید. +2. بزنید `key:Esc` -- کنسول درست زیر زبانه Elements باز می شود. -Now the last selected element is available as `$0`, the previously selected is `$1` etc. +اکنون آخرین عنصر انتخاب شده به عنوان `$0` در دسترس است، عنصر انتخاب شده قبلی `$1` و غیره است. We can run commands on them. For instance, `$0.style.background = 'red'` makes the selected list item red, like this: From 06ff42d037822191ce3ec5fba8c3f4dd66522c78 Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Tue, 11 Jan 2022 20:42:41 +0330 Subject: [PATCH 15/49] html ltr --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index b70c8aaee..4849fac3b 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -252,7 +252,7 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); اکنون آخرین عنصر انتخاب شده به عنوان `$0` در دسترس است، عنصر انتخاب شده قبلی `$1` و غیره است. -We can run commands on them. For instance, `$0.style.background = 'red'` makes the selected list item red, like this: +ما می توانیم دستورات را روی آنها اجرا کنیم. به عنوان مثال `$0.style.background = 'red'`، آیتمِ لیست انتخاب شده را قرمز می کند، مانند این: ![](domconsole0.svg) From fcd3f94d1074a338a1c2edaec867e08dd06e71b2 Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Wed, 12 Jan 2022 12:05:59 +0330 Subject: [PATCH 16/49] almost ready --- 2-ui/1-document/02-dom-nodes/article.md | 26 ++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 4849fac3b..e455a7e63 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -256,28 +256,28 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); ![](domconsole0.svg) -That's how to get a node from Elements in Console. +به این ترتیب می توان یک گره از Elements را از کنسول دریافت کرد. -There's also a road back. If there's a variable referencing a DOM node, then we can use the command `inspect(node)` in Console to see it in the Elements pane. +یک راه برگشت هم هست اگر متغیری وجود دارد که به یک گره DOM ارجاع می دهد، می توانیم از دستور `inspect(node)` در کنسول استفاده کنیم تا آن را در قسمت Elements ببینیم. -Or we can just output the DOM node in the console and explore "in-place", like `document.body` below: +یا فقط می‌توانیم گره DOM را در کنسول خروجی بگیریم و "درجا" کاوش کنیم، مانند `document.body` در زیر: ![](domconsole1.svg) -That's for debugging purposes of course. From the next chapter on we'll access and modify DOM using JavaScript. +این البته برای اهداف اشکال زدایی است. از فصل بعدی به DOM با استفاده از جاوا اسکریپت دسترسی پیدا می کنیم و آن را اصلاح می کنیم. -The browser developer tools are a great help in development: we can explore the DOM, try things and see what goes wrong. +ابزارهای توسعه دهنده مرورگر کمک بزرگی در توسعه هستند: ما می‌توانیم DOM را کاوش کنیم، چیزهایی را امتحان کنیم و ببینیم چه مشکلی پیش می‌آید. -## Summary +## خلاصه مطلب -An HTML/XML document is represented inside the browser as the DOM tree. +یک سند HTML/XML در داخل مرورگر به عنوان درخت DOM نشان داده می شود. -- Tags become element nodes and form the structure. -- Text becomes text nodes. -- ...etc, everything in HTML has its place in DOM, even comments. +- تگ‌ها به گره های عنصر تبدیل می شوند و ساختار را تشکیل می دهند. +- متن به گره های متنی تبدیل می شود. +- ... و غیره، همه چیز در HTML جایگاه خود را در DOM دارد، حتی نظرات. -We can use developer tools to inspect DOM and modify it manually. +ما می توانیم از ابزارهای توسعه دهنده برای DOM Inspect و اصلاح آن به صورت دستی استفاده کنیم. -Here we covered the basics, the most used and important actions to start with. There's an extensive documentation about Chrome Developer Tools at . The best way to learn the tools is to click here and there, read menus: most options are obvious. Later, when you know them in general, read the docs and pick up the rest. +در اینجا به اصول اولیه، پرکاربردترین و مهم ترین اقدامات برای شروع پرداختیم. در اسناد گسترده ای در مورد ابزارهای برنامه نویس Chrome وجود دارد. بهترین راه برای یادگیری ابزارها این است که اینجا و آنجا کلیک کنید، منوها را بخوانید: اکثر گزینه ها واضح هستند. بعداً، وقتی آنها را به طور کلی شناختید، اسناد را بخوانید و بقیه را انتخاب کنید. -DOM nodes have properties and methods that allow us to travel between them, modify them, move around the page, and more. We'll get down to them in the next chapters. +گره‌های DOM دارای ویژگی‌ها و روش‌هایی هستند که به ما امکان می‌دهند بین آنها پیمایش کنیم، آنها را اصلاح کنیم، در صفحه حرکت کنیم و موارد دیگر. در فصل های بعدی به آنها خواهیم پرداخت. From 00ebe80b145770ad0801913e916ecadb834191f0 Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Wed, 12 Jan 2022 12:10:35 +0330 Subject: [PATCH 17/49] --- 2-ui/1-document/02-dom-nodes/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index e455a7e63..c9d113433 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -234,9 +234,9 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); ![](inspect.svg) در قسمت سمت راست ابزارها زیر زبانه های زیر وجود دارد: -- **Styles** -- می‌توانیم CSS را ببینیم که قانون به قانون بر عنصر فعلی اعمال می‌شود، از جمله قوانین داخلی (خاکستری رنگ). تقریباً همه چیز را می توان در جای خود ویرایش کرد، از جمله ابعاد / حاشیه های بیرونی / حاشیه های داخلی از طریق جعبه ی زیری. -- **Computed** -- برای مشاهده CSS اعمال شده بر روی عنصر توسط ویژگی: برای هر ویژگی می‌توانیم قاعده‌ای را ببینیم که به آن می‌دهد (از جمله وراثت CSS و غیره). -- **Event Listeners** -- برای دیدن event listener متصل به عناصر DOM (ما آنها را در قسمت بعدی آموزش پوشش خواهیم داد). +- **Styles** -- می‌توانیم CSS را ببینیم که قانون به قانون بر عنصر فعلی اعمال می‌شود، از جمله قوانین داخلی (خاکستری رنگ). تقریباً همه چیز را می توان در جای خود ویرایش کرد، از جمله ابعاد / حاشیه های بیرونی / حاشیه های داخلی از طریق جعبه ی زیری. +- **Computed** -- برای مشاهده CSS اعمال شده بر روی عنصر توسط ویژگی: برای هر ویژگی می‌توانیم قاعده‌ای را ببینیم که به آن می‌دهد (از جمله وراثت CSS و غیره). +- **Event Listeners** -- برای دیدن event listener متصل به عناصر DOM (ما آنها را در قسمت بعدی آموزش پوشش خواهیم داد). - ...و غیره. بهترین راه برای مطالعه آنها کلیک کردن در داخل آنها است. اکثر مقادیر درجا قابل ویرایش هستند. From 9c0456c74d1b3bdde540fe869bb95bfa9b129ffa Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Wed, 12 Jan 2022 22:09:04 +0330 Subject: [PATCH 18/49] rtl span for persian --- 2-ui/1-document/02-dom-nodes/article.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index c9d113433..7ce6a6a4b 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -206,10 +206,10 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); 12 نوع گره وجود دارد. در عمل ما معمولا با 4 مورد از آنها کار می کنیم [12 node types](https://dom.spec.whatwg.org/#node) : -1. "نقطه ی ورود" به `document` -- DOM -2. element nodes -- HTML-tags, the tree building blocks. -3. text nodes -- contain text. -4. comments -- sometimes we can put information there, it won't be shown, but JS can read it from the DOM. +1. `document` -- "نقطه ی ورود" به DOM +2. element nodes -- تگ های HTML، بلوک های ساختار درختی. +3. text nodes -- حاوی متن +4. comments -- گاهی اوقات می توانیم اطلاعات را در آنجا قرار دهیم، نشان داده نمی شود، اما JS می تواند آن را از DOM بخواند. ## خودتان آن را ببینید From 732db986df14abbc0cdcaf31011be21404b4e1ff Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Wed, 12 Jan 2022 22:15:52 +0330 Subject: [PATCH 19/49] last --- 2-ui/1-document/02-dom-nodes/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 7ce6a6a4b..eff7893eb 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -207,9 +207,9 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); 12 نوع گره وجود دارد. در عمل ما معمولا با 4 مورد از آنها کار می کنیم [12 node types](https://dom.spec.whatwg.org/#node) : 1. `document` -- "نقطه ی ورود" به DOM -2. element nodes -- تگ های HTML، بلوک های ساختار درختی. -3. text nodes -- حاوی متن -4. comments -- گاهی اوقات می توانیم اطلاعات را در آنجا قرار دهیم، نشان داده نمی شود، اما JS می تواند آن را از DOM بخواند. +2. گره‌های عنصر -- تگ های HTML، بلوک های ساختار درختی. +3. حاوی متن -- گره‌های متن +4. (comments) -- گاهی اوقات می توانیم اطلاعات را در آنجا قرار دهیم، نشان داده نمی شود، اما JS می تواند آن را از DOM بخواند. ## خودتان آن را ببینید From 50166d7f5026b9fc2254d664f56fb9fee72d88c0 Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Wed, 12 Jan 2022 22:44:18 +0330 Subject: [PATCH 20/49] review --- 2-ui/1-document/02-dom-nodes/article.md | 122 ++++++++++++------------ 1 file changed, 61 insertions(+), 61 deletions(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index eff7893eb..02d734068 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -5,15 +5,15 @@ libs: --- # درخت DOM -ستون فقرات سند html تگ ها هستند. +ستون فقرات سند html تگ‌ها هستند. -طبق مدل Document Object (DOM)، هر تگ HTML یک شی است. تگ های داخلی "فرزندانِ" برچسب های دربرگیرنده هستند. متن داخل تگ نیز یک شی است. +طبق مدل Document Object (DOM)، هر تگ HTML یک شی است. تگ‌های داخلی "فرزندانِ" تگ‌های دربرگیرنده هستند. متن داخل تگ نیز یک شی است. -همه این اشیا با استفاده از جاوا اسکریپت قابل دسترسی هستند و ما می توانیم از آنها برای تغییر صفحه استفاده کنیم. +همه این اشیا با استفاده از جاوا اسکریپت قابل دسترسی هستند و ما می‌توانیم از آنها برای تغییر صفحه استفاده کنیم. -به عنوان مثال، `document.body` شیئی است که تگ `` را نشان می دهد. +به عنوان مثال، `document.body` شیئی است که تگ `` را نشان می‌دهد. -با اجرای این کد، `` به مدت 3 ثانیه قرمز می شود: +با اجرای این کد، `` به مدت 3 ثانیه قرمز می‌شود: ```js run document.body.style.background = 'red'; // پس زمینه را قرمز کن @@ -21,13 +21,13 @@ document.body.style.background = 'red'; // پس زمینه را قرمز کن setTimeout(() => document.body.style.background = '', 3000); // برگرد ``` -در اینجا ما از `style.background` برای تغییر رنگ پس زمینه `document.body` استفاده کردیم، اما ویژگی های زیادِ دیگری وجود دارد، مانند: +در اینجا ما از `style.background` برای تغییر رنگ پس زمینه `document.body` استفاده کردیم، اما ویژگی‌های زیادِ دیگری وجود دارد، مانند: - `innerHTML` -- HTML محتویاتِ گره - `offsetWidth` -- عرض گره (بر حسب پیکسل) - غیره و ... -به زودی راه های بیشتری برای دستکاری DOM یاد خواهیم گرفت، اما ابتدا باید ساختار آن را بدانیم. +به زودی راه‌های بیشتری برای دستکاری DOM یاد خواهیم گرفت، اما ابتدا باید ساختار آن را بدانیم. ## نمونه ای از DOM @@ -45,7 +45,7 @@ setTimeout(() => document.body.style.background = '', 3000); // برگرد ``` -اینجا چگونه به نظر می رسد که DOM اچ تی ام ال را به عنوان یک ساختار درختی از تگ ها نشان می دهد: +اینجا چطور به نظر می رسد, DOM اچ تی ام ال را به عنوان یک ساختار درختی از تگ‌ها نشان می‌هد:
    @@ -57,35 +57,35 @@ drawHtmlTree(node1, 'div.domtree', 690, 320); ```online -در تصویر بالا، می توانید روی گره های عنصر کلیک کنید و فرزندان آنها باز می شوند. +در تصویر بالا، می‌توانیم روی گره‌های عنصر کلیک کنید و فرزندان آنها باز می‌شوند. ``` -هر گره ی درخت یک شی است. +هر گره‌ی درخت یک شی است. -تگها *گره های عنصر* (عناصر) هستند و ساختار درختی را تشکیل می دهند: `` در ریشه است، سپس `` و `` فرزندان آن هستند و .... +تگ‌ها *گره‌های عنصر* (عناصر) هستند و ساختار درختی را تشکیل می‌دهند: `` در ریشه است، سپس `` و `` فرزندان آن هستند و .... -متن داخل عناصر *گره های متنی* را تشکیل می دهد که با عنوان `text#` برچسب گذاری شده اند. یک گره متنی فقط شامل یک رشته است. ممکن است فرزندی نداشته باشد و همیشه برگ درخت باشد. +متن داخل عناصر *گره‌های متنی* را تشکیل می‌دهد که با عنوان `text#` برچسب گذاری شده اند. یک گره متنی فقط شامل یک رشته است. ممکن است فرزندی نداشته باشد و همیشه برگ درخت باشد. -به عنوان مثال تگِ `` متن `"درباره ی گوزن شمالی"` را دارد. +به عنوان مثال تگِ `<title>` متن `"درباره‌ی گوزن شمالی"` را دارد. -لطفاً به کاراکترهای خاص در گره های متن توجه کنید: +لطفاً به کاراکترهای خاص در گره‌های متن توجه کنید: - یک خط جدید: `↵` (در جاوااسکریپت به `n\` شناخته میشود.) - یک فاصله(space) : `␣` -فاصله ها و خطوط جدید کاراکترهای کاملاً معتبری هستند، مانند حروف و اعداد. آنها گره های متنی را تشکیل می دهند و بخشی از DOM می شوند. بنابراین، برای مثال، در مثال بالا، تگ `<head>` حاوی چند فاصله قبل از `<title>` است، و آن متن به یک گره `text#` تبدیل می‌شود (که فقط حاوی یک خط جدید و چند فاصله است). +فاصله ها و خطوط جدید کاراکترهای کاملاً معتبری هستند، مانند حروف و اعداد. آنها گره‌های متنی را تشکیل می‌دهند و بخشی از DOM می‌شوند. بنابراین، برای مثال، در مثال بالا، تگ `<head>` حاوی چند فاصله قبل از `<title>` است، و آن متن به یک گره `text#` تبدیل می‌شود (که فقط حاوی یک خط جدید و چند فاصله است). فقط دو استثناء سطح بالا وجود دارد: -1. فاصله ها و خطوط جدید قبل از `<head>` به دلایل تاریخی نادیده گرفته می شوند. -2. اگر چیزی را بعد از `</body>` قرار دهیم، در پایان به طور خودکار به داخل `body` منتقل می‌شود، زیرا مشخصات HTML ایجاب می‌کند که تمام محتوا باید داخل `<body>` باشد. بنابراین هیچ فاصله ای بعد از `</body>` وجود ندارد. +1. فاصله‌ها و خطوط جدید قبل از `<head>` به دلایل تاریخی نادیده گرفته می‌شوند. +2. اگر چیزی را بعد از `</body>` قرار دهیم، در پایان به طور خودکار به داخل `body` منتقل می‌شود، زیرا مشخصات HTML ایجاب می‌کند که تمام محتوا باید داخل `<body>` باشد. بنابراین هیچ فاصله‌ای بعد از `</body>` وجود ندارد. -در موارد دیگر همه چیز سر راست است -- اگر در سند فاصله وجود داشته باشد(دقیقاً مانند هر کاراکتری)، آنها به گره های متنی در DOM تبدیل می شوند، و اگر آنها را حذف کنیم، وجود نخواهند داشت. +در موارد دیگر همه چیز سر راست است -- اگر در سند فاصله وجود داشته باشد(دقیقاً مانند هر کاراکتری)، آنها به گره‌های متنی در DOM تبدیل می‌شوند، و اگر آنها را حذف کنیم، وجود نخواهند داشت. -در اینجا هیچ گره متنی صرفا-فاصله وجود ندارد: +در اینجا هیچ گره متنی فقط-فاصله وجود ندارد: ```html no-beautify <!DOCTYPE HTML> -<html><head><title>درباره ی گوزن شمالیحقیقت در مورد گوزن شمالی. +درباره‌ی گوزن شمالیحقیقت در مورد گوزن شمالی. ```
    @@ -97,20 +97,20 @@ drawHtmlTree(node2, 'div.domtree', 690, 210); ```smart header="Spaces at string start/end and space-only text nodes are usually hidden in tools" -ابزارهای مرورگر (به زودی نشان داده خواهد شد) که با DOM کار می کنند معمولاً فاصله ها را در ابتدا / انتهای متن و گره های متنِ خالیِ بین تگ ها(خطوط شکسته) را نشان نمی دهند. +ابزارهای مرورگر (به زودی نشان داده خواهد شد) که با DOM کار می‌کنند معمولاً فاصله‌ها را در ابتدا / انتهای متن و گره‌های متنِ خالیِ بین تگ ها(خطوط شکسته) را نشان نمی‌دهند. -ابزارهای توسعه دهنده(ابزارهای مرورگر) از این طریق فضای صفحه را حفظ می کنند. +ابزارهای توسعه دهنده(ابزارهای مرورگر) از این طریق فضای صفحه را حفظ می‌کنند. -در ادامه ی تصاویر DOM ، گاهی اوقات زمانی که نامربوط هستند آنها را حذف می کنیم. چنین فضاهایی معمولاً بر نحوه نمایش سند تأثیر نمی گذارد. +در ادامه ی تصاویر DOM ، گاهی اوقات زمانی که نامربوط هستند آنها را حذف می‌کنیم. چنین فضاهایی معمولاً بر نحوه نمایش سند تأثیر نمی‌گذارد. ``` ## تصحیح خودکار -اگر مرورگر با HTML نادرست مواجه شود، هنگام ساخت DOM به طور خودکار آن را تصحیح می کند. +اگر مرورگر با HTML نادرست مواجه شود، هنگام ساخت DOM به طور خودکار آن را تصحیح می‌کند. -به عنوان مثال، تگ بالا همیشه `` است. حتی اگر در سند وجود نداشته باشد، در DOM وجود خواهد داشت، زیرا مرورگر آن را ایجاد می کند. `` هم همینطور. +به عنوان مثال، تگ بالا همیشه `` است. حتی اگر در سند وجود نداشته باشد، در DOM وجود خواهد داشت، زیرا مرورگر آن را ایجاد می‌کند. `` هم همینطور. -به عنوان مثال، اگر فایل HTML تنها کلمه `"Hello"` باشد، مرورگر آن را با `` و `` می پیچد و `` ضروری را اضافه می‌کند و DOM اینطور خواهد بود: +به عنوان مثال، اگر فایل HTML تنها کلمه `"Hello"` باشد، مرورگر آن را با `` و `` می‌پیچد و `` ضروری را اضافه می‌کند و DOM اینطور خواهد بود:
    @@ -121,9 +121,9 @@ let node3 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node3, 'div.domtree', 690, 150); -هنگام تولید DOM، مرورگرها به طور خودکار خطاهای سند را پردازش می کنند، تگ ها را می بندند و غیره. +هنگام تولید DOM، مرورگرها به طور خودکار خطاهای سند را پردازش می‌کنند، تگ‌ها را می‌بندند و غیره. -سندی با تگ های بسته نشده: +سندی با تگ‌های بسته نشده: ```html no-beautify

    سلام @@ -132,7 +132,7 @@ drawHtmlTree(node3, 'div.domtree', 690, 150);

  • بابا ``` -...وقتی مرورگر تگ ها را می خواند و قسمت های از دست رفته را بازیابی می کند، به یک DOM معمولی تبدیل می شود: +...وقتی مرورگر تگ‌ها را می‌خواند و قسمت‌های از دست رفته را بازیابی می‌کند، به یک DOM معمولی تبدیل می‌شود:
    @@ -145,7 +145,7 @@ drawHtmlTree(node4, 'div.domtree', 690, 360); ```` warn header="جداول همیشه تگ `` دارند." -یک چیز جالب "مورد خاص" جداول است. بر اساس مشخصات DOM، آنها باید تگ `` داشته باشند، اما متن HTML ممکن است آن را از قلم انداخته باشد. سپس مرورگر به صورت خودکار `` را در DOM ایجاد می کند. +یک چیز جالب "مورد خاص" جداول است. بر اساس مشخصات DOM، آنها باید تگ `` داشته باشند، اما متن HTML ممکن است آن را از قلم انداخته باشد. سپس مرورگر به صورت خودکار `` را در DOM ایجاد می‌کند. برای HTML: @@ -161,12 +161,12 @@ let node5 = {"name":"TABLE","nodeType":1,"children":[{"name":"TBODY","nodeType": drawHtmlTree(node5, 'div.domtree', 600, 200); -می بینی؟ `` از ناکجاآباد ظاهر شد. هنگام کار با جداول باید این را در نظر داشته باشیم تا از غافلگیری جلوگیری کنیم. +می‌بینی؟ `` از ناکجاآباد ظاهر شد. هنگام کار با جداول باید این را در نظر داشته باشیم تا از غافلگیری جلوگیری کنیم. ```` -## انواع دیگر گره ها +## انواع دیگر گره‌ها -علاوه بر عناصر و گره های متن، انواع گره های دیگری نیز وجود دارد. +علاوه بر عناصر و گره‌های متن، انواع گره‌های دیگری نیز وجود دارد. به عنوان مثال، نظرات: @@ -180,7 +180,7 @@ drawHtmlTree(node5, 'div.domtree', 600, 200); *!* */!* -
  • ...و حیوانی حیله گر!
    • +
  • ...و حیوانی حیله‌گر!
    • @@ -189,33 +189,33 @@ drawHtmlTree(node5, 'div.domtree', 600, 200);
    ما می‌توانیم در اینجا یک نوع گره درختی جدید ببینیم -- *گره comment*، با برچسب `comment#`، بین دو گره متن. -ممکن است فکر کنیم -- چرا یک comment به DOM اضافه شده است؟ به هیچ وجه بر نمایش بصری تأثیر نمی گذارد. اما یک قانون وجود دارد - اگر چیزی در HTML است، باید در درخت DOM نیز باشد. +ممکن است فکر کنیم -- چرا یک comment به DOM اضافه شده است؟ به هیچ وجه بر نمایش بصری تأثیر نمی‌گذارد. اما یک قانون وجود دارد - اگر چیزی در HTML است، باید در درخت DOM نیز باشد. -**همه چیز در HTML، حتی comments، بخشی از DOM می شود.** +**همه چیز در HTML، حتی comments، بخشی از DOM می‌شود.** -حتی دستور `<...DOCTYPE!>` در همان ابتدای HTML نیز یک گره DOM است. درست قبل از `` در درخت DOM قرار دارد. تعداد کمی از مردم در مورد آن می دانند. ما قرار نیست به آن دست بزنیم، حتی آن را روی نمودارها نمی کشیم، اما آنجاست. +حتی دستور `<...DOCTYPE!>` در همان ابتدای HTML نیز یک گره DOM است. درست قبل از `` در درخت DOM قرار دارد. تعداد کمی از مردم در مورد آن می‌دانند. ما قرار نیست به آن دست بزنیم، حتی آن را روی نمودارها نمی‌کشیم، اما آنجاست. -شی `document` که کل سند را نشان می دهد، به طور رسمی، یک گره DOM نیز هست. +شی `document` که کل سند را نشان می‌دهد، به طور رسمی، یک گره DOM نیز هست. -12 نوع گره وجود دارد. در عمل ما معمولا با 4 مورد از آنها کار می کنیم [12 node types](https://dom.spec.whatwg.org/#node) : +12 نوع گره وجود دارد. در عمل ما معمولا با 4 مورد از آنها کار می‌کنیم [12 node types](https://dom.spec.whatwg.org/#node) : -1. `document` -- "نقطه ی ورود" به DOM -2. گره‌های عنصر -- تگ های HTML، بلوک های ساختار درختی. +1. `document` -- "نقطه‌ی ورود" به DOM +2. گره‌های عنصر -- تگ های HTML، بلوک‌های ساختار درختی. 3. حاوی متن -- گره‌های متن -4. (comments) -- گاهی اوقات می توانیم اطلاعات را در آنجا قرار دهیم، نشان داده نمی شود، اما JS می تواند آن را از DOM بخواند. +4. (comments) -- گاهی اوقات می‌توانیم اطلاعات را در آنجا قرار دهیم، نشان داده نمی‌شود، اما JS می‌تواند آن را از DOM بخواند. ## خودتان آن را ببینید برای دیدن ساختار Dom به صورت real-time , امتحان کنید [Live DOM Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/). فقط در سند تایپ کنید و درجا به عنوان یک DOM نشان داده خواهد شد. -راه دیگر برای کشف DOM استفاده از ابزارهای توسعه دهنده مرورگر است. در واقع، این همان چیزی است که ما هنگام توسعه استفاده می کنیم. +راه دیگر برای کشف DOM استفاده از ابزارهای توسعه دهنده مرورگر است. در واقع، این همان چیزی است که ما هنگام توسعه استفاده می‌کنیم. برای انجام این کار،این صفحه را باز کنید [elk.html](elk.html), ابزارهای توسعه دهنده مرورگر را فعال کنید و به زبانه Elements بروید. @@ -223,18 +223,18 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); ![](elk.svg) -می توانید DOM را ببینید، روی عناصر کلیک کنید، جزئیات آنها را ببینید و غیره. +می‌توانید DOM را ببینید، روی عناصر کلیک کنید، جزئیات آنها را ببینید و غیره. -لطفاً توجه داشته باشید که ساختار DOM در ابزارهای توسعه دهنده ساده شده است. گره های متن درست به صورت متن نشان داده می شوند. و هیچ گره متنی "خالی" (فقط فاصله) وجود ندارد. این خوب است، زیرا اغلب ما به گره های عنصر علاقه مندیم.. +لطفاً توجه داشته باشید که ساختار DOM در ابزارهای توسعه دهنده ساده شده است. گره‌های متن درست به صورت متن نشان داده می‌شوند. و هیچ گره متنی "خالی" (فقط فاصله) وجود ندارد. این خوب است، زیرا اغلب ما به گره‌های عنصر علاقه‌مندیم.. -با کلیک روی دکمه ی در گوشه سمت چپ بالا می توانیم با استفاده از ماوس (یا سایر دستگاه های اشاره گر) یک گره از صفحه وب انتخاب کرده و آن را "inspect" کنیم (در زبانه elements به ان scroll کنید). وقتی یک صفحه HTML بزرگ (و DOM بزرگ مربوطه) داریم و می‌خواهیم جای یک عنصر خاص را در آن ببینیم، عالی عمل می‌کند. +با کلیک روی دکمه‌ی در گوشه سمت چپ بالا می‌توانیم با استفاده از ماوس (یا سایر دستگاه‌های اشاره‌گر) یک گره از صفحه وب انتخاب کرده و آن را "inspect" کنیم (در زبانه elements به ان scroll کنید). وقتی یک صفحه HTML بزرگ (و DOM بزرگ مربوطه) داریم و می‌خواهیم جای یک عنصر خاص را در آن ببینیم، عالی عمل می‌کند. راه دیگر برای انجام این کار فقط کلیک راست بر روی یک صفحه وب و انتخاب "Inspect" در منوی context است. ![](inspect.svg) -در قسمت سمت راست ابزارها زیر زبانه های زیر وجود دارد: -- **Styles** -- می‌توانیم CSS را ببینیم که قانون به قانون بر عنصر فعلی اعمال می‌شود، از جمله قوانین داخلی (خاکستری رنگ). تقریباً همه چیز را می توان در جای خود ویرایش کرد، از جمله ابعاد / حاشیه های بیرونی / حاشیه های داخلی از طریق جعبه ی زیری. +در قسمت سمت راست ابزارها زیر زبانه‌های زیر وجود دارد: +- **Styles** -- می‌توانیم CSS را ببینیم که قانون به قانون بر عنصر فعلی اعمال می‌شود، از جمله قوانین داخلی (خاکستری رنگ). تقریباً همه چیز را می‌توان در جای خود ویرایش کرد، از جمله ابعاد / حاشیه های بیرونی / حاشیه های داخلی از طریق جعبه ی زیری. - **Computed** -- برای مشاهده CSS اعمال شده بر روی عنصر توسط ویژگی: برای هر ویژگی می‌توانیم قاعده‌ای را ببینیم که به آن می‌دهد (از جمله وراثت CSS و غیره). - **Event Listeners** -- برای دیدن event listener متصل به عناصر DOM (ما آنها را در قسمت بعدی آموزش پوشش خواهیم داد). - ...و غیره. @@ -243,41 +243,41 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); ## تعامل با کنسول -همانطور که ما روی DOM کار می کنیم، ممکن است بخواهیم جاوا اسکریپت را نیز روی آن اعمال کنیم. مانند: یک گره بگیرید و کدی را برای تغییر آن اجرا کنید تا نتیجه را ببینید. در اینجا چند نکته برای جابجایی بین زبانه Elements و کنسول وجود دارد. +همانطور که ما روی DOM کار می‌کنیم، ممکن است بخواهیم جاوا اسکریپت را نیز روی آن اعمال کنیم. مانند: یک گره بگیرید و کدی را برای تغییر آن اجرا کنید تا نتیجه را ببینید. در اینجا چند نکته برای جابجایی بین زبانه Elements و کنسول وجود دارد. برای شروع: 1. اولین `
  • ` را در زبانه Elements انتخاب کنید. 2. بزنید `key:Esc` -- کنسول درست زیر زبانه Elements باز می شود. -اکنون آخرین عنصر انتخاب شده به عنوان `$0` در دسترس است، عنصر انتخاب شده قبلی `$1` و غیره است. +اکنون آخرین عنصر انتخاب شده به عنوان `0$` در دسترس است، عنصر انتخاب شده قبلی `1$` و غیره است. -ما می توانیم دستورات را روی آنها اجرا کنیم. به عنوان مثال `$0.style.background = 'red'`، آیتمِ لیست انتخاب شده را قرمز می کند، مانند این: +ما می‌توانیم دستورات را روی آنها اجرا کنیم. به عنوان مثال `$0.style.background = 'red'`، آیتمِ لیست انتخاب شده را قرمز می‌کند، مانند این: ![](domconsole0.svg) -به این ترتیب می توان یک گره از Elements را از کنسول دریافت کرد. +به این ترتیب می‌توان یک گره از Elements را از کنسول دریافت کرد. -یک راه برگشت هم هست اگر متغیری وجود دارد که به یک گره DOM ارجاع می دهد، می توانیم از دستور `inspect(node)` در کنسول استفاده کنیم تا آن را در قسمت Elements ببینیم. +یک راه برگشت هم هست اگر متغیری وجود دارد که به یک گره DOM ارجاع می‌دهد، می‌توانیم از دستور `inspect(node)` در کنسول استفاده کنیم تا آن را در قسمت Elements ببینیم. یا فقط می‌توانیم گره DOM را در کنسول خروجی بگیریم و "درجا" کاوش کنیم، مانند `document.body` در زیر: ![](domconsole1.svg) -این البته برای اهداف اشکال زدایی است. از فصل بعدی به DOM با استفاده از جاوا اسکریپت دسترسی پیدا می کنیم و آن را اصلاح می کنیم. +این البته برای اهداف اشکال زدایی است. از فصل بعدی به DOM با استفاده از جاوا اسکریپت دسترسی پیدا می‌کنیم و آن را اصلاح می‌کنیم. ابزارهای توسعه دهنده مرورگر کمک بزرگی در توسعه هستند: ما می‌توانیم DOM را کاوش کنیم، چیزهایی را امتحان کنیم و ببینیم چه مشکلی پیش می‌آید. ## خلاصه مطلب -یک سند HTML/XML در داخل مرورگر به عنوان درخت DOM نشان داده می شود. +یک سند HTML/XML در داخل مرورگر به عنوان درخت DOM نشان داده می‌شود. -- تگ‌ها به گره های عنصر تبدیل می شوند و ساختار را تشکیل می دهند. -- متن به گره های متنی تبدیل می شود. +- تگ‌ها به گره‌های عنصر تبدیل می‌شوند و ساختار را تشکیل می‌دهند. +- متن به گره‌های متنی تبدیل می‌شود. - ... و غیره، همه چیز در HTML جایگاه خود را در DOM دارد، حتی نظرات. -ما می توانیم از ابزارهای توسعه دهنده برای DOM Inspect و اصلاح آن به صورت دستی استفاده کنیم. +ما می‌توانیم از ابزارهای توسعه دهنده برای DOM Inspect و اصلاح آن به صورت دستی استفاده کنیم. -در اینجا به اصول اولیه، پرکاربردترین و مهم ترین اقدامات برای شروع پرداختیم. در اسناد گسترده ای در مورد ابزارهای برنامه نویس Chrome وجود دارد. بهترین راه برای یادگیری ابزارها این است که اینجا و آنجا کلیک کنید، منوها را بخوانید: اکثر گزینه ها واضح هستند. بعداً، وقتی آنها را به طور کلی شناختید، اسناد را بخوانید و بقیه را انتخاب کنید. +در اینجا به اصول اولیه، پرکاربردترین و مهم‌ترین اقدامات برای شروع پرداختیم. در اسناد گسترده‌ای در مورد ابزارهای برنامه نویس Chrome وجود دارد. بهترین راه برای یادگیری ابزارها این است که آن‌ها امتحان کنید، منوها را بخوانید: اکثر گزینه‌ها واضح هستند. بعداً، وقتی آنها را به طور کلی شناختید، اسناد را بخوانید و بقیه را انتخاب کنید. -گره‌های DOM دارای ویژگی‌ها و روش‌هایی هستند که به ما امکان می‌دهند بین آنها پیمایش کنیم، آنها را اصلاح کنیم، در صفحه حرکت کنیم و موارد دیگر. در فصل های بعدی به آنها خواهیم پرداخت. +گره‌های DOM دارای ویژگی‌ها و روش‌هایی هستند که به ما امکان می‌دهند بین آنها پیمایش کنیم، آنها را اصلاح کنیم، در صفحه حرکت کنیم و موارد دیگر. در فصل‌های بعدی به آنها خواهیم پرداخت. From 821e518aa1eab5905ddcb55c637fcd739f6bb6fc Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Thu, 13 Jan 2022 16:22:18 +0330 Subject: [PATCH 21/49] update theme Co-authored-by: Mahdi Hashemi --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 02d734068..2e302b5e8 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -57,7 +57,7 @@ drawHtmlTree(node1, 'div.domtree', 690, 320); ```online -در تصویر بالا، می‌توانیم روی گره‌های عنصر کلیک کنید و فرزندان آنها باز می‌شوند. +در تصویر بالا، می‌توانید روی گره‌های عنصر کلیک کنید و فرزندان آن‌ها باز می‌شوند. ``` هر گره‌ی درخت یک شی است. From 1e1c0b27f840f65199d70b0c31e88ec5652da725 Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Thu, 13 Jan 2022 16:31:14 +0330 Subject: [PATCH 22/49] Update Dom Co-authored-by: Mahdi Hashemi --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 2e302b5e8..ab59bcabb 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -7,7 +7,7 @@ libs: # درخت DOM ستون فقرات سند html تگ‌ها هستند. -طبق مدل Document Object (DOM)، هر تگ HTML یک شی است. تگ‌های داخلی "فرزندانِ" تگ‌های دربرگیرنده هستند. متن داخل تگ نیز یک شی است. +طبق مدل شیءگرای سند (Document Object Model یا DOM)، هر تگ HTML یک شیء است. تگ‌های داخلی "فرزندانِ" تگ‌های دربرگیرنده هستند. متن داخل تگ نیز یک شیء است. همه این اشیا با استفاده از جاوا اسکریپت قابل دسترسی هستند و ما می‌توانیم از آنها برای تغییر صفحه استفاده کنیم. From f6f70aaf391a1e889ae01e31cb60c94477211d88 Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Thu, 13 Jan 2022 16:32:30 +0330 Subject: [PATCH 23/49] Update tags Co-authored-by: Mahdi Hashemi --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index ab59bcabb..b5d49b968 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -5,7 +5,7 @@ libs: --- # درخت DOM -ستون فقرات سند html تگ‌ها هستند. +ستون فقرات سند html تگ‌ها (tag) هستند. طبق مدل شیءگرای سند (Document Object Model یا DOM)، هر تگ HTML یک شیء است. تگ‌های داخلی "فرزندانِ" تگ‌های دربرگیرنده هستند. متن داخل تگ نیز یک شیء است. From 0fced7bc6ed0914cf6a7cfe1f7c8606d75c9b598 Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Thu, 13 Jan 2022 16:36:16 +0330 Subject: [PATCH 24/49] Update object Co-authored-by: Mahdi Hashemi --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index b5d49b968..beaf637a3 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -9,7 +9,7 @@ libs: طبق مدل شیءگرای سند (Document Object Model یا DOM)، هر تگ HTML یک شیء است. تگ‌های داخلی "فرزندانِ" تگ‌های دربرگیرنده هستند. متن داخل تگ نیز یک شیء است. -همه این اشیا با استفاده از جاوا اسکریپت قابل دسترسی هستند و ما می‌توانیم از آنها برای تغییر صفحه استفاده کنیم. +همه این اشیاء با استفاده از جاوااسکریپت قابل دسترس هستند و ما می‌توانیم از آن‌ها برای تغییر صفحه استفاده کنیم. به عنوان مثال، `document.body` شیئی است که تگ `` را نشان می‌دهد. From e55c8ffcdfd76a3be86d4bab1c07bca3a81642ab Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Thu, 13 Jan 2022 16:40:26 +0330 Subject: [PATCH 25/49] Update document.body Co-authored-by: Mahdi Hashemi --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index beaf637a3..d1a1faa04 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -11,7 +11,7 @@ libs: همه این اشیاء با استفاده از جاوااسکریپت قابل دسترس هستند و ما می‌توانیم از آن‌ها برای تغییر صفحه استفاده کنیم. -به عنوان مثال، `document.body` شیئی است که تگ `` را نشان می‌دهد. +به عنوان مثال، `document.body` شیءای است که تگ `` را نشان می‌دهد. با اجرای این کد، `` به مدت 3 ثانیه قرمز می‌شود: From 649844c7ad5b85bf37820c1cb423bbb4a965cfaf Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Thu, 13 Jan 2022 16:51:35 +0330 Subject: [PATCH 26/49] Update inside Co-authored-by: Mahdi Hashemi --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index d1a1faa04..6a4918703 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -270,7 +270,7 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); ## خلاصه مطلب -یک سند HTML/XML در داخل مرورگر به عنوان درخت DOM نشان داده می‌شود. +یک سند HTML/XML داخل مرورگر به عنوان درخت DOM نشان داده می‌شود. - تگ‌ها به گره‌های عنصر تبدیل می‌شوند و ساختار را تشکیل می‌دهند. - متن به گره‌های متنی تبدیل می‌شود. From 9c8c20260fca515a425a50cfab1ddbf1ec3da1fd Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Thu, 13 Jan 2022 16:58:40 +0330 Subject: [PATCH 27/49] Update missing hamzeh Co-authored-by: Mahdi Hashemi --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 6a4918703..1363c7cb1 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -60,7 +60,7 @@ drawHtmlTree(node1, 'div.domtree', 690, 320); در تصویر بالا، می‌توانید روی گره‌های عنصر کلیک کنید و فرزندان آن‌ها باز می‌شوند. ``` -هر گره‌ی درخت یک شی است. +هر گره‌ی درخت یک شیء است. تگ‌ها *گره‌های عنصر* (عناصر) هستند و ساختار درختی را تشکیل می‌دهند: `` در ریشه است، سپس `` و `` فرزندان آن هستند و .... From 26cb8f76632a7cfef7852a36c58953fa9e794b40 Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Thu, 13 Jan 2022 16:59:43 +0330 Subject: [PATCH 28/49] Update with half space Co-authored-by: Mahdi Hashemi --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 1363c7cb1..10258042e 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -280,4 +280,4 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); در اینجا به اصول اولیه، پرکاربردترین و مهم‌ترین اقدامات برای شروع پرداختیم. در اسناد گسترده‌ای در مورد ابزارهای برنامه نویس Chrome وجود دارد. بهترین راه برای یادگیری ابزارها این است که آن‌ها امتحان کنید، منوها را بخوانید: اکثر گزینه‌ها واضح هستند. بعداً، وقتی آنها را به طور کلی شناختید، اسناد را بخوانید و بقیه را انتخاب کنید. -گره‌های DOM دارای ویژگی‌ها و روش‌هایی هستند که به ما امکان می‌دهند بین آنها پیمایش کنیم، آنها را اصلاح کنیم، در صفحه حرکت کنیم و موارد دیگر. در فصل‌های بعدی به آنها خواهیم پرداخت. +گره‌های DOM دارای ویژگی‌ها و روش‌هایی هستند که به ما امکان می‌دهند بین آن‌ها پیمایش کنیم، آن‌ها را اصلاح کنیم، در صفحه حرکت کنیم و موارد دیگر. در فصل‌های بعدی به آن‌ها خواهیم پرداخت. From 302d3526b134532a986df0fa699416b91a4414b5 Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Thu, 13 Jan 2022 17:01:50 +0330 Subject: [PATCH 29/49] Update text nodes Co-authored-by: Mahdi Hashemi --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 10258042e..06793ed50 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -64,7 +64,7 @@ drawHtmlTree(node1, 'div.domtree', 690, 320); تگ‌ها *گره‌های عنصر* (عناصر) هستند و ساختار درختی را تشکیل می‌دهند: `` در ریشه است، سپس `` و `` فرزندان آن هستند و .... -متن داخل عناصر *گره‌های متنی* را تشکیل می‌دهد که با عنوان `text#` برچسب گذاری شده اند. یک گره متنی فقط شامل یک رشته است. ممکن است فرزندی نداشته باشد و همیشه برگ درخت باشد. +متن داخل عناصر *گره‌های متنی (text nodes)* را تشکیل می‌دهد که با عنوان `text#` برچسب‌گذاری شده‌اند. یک گره متنی فقط شامل یک رشته است. ممکن است فرزندی نداشته باشد و همیشه برگ درخت باشد. به عنوان مثال تگِ `` متن `"درباره‌ی گوزن شمالی"` را دارد. From 02a3112f3db16113d516de60b4a70d0a496b0dc7 Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Thu, 13 Jan 2022 17:03:35 +0330 Subject: [PATCH 30/49] Update new line Co-authored-by: Mahdi Hashemi <mahdihashemiii939@gmail.com> --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 06793ed50..a9f40618a 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -70,7 +70,7 @@ drawHtmlTree(node1, 'div.domtree', 690, 320); لطفاً به کاراکترهای خاص در گره‌های متن توجه کنید: -- یک خط جدید: `↵` (در جاوااسکریپت به `n\` شناخته میشود.) +- یک خط جدید: `↵` (در جاوااسکریپت به صورت `n\` شناخته می‌شود.) - یک فاصله(space) : `␣` فاصله ها و خطوط جدید کاراکترهای کاملاً معتبری هستند، مانند حروف و اعداد. آنها گره‌های متنی را تشکیل می‌دهند و بخشی از DOM می‌شوند. بنابراین، برای مثال، در مثال بالا، تگ `<head>` حاوی چند فاصله قبل از `<title>` است، و آن متن به یک گره `text#` تبدیل می‌شود (که فقط حاوی یک خط جدید و چند فاصله است). From 5a881a1001699e939196ff106bea44986431e793 Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Thu, 13 Jan 2022 17:06:02 +0330 Subject: [PATCH 31/49] Update half spaces2 Co-authored-by: Mahdi Hashemi <mahdihashemiii939@gmail.com> --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index a9f40618a..e736850d8 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -73,7 +73,7 @@ drawHtmlTree(node1, 'div.domtree', 690, 320); - یک خط جدید: `↵` (در جاوااسکریپت به صورت `n\` شناخته می‌شود.) - یک فاصله(space) : `␣` -فاصله ها و خطوط جدید کاراکترهای کاملاً معتبری هستند، مانند حروف و اعداد. آنها گره‌های متنی را تشکیل می‌دهند و بخشی از DOM می‌شوند. بنابراین، برای مثال، در مثال بالا، تگ `<head>` حاوی چند فاصله قبل از `<title>` است، و آن متن به یک گره `text#` تبدیل می‌شود (که فقط حاوی یک خط جدید و چند فاصله است). +فاصله ها و خطوط جدید کاراکترهای کاملاً معتبری هستند، مانند حروف و اعداد. آن‌ها گره‌های متنی را تشکیل می‌دهند و بخشی از DOM می‌شوند. بنابراین، برای مثال، در مثال بالا، تگ `<head>` حاوی چند فاصله قبل از `<title>` است، و آن متن به یک گره `text#` تبدیل می‌شود (که فقط حاوی یک خط جدید و چند فاصله است). فقط دو استثناء سطح بالا وجود دارد: 1. فاصله‌ها و خطوط جدید قبل از `<head>` به دلایل تاریخی نادیده گرفته می‌شوند. From 4ac98700da59da787e3bdd846052296cb403b722 Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Thu, 13 Jan 2022 17:10:51 +0330 Subject: [PATCH 32/49] Update half spaces3 Co-authored-by: Mahdi Hashemi <mahdihashemiii939@gmail.com> --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index e736850d8..fbc8528f0 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -101,7 +101,7 @@ drawHtmlTree(node2, 'div.domtree', 690, 210); ابزارهای توسعه دهنده(ابزارهای مرورگر) از این طریق فضای صفحه را حفظ می‌کنند. -در ادامه ی تصاویر DOM ، گاهی اوقات زمانی که نامربوط هستند آنها را حذف می‌کنیم. چنین فضاهایی معمولاً بر نحوه نمایش سند تأثیر نمی‌گذارد. +در ادامه‌ی تصاویر DOM ، گاهی اوقات زمانی که نامربوط هستند آن‌ها را حذف می‌کنیم. چنین فضاهایی معمولاً بر نحوه نمایش سند تأثیر نمی‌گذارد. ``` ## تصحیح خودکار From d1803a7a4db08841025485067f785df4ff73d49f Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Thu, 13 Jan 2022 17:11:36 +0330 Subject: [PATCH 33/49] Update half spaces4 Co-authored-by: Mahdi Hashemi <mahdihashemiii939@gmail.com> --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index fbc8528f0..a9426df24 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -79,7 +79,7 @@ drawHtmlTree(node1, 'div.domtree', 690, 320); 1. فاصله‌ها و خطوط جدید قبل از `<head>` به دلایل تاریخی نادیده گرفته می‌شوند. 2. اگر چیزی را بعد از `</body>` قرار دهیم، در پایان به طور خودکار به داخل `body` منتقل می‌شود، زیرا مشخصات HTML ایجاب می‌کند که تمام محتوا باید داخل `<body>` باشد. بنابراین هیچ فاصله‌ای بعد از `</body>` وجود ندارد. -در موارد دیگر همه چیز سر راست است -- اگر در سند فاصله وجود داشته باشد(دقیقاً مانند هر کاراکتری)، آنها به گره‌های متنی در DOM تبدیل می‌شوند، و اگر آنها را حذف کنیم، وجود نخواهند داشت. +در موارد دیگر همه چیز سر راست است -- اگر در سند فاصله وجود داشته باشد(دقیقاً مانند هر کاراکتری)، آن‌ها به گره‌های متنی در DOM تبدیل می‌شوند، و اگر آنها را حذف کنیم، وجود نخواهند داشت. در اینجا هیچ گره متنی فقط-فاصله وجود ندارد: From d6c1b79f0d94b9ce9f0a5d971aeba0b9c2c750eb Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Thu, 13 Jan 2022 17:18:00 +0330 Subject: [PATCH 34/49] Update new line === line break Co-authored-by: Mahdi Hashemi <mahdihashemiii939@gmail.com> --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index a9426df24..5d85c1c45 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -97,7 +97,7 @@ drawHtmlTree(node2, 'div.domtree', 690, 210); </script> ```smart header="Spaces at string start/end and space-only text nodes are usually hidden in tools" -ابزارهای مرورگر (به زودی نشان داده خواهد شد) که با DOM کار می‌کنند معمولاً فاصله‌ها را در ابتدا / انتهای متن و گره‌های متنِ خالیِ بین تگ ها(خطوط شکسته) را نشان نمی‌دهند. +ابزارهای مرورگر (به زودی پوشش داده خواهد شد) که با DOM کار می‌کنند معمولاً فاصله‌ها را در ابتدا/انتهای متن و گره‌های متنِ خالیِ بین تگ‌ها (خطوط جدید) را نشان نمی‌دهند. ابزارهای توسعه دهنده(ابزارهای مرورگر) از این طریق فضای صفحه را حفظ می‌کنند. From 41cc0c5cb34d779da92582e4c4ec3345efcbe1a5 Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Thu, 13 Jan 2022 17:20:14 +0330 Subject: [PATCH 35/49] Update into or with Co-authored-by: Mahdi Hashemi <mahdihashemiii939@gmail.com> --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 5d85c1c45..2833a2e05 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -110,7 +110,7 @@ drawHtmlTree(node2, 'div.domtree', 690, 210); به عنوان مثال، تگ بالا همیشه `<html>` است. حتی اگر در سند وجود نداشته باشد، در DOM وجود خواهد داشت، زیرا مرورگر آن را ایجاد می‌کند. `<body>` هم همینطور. -به عنوان مثال، اگر فایل HTML تنها کلمه `"Hello"` باشد، مرورگر آن را با `<html>` و `<body>` می‌پیچد و `<head>` ضروری را اضافه می‌کند و DOM اینطور خواهد بود: +به عنوان مثال، اگر فایل HTML تنها کلمه `"Hello"` باشد، مرورگر آن را درون `<html>` و `<body>` می‌پیچد و `<head>` ضروری را اضافه می‌کند و DOM اینطور خواهد بود: <div class="domtree"></div> From 640e9d9f97090702a882d37d65fbe21645a5045b Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Thu, 13 Jan 2022 17:29:38 +0330 Subject: [PATCH 36/49] Update new line again Co-authored-by: Mahdi Hashemi <mahdihashemiii939@gmail.com> --- 2-ui/1-document/02-dom-nodes/article.md | 1 + 1 file changed, 1 insertion(+) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 2833a2e05..059d3472e 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -152,6 +152,7 @@ warn header="جداول همیشه تگ `<tbody>` دارند." ```html no-beautify <table id="table"><tr><td>1</td></tr></table> ``` + ساختار DOM اینطور خواهد بود: <div class="domtree"></div> From bd26c7f2c4d233ddf6b8344d3e195ffe4c9d30fb Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Thu, 13 Jan 2022 17:56:39 +0330 Subject: [PATCH 37/49] Update 2-ui/1-document/02-dom-nodes/article.md Co-authored-by: Mahdi Hashemi <mahdihashemiii939@gmail.com> --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 059d3472e..b9c158120 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -226,7 +226,7 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); می‌توانید DOM را ببینید، روی عناصر کلیک کنید، جزئیات آنها را ببینید و غیره. -لطفاً توجه داشته باشید که ساختار DOM در ابزارهای توسعه دهنده ساده شده است. گره‌های متن درست به صورت متن نشان داده می‌شوند. و هیچ گره متنی "خالی" (فقط فاصله) وجود ندارد. این خوب است، زیرا اغلب ما به گره‌های عنصر علاقه‌مندیم.. +لطفاً توجه داشته باشید که ساختار DOM در ابزارهای توسعه دهنده ساده شده است. گره‌های متن فقط به صورت متن نشان داده می‌شوند. و هیچ گره متنی "خالی" (فقط فاصله) وجود ندارد. این خوب است، زیرا اغلب ما به گره‌های عنصر علاقه‌مندیم.. با کلیک روی دکمه‌ی <span class="devtools" style="background-position:-328px -124px"></span> در گوشه سمت چپ بالا می‌توانیم با استفاده از ماوس (یا سایر دستگاه‌های اشاره‌گر) یک گره از صفحه وب انتخاب کرده و آن را "inspect" کنیم (در زبانه elements به ان scroll کنید). وقتی یک صفحه HTML بزرگ (و DOM بزرگ مربوطه) داریم و می‌خواهیم جای یک عنصر خاص را در آن ببینیم، عالی عمل می‌کند. From 311540f451b2456ee7b7e05ab782db8586a60213 Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Thu, 13 Jan 2022 17:58:29 +0330 Subject: [PATCH 38/49] Update it's there Co-authored-by: Mahdi Hashemi <mahdihashemiii939@gmail.com> --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index b9c158120..ffe3da6fb 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -201,7 +201,7 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); **همه چیز در HTML، حتی comments، بخشی از DOM می‌شود.** -حتی دستور `<...DOCTYPE!>` در همان ابتدای HTML نیز یک گره DOM است. درست قبل از `<html>` در درخت DOM قرار دارد. تعداد کمی از مردم در مورد آن می‌دانند. ما قرار نیست به آن دست بزنیم، حتی آن را روی نمودارها نمی‌کشیم، اما آنجاست. +حتی دستور `<...DOCTYPE!>` در همان ابتدای HTML نیز یک گره DOM است. درست قبل از `<html>` در درخت DOM قرار دارد. تعداد کمی از مردم در مورد آن می‌دانند. ما قرار نیست به آن دست بزنیم، حتی آن را روی نمودارها نمی‌کشیم، اما وجود دارد.. شی `document` که کل سند را نشان می‌دهد، به طور رسمی، یک گره DOM نیز هست. From 53df22c8d6e4a0b76a97177482ab41397ff078d5 Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Thu, 13 Jan 2022 18:01:59 +0330 Subject: [PATCH 39/49] Update from Co-authored-by: Mahdi Hashemi <mahdihashemiii939@gmail.com> --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index ffe3da6fb..fde78bdf6 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -257,7 +257,7 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); ![](domconsole0.svg) -به این ترتیب می‌توان یک گره از Elements را از کنسول دریافت کرد. +به این ترتیب می‌توان یک گره از Elements را در کنسول دریافت کرد. یک راه برگشت هم هست اگر متغیری وجود دارد که به یک گره DOM ارجاع می‌دهد، می‌توانیم از دستور `inspect(node)` در کنسول استفاده کنیم تا آن را در قسمت Elements ببینیم. From dbab746da11ad727d6fbc55e88bd64ae2cb1ae1c Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Thu, 13 Jan 2022 18:18:15 +0330 Subject: [PATCH 40/49] Update inspect Co-authored-by: Mahdi Hashemi <mahdihashemiii939@gmail.com> --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index fde78bdf6..287b8d6a7 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -228,7 +228,7 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); لطفاً توجه داشته باشید که ساختار DOM در ابزارهای توسعه دهنده ساده شده است. گره‌های متن فقط به صورت متن نشان داده می‌شوند. و هیچ گره متنی "خالی" (فقط فاصله) وجود ندارد. این خوب است، زیرا اغلب ما به گره‌های عنصر علاقه‌مندیم.. -با کلیک روی دکمه‌ی <span class="devtools" style="background-position:-328px -124px"></span> در گوشه سمت چپ بالا می‌توانیم با استفاده از ماوس (یا سایر دستگاه‌های اشاره‌گر) یک گره از صفحه وب انتخاب کرده و آن را "inspect" کنیم (در زبانه elements به ان scroll کنید). وقتی یک صفحه HTML بزرگ (و DOM بزرگ مربوطه) داریم و می‌خواهیم جای یک عنصر خاص را در آن ببینیم، عالی عمل می‌کند. +با کلیک روی دکمه‌ی <span class="devtools" style="background-position:-328px -124px"></span> در گوشه سمت چپ بالا می‌توانیم با استفاده از ماوس (یا سایر دستگاه‌های اشاره‌گر) یک گره از صفحه وب انتخاب کرده و آن را «بازرسی (inspect)» کنیم (در زبانه Elements به آن scroll کنید). وقتی یک صفحه HTML بزرگ (و DOM بزرگ مربوطه) داریم و می‌خواهیم جای یک عنصر خاص را در آن ببینیم، عالی عمل می‌کند. راه دیگر برای انجام این کار فقط کلیک راست بر روی یک صفحه وب و انتخاب "Inspect" در منوی context است. From e4b06149ab75b5498a51a5c285da16552dffecf5 Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Thu, 13 Jan 2022 18:38:47 +0330 Subject: [PATCH 41/49] Update real-time Co-authored-by: Mahdi Hashemi <mahdihashemiii939@gmail.com> --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 287b8d6a7..d754eb620 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -214,7 +214,7 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); ## خودتان آن را ببینید -برای دیدن ساختار Dom به صورت real-time , امتحان کنید [Live DOM Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/). فقط در سند تایپ کنید و درجا به عنوان یک DOM نشان داده خواهد شد. +برای دیدن ساختار Dom به صورت بی‌وقفه (real-time)، امتحان کنید [Live DOM Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/). فقط در سند تایپ کنید و درجا به عنوان یک DOM نشان داده خواهد شد. راه دیگر برای کشف DOM استفاده از ابزارهای توسعه دهنده مرورگر است. در واقع، این همان چیزی است که ما هنگام توسعه استفاده می‌کنیم. From d03c86592ac17e82e48837ad8bfc977cbc7d44fe Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Thu, 13 Jan 2022 18:42:04 +0330 Subject: [PATCH 42/49] Update how it's looks Co-authored-by: Mahdi Hashemi <mahdihashemiii939@gmail.com> --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index d754eb620..038c46fa6 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -45,7 +45,7 @@ setTimeout(() => document.body.style.background = '', 3000); // برگرد </html> ``` -اینجا چطور به نظر می رسد, DOM اچ تی ام ال را به عنوان یک ساختار درختی از تگ‌ها نشان می‌هد: +شیء DOM سند HTML را به عنوان یک ساختار درختی از تگ‌ها نشان می‌دهد. اینگونه به نظر می‌رسد: <div class="domtree"></div> From dcdc1c25166b963df55fa909b11703ed193613c3 Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Thu, 13 Jan 2022 18:50:59 +0330 Subject: [PATCH 43/49] Update node types Co-authored-by: Mahdi Hashemi <mahdihashemiii939@gmail.com> --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 038c46fa6..9b96b6979 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -167,7 +167,7 @@ drawHtmlTree(node5, 'div.domtree', 600, 200); ## انواع دیگر گره‌ها -علاوه بر عناصر و گره‌های متن، انواع گره‌های دیگری نیز وجود دارد. +علاوه بر عناصر و گره‌های متن، انواع دیگر گره‌ها نیز وجود دارد. به عنوان مثال، نظرات: From 74b67b1db2661a5154455144156b20d54e3abcec Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Thu, 13 Jan 2022 21:53:10 +0330 Subject: [PATCH 44/49] Update comment Co-authored-by: Mahdyar Hasanpour <thisismahdyar@gmail.com> --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 9b96b6979..e2425892a 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -169,7 +169,7 @@ drawHtmlTree(node5, 'div.domtree', 600, 200); علاوه بر عناصر و گره‌های متن، انواع دیگر گره‌ها نیز وجود دارد. -به عنوان مثال، نظرات: +به عنوان مثال، کامنت‌ها: ```html <!DOCTYPE HTML> From 964b409bf9efc42ed23143468bedaf64c7011e9b Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Fri, 14 Jan 2022 16:41:01 +0330 Subject: [PATCH 45/49] Update comments for comments Co-authored-by: Mahdi Hashemi <mahdihashemiii939@gmail.com> --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index e2425892a..b3cdffdd4 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -275,7 +275,7 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); - تگ‌ها به گره‌های عنصر تبدیل می‌شوند و ساختار را تشکیل می‌دهند. - متن به گره‌های متنی تبدیل می‌شود. -- ... و غیره، همه چیز در HTML جایگاه خود را در DOM دارد، حتی نظرات. +- ... و غیره، همه چیز در HTML جایگاه خود را در DOM دارد، حتی کامنت‌ها. ما می‌توانیم از ابزارهای توسعه دهنده برای DOM Inspect و اصلاح آن به صورت دستی استفاده کنیم. From 65c8abe35fdf225dd9b2149a05949740213a7b7f Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Fri, 14 Jan 2022 16:43:02 +0330 Subject: [PATCH 46/49] Update debugging Co-authored-by: Mahdi Hashemi <mahdihashemiii939@gmail.com> --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index b3cdffdd4..c2d074ad8 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -265,7 +265,7 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); ![](domconsole1.svg) -این البته برای اهداف اشکال زدایی است. از فصل بعدی به DOM با استفاده از جاوا اسکریپت دسترسی پیدا می‌کنیم و آن را اصلاح می‌کنیم. +این البته برای اهداف اشکال‌زدایی است. از فصل بعدی با استفاده از جاوااسکریپت به DOM دسترسی پیدا می‌کنیم و آن را اصلاح می‌کنیم. ابزارهای توسعه دهنده مرورگر کمک بزرگی در توسعه هستند: ما می‌توانیم DOM را کاوش کنیم، چیزهایی را امتحان کنیم و ببینیم چه مشکلی پیش می‌آید. From acd407df7fa3d3245e64144e55cba8866416cd30 Mon Sep 17 00:00:00 2001 From: Behourz <47471154+Beroozam@users.noreply.github.com> Date: Fri, 14 Jan 2022 17:57:45 +0330 Subject: [PATCH 47/49] Apply suggestions from code review Co-authored-by: Mahdi Hashemi <mahdihashemiii939@gmail.com> --- 2-ui/1-document/02-dom-nodes/article.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index c2d074ad8..81983b7f6 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -96,7 +96,7 @@ let node2 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node2, 'div.domtree', 690, 210); </script> -```smart header="Spaces at string start/end and space-only text nodes are usually hidden in tools" +```smart header="فاصله‌ها در شروع/پایان رشته و گره‌های متنی فقط-فاصله معمولاً در ابزارها پنهان می‌شوند" ابزارهای مرورگر (به زودی پوشش داده خواهد شد) که با DOM کار می‌کنند معمولاً فاصله‌ها را در ابتدا/انتهای متن و گره‌های متنِ خالیِ بین تگ‌ها (خطوط جدید) را نشان نمی‌دهند. ابزارهای توسعه دهنده(ابزارهای مرورگر) از این طریق فضای صفحه را حفظ می‌کنند. @@ -145,7 +145,7 @@ drawHtmlTree(node4, 'div.domtree', 690, 360); ```` warn header="جداول همیشه تگ `<tbody>` دارند." -یک چیز جالب "مورد خاص" جداول است. بر اساس مشخصات DOM، آنها باید تگ `<tbody>` داشته باشند، اما متن HTML ممکن است آن را از قلم انداخته باشد. سپس مرورگر به صورت خودکار `<tbody>` را در DOM ایجاد می‌کند. +یک "مورد خاص" جالب، جداول است. بر اساس مشخصات DOM، آنها باید تگ `<tbody>` داشته باشند، اما متن HTML ممکن است آن را از قلم انداخته باشد. سپس مرورگر به صورت خودکار `<tbody>` را در DOM ایجاد می‌کند. برای HTML: @@ -207,10 +207,10 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); 12 نوع گره وجود دارد. در عمل ما معمولا با 4 مورد از آنها کار می‌کنیم [12 node types](https://dom.spec.whatwg.org/#node) : -1. `document` -- <span dir="rtl">"نقطه‌ی ورود" به DOM</span> -2. گره‌های عنصر -- <span dir="rtl">تگ های HTML، بلوک‌های ساختار درختی.</span> -3. حاوی متن -- گره‌های متن -4. (comments) -- <span dir="rtl">گاهی اوقات می‌توانیم اطلاعات را در آنجا قرار دهیم، نشان داده نمی‌شود، اما JS می‌تواند آن را از DOM بخواند.</span> +1. `document` -- "DOM" نقطه‌ی ورود به +2. (گره‌های عنصر) -- بلوک‌های ساختار درختی , HTML تگ‌های +3. حاوی متن -- (گره‌های متن) +4. (کامنت‌ها) -- بخواند DOM گاهی اوقات می‌توانیم اطلاعات را در آنجا قرار دهیم، نشان داده نمی‌شود، اما جاوااسکریپت می‌تواند آن را از ## خودتان آن را ببینید @@ -235,9 +235,9 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); ![](inspect.svg) در قسمت سمت راست ابزارها زیر زبانه‌های زیر وجود دارد: -- **Styles** -- <span dir="rtl">می‌توانیم CSS را ببینیم که قانون به قانون بر عنصر فعلی اعمال می‌شود، از جمله قوانین داخلی (خاکستری رنگ). تقریباً همه چیز را می‌توان در جای خود ویرایش کرد، از جمله ابعاد / حاشیه های بیرونی / حاشیه های داخلی از طریق جعبه ی زیری.</span> -- **Computed** -- <span dir="rtl">برای مشاهده CSS اعمال شده بر روی عنصر توسط ویژگی: برای هر ویژگی می‌توانیم قاعده‌ای را ببینیم که به آن می‌دهد (از جمله وراثت CSS و غیره).</span> -- **Event Listeners** -- <span dir="rtl">برای دیدن event listener متصل به عناصر DOM (ما آنها را در قسمت بعدی آموزش پوشش خواهیم داد).</span> +- **Styles** -- می‌توانیم CSS را ببینیم که قانون به قانون بر عنصر فعلی اعمال می‌شود، از جمله قوانین داخلی (خاکستری رنگ). تقریباً همه چیز را می‌توان در جای خود ویرایش کرد، از جمله ابعاد/حاشیه های بیرونی/حاشیه‌های داخلی از طریق جعبه‌ی زیرین. +- **Computed** -- برای مشاهده CSS اعمال شده بر روی عنصر توسط ویژگی: برای هر ویژگی می‌توانیم قانونی که به آن می‌دهد را ببینیم (از جمله وراثت CSS و از این دست موارد). +- **Event Listeners** -- برای دیدن event listener متصل به عناصر DOM (ما آن‌ها را در قسمت بعدی آموزش پوشش خواهیم داد). - ...و غیره. بهترین راه برای مطالعه آنها کلیک کردن در داخل آنها است. اکثر مقادیر درجا قابل ویرایش هستند. @@ -277,7 +277,7 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); - متن به گره‌های متنی تبدیل می‌شود. - ... و غیره، همه چیز در HTML جایگاه خود را در DOM دارد، حتی کامنت‌ها. -ما می‌توانیم از ابزارهای توسعه دهنده برای DOM Inspect و اصلاح آن به صورت دستی استفاده کنیم. +ما می‌توانیم از ابزارهای توسعه دهنده برای بازرسی (Inspect) DOM و اصلاح آن به صورت دستی استفاده کنیم. در اینجا به اصول اولیه، پرکاربردترین و مهم‌ترین اقدامات برای شروع پرداختیم. در <https://developers.google.com/web/tools/chrome-devtools> اسناد گسترده‌ای در مورد ابزارهای برنامه نویس Chrome وجود دارد. بهترین راه برای یادگیری ابزارها این است که آن‌ها امتحان کنید، منوها را بخوانید: اکثر گزینه‌ها واضح هستند. بعداً، وقتی آنها را به طور کلی شناختید، اسناد را بخوانید و بقیه را انتخاب کنید. From 285af352c31f10935c0aea12082ddb040f45254b Mon Sep 17 00:00:00 2001 From: Mahdi Hashemi <mahdihashemiii939@gmail.com> Date: Sat, 15 Jan 2022 00:35:30 +0330 Subject: [PATCH 48/49] Fix line counts conflicts and remove a word MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit For the uniformity of articles, "خلاصه مطلب" is changed to "خلاصه". --- 2-ui/1-document/02-dom-nodes/article.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 81983b7f6..7e42d1745 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -5,6 +5,7 @@ libs: --- # درخت DOM + ستون فقرات سند html تگ‌ها (tag) هستند. طبق مدل شیءگرای سند (Document Object Model یا DOM)، هر تگ HTML یک شیء است. تگ‌های داخلی "فرزندانِ" تگ‌های دربرگیرنده هستند. متن داخل تگ نیز یک شیء است. @@ -142,9 +143,7 @@ let node4 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node4, 'div.domtree', 690, 360); </script> -```` -warn header="جداول همیشه تگ `<tbody>` دارند." - +````warn header="جداول همیشه تگ `<tbody>` دارند." یک "مورد خاص" جالب، جداول است. بر اساس مشخصات DOM، آنها باید تگ `<tbody>` داشته باشند، اما متن HTML ممکن است آن را از قلم انداخته باشد. سپس مرورگر به صورت خودکار `<tbody>` را در DOM ایجاد می‌کند. برای HTML: @@ -269,7 +268,7 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); ابزارهای توسعه دهنده مرورگر کمک بزرگی در توسعه هستند: ما می‌توانیم DOM را کاوش کنیم، چیزهایی را امتحان کنیم و ببینیم چه مشکلی پیش می‌آید. -## خلاصه مطلب +## خلاصه یک سند HTML/XML داخل مرورگر به عنوان درخت DOM نشان داده می‌شود. From 1d4a01a3be6e377cba855276d3e787883a01e546 Mon Sep 17 00:00:00 2001 From: Mahdi Hashemi <mahdihashemiii939@gmail.com> Date: Sat, 15 Jan 2022 00:39:03 +0330 Subject: [PATCH 49/49] Remove an empty line --- 2-ui/1-document/02-dom-nodes/article.md | 1 - 1 file changed, 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 7e42d1745..2e375900d 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -56,7 +56,6 @@ let node1 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node1, 'div.domtree', 690, 320); </script> - ```online در تصویر بالا، می‌توانید روی گره‌های عنصر کلیک کنید و فرزندان آن‌ها باز می‌شوند. ```