persian-eloquent-javascript/00_intro.html at master · emehran/persian-eloquent-javascript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!doctype html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>مقدمه :: Eloquent JavaScript</title>
  <link rel=stylesheet href="js/node_modules/codemirror/lib/codemirror.css">
  <script src="js/acorn_codemirror.js"></script>
  <link rel=stylesheet href="css/ejs.css">
  <script src="js/sandbox.js"></script>
  <script src="js/ejs.js"></script><script>var sandboxLoadFiles = ["code/intro.js"];</script><script>var clicky_site_ids = clicky_site_ids || []; clicky_site_ids.push(101171577);</script>
  <script async src="//static.getclicky.com/js"></script>
  <script id='pixel-script-poptin' src='https://cdn.popt.in/pixel.js?id=ea6051b792008' async='true'></script>
</head>

<article>
<nav><a href="index.html" title="cover">◆</a> <a href="01_values.html" title="next chapter">▶</a></nav>

<h1>مقدمه</h1>

<blockquote>

<p><a class="p_ident" id="p_2jmj7l5rSw" href="#p_2jmj7l5rSw" tabindex="-1" role="presentation"></a>فکر می‌کنیم که سیستم را مبتنی بر اهداف خودمان خلق می‌کنیم. باور داریم که آن را مطابق تصویری از خودمان می‌سازیم... اما کامپیوتر واقعاً شبیه به ما نیست؛ بلکه تنها بازتابی از بخش بسیار کوچکی از ماست: بخشی که به منطق، نظم، قانون و وضوح اختصاص دارد.</p>

<footer>الن اولمن, <cite>نزدیک به ماشین: تکنوفیلیا و نارضایتی های آن</cite></footer>

</blockquote><figure class="chapter framed"><img src="img/chapter_picture_00.jpg" alt="Picture of a screwdriver and a circuit board"></figure>

<p>موضوع این کتاب فرمان دادن به کامپیوتر‌ها است. امروزه کامپیوتر‌ها تقریبا مثل پیچ‌گوشتی‌ها، رایج و پرکاربرد هستند. البته از پیچیدگی بیشتری برخوردارند و استفاده از آن‌ها نیز همیشه کار آسانی نیست.</p>

<p>اگر کاری که از کامپیوترتان انتظار دارید مشخص و روشن است، مثل نمایش ایمیل یا کار به عنوان ماشین حساب، می‌توانید نرم‌افزار مناسب آن را باز کرده و استفاده کنید. اما برای کار‌های خاص یا وظایفی که انتهای مشخصی ندارند، احتمالا نرم‌افزاری از پیش وجود ندارد.</p>

<p>اینجا است که برنامه‌نویسی به میدان می‌آید.  برنامه‌نویسی همان ساختن یک <em>برنامه</em> — مجموعه‌ای از دستورات دقیق که به یک کامپیوتر می‌گوید که چه کار بکند —می‌باشد. از آنجا که کامپیوتر‌ها موجوداتی کودن و درعین حال دقیق هستند، برنامه‌نویسی آن‌ها اساسا کاری خسته‌کننده و پرزحمت است.</p>

<p>خوشبختانه اگر بتوانید با این سختی کنار بیایید و حتی از فکر کردن به گونه‌ای که ماشین‌های کودن بتوانند درک کنند، لذت ببرید، برنامه‌نویسی می‌تواند رضایت بخش باشد. برنامه‌نویسی باعث می‌شود که بتوانید کار‌هایی را که به صورت دستی بی‌نهایت زمان می‌برد، در چند ثانیه انجام دهید و به وسیله‌ی آن می‌توانید با کامپیوترتان کار‌هایی بکنید که پیش‌تر نمی‌توانست برایتان انجام دهد. همچنین برنامه‌نویسی تمرینی فوق‌العاده برای پرورش تفکر انتزاعی محسوب می‌شود.</p>

<p>بیشتر کار برنامه‌نویسی توسط <em>زبان‌های برنامه‌نویسی</em> انجام می‌شود. یک زبان برنامه‌نویسی زبانی است که برای فرمان‌ دادن به کامپیوتر‌ها ساخته می‌شود. جالب است بدانید که موثرترین روشی که برای ارتباط با یک کامپیوتر پیدا کرده‌ایم به اندازه‌ی زیادی وام‌دار روشی است که در ارتباط با یکدیگر استفاده می‌کنیم. درست مانند زبان‌های بشری، زبان‌های کامپیوتری نیز امکان ترکیب واژه‌ها و عبارت‌ها را به شیوه‌های جدید فراهم می‌سازند.</p>

<p><a class="p_ident" id="p_kKuGD58znd" href="#p_kKuGD58znd" tabindex="-1" role="presentation"></a>روزگاری رابط‌های کاربری مبتنی بر زبان، مانند BASIC و DOS که در دهه‌های هشتاد و نود میلادی استفاده می‌شدند، روش اصلی تعامل با کامپیوتر‌ها بودند. اما اکنون رابط‌های بصری به طور گسترده‌ای جایگزین آن‌ها شده‌اند که یادگیری ساده‌تری دارند اما آزادی کمتری برای کاربر فراهم می‌کنند. هنوز زبان‌های برنامه‌نویسی در جای خودشان کاربرد دارند. یکی از اینگونه زبان‌ها، جاوااسکریپت است، که در هر مرورگر وب مدرن وجود دارد و در نتیجه تقریبا در همه‌ی دستگاه‌ها در دسترس است.</p>

<p>این کتاب سعی می‌کند شما را با این زبان به اندازه‌ای آشنا کند تا بتوانید با آن کار‌های کاربردی و تفننی انجام دهید.</p>

<h2><a class="h_ident" id="h_OVa4Hou70y" href="#h_OVa4Hou70y" tabindex="-1" role="presentation"></a>درباره‌ی برنامه‌نویسی</h2>

<p>در این کتاب، علاوه بر آموزش خود جاوااسکریپت، قواعد پایه‌ای برنامه‌نویسی را نیز معرفی خواهم کرد. برنامه‌نویسی در ظاهر کار مشکلی به‌ نظر می‌آید. قواعد اساسی آن ساده و روشن هستند اما برنامه‌هایی که بر اساس این قوانین ساخته می‌شوند پتانسیل این را دارند که  تا حدی پیچیده شوند که قوانین و پیچیدگی‌های خودشان را به وجود بیاورند. وقتی برنامه‌نویسی می‌کنید، در حال ساختن مارپیچی هستید که ممکن است خودتان به شکلی در آن گم شوید.</p>

<p>در طول خواندن این کتاب با مطالبی روبرو خواهید شد که ممکن است دشوار به نظر برسند . اگر در برنامه‌نویسی تازه‌وارد هستید، با مطالب جدید زیادی مواجه خواهید شد. بیشتر این مطالب، در ادامه، به صورتی باهم ترکیب خواهند شد تا لازم باشد ارتباط بیشتری با آن‌ها برقرار سازید.</p>

<p>اینکه به مقدار کافی برای یادگیری تلاش کنید، بستگی به خود شما دارد. در زمان مطالعه‌ی کتاب و تلاش برای یادگیری مطالب، به هیچ وجه نباید نسبت به توانایی‌های خودتان شک کنید. توانایی شما خوب است فقط لازم است ادامه دهید. استراحت داشته باشید، بعضی از مطالب را دوباره مطالعه کنید و مطمئن شوید که برنامه‌های نمونه و تمرین‌ها را خوب خوانده و فهمیده‌اید. یادگیری کاری دشوار است اما هر چیزی را که یاد بگیرید، از آن شما خواهد بود و ادامه‌ی یادگیری را آسان‌تر خواهد کرد.</p>

<blockquote>

<p>وقتی اقدام کردن سودی ندارد، به جمع‌آوری اطلاعات بپرداز؛ زمانی اطلاعات سودی نمی‌رسانند، استراحت کن.</p>

<footer>اورسولا لو گویین, <cite>دست چپ تاریکی</cite></footer>

</blockquote>

<p>یک برنامه‌ی کامپیوتری در واقع خیلی چیز‌ها است. متنی است که برنامه‌نویس تایپ کرده است، نیرویی است که موجب شده کامپیوتر کار مورد نظر را انجام دهد، داده‌ای است که در حافظه‌ی کامپیوتر قرار دارد و همزمان اتفاقاتی که در همان حافظه رخ می‌دهد را کنترل می‌کند. تمثیل‌هایی که سعی می‌کنند برنامه‌ها را با اشیائی که ما با آن‌ها آشنا هستیم مقایسه کنند، معمولا حق مطلب را ادا نمی‌کنند. یکی از قیاس‌های تقریبا مناسب، مقایسه‌ی برنامه با ماشین است. در یک ماشین، بسیاری از قسمت‌های جداگانه می‌بایست با هم در ارتباط باشند تا کار کلی انجام شود و کار ما این است که به نحوه‌ی ارتباطات داخلی این قسمت‌ها با هم و دخالتشان در کارکرد کلی سیستم، بپردازیم.</p>

<p>یک کامپیوتر یک ماشین فیزیکی است که مانند یک میزبان برای این ماشین‌های غیرفیزیکی (برنامه‌ها) عمل می‌کند. خود کامپیوتر‌ها فقط از پس کار‌هایی فوق‌العاده پیش‌پاافتاده و سرراست بر می‌آیند. علت کاربرد گسترده‌ی آن‌ها این است که همین کار‌ها را فوق‌العاده سریع انجام می‌دهند. یک برنامه می‌تواند به صورت هوشمندانه، تعداد بسیار زیادی از این کار‌های ساده را باهم ترکیب کند تا وظایف خیلی پیچیده‌ای را به سرانجام برساند.</p>

<p>یک برنامه، ساختمانی از جنس فکر است. ساخت آن هزینه ندارد. سبک است و به آسانی توسط تایپ‌ کردن پیشرفت می‌کند.</p>

<p>اما در صورت بی‌دقتی، اندازه و پیچیدگی یک برنامه به حدی رشد می‌کند که از کنترل خارج شده و حتی برای فردی که آن را ایجاد کرده، گیج‌کننده می‌شود. مشکل اصلی در برنامه‌نویسی، تحت کنترل نگه ‌داشتن برنامه است. درست کار کردن یک برنامه زیباست. هنر برنامه‌نویسی، مهارت مهار پیچیدگی برنامه است. پیچیدگی برنامه‌های بزرگ با ساده‌سازی کنترل می‌شود.</p>

<p><a class="p_ident" id="p_CQMRQsq011" href="#p_CQMRQsq011" tabindex="-1" role="presentation"></a>بعضی برنامه‌نویسان بر این باورند که بهترین روش مدیریت این پیچیدگی، استفاده از مجموعه‌ای محدود از تکنیک‌های روشن در برنامه‌ها است. این افراد قوانین سخت‌گیرانه‌ای (بهترین روش‌ها – best practices) را وضع کرده‌اند که برای برنامه‌ها، ماندن در محدوده‌ی امن کوچک آن‌ها و تبعیت دقیق از این قوانین را تجویز می‌کنند.</p>

<p>این کار نه تنها کسل‌کننده است، بلکه موثر هم نیست. مشکلات جدید اغلب نیازمند راه‌حل‌های جدید می‌باشند. رشته‌ی برنامه‌نویسی، جوان و هنوز در حال توسعه است. همچنین به اندازه‌ی کافی متنوع می‌باشد که فضا برای روش‌های مختلف وجود داشته باشد. ممکن است در طراحی یک برنامه اشتباهات مهلکی صورت گیرد که بهتر است مرتکب آن‌ها بشوید و ادامه دهید تا آن‌ها را درک کنید. نوشتن یک برنامه‌ی خوب با تمرین و برنامه‌نویسی بدست می‌آید نه با یادگیری لیستی از قوانین.</p>

<h2><a class="h_ident" id="h_ZX5ZU6GQG0" href="#h_ZX5ZU6GQG0" tabindex="-1" role="presentation"></a>چرا زبان برنامه‌نویسی اهمیت دارد</h2>

<p>در ابتدا، زمانی که محاسبه‌ی کامپیوتری متولد شد، زبان برنامه‌نویسی وجود نداشت. برنامه‌ها چیزی شبیه به کد زیر بودند:</p>

<pre class="snippet cm-s-default" data-language="null" ><a class="c_ident" id="c_D6PkB3Wa2f" href="#c_D6PkB3Wa2f" tabindex="-1" role="presentation"></a>00110001 00000000 00000000
00110001 00000001 00000001
00110011 00000001 00000010
01010001 00001011 00000010
00100010 00000010 00001000
01000011 00000001 00000000
01000001 00000001 00000001
00010000 00000010 00000000
01100010 00000000 00000000</pre>

<p><a class="p_ident" id="p_Wsf80LEp+J" href="#p_Wsf80LEp+J" tabindex="-1" role="presentation"></a>برنامه‌ی بالا اعداد 1 تا 10 را باهم جمع کرده و نتیجه را چاپ می‌نماید: <bdo><code>1 + 2 + .<wbr>.<wbr>.<wbr> + 10 = 55</code></bdo>. این برنامه می‌تواند روی یک ماشین ساده‌ی فرضی اجرا شود. برای برنامه‌نویسی کامپیوتر‌های اولیه، لازم بود تا ردیف بزرگی از سویچ‌ها را در موقعیت مناسب قرار داد یا در نوار‌های مقوایی مخصوص، سوراخ ایجاد کرده و در کامپیوتر قرار داد. احتمالا می‌توانید تصور کنید که این کار چقدر خسته‌کننده و اشتباه‌ساز بود. حتی نوشتن برنامه‌های ساده، نیازمند زکاوت و نظم زیادی بود. تقریبا نوشتن برنامه‌های پیچیده قابل تصور نبود.</p>

<p>البته، وارد کردن این الگو‌های بیتی رمزگونه (صفر و یک‌ها) باعث می‌شد که برنامه‌نویس احساس کند که جادوگری چیره‌دست است و حس رضایت شغلی خوبی را ایجاد می‌کرد.</p>

<p>هر خط از برنامه‌ی قبلی حاوی یک دستور است. می‌توان آن را در زبان فارسی به صورت زیر نوشت:</p>

<ol>

<li>

<p><a class="p_ident" id="p_cXpMwVrt3i" href="#p_cXpMwVrt3i" tabindex="-1" role="presentation"></a>عدد 0 را در موقعیت 0 حافظه ذخیره کن.</p></li>

<li>

<p><a class="p_ident" id="p_pD/MhHwik3" href="#p_pD/MhHwik3" tabindex="-1" role="presentation"></a>عدد 1 را در موقعیت 1 در حافظه ذخیره کن.</p></li>

<li>

<p><a class="p_ident" id="p_PCjQN+Ms0w" href="#p_PCjQN+Ms0w" tabindex="-1" role="presentation"></a>مقدار موجود در موقعیت 1 حافظه را در موقعیت 2 حافظه ذخیره کن.</p></li>

<li>

<p><a class="p_ident" id="p_j+yF1Sy70o" href="#p_j+yF1Sy70o" tabindex="-1" role="presentation"></a>عدد 11 را از مقداری که در موقعیت 2 در حافظه قرار دارد، تفریق کن.</p></li>

<li>

<p><a class="p_ident" id="p_TpKdwHqZQU" href="#p_TpKdwHqZQU" tabindex="-1" role="presentation"></a>اگر مقدار موجود در موقعیت 2 در حافظه برابر با 0 است، به سراغ دستور شماره 9 برو.</p></li>

<li>

<p><a class="p_ident" id="p_U9mavMZxuB" href="#p_U9mavMZxuB" tabindex="-1" role="presentation"></a>مقدار موجود در موقعیت 1 حافظه را به مقدار موجود در موقعیت 0 حافظه، اضافه نما.</p></li>

<li>

<p>عدد 1 را به مقدار موجود در موقعیت 1 حافظه، اضافه نما.</p></li>

<li>

<p><a class="p_ident" id="p_d95o2uzYI7" href="#p_d95o2uzYI7" tabindex="-1" role="presentation"></a>دستور شماره 3 را اجرا کن.</p></li>

<li>

<p><a class="p_ident" id="p_tlifxqsNyC" href="#p_tlifxqsNyC" tabindex="-1" role="presentation"></a>مقدار موجود در موقعیت 0 حافظه را در خروجی قرار بده.</p></li>

</ol>

<p>اگرچه نوشته‌ی بالا از آن سوپ بیت‌های قبلی خواناتر است، ولی همچنان نامفهوم و مبهم است. اگر از نام‌ها به جای اعداد برای دستورات و موقعیت‌های حافظه استفاده شود، بهتر خواهد شد.</p>

<pre class="snippet cm-s-default" data-language="text/plain" ><a class="c_ident" id="c_Z0jlA6dfj3" href="#c_Z0jlA6dfj3" tabindex="-1" role="presentation"></a> Set “total” to 0.
 Set “count” to 1.
[loop]
 Set “compare” to “count”.
 Subtract 11 from “compare”.
 If “compare” is zero, continue at [end].
 Add “count” to “total”.
 Add 1 to “count”.
 Continue at [loop].
[end]
 Output “total”.</pre>

<p><a class="p_ident" id="p_gl/EYW75Eu" href="#p_gl/EYW75Eu" tabindex="-1" role="presentation"></a>آیا اکنون از این برنامه سر در می‌آورید؟ در دو خط اول به دو مکان در حافظه، مقدار‌های اولیه اختصاص داده می‌شود:  <code>total</code> برای ساختن نتیجه‌ی محاسبه استفاده می‌شود و <code>count</code> عددی را که در حال حاضر در دست داریم را پیگیری می‌کند. خطوطی که از <code>compare</code> استفاده می‌کنند احتمالا مبهم‌ترین خطوط به نظر می‌آیند. برنامه می‌خواهد بررسی کند آیا مقدار <code>count</code> برابر با 11 می‌باشد که در این صورت در مورد توقف اجرای برنامه تصمیم بگیرد. با توجه به اینکه ماشین فرضی ما نسبتا ابتدایی است، فقط می‌تواند صفر بودن یک عدد را آزمایش کند و بر اساس آن تصمیم بگیرد. بنابراین از یک مکان در حافظه که برچسب <code>compare</code> دارد برای محاسبه مقدار <code>count - 11</code> استفاده می‌کند و بر اساس آن مقدار تصمیم می‌گیرد. دو خط بعدی مقدار <code>count</code> رابا نتیجه‌ی محاسبه جمع کرده و مقدار <code>count</code> را بعد از هربار که برنامه متوجه شد که مقدار <code>count</code> هنوز ‍‍11 نیست، یک واحد افزایش می‌دهد.</p>

<p>همین برنامه در جاوااسکریپت به صورت زیر خواهد بود:</p>

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_KfhVPRGaZ0" href="#c_KfhVPRGaZ0" tabindex="-1" role="presentation"></a><span class="cm-keyword">let</span> <span class="cm-def">total</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>, <span class="cm-def">count</span> <span class="cm-operator">=</span> <span class="cm-number">1</span>;
<span class="cm-keyword">while</span> (<span class="cm-variable">count</span> <span class="cm-operator">&lt;=</span> <span class="cm-number">10</span>) {
  <span class="cm-variable">total</span> <span class="cm-operator">+=</span> <span class="cm-variable">count</span>;
  <span class="cm-variable">count</span> <span class="cm-operator">+=</span> <span class="cm-number">1</span>;
}
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">total</span>);
<span class="cm-comment">// → 55</span></pre>

<p><a class="p_ident" id="p_sdV4ERHYT3" href="#p_sdV4ERHYT3" tabindex="-1" role="presentation"></a>این نسخه کمی بهتر شده است. مهم‌تر از همه، نیازی نیست چگونگی انتقال برنامه بین دستورات را مشخص کنیم. ساختار <code>while</code> این وظیفه را به عهده می‌گیرد. این ساختار، بلاک کد (بین کروشه‌ها) زیرینش را تا زمانی که شرطش برقرار باشد اجرا می‌کند. این شرط همان <bdo><code>count &lt;= 10</code></bdo> می‌باشد و معنای آن “<code>count</code> مساوی یا کوچکتر از 10 باشد&quot; است. دیگر نیازی نیست یک مقدار موقت ایجاد کرده و آن را با صفر مقایسه کنیم، که کار جالبی نبود. بخشی از قدرت زبان‌های برنامه‌نویسی این است که این این گونه جزئیات اضافی را از میان برمی‌دارند.</p>

<p>در پایان برنامه، بعد از اینکه ساختار <code>while</code> به اتمام رسید، دستور <code>console.log</code> برای قراردادن نتیجه در خروجی استفاده می‌شود.</p>

<p>اگر شانس استفاده از دستورات <code>range</code> و <code>sum</code> را داشتیم، که به ترتیب برای ایجاد مجموعه‌ای از اعداد در یک بازه و محاسبه‌ی جمع یک مجموعه اعداد استفاده می‌شوند، برنامه به شکل زیر نوشته می‌شد:</p>

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_yYSVMpVrKE" href="#c_yYSVMpVrKE" tabindex="-1" role="presentation"></a><span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">sum</span>(<span class="cm-variable">range</span>(<span class="cm-number">1</span>, <span class="cm-number">10</span>)));
<span class="cm-comment">// → 55</span></pre>

<p><a class="p_ident" id="p_J0S6J81mZ+" href="#p_J0S6J81mZ+" tabindex="-1" role="presentation"></a>درسی که از این داستان می‌شود گرفت این است که یک برنامه‌ی یکسان را می‌توان به دو صورت طولانی و کوتاه، ناخوانا و خوانا نوشت. اولین نسخه‌ی این برنامه بسیار گنگ بود در حالیکه که آخرین نسخه‌ی آن تقریبا به زبان انگلیسی نوشته شده است:  <bdo><code>log</code> the <code>sum</code> of the <code>range</code> of numbers from 1 to 10.</bdo> (مجموع اعداد بازه‌ی 1 تا 10 را چاپ کن. ). در <a href="04_data.html">فصل‌های بعد</a> خواهیم دید که چگونه دستوراتی مثل <code>sum</code> و <code>range</code> را خودمان تعریف کنیم.</p>

<p>یک زبان برنامه‌نویسی خوب با فراهم نمودن امکان اجرای دستوراتی در سطح بالا به کمک برنامه‌نویس می‌آید و باعث می‌شود که جزئیات کم‌اهمیت کنار گذاشته شوند. همچنین بلاک‌های سازنده‌ی مناسبی را فراهم می‌سازد (مانند <code>while</code> و <code>console.log</code>)، به شما اجازه می‌دهد تا بلاک‌های سازنده‌ی خودتان را تعریف کنید (مانند <code>sum</code> و <code>range</code>) و نوشتن این بلاک‌ها را آسان می‌نماید.</p>

<h2><a class="h_ident" id="h_aAyfic/vh1" href="#h_aAyfic/vh1" tabindex="-1" role="presentation"></a>جاوااسکریپت چیست؟</h2>

<p><a class="p_ident" id="p_uZ5Xa2Cen9" href="#p_uZ5Xa2Cen9" tabindex="-1" role="presentation"></a>جاوااسکریپت در سال 1995 به عنوان روشی برای افزودن برنامه‌ها به صفحات وب در مرورگر Netscape Navigator معرفی شد. این زبان از آن پس، توسط همه‌ی مرورگر‌های وب گرافیکی به خدمت گرفته شده است. جاوااسکریپت باعث شده تا ساخت برنامه‌های وب مدرن ممکن شود، برنامه‌هایی که می‌توانید بدون نیاز به بارگیری مجدد صفحه وب برای هر کار، با آن‌ها تعامل برقرار سازید. جاوااسکریپت همچنین در وب‌سایت‌های سنتی‌تر، برای ایجاد صورت‌های متنوعی از تعامل و هوشمندی به کار گرفته می‌شد.</p>

<p>لازم است گفته شود که جاوااسکریپت تقریبا هیچ ربطی به زبان برنامه‌نویسی جاوا ندارد. از نام جاوا برای ملاحظات بازاریابی استفاده شده نه ارتباط بین این دو زبان. در زمان معرفی جاوااسکریپت، زبان جاوا به شدت تبلیغ می‌شد و محبوبیت زیادی هم کسب می‌کرد. با قرض گرفتن این نام ظاهرا قصد داشته‌اند تا بر این موفقیت سوار شوند. اکنون همین نام جا افتاده و با ما مانده است.</p>

<p><a class="p_ident" id="p_LJ4tD6itsB" href="#p_LJ4tD6itsB" tabindex="-1" role="presentation"></a>پس از بکارگیری جاوااسکریپت خارج از Netscape، یک سند استاندارد نوشته شد تا  به توصیف شیوه‌ای که زبان جاوااسکریپت باید کار کند بپردازد و در نتیجه نرم‌افزار‌های متنوعی که قصد پشتیبانی از این زبان را دارند، همه به زبان یکسانی اشاره کنند. به این استاندارد، استاندارد ECMAScript گفته می‌شود. این نام‌گذاری پس از آن صورت گرفت که سازمان بین‌المللی Ecma، کار استانداردسازی را انجام داد. در عمل، اصطلاح ECMAScript و JavaScript را می‌توان به جای هم به کار برد – هر دو نام به یک زبان اشاره می‌کند.</p>

<p>افرادی هستند که چیز‌های ناخوش‌آیندی نسبت به جاوااسکریپت به زبان می‌آورند. خیلی از این چیز‌ها درست می‌باشند. زمانی که لازم بود برای اولین بار چیزی را به زبان جاوااسکریپت بنویسم، من هم خیلی سریع به سرزنش آن پرداختم. تقریبا هر چیزی که تایپ می‌کردم را قبول می‌کرد اما به صورتی تفسیر می‌نمود که کاملا با چیزی که انتظارش را می‌کشیدم متفاوت بود. درست است که این رفتار به این واقعیت که من اطلاعی از نحوه‌ی عملکرد زبان نداشتم ربط زیادی داشت، اما یک مسئله در جاوااسکریپت واقعیت دارد: جاوااسکریپت به طرز خنده‌داری در کار‌هایی که مجاز می‌شمرد روشن‌فکرانه عمل می‌کند. ایده‌ی پشت این نوع طراحی این بوده است که برنامه‌نویسی در جاوااسکریپت را برای تازه‌کار‌ها آسان‌تر کنند. در واقعیت، اتفاقی که افتاده این است که پیدا کردن مشکلات برنامه با این کار سخت‌تر می‌شود زیرا سیستم مشکلات را به شما نشان نمی‌دهد.</p>

<p>البته این انعطاف، مزیت‌هایی نیز به همراه دارد. راه را برای بروز تکنیک‌های زیادی باز می‌کند که در زبان‌های سخت‌گیرتر ممکن نیست و همانطور که خواهید دید (مثلا در <a href="10_modules.html">فصل 10</a>)، می‌توان از آن برای پوشش بعضی از اشکالات خود جاوااسکریپت بهره برد. بعد از یادگیری درست این زبان و سپری کردن مدتی با آن، من آموختم که واقعا جاوااسکریپت را دوست داشته باشم.</p>

<p><a class="p_ident" id="p_fHN0aDT41c" href="#p_fHN0aDT41c" tabindex="-1" role="presentation"></a>نسخه‌های متفاوتی از جاوااسکریپت وجود دارد. نسخه‌ی سوم ECMAScript، در زمانی که جاوااسکریپت گوی سبقت را می‌ربود، حدودا بین سال‌های 2000 تا 2010، به صورت گسترده‌ای پشتیبانی می‌شد. در طول این مدت، کار روی نسخه‌ی جاه‌طلبانه‌ی 4 در جریان بود. نسخه‌ای که برنامه‌ریزی شده بود تا بهبود‌ها و امکاناتی اساسی به زبان اضافه کند. ایجاد تغییر اساسی در زبانی زنده و پراستفاده، از نقطه‌نظر سیاست کاری، با مشکلاتی همراه بود. در سال 2008، کار روی نسخه‌ی 4 متوقف شد و نسخه‌ی بسیار محافظه‌کارانه‌ی 5 در دستور کار قرار گرفت. نسخه‌ای که فقط تغییرات و بهبود‌هایی که محل اختلاف نبودند را در برداشت و در سال 2009 منتشر شد. سپس در سال 2015 نسخه‌ی 6 بیرون آمد، یک به‌روز‌رسانی اساسی که بعضی از ایده‌هایی که در نسخه‌ی 4 برنامه‌ریزی شده بودند را پیاده‌سازی کرد. از آن موقع به بعد، هر سال تغییرات جدید و کوچکی را شاهد هستیم.</p>

<p><a class="p_ident" id="p_BOhpbmQkwh" href="#p_BOhpbmQkwh" tabindex="-1" role="presentation"></a>این که جاوااسکریپت در حال تکامل است به این معنا است که مرورگر‌ها نیز باید همواره به‌روز شوند، پس اگر از یک مرورگر قدیمی‌تر استفاده کنید، این امکان وجود دارد که به همه‌ی ویژگی‌ها دسترسی نداشته باشید. طراحان زبان جاوااسکریپت تغییراتی ایجاد نمی‌کنند که باعث خراب شدن برنامه‌های موجود بشود، بنابراین مرورگر‌های جدید، برنامه‌های قدیمی را نیز به درستی اجرا می‌نمایند. در این کتاب، من از نسخه‌ی 2017 جاوااسکریپت استفاده می‌کنم.</p>

<p><a class="p_ident" id="p_zGAVvduYFC" href="#p_zGAVvduYFC" tabindex="-1" role="presentation"></a>مرورگر‌های وب تنها پلتفرم‌هایی نیستند که جاوااسکریپت در آن‌ها استفاده می‌شود. بعضی پایگاه‌های داده مثل MongoDB و CouchDB، از جاوااسکریپت به عنوان زبان اسکریپت‌نویسی و پرس و جو استفاده می‌کنند. پلتفرم‌های متعددی برای برنامه‌نویسی دسکتاپ و سرور وجود دارند که مهم‌ترینشان پروژه‌ی Node.js ( موضوع <a href="20_node.html">فصل 20</a>) می‌باشد. Node.js محیطی را برای برنامه‌نویسی جاوااسکریپت خارج از مرورگر فراهم می‌سازد.</p>

<h2><a class="h_ident" id="h_kOWZsfPHrP" href="#h_kOWZsfPHrP" tabindex="-1" role="presentation"></a>کد و شیوه‌ی کار با آن</h2>

<p><em>کد</em> همان متنی است که برنامه‌ها را می‌سازد. بیشتر فصل‌های این کتاب حاوی کد‌های زیادی است. من باور دارم که خواندن و نوشتن کد، بخش‌های جدایی ناپذیر یادگیری برنامه‌نویسی هستند. سعی کنید فقط به نگاه کردن مثال‌ها اکتفا نکنید - آن‌ها را با توجه بخوانید و درک کنید. این کار ممکن است در ابتدا آهسته و گیج‌کننده باشد، اما قول می‌دهم که به سرعت در آن مهارت پیدا خواهید کرد. همین روال را برای تمرین‌ها رعایت کنید. تا زمانی که یک راه‌حل صحیح ننوشته‌اید، تصور نکنید که تمرین‌ها را درک کرده‌اید.</p>

<p>پیشنهاد من این است که راه‌حل‌هایتان را در یک مفسر واقعی جاوااسکریپت اجرا کنید. در این صورت، بلافاصله نسبت به صحت عملکرد کاری که می‌کنید بازخورد می‌گیرید و من امیدوارم که در این حین به تجربه کردن بیشتر بپردازید و از محدوده‌ی تمرین‌ها عبور کنید.</p>

<p>در هنگام مطالعه این کتاب در یک مروگر وب، می‌توانید تمامی برنامه‌های نمونه کتاب را با کلیک کردن ویرایش و اجرا نمایید.</p>

<p><a class="p_ident" id="p_Kzh6PibMf8" href="#p_Kzh6PibMf8" tabindex="-1" role="presentation"></a>اگر بخواهید برنامه‌هایی که در این کتاب تعریف شده را بیرون از سایت کتاب اجرا کنید، لازم است بعضی شرایط را فراهم کنید. خیلی از مثال‌ها نیاز به چیزی ندارند و باید در هر محیط جاوااسکریپتی کار کنند. اما کد‌های فصل‌های آتی، اغلب برای یک محیط خاص نوشته شده‌اند (مرورگر یا Node.js) و فقط آن‌جا اجرا می‌شوند. علاوه بر این، در خیلی از فصل‌ها، برنامه‌های بزرگ‌تری تعریف می‌شوند و کد‌های مربوط به آن‌ها به یکدیگر یا به فایل‌های بیرونی وابستگی دارند. در <a href="https://eloquentjavascript.net/code">محیط آزمایش کد</a> وب‌سایت، پیوند‌هایی به فایل‌های زیپ همه‌ی اسکریپت‌ها و داده‌های مورد نیاز برای اجرای کد‌های هر فصل قرار گرفته است.</p>

<h2><a class="h_ident" id="h_NU5SfX0Nl+" href="#h_NU5SfX0Nl+" tabindex="-1" role="presentation"></a>نگاهی اجمالی به این کتاب</h2>

<p><a class="p_ident" id="p_qaHvEQqjT6" href="#p_qaHvEQqjT6" tabindex="-1" role="presentation"></a>این کتاب به طور کلی از سه بخش تشکیل شده است. 12 فصل اول به زبان جاوااسکریپت می‌پردازد. هفت فصل بعد به مرورگر‌های وب و نحوه‌ی استفاده از جاوااسکریپت برای برنامه‌نویسی روی آن‌ها اختصاص دارد. در انتها، دو فصل برای Node.js در نظر گرفته شده است، بستری دیگر که می‌توان در آن جاوااسکریپت نوشت.</p>

<p>در این کتاب پنج <em>فصل پروژه</em> نیز وجود دارد که این فصل‌ها، برنامه‌های نمونه‌ی بزرگ‌تری را توصیف می‌کنند تا شما را با مزه‌ی برنامه‌نویسی واقعی آشنا کنند. در این فصل‌ها به ترتیب، بر روی ساختن یک <a href="07_robot.html">روبات تحویل‌ دهنده</a>، یک <a href="12_language.html">زبان برنامه‌نویسی</a>، یک <a href="16_game.html">بازی پرش</a>، یک <a href="19_paint.html">برنامه‌ی نقاشی پیکسلی</a> و یک  <a href="21_skillsharing.html">وبسایت پویا</a> کار می‌کنیم.</p>

<p>بخش مربوط به زبان این کتاب با چهار فصل شروع می‌شود که به معرفی ساختار پایه‌ای زبان جاوااسکریپت می‌پردازد. در این فصل‌ها،  به <a href="02_program_structure.html">ساختارهای کنترلی</a> (مانند <code>while</code> که در این مقدمه با آن آشنا شدید)،  <a href="03_functions.html">توابع</a> (نوشتن بلاک‌های سازنده‌ی اختصاصی) و <a href="04_data.html">ساختارهای داده</a>، پرداخته می‌شود. با دانستن آن‌ها، شما می‌توانید برنامه‌هایی ابتدائی بنویسید. سپس، فصل‌های <a href="05_higher_order.html">5</a> و <a href="06_object.html">6</a>، تکنیک‌هایی را معرفی می‌کنند تا از توابع و اشیاء برای نوشتن کد‌های انتزاعی‌تر استفاده کنید و پیچیدگی برنامه را مهار نمایید.</p>

<p>بعد از <a href="07_robot.html">فصل مربوط به پروژه‌ی اول</a>، قسمت مربوط به زبان، با فصل‌هایی درباره‌ی <a href="08_error.html">مدیریت خطاها و رفع باگ‌ها</a>، <a href="09_regexp.html">عبارات باقاعده</a> (یکی از ابزارهای مهم کار با متن‌ها)، <a href="10_modules.html">ماژول‌ها</a> (روشی دیگر برای مهار پیچیدگی)، و <a href="11_async.html">برنامه‌نویسی ناهمگام</a> (کار با رخدادهای زمان‌بر) ادامه می‌یابد. <a href="12_language.html">فصل مربوط به پروژه‌ی دوم</a>، بخش اول کتاب را جمع‌بندی می‌کند.</p>

<p>در بخش دوم، فصل‌های <a href="13_browser.html">13</a> تا <a href="19_paint.html">19</a>، به ابزار‌هایی که در دسترس جاوااسکریپت در مرورگر می‌باشند می‌پردازیم. در این بخش خواهید آموخت که چگونه چیز‌ها را روی صفحه نمایش دهید (فصل‌های <a href="14_dom.html">14</a> و <a href="17_canvas.html">17</a>)، به ورودی کاربر واکنش نشان دهید (<a href="15_event.html">فصل 15</a>) و با شبکه ارتباط برقرار کنید (<a href="18_http.html">فصل 18</a>). در این بخش نیز دو فصل پروژه وجود دارد.</p>

<p>بعد از آن، <a href="20_node.html">فصل 20</a> به شرح Node.js می پردازد، و در <a href="21_skillsharing.html">فصل 21</a>، یک وب‌سایت کوچک با این ابزار ساخته می‌شود.</p>

<h2><a class="h_ident" id="h_2PRsTPiRgj" href="#h_2PRsTPiRgj" tabindex="-1" role="presentation"></a>سبک‌های نگارش</h2>

<p>در این کتاب، متونی که با یک قلم <code>monospaced</code> (حروف با عرض ثابت) مشخص شده‌اند، نمایانگر قسمت‌های مربوط به برنامه‌ها می‌باشند —گاهی اوقات این قسمت‌ها مستقل هستند و گاهی به بخشی از یک برنامه‌ی نزدیک مرتبط می‌باشند. برنامه‌ها (که کمی از آن‌ها را تاکنون دیده‌اید)، به شکل زیر نوشته می‌شوند:</p>

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_5GjN2pXyt/" href="#c_5GjN2pXyt/" tabindex="-1" role="presentation"></a><span class="cm-keyword">function</span> <span class="cm-def">factorial</span>(<span class="cm-def">n</span>) {
  <span class="cm-keyword">if</span> (<span class="cm-variable-2">n</span> <span class="cm-operator">==</span> <span class="cm-number">0</span>) {
    <span class="cm-keyword">return</span> <span class="cm-number">1</span>;
  } <span class="cm-keyword">else</span> {
    <span class="cm-keyword">return</span> <span class="cm-variable">factorial</span>(<span class="cm-variable-2">n</span> <span class="cm-operator">-</span> <span class="cm-number">1</span>) <span class="cm-operator">*</span> <span class="cm-variable-2">n</span>;
  }
}</pre>

<p>گاهی، برای نمایش خروجی یک برنامه، خروجی مورد انتظار بعد علامت <bdo>// →</bdo> مشخص می‌شود.</p>

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_jUF93Xlrf8" href="#c_jUF93Xlrf8" tabindex="-1" role="presentation"></a><span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">factorial</span>(<span class="cm-number">8</span>));
<span class="cm-comment">// → 40320</span></pre>

<p>موفق باشید!</p><nav><a href="index.html" title="cover">◆</a> <a href="01_values.html" title="next chapter">▶</a></nav>
</article>