Skip to content

Commit 2e27f10

Browse files
committed
translated article.md & index.md
1 parent 018eee2 commit 2e27f10

File tree

2 files changed

+54
-59
lines changed

2 files changed

+54
-59
lines changed

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

+53-58
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
# Browser environment, specs
1+
# محیط مرورگر و خصوصیات (Specs)
22

3-
The JavaScript language was initially created for web browsers. Since then, it has evolved and become a language with many uses and platforms.
3+
زبان جاوا اسکریپت در ابتدا برای مرورگر‌های وب ساخته شد. از آن زمان، پیشرفت بسیاری کرده و به زبانی پراستفاده و پلتفرم‌ها شده است‌.
4+
5+
یک پلتفرم می‌تواند یک مرورگر، وب-سرور، یا یک ماشین لباسشویی یا هر میزبان دیگری باشد. هرکدام از این‌ها عملکرد مختص به آن پلتفرم را فراهم می‌کند. مشخصه‌ی جاوااسکریپت (JavaScript specification) آن را یک محیط میزبانی (*host environment*) مینامد.
46

5-
A platform may be a browser, or a web-server, or a washing machine, or another *host*. Each of them provides platform-specific functionality. The JavaScript specification calls that a *host environment*.
6-
7-
A host environment provides platform-specific objects and functions additional to the language core. Web browsers give a means to control web pages. Node.JS provides server-side features, and so on.
8-
9-
Here's a bird's-eye view of what we have when JavaScript runs in a web-browser:
7+
یک محیط میزبانی اشیا و توابع اضافی مربوط به پلتفرم را به هسته‌ی اصلی زبان می‌افزاید. مرورگرهای وب ابزاری برای کنترل کردن صفحات وب می‌دهند. Node.JS قابلیت‌های سمت سرور را فراهم میسازد و غیره.
108

9+
در ادامه یک نگاه سریع به اتفاقی‌ست که وقتی ما جاوااسکریپت را در مرورگر وب اجرا می‌کنیم، می‌افتد:
1110
![](windowObjects.png)
1211

13-
There's a "root" object called `window`. It has two roles:
12+
یک شئ پایه‌‌ای (root) به نام `window` داریم که دو نقش دارد:
13+
14+
۱. اولا، یک شئ سراسری (Global Object) برای کد جاوااسکریپت است، همینطور که در بخش <info:global-object> توضیح داده‌ شد.
1415

15-
1. First, it is a global object for JavaScript code, as described in the chapter <info:global-object>.
16-
2. Second, it represents the "browser window" and provides methods to control it.
16+
۲. دوما، صفحه‌ی مرورگر (Browser Window) را نمایش میدهد و توابعی برای کنترل آن فراهم می‌سازد.
1717

18-
For instance, here we use it as a global object:
18+
برای نمونه، ما اینجا به عنوان یک شئ سراسری استفاده‌ش میکنیم:
1919

2020
```js run
2121
function sayHi() {
@@ -26,64 +26,61 @@ function sayHi() {
2626
window.sayHi();
2727
```
2828

29-
And here we use it as a browser window, to see the window height:
30-
29+
و ما اینجا به عنوان یک صفحه‌ی مرورگر از آن برای دیدن ارتفاع صفحه استفاده می‌کنیم:
3130
```js run
3231
alert(window.innerHeight); // inner window height
3332
```
3433

35-
There are more window-specific methods and properties, we'll cover them later.
36-
34+
توابع و مشخصه‌های مربوط به صفحه (window-specific) بیشتری وجود دارد که در بخش‌های بعدی به آنها خواهیم پرداخت.
3735
## Document Object Model (DOM)
3836

39-
The `document` object gives access to the page content. We can change or create anything on the page using it.
37+
شئ `document` دسترسی مارا به محتویات صفحه فراهم می‌سازد. ما میتوانیم هرچیزی که در صفحه‌ از آن استفاده می‌شود را بسازیم یا تغییر بدهیم.
4038

41-
For instance:
39+
برای نمونه:
4240
```js run
43-
// change the background color to red
41+
// رنگ پس‌زمینه را به قرمز تغییر میدهیم
4442
document.body.style.background = "red";
4543

46-
// change it back after 1 second
44+
// سپس بعد از یک ثانیه به حالت قبل بازمیگردانیم
4745
setTimeout(() => document.body.style.background = "", 1000);
4846
```
4947

50-
Here we used `document.body.style`, but there's much, much more. Properties and methods are described in the specification. There happen to be two working groups who develop it:
48+
در اینجا ما از `document.body.style` استفاده کردیم، اما بیشتر هم هست. خیلی بیشتر! توابع و مشخصه‌ها در خصوصیات (Specification) توضیح داده شده‌ند.
49+
1. [W3C](https://en.wikipedia.org/wiki/World_Wide_Web_Consortium) -- مستندات در این لینک است <https://www.w3.org/TR/dom>.
50+
2. [WhatWG](https://en.wikipedia.org/wiki/WHATWG), موجود در <https://dom.spec.whatwg.org>.
5151

52-
1. [W3C](https://en.wikipedia.org/wiki/World_Wide_Web_Consortium) -- the documentation is at <https://www.w3.org/TR/dom>.
53-
2. [WhatWG](https://en.wikipedia.org/wiki/WHATWG), publishing at <https://dom.spec.whatwg.org>.
52+
هردوی این گروه‌ها کامل با یکدیگر موافق نیستند بنابراین دو مجموعه‌ی استانداردها وجود دارد. اما خیلی مشابه یکدیگر هستند و تا ۹۹٪ به یکدیگر شباهت دارند. البته تفاوت‌های بسیار ریزی وجود دارند که احتمالا حتی متوجهشان نخواهید شد.
5453

55-
As it happens, the two groups don't always agree, so it's like we have two sets of standards. But they are very similar and eventually things merge. The documentation that you can find on the given resources is very similar, with about a 99% match. There are very minor differences that you probably won't notice.
54+
به نظر شخصی من، <https://dom.spec.whatwg.org> برای استفاده مناسب است.
5655

57-
Personally, I find <https://dom.spec.whatwg.org> more pleasant to use.
56+
در دوران گذشته، هیچ استانداردی وجود نداشت -- هر مرورگر هرطور که دلش میخواست کد خودش را می‌نوشت. مرورگرهای متفاوت مجموعه‌ها، توابع، مشخصه‌های مختلفی برای چیزهای یکسان داشتند، توسعه‌دهندگان هم مجبور بودند برای هرکدام کدی جدا بنویسند. واقعا زمان تاریک و به هم ریخته‌ای بود!
5857

59-
In the ancient past, there was no standard at all -- each browser implemented however it wanted. Different browsers had different sets, methods, and properties for the same thing, and developers had to write different code for each of them. Dark, messy times.
58+
حتی الان هم ممکن است که با کدهای قدیمی‌ای مواجه شویم که مشخصه‌های مربوط به مرورگر را استفاده می‌کنند و ناسازگاری دارند. اما نیازی نیست که اینها را یاد بگیرید مگر اینکه واقعا به آنها نیاز داشته باشید (احتمال اینکه به آنها نیاز داشته باشید خیلی کم است)، ما هم در این روند آموزش، چیزهای به روز را یاد می‌دهیم.
6059

61-
Even now we can sometimes meet old code that uses browser-specific properties and works around incompatibilities. But, in this tutorial we'll use modern stuff: there's no need to learn old things until you really need to (chances are high that you won't).
60+
سپس استاندارد‌های DOM به وجود آمدند، تا همگان را به توافق برسانند. اولین انتشار آن "DOM Level 1"، سپس با DOM Level 2 توسعه یافت، سپس DOM Level 3 و الان DOM Level 4 است. گروه WhatWG از نام‌گذاری با اعداد خسته شد و الان به آن فقط "DOM" می‌گویند. ما هم همینکار را می‌کنیم.
61+
```smart header="DOM فقط برای مرورگرها نیست"
62+
خصوصیات DOM ساختار یک document را توصیف می‌کند و اشیائی برایی تغییر آن فراهم می‌کند. همینطور ابزارهای غیر-مرورگری‌ای هستند که از آن استفاده می‌کنند.
6263
63-
Then the DOM standard appeared, in an attempt to bring everyone to an agreement. The first version was "DOM Level 1", then it was extended by DOM Level 2, then DOM Level 3, and now it's reached DOM Level 4. People from WhatWG group got tired of version numbers and are calling it just "DOM", without a number. So we'll do the same.
64-
65-
```smart header="DOM is not only for browsers"
66-
The DOM specification explains the structure of a document and provides objects to manipulate it. There are non-browser instruments that use it too.
67-
68-
For instance, server-side tools that download HTML pages and process them use the DOM. They may support only a part of the specification though.
64+
برای مثال، ابزار سمت سرور که صفحات HTML را دانلود و پردازش می‌کنند از DOM استفاده ‌می‌کنند. اگرچه ممکن است فقط یک قسمتی از خصوصیات‌ش را پشتیبانی کنند.
6965
```
7066

71-
```smart header="CSSOM for styling"
72-
CSS rules and stylesheets are not structured like HTML. There's a separate specification [CSSOM](https://www.w3.org/TR/cssom-1/) that explains how they are represented as objects, and how to read and write them.
67+
```smart header="CSSOM برای استایل دادن"
68+
قوانین CSS و شیوه‌نامه (stylesheets) مشابه HTML ساختاربندی نشده‌ند. یک خصوصیت مجزا [CSSOM](https://www.w3.org/TR/cssom-1/) که نمایان شدنشان به شکل اشیا و نحوه نوشته و خوانده شدنشان را توصیف میکند.
7369
74-
CSSOM is used together with DOM when we modify style rules for the document. In practice though, CSSOM is rarely required, because usually CSS rules are static. We rarely need to add/remove CSS rules from JavaScript, so we won't cover it right now.
70+
CSSOM همراه با DOM برای تغییر و تصحیح قوانین استایل برای document استفاده می‌گردد.
71+
اگرچه در عمل، CSSOM به ندرت مورد استفاده‌ میگیرد، به این علت که قوانین CSS عموما ثابت (Static) هستند. ما به ندرت نیاز داریم که قوانین CSS را در جاوا اسکریپت حذف یا اضافه کنیم، بنابراین ما الان به آنها نخواهیم پرداخت.
7572
```
7673

77-
## BOM (part of HTML spec)
74+
## BOM (قسمتی از خصوصیت HTML)
7875

79-
Browser Object Model (BOM) are additional objects provided by the browser (host environment) to work with everything except the document.
76+
مدل اشیا مرورگر (Browser Object Model یا BOM)، اشیا افزوده‌ای هستند که توسط مرورگر فراهم میشوند (محیط میزبانی یا host environment) تا با هرچیزی به جز document کار کنند.
8077

81-
For instance:
78+
برای نمونه:
8279

83-
- The [navigator](mdn:api/Window/navigator) object provides background information about the browser and the operating system. There are many properties, but the two most widely known are: `navigator.userAgent` -- about the current browser, and `navigator.platform` -- about the platform (can help to differ between Windows/Linux/Mac etc).
84-
- The [location](mdn:api/Window/location) object allows us to read the current URL and can redirect the browser to a new one.
80+
- شئ [navigator](mdn:api/Window/navigator) اطلاعات پس‌زمینه در مورد مرورگر و سیستم‌های عامل فراهم می‌کند. مشخصه‌های زیادی هستند، اما دو مورد معروف آن: `navigator.userAgent` که درباره مرورگر کنونی‌ست و `navigator.platform` که درباره پلتفرم است (کمک میکند که بین ویندوز/لینوکس/مک و بقیه بتوانیم تمایز قائل شویم).
81+
- شئ [location](mdn:api/Window/location) به ما اجازه خواندن URL کنونی را می‌دهد و می‌تواند مرورگر به صفحه‌ی جدیدی انتقال یابد.
8582

86-
Here's how we can use the `location` object:
83+
نحوه‌ی استفاده از شئ `location`:
8784

8885
```js run
8986
alert(location.href); // shows current URL
@@ -92,30 +89,28 @@ if (confirm("Go to wikipedia?")) {
9289
}
9390
```
9491

95-
Functions `alert/confirm/prompt` are also a part of BOM: they are directly not related to the document, but represent pure browser methods of communicating with the user.
96-
97-
98-
```smart header="HTML specification"
99-
BOM is the part of the general [HTML specification](https://html.spec.whatwg.org).
92+
توابع `alert/confirm/prompt` همچنین قسمتی از BOM هستند: مستقیما به document مربوط نیستند اما توابع مختص مرورگر برای ارتباط با کاربر را نمایش می‌دهند.
10093

101-
Yes, you heard that right. The HTML spec at <https://html.spec.whatwg.org> is not only about the "HTML language" (tags, attributes), but also covers a bunch of objects, methods and browser-specific DOM extensions. That's "HTML in broad terms".
94+
```smart header="HTML خصوصیت"
95+
BOM قسمتی از [HTML specification](https://html.spec.whatwg.org) عمومی است.
96+
بله، درست متوجه‌ شدید. خصوصیت HTML در <https://html.spec.whatwg.org> نه تنها درباره "HTML زبان" (tags, attributes) است، بلکه مجموعه‌ای از اشیا، توابع و افزونه‌های DOM مربوط به مرورگر را هم پوشش می‌دهد. این معنی HTML در حالتی کلی‌ست.
10297
```
10398

104-
## Summary
99+
## خلاصه
105100

106-
Talking about standards, we have:
101+
در بحث استانداردها داریم:
107102

108-
DOM specification
109-
: Describes the document structure, manipulations and events, see <https://dom.spec.whatwg.org>.
103+
خصوصیت DOM
104+
: ساختمان document، تغییرها و اتفاقات (events) را توصیف می‌کند. <https://dom.spec.whatwg.org>
110105

111-
CSSOM specification
112-
: Describes stylesheets and style rules, manipulations with them and their binding to documents, see <https://www.w3.org/TR/cssom-1/>.
106+
خصوصیت CSSOM
107+
: شیوه‌نامه و قواعد استایل دادن، تغییر آنها با اتصال آنها به documents را توصیف می‌کند. <https://www.w3.org/TR/cssom-1/>
113108

114-
HTML specification
115-
: Describes the HTML language (e.g. tags) and also the BOM (browser object model) -- various browser functions: `setTimeout`, `alert`, `location` and so on, see <https://html.spec.whatwg.org>. It takes the DOM specification and extends it with many additional properties and methods.
109+
خصوصیت HTML
110+
: زبان HTML (چیزهایی مثل tags) و همینطور BOM و توابع مرورگر مختلف را توصیف می‌کند: `setTimeout`، `alert`، `location` و غیره. <https://html.spec.whatwg.org>. خصوصیت DOM را می‌گیرد و با بسیاری از مشخصه‌ها و توابع آنرا بسط می‌دهد.
116111

117-
Now we'll get down to learning DOM, because the document plays the central role in the UI.
112+
حالا میرویم برای یادگیری DOM، چراکه document نقش اصلی در رابط کاربری را دارد.
118113

119-
Please note the links above, as there's so much stuff to learn it's impossible to cover and remember everything.
114+
به لینک‌های بالا توجه داشته باشید چراکه خیلی اطلاعات برای یادگرفتن دارند که پوش دادن آنها در اینجا غیرممکن است.
120115

121-
When you'd like to read about a property or a method, the Mozilla manual at <https://developer.mozilla.org/en-US/search> is a nice resource, but reading the corresponding spec may be better: it's more complex and longer to read, but will make your fundamental knowledge sound and complete.
116+
هنگامی که می‌خواهید راجب یک مشخصه یا یک تابع مطالعه کنید، راهنمای Mozilla در <https://developer.mozilla.org/en-US/search> منبع خوبیست اما خواندن خصوصیت مربوطه بهتر است: پیچیده‌ةر است وخواندش طولانی‌تر است اما دانش پایه‌ای شما را کامل و درست می‌کند.

Diff for: 2-ui/1-document/index.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
# Document
22

3-
Here we'll learn to manipulate a web-page using JavaScript.
3+
در این قسمت ما یاد میگیریم که چگونه با کمک جاوااسکریپت در یک صفحه‌ی وب دست ببریم و تغییرش دهیم.

0 commit comments

Comments
 (0)