persian-eloquent-javascript/02_program_structure.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
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
<!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 chapNum = 2;</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="01_values.html" title="previous chapter">◀</a> <a href="index.html" title="cover">◆</a> <a href="03_functions.html" title="next chapter">▶</a></nav>

<h1><span class=chap_num>فصل 2</span>ساختار برنامه</h1>

<blockquote>

<p><a class="p_ident" id="p_sdV4ERHYT3" href="#p_sdV4ERHYT3" tabindex="-1" role="presentation"></a>سرخی قلبم از زیر پوست شفاف و نازکم می‌درخشد و آن‌ها باید به من  10 سی‌سی جاوااسکریپت تزریق کنند تا من را به زندگی برگردانند. (بدن من به وجود سم در خون خوب واکنش می‌دهد. ) این آشغال فورا نفس شما را برمی‌گرداند!</p>

<footer>why, <cite>Why's (Poignant) Guide to Ruby</cite></footer>

</blockquote><figure class="chapter framed"><img src="img/chapter_picture_2.jpg" alt="Picture of tentacles holding objects"></figure>

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

<h2><a class="h_ident" id="h_s218nGJZf7" href="#h_s218nGJZf7" tabindex="-1" role="presentation"></a>عبارت‌ها و دستورات</h2>

<p>در <a href="01_values.html">فصل 1</a>، مقادیری را ایجاد و به آن‌ها عملگر‌هایی اعمال کردیم تا بتوانیم مقدار‌های تازه‌ای ایجاد کنیم. تولید مقدار‌ها به این صورت، جوهر اساسی هر برنامه‌ی جاوااسکریپت است، اما این جوهر اساسی باید در یک ساختار بزرگتر قرار گیرد تا کاربردی شود. این کاری است که در این فصل به آن خواهیم پرداخت.</p>

<p><a class="p_ident" id="p_7JgUOWuib6" href="#p_7JgUOWuib6" tabindex="-1" role="presentation"></a>قطعه کدی که باعث تولید یک مقدار می‌شود را اصطلاحا <em>عبارت</em> (expression) می‌گویند. هر مقداری که در برنامه به طور مستقیم نوشته می‌شود (مانند <code>22</code> یا <code>&quot;psychoanalysis&quot;</code>) در واقع یک عبارت است. یک عبارت اگر داخل پرانتز قرار گیرد نیز یک عبارت محسوب می‌شود. به همین ترتیب، عملگر دودویی اگر به دو عبارت اعمال شود یا عملگر یکانی اگر به یک عبارت اعمال شود، باعث تولید عبارت جدید می‌شود.</p>

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

<p><a class="p_ident" id="p_u7kwzEJlB+" href="#p_u7kwzEJlB+" tabindex="-1" role="presentation"></a>اگر یک عبارت را معادل بخشی از جمله در نظر بگیریم، یک <em>دستور</em> (statement) جاوااسکریپت را می‌توان یک جمله‌ی کامل در زبان بشری دانست. یک برنامه، لیستی از دستورات است.</p>

<p>ساده‌ترین شکل یک دستور شامل یک عبارت و یک نقطه‌ویرگول در انتهای آن است. این یک برنامه است:</p>

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_hjwmfcgDR0" href="#c_hjwmfcgDR0" tabindex="-1" role="presentation"></a><span class="cm-number">1</span>;
<span class="cm-operator">!</span><span class="cm-atom">false</span>;</pre>

<p><a class="p_ident" id="p_G68h+cKOs9" href="#p_G68h+cKOs9" tabindex="-1" role="presentation"></a>البته برنامه‌ی بالا، کاربردی ندارد. یک عبارت می‌تواند فقط منجر به تولید یک مقدار بشود، مقداری که می‌تواند بعدا توسط کد‌های اطرافش استفاده شود. یک دستور به طور مستقل عمل می‌کند و زمانی می‌توان آن را دستوری صحیح نامید که اثری برجای بگذارد. یک دستور می‌تواند چیزی را روی صفحه نمایش دهد – که نوعی اثرگذاری محسوب می‌شود – یا حالت درونی برنامه را به گونه‌ای تغییر دهد که بر دستوراتی که بعد می‌آیند اثر بگذارد. این تغییرات را اثرات جانبی (<em>side effects</em>) می‌نامند. در مثال قبل، دستوراتی که آورده شدند فقط مقدار‌های <code>1</code> و <code>true</code> را تولید می‌کردند و بلافاصله آن‌ها را بدون استفاده ر‌ها می‌کردند. این کار به هیچ وجه اثری بر جای نمی‌گذارد. زمانی که این برنامه اجرا می‌شود، اتفاق قابل مشاهده‌ای رخ نمی‌دهد.</p>

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

<h2><a class="h_ident" id="h_DGuA/U0ZIt" href="#h_DGuA/U0ZIt" tabindex="-1" role="presentation"></a>متغیر‌ها (انتساب‌ها)</h2>

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

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_aT9yLxdY/V" href="#c_aT9yLxdY/V" tabindex="-1" role="presentation"></a><span class="cm-keyword">let</span> <span class="cm-def">caught</span> <span class="cm-operator">=</span> <span class="cm-number">5</span> <span class="cm-operator">*</span> <span class="cm-number">5</span>;</pre>

<p>استفاده از متغیر، نوع دومی از دستور را به ما معرفی می‌کند. <em>کلیدواژه‌ی</em> <code>let</code> مشخص می‌کند که این جمله قرار است تا متغیری را تعریف نماید. بعد از این کلیدواژه، نام متغیر می‌آید و در صورتی که بخواهیم مقداری را بلافاصله به آن اختصاص دهیم، می‌توانیم از عملگر <code>=</code> استفاده کنیم.</p>

<p><a class="p_ident" id="p_zK0bHLrYOB" href="#p_zK0bHLrYOB" tabindex="-1" role="presentation"></a>دستور بالا متغیری به نام <code>caught</code> را ایجاد کرده و از آن برای نگهداری یک عدد که از حاصل ضرب 5 در 5 به وجود آمده است، استفاده می‌کند.</p>

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

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_FfLIqaoaFx" href="#c_FfLIqaoaFx" tabindex="-1" role="presentation"></a><span class="cm-keyword">let</span> <span class="cm-def">ten</span> <span class="cm-operator">=</span> <span class="cm-number">10</span>;
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">ten</span> <span class="cm-operator">*</span> <span class="cm-variable">ten</span>);
<span class="cm-comment">// → 100</span></pre>

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

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_FiZBrHz3CX" href="#c_FiZBrHz3CX" tabindex="-1" role="presentation"></a><span class="cm-keyword">let</span> <span class="cm-def">mood</span> <span class="cm-operator">=</span> <span class="cm-string">&quot;light&quot;</span>;
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">mood</span>);
<span class="cm-comment">// → light</span>
<span class="cm-variable">mood</span> <span class="cm-operator">=</span> <span class="cm-string">&quot;dark&quot;</span>;
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">mood</span>);
<span class="cm-comment">// → dark</span></pre>

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

<p><a class="p_ident" id="p_lypnxIGSco" href="#p_lypnxIGSco" tabindex="-1" role="presentation"></a>اجازه دهید تا مثالی دیگر را بررسی کنیم. برای به یادآوری دلار‌هایی که لوئیجی هنوز به شما بدهکار است، می‌توانید از یک متغیر استفاده کنید. زمانی که او 35 دلار به شما پس می‌دهد، مقدار متغیر مورد نظر را تغییر می‌دهید.</p>

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_UpFQBNACng" href="#c_UpFQBNACng" tabindex="-1" role="presentation"></a><span class="cm-keyword">let</span> <span class="cm-def">luigisDebt</span> <span class="cm-operator">=</span> <span class="cm-number">140</span>;
<span class="cm-variable">luigisDebt</span> <span class="cm-operator">=</span> <span class="cm-variable">luigisDebt</span> <span class="cm-operator">-</span> <span class="cm-number">35</span>;
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">luigisDebt</span>);
<span class="cm-comment">// → 105</span></pre>

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

<p>می‌توان از یک <code>let</code> برای تعریف چندین متغیر استفاده نمود. این تعریف‌ها باید به وسیله ویرگول جدا شوند.</p>

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_pT4pqev8kx" href="#c_pT4pqev8kx" tabindex="-1" role="presentation"></a><span class="cm-keyword">let</span> <span class="cm-def">one</span> <span class="cm-operator">=</span> <span class="cm-number">1</span>, <span class="cm-def">two</span> <span class="cm-operator">=</span> <span class="cm-number">2</span>;
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">one</span> <span class="cm-operator">+</span> <span class="cm-variable">two</span>);
<span class="cm-comment">// → 3</span></pre>

<p>کلمه‌های <code>var</code> و <code>const</code> را نیز می‌توان به طور مشابهی برای ایجاد متغیر‌ها (انتساب‌ها) استفاده کرد. درست مانند استفاده از <code>let</code>.</p>

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_8QmBe23E5V" href="#c_8QmBe23E5V" tabindex="-1" role="presentation"></a><span class="cm-keyword">var</span> <span class="cm-def">name</span> <span class="cm-operator">=</span> <span class="cm-string">&quot;Ayda&quot;</span>;
<span class="cm-keyword">const</span> <span class="cm-def">greeting</span> <span class="cm-operator">=</span> <span class="cm-string">&quot;Hello &quot;</span>;
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">greeting</span> <span class="cm-operator">+</span> <span class="cm-variable">name</span>);
<span class="cm-comment">// → Hello Ayda</span></pre>

<p><a class="p_ident" id="p_26uB4DLE8w" href="#p_26uB4DLE8w" tabindex="-1" role="presentation"></a>اولین کلمه کلیدی، <code>var</code> (کوتاه شده‌ی “variable”)، روشی بود که انتساب‌ها را در نسخه‌ی قبل از 2015 جاوااسکریپت با آن تعریف می‌کردند. در <a href="03_functions.html">فصل بعدی</a> به تفاوت آن با <code>let</code> خواهیم پرداخت. فعلا، به خاطر داشته باشید که هر دوی آن‌ها در بیشتر اوقات، کار مشابهی را انجام می‌دهند، اما در این کتاب ما به ندرت از <code>var</code> استفاده خواهیم کرد به خاطر اینکه خصوصیات گیج‌کننده‌ای دارد.</p>

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

<h2><a class="h_ident" id="h_Xm00X/7dcY" href="#h_Xm00X/7dcY" tabindex="-1" role="presentation"></a>نام‌گذاری انتساب‌ها (متغیر‌ها)</h2>

<p>می‌توان از هر کلمه‌ای برای نام‌گذاری انتساب‌ها استفاده کرد. می‌توان از ارقام برای بخشی از نام متغیر استفاده نمود – مثلا <code>catch22</code> یک نام معتبر است – اما نمی‌توان آن را با اعداد شروع کرد. نام یک متغیر می‌تواند شامل علامت دلار (<code>$</code>) یا زیرخط (<code>_</code>) باشد اما دیگر علامت‌های نقطه‌گذاری یا کاراکتر‌های ویژه را نمی‌توان استفاده نمود.</p>

<p>کلماتی که معنای خاصی در جاوااسکریپت دارند مانند <code>let</code> را <em>کلیدواژه</em> می‌نامند و نمی‌توان از آن‌ها برای نام‌گذاری متغیر‌ها استفاده کرد. همچنین یک تعداد مشخصی از کلمات وجود دارند که برای نسخه‌های آینده جاوااسکریپت رزرو شده‌اند که نمی‌توان از آن‌ها نیز برای نام‌گذاری متغیر‌ها استفاده نمود. لیست همه‌ی این کلمات کلیدی و رزرو شده، نسبتا لیست بلندی می‌شود.</p>

<pre class="snippet cm-s-default" data-language="text/plain" ><a class="c_ident" id="c_7BGolnv7qC" href="#c_7BGolnv7qC" tabindex="-1" role="presentation"></a>break case catch class const continue debugger default
delete do else enum export extends false finally for
function if implements import interface in instanceof let
new package private protected public return static super
switch this throw true try typeof var void while with yield</pre>

<p>نگران حفظ کردن کلمات بالا نباشید. اگر هنگام تعریف یک متغیر با خطایی خلاف انتظار روبرو شدید، مطمئن شوید که از کلمات لیست بالا استفاده نکرده باشید.</p>

<h2><a class="h_ident" id="h_9Z6m0iQJ33" href="#h_9Z6m0iQJ33" tabindex="-1" role="presentation"></a>محیط اجرایی</h2>

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

<h2><a class="h_ident" id="h_vAoppXbLUs" href="#h_vAoppXbLUs" tabindex="-1" role="presentation"></a>توابع</h2>

<p><a class="p_ident" id="p_whjjnvouGq" href="#p_whjjnvouGq" tabindex="-1" role="presentation"></a>خیلی از مقدار‌هایی که در محیط اجرایی پیش‌فرض، وجود دارند از نوع <em>function</em> می‌باشند. یک تابع در واقع یک قطعه یا بخشی از برنامه است که در قالب یک مقدار قرار گرفته است. این نوع مقدار‌ها را می‌توان بکار گرفت تا برنامه‌ی موجود در آن اجرا شود. به عنوان مثال، در محیط مرورگر، انتساب <code>prompt</code> تابعی را نگهداری می‌کند که در صورت اجرا، یک پنجره‌ی تعاملی را نشان می‌دهد که می‌تواند اطلاعاتی را از کاربر دریافت کند و به شکل زیر استفاده می‌شود:</p>

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_QSUssd4nHv" href="#c_QSUssd4nHv" tabindex="-1" role="presentation"></a><span class="cm-variable">prompt</span>(<span class="cm-string">&quot;Enter passcode&quot;</span>);</pre><figure><img src="img/prompt.png" alt="A prompt dialog"></figure>

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

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

<h2><a class="h_ident" id="h_XrgJjP1OnI" href="#h_XrgJjP1OnI" tabindex="-1" role="presentation"></a>تابع console.log</h2>

<p><a class="p_ident" id="p_TdACPv82GV" href="#p_TdACPv82GV" tabindex="-1" role="presentation"></a>در مثال‌های قبلی، من از <code>console.log</code> برای نمایش مقدار‌ها استفاده کردم. اکثر سیستم‌های جاوااسکریپت ( شامل همه مرورگر‌های مدرن و node.js) تابعی به نام <code>console.log</code> را فراهم می‌کنند که آرگومان‌های ورودیش را در جایی به صورت متنی نشان می‌دهند. در مرورگر‌ها، این خروجی در کنسول جاوااسکریپت قرار می‌گیرد. کنسول بخشی از مرورگر است که به صورت پیش فرض مخفی است، اما در بیشتر مرورگر‌ها با فشار دادن کلید F12 یا در مک با <span class="keyname">command</span>-<span class="keyname">option</span>-I در دسترس خواهد بود. اگر این کلید‌های میانبر کار نکرد، از طریق منوی مرورگر به دنبال “developer tools” و شبیه آن بگردید.</p>

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

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_TuaqUrwlKB" href="#c_TuaqUrwlKB" tabindex="-1" role="presentation"></a><span class="cm-keyword">let</span> <span class="cm-def">x</span> <span class="cm-operator">=</span> <span class="cm-number">30</span>;
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string">&quot;the value of x is&quot;</span>, <span class="cm-variable">x</span>);
<span class="cm-comment">// → the value of x is 30</span></pre>

<p>اگرچه در نام متغیر‌ها نمی‌توان از کاراکتر نقطه استفاده کرد، اما <code>console.log</code> نقطه دارد. علت آن این است که <code>console.log</code> یک انتساب (متغیر) ساده نیست. در واقع عبارتی است که خاصیت <code>log</code> را از مقداری که در متغیر <code>console</code> نگهداری شده است برمی‌گرداند. در <a href="04_data.html#properties">فصل 4</a>، با مفهوم آن به طور دقیق آشنا خواهیم شد.</p>

<h2 id="return_values"><a class="h_ident" id="h_oaLpXLEXbw" href="#h_oaLpXLEXbw" tabindex="-1" role="presentation"></a>بازگرداندن مقادیر</h2>

<p><a class="p_ident" id="p_gWstW3nH5w" href="#p_gWstW3nH5w" tabindex="-1" role="presentation"></a>نمایش یک پنجره‌ی تعاملی یا نوشتن متن در صفحه‌ی نمایش یک <em>اثر جانبی</em> (side effect) تلقی می‌شوند. خیلی از توابع به خاطر اثرات جانبی‌ای که تولید می‌کنند کاربرد دارند. توابع همچنین می‌توانند مقدار تولید کنند و در این صورت نیازی به اثر جانبی ندارند تا در برنامه کاربرد داشته باشند. به عنوان مثال، تابع <code>Math.max</code> به تعداد دلخواه، آرگومان عددی می‌گیرد و بزرگترین آن‌ها را برمی‌گرداند.</p>

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_PEuTYZX6NI" href="#c_PEuTYZX6NI" tabindex="-1" role="presentation"></a><span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">Math</span>.<span class="cm-property">max</span>(<span class="cm-number">2</span>, <span class="cm-number">4</span>));
<span class="cm-comment">// → 4</span></pre>

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

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_V4eUUr1Irj" href="#c_V4eUUr1Irj" tabindex="-1" role="presentation"></a><span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">Math</span>.<span class="cm-property">min</span>(<span class="cm-number">2</span>, <span class="cm-number">4</span>) <span class="cm-operator">+</span> <span class="cm-number">100</span>);
<span class="cm-comment">// → 102</span></pre>

<p>در <a href="03_functions.html">در فصل بعد</a> توضیح می‌دهم که چگونه توابع خود را بنویسید.</p>

<h2><a class="h_ident" id="h_6k9HePMYQh" href="#h_6k9HePMYQh" tabindex="-1" role="presentation"></a>جریان کنترل</h2>

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

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_6hF1Rg3sJ/" href="#c_6hF1Rg3sJ/" tabindex="-1" role="presentation"></a><span class="cm-keyword">let</span> <span class="cm-def">theNumber</span> <span class="cm-operator">=</span> <span class="cm-variable">Number</span>(<span class="cm-variable">prompt</span>(<span class="cm-string">&quot;Pick a number&quot;</span>));
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string">&quot;Your number is the square root of &quot;</span> <span class="cm-operator">+</span>
            <span class="cm-variable">theNumber</span> <span class="cm-operator">*</span> <span class="cm-variable">theNumber</span>);</pre>

<p>تابع <code>Number</code> مقدار ورودی‌اش را به عدد تبدیل می‌کند. ما به این تبدیل نیاز داریم چرا که خروجی تابع <code>prompt</code> از جنس رشته است و ما به دنبال عدد هستیم. توابع مشابهی به نام‌های <code>String</code> و <code>Boolean</code> وجود دارند که مقادیر را به نوع خودشان تبدیل می‌کنند.</p>

<p>در اینجا تصویری ابتدایی از چگونگی جریان کنترل خطی مستقیم نمایش داده شده است.</p><figure><img src="img/controlflow-straight.svg" alt="Trivial control flow"></figure>

<h2><a class="h_ident" id="h_XLEmqHMDC1" href="#h_XLEmqHMDC1" tabindex="-1" role="presentation"></a>اجرای شرطی</h2>

<p>همه‌ی برنامه‌ها از جنس خطی و مستقیم نیستند. مثلا ممکن است بخواهیم یک راه دیگر هم در برنامه در نظر بگیریم که برنامه با توجه به شرایطی که در دست دارد راه مناسب را انتخاب کند. به این کار <em>اجرای‌ شرطی</em> می‌گویند.</p><figure><img src="img/controlflow-if.svg" alt="Conditional control flow"></figure>

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

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_D0zJWB8mO1" href="#c_D0zJWB8mO1" tabindex="-1" role="presentation"></a><span class="cm-keyword">let</span> <span class="cm-def">theNumber</span> <span class="cm-operator">=</span> <span class="cm-variable">Number</span>(<span class="cm-variable">prompt</span>(<span class="cm-string">&quot;Pick a number&quot;</span>));
<span class="cm-keyword">if</span> (<span class="cm-operator">!</span><span class="cm-variable">Number</span>.<span class="cm-property">isNaN</span>(<span class="cm-variable">theNumber</span>)) {
  <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string">&quot;Your number is the square root of &quot;</span> <span class="cm-operator">+</span>
              <span class="cm-variable">theNumber</span> <span class="cm-operator">*</span> <span class="cm-variable">theNumber</span>);
}</pre>

<p><a class="p_ident" id="p_q5pBj5KOXK" href="#p_q5pBj5KOXK" tabindex="-1" role="presentation"></a>با این تغییر، اگر رشته‌ی “parrot” را وارد کنید، چیزی به عنوان خروجی نشان داده نخواهد شد.</p>

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

<p>تابع <code>Number.isNaN</code> یک تابع استاندارد جاوااسکریپت است که زمانی مقدار <code>true</code> را برمی گرداند که آرگومان ورودی آن از نوع <code>NaN</code> باشد. اگر رشته‌ای که به تابع <code>Number</code> داده می‌شود، بیانگر یک عدد معتبر نباشد، این تابع مقدار <code>NaN</code> را برمی‌گرداند. بنابراین، معنای عبارت شرطی این‌گونه می‌شود: &quot;اگر <code>theNumber</code> از جنس غیر عدد نباشد (عددی باشد) فلان کار را انجام بده. &quot;</p>

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

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_/Ndk5rqq2Z" href="#c_/Ndk5rqq2Z" tabindex="-1" role="presentation"></a><span class="cm-keyword">if</span> (<span class="cm-number">1</span> <span class="cm-operator">+</span> <span class="cm-number">1</span> <span class="cm-operator">==</span> <span class="cm-number">2</span>) <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string">&quot;It's true&quot;</span>);
<span class="cm-comment">// → It's true</span></pre>

<p><a class="p_ident" id="p_X/5TO4MPCK" href="#p_X/5TO4MPCK" tabindex="-1" role="presentation"></a>همیشه اینطور نیست که برنامه در صورت true بودن شرط اجرا شود، بلکه گاهی عکس این مطلب اتفاق می‌افتد. این مسیر جانبی در نمودار با پیکان دوم نمایش داده شده است. استفاده از کلیدواژه‌ی <code>else</code> به همراه <code>if</code> این امکان را به ما می‌دهد تا دو مسیر اجرایی متفاوت تعریف کنیم.</p>

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_kLpqX2fnaC" href="#c_kLpqX2fnaC" tabindex="-1" role="presentation"></a><span class="cm-keyword">let</span> <span class="cm-def">theNumber</span> <span class="cm-operator">=</span> <span class="cm-variable">Number</span>(<span class="cm-variable">prompt</span>(<span class="cm-string">&quot;Pick a number&quot;</span>));
<span class="cm-keyword">if</span> (<span class="cm-operator">!</span><span class="cm-variable">Number</span>.<span class="cm-property">isNaN</span>(<span class="cm-variable">theNumber</span>)) {
  <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string">&quot;Your number is the square root of &quot;</span> <span class="cm-operator">+</span>
              <span class="cm-variable">theNumber</span> <span class="cm-operator">*</span> <span class="cm-variable">theNumber</span>);
} <span class="cm-keyword">else</span> {
  <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string">&quot;Hey. Why didn't you give me a number?&quot;</span>);
}</pre>

<p>اگر بیش از دو مسیر برای انتخاب داشتیم، می‌توان از چندین جفت <code>if</code>/<code>elseکه</code> با هم زنجیر شده‌اند استفاده کرد. به مثال توجه کنید:</p>

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_QrvIive0zT" href="#c_QrvIive0zT" tabindex="-1" role="presentation"></a><span class="cm-keyword">let</span> <span class="cm-def">num</span> <span class="cm-operator">=</span> <span class="cm-variable">Number</span>(<span class="cm-variable">prompt</span>(<span class="cm-string">&quot;Pick a number&quot;</span>));

<span class="cm-keyword">if</span> (<span class="cm-variable">num</span> <span class="cm-operator">&lt;</span> <span class="cm-number">10</span>) {
  <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string">&quot;Small&quot;</span>);
} <span class="cm-keyword">else</span> <span class="cm-keyword">if</span> (<span class="cm-variable">num</span> <span class="cm-operator">&lt;</span> <span class="cm-number">100</span>) {
  <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string">&quot;Medium&quot;</span>);
} <span class="cm-keyword">else</span> {
  <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string">&quot;Large&quot;</span>);
}</pre>

<p><a class="p_ident" id="p_7/D3JM10se" href="#p_7/D3JM10se" tabindex="-1" role="presentation"></a>برنامه در ابتدا بررسی می‌کند که آیا <code>num</code> از 10 مقدارش کم‌تر است یا خیر. اگر کمتر بود، به سراغ آن شاخه از کد می‌رود و <code>&quot;Small&quot;</code>را نشان می‌دهد و کار تمام است. اگر شرط دوم (<bdo><code>&lt; 100</code></bdo>) برقرار بود، به این معنا است که عدد بین 10 و 100 است که در این صورت <code>&quot;Medium&quot;</code> نمایش داده می‌شود. اگر هیچ کدام نبود، دومین و آخرین <code>else</code> انتخاب می‌شود.</p>

<p>نمودار برنامه بالا چیزی شبیه عکس زیر خواهد بود.</p><figure><img src="img/controlflow-nested-if.svg" alt="Nested if control flow"></figure>

<h2 id="loops"><a class="h_ident" id="h_5CGy7baTQN" href="#h_5CGy7baTQN" tabindex="-1" role="presentation"></a>while و do loops</h2>

<p><a class="p_ident" id="p_pWuGD4KS59" href="#p_pWuGD4KS59" tabindex="-1" role="presentation"></a>برنامه‌ای را در نظر بگیرید که همه‌ی اعداد زوج بین 0 و 12 را چاپ می‌کند. یکی از راه‌های نوشتن این برنامه به شکل زیر است:</p>

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_NiH5lbw9eg" href="#c_NiH5lbw9eg" tabindex="-1" role="presentation"></a><span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-number">0</span>);
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-number">2</span>);
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-number">4</span>);
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-number">6</span>);
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-number">8</span>);
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-number">10</span>);
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-number">12</span>);</pre>

<p><a class="p_ident" id="p_6QAw2tH71f" href="#p_6QAw2tH71f" tabindex="-1" role="presentation"></a>این برنامه کار خواهد کرد اما ایده‌ی اینکه اصلا برنامه‌ای نوشته می‌شود این است که که یک وظیفه، <em>کمتر</em> کار ببرد نه بیشتر. اگر ما بخواهیم تمام اعداد زوج کوچکتر از 1000 را چاپ کنیم، روش قبلی دیگر عملی نیست. چیزی که لازم داریم روشی است که بتوان با آن کد‌هایی را تکرار کرد. این شکل جریان کنترل را <em>loop</em> یا حلقه می‌نامند.</p><figure><img src="img/controlflow-loop.svg" alt="Loop control flow"></figure>

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

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

<p><a class="p_ident" id="p_G/WHQ6jJPa" href="#p_G/WHQ6jJPa" tabindex="-1" role="presentation"></a>دستوری که با کلیدواژه‌ی <code>while</code> شروع شود، یک حلقه ایجاد می‌کند. ساختار <code>while</code> بسیار شبیه به <code>if</code> است. کلمه‌ی while در ابتدا، سپس یک جفت پرانتز که در داخل آن یک عبارت قرار می‌گیرد و بعد دستور نوشته می‌شود. حلقه‌ی <code>while،</code> دستور مورد نظر را به صورت مداوم اجرا می‌کند البته تا زمانی که عبارت داخل پرانتز true ارزیابی شود. مقدار داخل پرانتز به نوع داده‌ی بولی تبدیل می‌شود و بعد ارزیابی می‌شود.</p>

<p><a class="p_ident" id="p_Ph3DtL+xPq" href="#p_Ph3DtL+xPq" tabindex="-1" role="presentation"></a>متغیر <code>number</code> در اینجا نشان می‌دهد که چگونه می‌توان از یک متغیر برای نگهداری پیشرفت یک برنامه استفاده کرد. هر بار که حلقه تکرار می‌شود، مقدار <code>number</code> به اندازه‌ی 2 واحد از قبل بیشتر می‌شود. در ابتدای هر تکرار این عدد با عدد 12 مقایسه شده تا مشخص شود که آیا به پایان اجرای برنامه رسیده‌ایم یا خیر.</p>

<p><a class="p_ident" id="p_TDuJq/QshE" href="#p_TDuJq/QshE" tabindex="-1" role="presentation"></a>به عنوان یک مثال کاربردی، اکنون می‌توانیم برنامه‌ای بنویسیم که مقدار 2<sup>10</sup> را محاسبه کند و نمایش دهد. از دو متغیر استفاده خواهیم کرد: یکی برای نگه داشتن نتیجه محاسبه و دیگری برای شمردن تعداد دفعاتی که نتیجه را در 2 ضرب کرده‌ایم. حلقه بررسی می‌کند که متغیر دوم به 10 رسیده باشد که در غیر این صورت هر دوی متغیر‌ها را به روز‌رسانی کند.</p>

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_9AxUm9n4M9" href="#c_9AxUm9n4M9" tabindex="-1" role="presentation"></a><span class="cm-keyword">let</span> <span class="cm-def">result</span> <span class="cm-operator">=</span> <span class="cm-number">1</span>;
<span class="cm-keyword">let</span> <span class="cm-def">counter</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>;
<span class="cm-keyword">while</span> (<span class="cm-variable">counter</span> <span class="cm-operator">&lt;</span> <span class="cm-number">10</span>) {
  <span class="cm-variable">result</span> <span class="cm-operator">=</span> <span class="cm-variable">result</span> <span class="cm-operator">*</span> <span class="cm-number">2</span>;
  <span class="cm-variable">counter</span> <span class="cm-operator">=</span> <span class="cm-variable">counter</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">result</span>);
<span class="cm-comment">// → 1024</span></pre>

<p><a class="p_ident" id="p_2+4/JOdA8x" href="#p_2+4/JOdA8x" tabindex="-1" role="presentation"></a>می‌توانستیم متغیر شمارنده‌ی counter را از عدد <code>1</code> شروع کنیم که در این صورت شرط به صورت <bdo><code>&lt;= 10</code></bdo> بررسی می‌شود. به دلایلی که در فصل ?](data#array_indexing) روشن خواهد شد، بهتر است که عادت کنیم تا از 0 بشماریم.</p>

<p>حلقه‌ی <code>do</code> یک ساختار کنترلی شبیه به حلقه‌ی <code>while</code> است. تفاوت فقط در یک چیز است: یک حلقه‌ی <code>do</code> حداقل بدنه‌اش را یک بار اجرا می‌کند و بررسی شرط توقف را بعد از اولین اجرا انجام می‌دهد. برای نشان دادن این ویژگی، قسمت بررسی شرط، بعد از بدنه‌ی حلقه نوشته می‌شود:</p>

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_Rdlc+hwgyM" href="#c_Rdlc+hwgyM" tabindex="-1" role="presentation"></a><span class="cm-keyword">let</span> <span class="cm-def">yourName</span>;
<span class="cm-keyword">do</span> {
  <span class="cm-variable">yourName</span> <span class="cm-operator">=</span> <span class="cm-variable">prompt</span>(<span class="cm-string">&quot;Who are you?&quot;</span>);
} <span class="cm-keyword">while</span> (<span class="cm-operator">!</span><span class="cm-variable">yourName</span>);
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">yourName</span>);</pre>

<p>این برنامه شما را وادار خواهد کرد که حتما نامی را وارد نمایید. این درخواست آن قدر پرسیده خواهد شد تا بالاخره چیزی غیر از رشته‌ی خالی را دریافت کند. افزودن عملگر <code>!</code> باعث می‌شود که یک مقدار قبل از معکوس شدن به نوع بولی تبدیل شود و می‌دانیم که تمام رشته‌ها به جز <code>&quot;&quot;</code> به <code>true</code> تبدیل می‌شوند. این بدین معنا است که حلقه تا زمانی که نامی غیر تهی وارد نکنید اجرا می‌شود.</p>

<h2><a class="h_ident" id="h_edGlbbAaXE" href="#h_edGlbbAaXE" tabindex="-1" role="presentation"></a>ایجاد تورفتگی در کدها</h2>

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

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

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_Dmd8L2VV0d" href="#c_Dmd8L2VV0d" tabindex="-1" role="presentation"></a><span class="cm-keyword">if</span> (<span class="cm-atom">false</span> <span class="cm-operator">!=</span> <span class="cm-atom">true</span>) {
  <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string">&quot;That makes sense.&quot;</span>);
  <span class="cm-keyword">if</span> (<span class="cm-number">1</span> <span class="cm-operator">&lt;</span> <span class="cm-number">2</span>) {
    <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string">&quot;No surprise there.&quot;</span>);
  }
}</pre>

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

<h2><a class="h_ident" id="h_Ha2/s82gQ+" href="#h_Ha2/s82gQ+" tabindex="-1" role="presentation"></a>حلقه‌های for</h2>

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

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

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_bv526eAQ8J" href="#c_bv526eAQ8J" tabindex="-1" role="presentation"></a><span class="cm-keyword">for</span> (<span class="cm-keyword">let</span> <span class="cm-def">number</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>; <span class="cm-variable">number</span> <span class="cm-operator">&lt;=</span> <span class="cm-number">12</span>; <span class="cm-variable">number</span> <span class="cm-operator">=</span> <span class="cm-variable">number</span> <span class="cm-operator">+</span> <span class="cm-number">2</span>) {
  <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">number</span>);
}
<span class="cm-comment">// → 0</span>
<span class="cm-comment">// → 2</span>
<span class="cm-comment">//   … etcetera</span></pre>

<p>برنامه‌ی بالا دقیقا معادل برنامه‌ی چاپ اعداد زوج <a href="02_program_structure.html#loops">پیشین</a> است. تنها تفاوت این است که تمامی دستوراتی که به &quot;وضعیت&quot; برنامه ربط دارند، اکنون در یک گروه بعد از <code>for</code> قرار گرفته‌اند.</p>

<p>قسمت داخل پرانتز بعد از کلیدواژه‌ی <code>for</code> باید حتما دارای دو نقطه‌ویرگول باشد. قسمت قبل از نقطه‌ویرگول اول، حلقه را <em>مقداردهی اولیه</em> می‌کند، که این کار معمولا با تعریف یک متغیر انجام می‌شود. قسمت دوم، عبارتی است که <em>بررسی</em> می‌کند تا کی حلقه باید ادامه پیدا کند. بخش نهایی وضعیت حلقه را بعد از هربار تکرار <em>به روز‌رسانی</em> می‌کند. در بیشتر موارد، این روش از ساختار <code>while</code> کوتاهتر و سرراست‌تر است.</p>

<p><a class="p_ident" id="p_E13r1INwJr" href="#p_E13r1INwJr" tabindex="-1" role="presentation"></a>در اینجا کدی را مشاهده می‌کنید که 2<sup>10</sup> را محاسبه می‌کند البته با استفاده از <code>for</code> به جای <code>while</code>:</p>

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_BPd5Bl+eyt" href="#c_BPd5Bl+eyt" tabindex="-1" role="presentation"></a><span class="cm-keyword">let</span> <span class="cm-def">result</span> <span class="cm-operator">=</span> <span class="cm-number">1</span>;
<span class="cm-keyword">for</span> (<span class="cm-keyword">let</span> <span class="cm-def">counter</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>; <span class="cm-variable">counter</span> <span class="cm-operator">&lt;</span> <span class="cm-number">10</span>; <span class="cm-variable">counter</span> <span class="cm-operator">=</span> <span class="cm-variable">counter</span> <span class="cm-operator">+</span> <span class="cm-number">1</span>) {
  <span class="cm-variable">result</span> <span class="cm-operator">=</span> <span class="cm-variable">result</span> <span class="cm-operator">*</span> <span class="cm-number">2</span>;
}
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">result</span>);
<span class="cm-comment">// → 1024</span></pre>

<h2><a class="h_ident" id="h_8u4FhNC0aK" href="#h_8u4FhNC0aK" tabindex="-1" role="presentation"></a>شکستن حلقه و خروج از آن</h2>

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

<p><a class="p_ident" id="p_rD5dRfPR87" href="#p_rD5dRfPR87" tabindex="-1" role="presentation"></a>برنامه‌ی زیر چگونگی استفاده از <code>break</code> را نمایش می‌دهد. این برنامه، اولین عددی که بزرگتر و مساوی 20 است و همچنین قابل تقسیم بر 7 است را پیدا می‌کند.</p>

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_G/xQzCJ2hv" href="#c_G/xQzCJ2hv" tabindex="-1" role="presentation"></a><span class="cm-keyword">for</span> (<span class="cm-keyword">let</span> <span class="cm-def">current</span> <span class="cm-operator">=</span> <span class="cm-number">20</span>; ; <span class="cm-variable">current</span> <span class="cm-operator">=</span> <span class="cm-variable">current</span> <span class="cm-operator">+</span> <span class="cm-number">1</span>) {
  <span class="cm-keyword">if</span> (<span class="cm-variable">current</span> <span class="cm-operator">%</span> <span class="cm-number">7</span> <span class="cm-operator">==</span> <span class="cm-number">0</span>) {
    <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">current</span>);
    <span class="cm-keyword">break</span>;
  }
}
<span class="cm-comment">// → 21</span></pre>

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

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

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

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

<p>کلیدواژه‌ی <code>continue</code> همانند <code>break</code> روی پیشروی حلقه تاثیر می‌گذارد. زمانی که <code>continue</code> در داخل بدنه‌ی حلقه اجرا شود، کنترل برنامه از بدنه خارج می‌شود و به تکرار بعدی منتقل شده و ادامه می‌یابد.</p>

<h2><a class="h_ident" id="h_w/vOcj7RDM" href="#h_w/vOcj7RDM" tabindex="-1" role="presentation"></a>روش کوتاه به‌روزرسانی متغیرها</h2>

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

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_aegdj8V5XM" href="#c_aegdj8V5XM" tabindex="-1" role="presentation"></a><span class="cm-variable">counter</span> <span class="cm-operator">=</span> <span class="cm-variable">counter</span> <span class="cm-operator">+</span> <span class="cm-number">1</span>;</pre>

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

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_/XU8FyoU4+" href="#c_/XU8FyoU4+" tabindex="-1" role="presentation"></a><span class="cm-variable">counter</span> <span class="cm-operator">+=</span> <span class="cm-number">1</span>;</pre>

<p><a class="p_ident" id="p_7p844Ya6Bv" href="#p_7p844Ya6Bv" tabindex="-1" role="presentation"></a>میانبر‌های مشابهی برای دیگر عملگر‌ها وجود دارد مثل <bdo><code>result *= 2</code></bdo> که مقدار متغیر <code>result</code> را دوبرابر می‌کند یا <bdo><code>counter -= 1</code></bdo> که مقدار count را کاهش می‌دهد.</p>

<p>با این روش می‌توانیم مثال شمارش اعداد را کمی کوتاهتر بنویسیم.</p>

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_h8HkwMM+IM" href="#c_h8HkwMM+IM" tabindex="-1" role="presentation"></a><span class="cm-keyword">for</span> (<span class="cm-keyword">let</span> <span class="cm-def">number</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>; <span class="cm-variable">number</span> <span class="cm-operator">&lt;=</span> <span class="cm-number">12</span>; <span class="cm-variable">number</span> <span class="cm-operator">+=</span> <span class="cm-number">2</span>) {
  <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">number</span>);
}</pre>

<p>برای <bdo><code>counter += 1</code></bdo>  و <bdo><code>counter -= 1</code></bdo> معادل‌های کوتاهتری هم وجود دارد: <bdo><code>counter++</code></bdo> و <bdo><code>counter--</code></bdo>.</p>

<h2><a class="h_ident" id="h_Gq21GFKd5H" href="#h_Gq21GFKd5H" tabindex="-1" role="presentation"></a>تصمیم گیری بر اساس یک مقدار به کمک switch</h2>

<p>کد‌هایی شبیه کد زیر بسیار رایج هستند:</p>

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_Q96dt8DAU9" href="#c_Q96dt8DAU9" tabindex="-1" role="presentation"></a><span class="cm-keyword">if</span> (<span class="cm-variable">x</span> <span class="cm-operator">==</span> <span class="cm-string">&quot;value1&quot;</span>) <span class="cm-variable">action1</span>();
<span class="cm-keyword">else</span> <span class="cm-keyword">if</span> (<span class="cm-variable">x</span> <span class="cm-operator">==</span> <span class="cm-string">&quot;value2&quot;</span>) <span class="cm-variable">action2</span>();
<span class="cm-keyword">else</span> <span class="cm-keyword">if</span> (<span class="cm-variable">x</span> <span class="cm-operator">==</span> <span class="cm-string">&quot;value3&quot;</span>) <span class="cm-variable">action3</span>();
<span class="cm-keyword">else</span> <span class="cm-variable">defaultAction</span>();</pre>

<p><a class="p_ident" id="p_RYZHlcmjhI" href="#p_RYZHlcmjhI" tabindex="-1" role="presentation"></a>ساختاری به نام <code>switch</code> وجود دارد که در مواردی شبیه بالا خواناتر و سرراست‌تر است. متاسفانه، سبکی که جاوااسکریپت برای این ساختار استفاده می‌کند ( که از زبان‌های شبیه C/Java گرفته شده است) کمی بدقواره است – زنجیره‌ای از دستورات <code>if</code> ممکن است زیباتر به نظر بیاید. به مثال توجه فرمایید:</p>

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_B7WAWZEgcU" href="#c_B7WAWZEgcU" tabindex="-1" role="presentation"></a><span class="cm-keyword">switch</span> (<span class="cm-variable">prompt</span>(<span class="cm-string">&quot;What is the weather like?&quot;</span>)) {
  <span class="cm-keyword">case</span> <span class="cm-string">&quot;rainy&quot;</span>:
    <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string">&quot;Remember to bring an umbrella.&quot;</span>);
    <span class="cm-keyword">break</span>;
  <span class="cm-keyword">case</span> <span class="cm-string">&quot;sunny&quot;</span>:
    <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string">&quot;Dress lightly.&quot;</span>);
  <span class="cm-keyword">case</span> <span class="cm-string">&quot;cloudy&quot;</span>:
    <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string">&quot;Go outside.&quot;</span>);
    <span class="cm-keyword">break</span>;
  <span class="cm-keyword">default</span>:
    <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string">&quot;Unknown weather type!&quot;</span>);
    <span class="cm-keyword">break</span>;
}</pre>

<p><a class="p_ident" id="p_bJZM6yHw0k" href="#p_bJZM6yHw0k" tabindex="-1" role="presentation"></a>می‌توانید هر تعداد دلخواه برچسب <code>case</code> درون یک بلاک <code>switch</code> قرار دهید. برنامه با توجه به مقداری که به <code>switch</code> داده می‌شود برچسب متناظر را انتخاب کرده و به آن قسمت منتقل می‌شود یا اگر موردی پیدا نشود قسمت <code>default</code> را اجرا می‌کند. پس از انتخاب برچسب، دستورات آن اجرا می‌شوند حتی دستوراتی که زیر برچسب دیگری قرار دارند تا زمانیکه برنامه به دستور <code>break</code> برسد. در بعضی موارد، مانند case مربوط به <code>&quot;sunny&quot;</code> در مثال بالا، این امکان را می‌توان برای به اشتراک‌گذاری کد‌هایی بین case ‌ها استفاده کرد (برنامه، رفتن به بیرون شهر را برای هر دو هوای ابری و آفتابی پیشنهاد می‌دهد). اما حواستان باشد: خیلی ساده امکان دارد <code>break</code> فراموش شود که باعث می‌شود کد‌هایی اجرا شوند که مورد نظر شما نبوده‌اند.</p>

<h2><a class="h_ident" id="h_+zL/tN/VFj" href="#h_+zL/tN/VFj" tabindex="-1" role="presentation"></a>استفاده از حروف بزرگ</h2>

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

<pre class="snippet cm-s-default" data-language="null" ><a class="c_ident" id="c_HtUFwP9TF9" href="#c_HtUFwP9TF9" tabindex="-1" role="presentation"></a>fuzzylittleturtle
fuzzy_little_turtle
FuzzyLittleTurtle
fuzzyLittleTurtle</pre>

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

<p><a class="p_ident" id="p_xGTGKNYCJD" href="#p_xGTGKNYCJD" tabindex="-1" role="presentation"></a>در موارد کمی، مثل تابع <code>Number</code> حرف اول متغیر به صورت بزرگ نوشته شده است. این کار برای نشانه‌گذاری این تابع به عنوان یک تابع سازنده (constructor) است. اینکه یک تابع سازنده چیست در فصل ?](object#constructors) روشن خواهد شد. فعلا نکته مهم این است که این عدم یکپارچگی در این گونه موارد شما را ناراحت نکند.</p>

<h2><a class="h_ident" id="h_VbvUuahfUk" href="#h_VbvUuahfUk" tabindex="-1" role="presentation"></a>توضیحات</h2>

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

<p>یک توضیح، متنی است که بخشی از برنامه محسوب می‌شود اما کامپیوتر آن را نادیده می‌گیرد. جاوااسکریپت دو راه برای نوشتن توضیحات دارد. برای نوشتن توضیحات تک-خطی، می‌توانید از دو کاراکتر اسلش (<code>//</code>) در ابتدای توضیح استفاده کنید.</p>

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_/8e+JeWltg" href="#c_/8e+JeWltg" tabindex="-1" role="presentation"></a><span class="cm-keyword">let</span> <span class="cm-def">accountBalance</span> <span class="cm-operator">=</span> <span class="cm-variable">calculateBalance</span>(<span class="cm-variable">account</span>);
<span class="cm-comment">// It's a green hollow where a river sings</span>
<span class="cm-variable">accountBalance</span>.<span class="cm-property">adjust</span>();
<span class="cm-comment">// Madly catching white tatters in the grass.</span>
<span class="cm-keyword">let</span> <span class="cm-def">report</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Report</span>();
<span class="cm-comment">// Where the sun on the proud mountain rings:</span>
<span class="cm-variable">addToReport</span>(<span class="cm-variable">accountBalance</span>, <span class="cm-variable">report</span>);
<span class="cm-comment">// It's a little valley, foaming like light in a glass.</span></pre>

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

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_mreOdwa/5Y" href="#c_mreOdwa/5Y" tabindex="-1" role="presentation"></a><span class="cm-comment">/*</span>
<span class="cm-comment">  I first found this number scrawled on the back of an old notebook.</span>
<span class="cm-comment">  Since then, it has often dropped by, showing up in phone numbers</span>
<span class="cm-comment">  and the serial numbers of products that I've bought. It obviously</span>
<span class="cm-comment">  likes me, so I've decided to keep it.</span>
<span class="cm-comment">*/</span>
<span class="cm-keyword">const</span> <span class="cm-def">myNumber</span> <span class="cm-operator">=</span> <span class="cm-number">11213</span>;</pre>

<h2><a class="h_ident" id="h_EzvDUHyjs2" href="#h_EzvDUHyjs2" tabindex="-1" role="presentation"></a>خلاصه</h2>

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

<p>قرار دادن دستورات یکی پس از دیگری، برنامه‌ای را می‌سازد که از بالا به پایین به ترتیب اجرا می‌شود. می‌توان این ترتیب جریان کنترل را با استفاده از دستورات شرطی (<code>if،</code> <code>else</code> و <code>switch</code>) و حلقه‌ها (<code>while،</code> <code>do،</code> و <code>for</code>) به هم زد.</p>

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

<p>توابع مقدار‌های ویژه‌ای هستند که بخشی از برنامه را در درون خود نگه داری می‌کنند. می‌توانید آن‌ها را با نوشتن <bdo><code>functionName(argument1, argument2)</code></bdo> فراخوانی کنید. این گونه فراخوانی کردن یک تابع، یک نوع عبارت محسوب می‌شود که می‌تواند مقداری را هم تولید کند.</p>

<h2><a class="h_ident" id="h_ggOFdVwDCk" href="#h_ggOFdVwDCk" tabindex="-1" role="presentation"></a>تمرین‌ها</h2>

<p>اگر مطمئن نیستید که چگونه راه حل‌هایی را که برای تمرین‌ها ارائه می‌دهید آزمایش و اجرا کنید، به <a href="00_intro.html">مقدمه</a> رجوع کنید.</p>

<p><a class="p_ident" id="p_ejmYnxbJ8x" href="#p_ejmYnxbJ8x" tabindex="-1" role="presentation"></a>هر تمرین با یک شرح مساله شروع می‌شود. آن را بخوانید و سعی کنید آن را حل کنید. اگر در حل مساله به مشکل برخورد کردید، به قسمت &quot;راهنمای تمرین‌ها&quot; که در انتهای هر تمرین قرار گرفته است است رجوع کنید. راه حل کامل برای تمرین‌ها در داخل این کتاب گنجانده نشده است، اما می‌توانید آن‌ها را در <a href="https://eloquentjavascript.net/code#2"><em>https://eloquentjavascript.net/code</em></a> بیابید. اگر واقعا می‌خواهید که از تمرین‌ها چیزی بیاموزید، فقط زمانی به سراغ راه حل‌ها بروید که مساله را حل نموده‌اید یا حداقل به اندازه کافی تلاش و زمان صرف حل آن کرده باشید که کمی احساس سردرد داشته باشید.</p>

<h3><a class="i_ident" id="i_sHMwjCOpSc" href="#i_sHMwjCOpSc" tabindex="-1" role="presentation"></a>حلقه و مثلث</h3>

<p>حلقه‌ای را پیاده‌سازی کنید که هفت بار تابع <code>console.log</code> را فراخوانی کرده و مثلث زیر را تولید کند:</p>

<pre class="snippet cm-s-default" data-language="null" ><a class="c_ident" id="c_iAdOqXrnTq" href="#c_iAdOqXrnTq" tabindex="-1" role="presentation"></a>#
##
###
####
#####
######
#######</pre>

<p>دانستن این نکته که طول یک رشته را می‌توان با گذاشتن <bdo><code>.length</code></bdo> در انتهای آن بدست آورد شاید به دردتان بخورد.</p>

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_qHvXAGuPvV" href="#c_qHvXAGuPvV" tabindex="-1" role="presentation"></a><span class="cm-keyword">let</span> <span class="cm-def">abc</span> <span class="cm-operator">=</span> <span class="cm-string">&quot;abc&quot;</span>;
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">abc</span>.<span class="cm-property">length</span>);
<span class="cm-comment">// → 3</span></pre>

<p>بیشتر تمرین‌ها به همراه‌ کدی می‌آیند که می‌توانید برای حل تمرین آن را ویرایش کنید. به یاد داشته باشید که برای ویرایش باید روی بلاک کد کلیک کنید.</p>

<pre class="snippet cm-s-default" data-language="javascript" ><a class="c_ident" id="c_HRKSrZS1tJ" href="#c_HRKSrZS1tJ" tabindex="-1" role="presentation"></a><span class="cm-comment">// Your code here.</span></pre>

<div class="solution"><div class="solution-text">

<p><a class="p_ident" id="p_jGwpEa81Ry" href="#p_jGwpEa81Ry" tabindex="-1" role="presentation"></a>می‌توانید با برنامه‌ای شروع کنید که اعداد 1 تا 7 را چاپ می‌کند، که با کمی دستکاری <a href="02_program_structure.html#loops">کد مثال چاپ اعداد زوج</a> که در این فصل آمد به دست می آید. جایی که حلقه‌ی <code>for</code> را معرفی کردیم.</p>

<p><a class="p_ident" id="p_HFDGhh3PP2" href="#p_HFDGhh3PP2" tabindex="-1" role="presentation"></a>اکنون به شباهت بین اعداد و رشته‌هایی که از کاراکتر <code>#</code> تشکیل شده‌اند توجه کنید. با افزودن 1، می‌شود از عدد 1 به عدد 2 رسید (<bdo><code>+= 1</code></bdo>). همین کار را می‌توان برای ایجاد <code>&quot;##&quot;</code> از<code>&quot;#&quot;</code> انجام داد (<bdo><code>+= &quot;#&quot;</code></bdo>). پس راه حل شباهت زیادی به مثال چاپ اعداد دارد.</p>

</div></div>

<h3><a class="i_ident" id="i_rebKE3gdjV" href="#i_rebKE3gdjV" tabindex="-1" role="presentation"></a>FizzBuzz</h3>

<p><a class="p_ident" id="p_8tGF7ShOTq" href="#p_8tGF7ShOTq" tabindex="-1" role="presentation"></a>برنامه‌ای بنویسید که با استفاده از <code>console.log</code> با دو استثنا تمامی اعداد بین 1 و 100 را چاپ نماید. برای اعدادی که بر 3 بخش پذیرند به جای عدد عبارت <code>&quot;Fizz&quot;</code>، و برای اعدادی که بر 5 بخش پذیرند (نه بر 3)، مقدار <code>&quot;Buzz&quot;</code> را چاپ نماید.</p>

<p><a class="p_ident" id="p_nr89B94h89" href="#p_nr89B94h89" tabindex="-1" role="presentation"></a>وقتی برنامه شما موارد بالا را به درستی انجام داد، آن را تغییر داده تا مقدار <code>&quot;FizzBuzz&quot;</code> را برای اعدادی که بر 3 و 5 به طور همزمان بخش پذیرند چاپ کند (برنامه همچنان باید <code>&quot;Fizz&quot;</code> و <code>&quot;Buzz&quot;</code> را برای اعدادی که به هر یک بخش پذیرند را چاپ کند).</p>

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

<pre class="snippet cm-s-default" data-language="javascript" ><span class="cm-comment">// Your code here.</span></pre>

<div class="solution"><div class="solution-text">

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

<p>در نسخه‌ی اول، سه خروجی برای هر عدد ممکن است، بنابراین باید یک زنجیره‌ی <bdo><code>if</code>/<code>else if</code>/<code>else</code></bdo> ایجاد کنید.</p>

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

</div></div>

<h3><a class="i_ident" id="i_tJuIjl8sGl" href="#i_tJuIjl8sGl" tabindex="-1" role="presentation"></a>صفحه‌ی شطرنج</h3>

<p><a class="p_ident" id="p_6rp3kofaLm" href="#p_6rp3kofaLm" tabindex="-1" role="presentation"></a>برنامه‌ای بنویسید که رشته‌ای را ایجاد می‌کند که نمایانگر یک صفحه‌ی 8×8 است. از کاراکتر خط جدید برای جداسازی خطوط استفاده کنید. در هر مکان از صفحه می‌توان فضای خالی (فاصله) یا کاراکتر &quot;#&quot; استفاده کرد. مجموع کاراکتر‌ها باید شبیه صفحه‌ی شطرنج باشند.</p>

<p>رشته‌ی تولیدی را اگر به تابع <code>console.log</code> بدهید باید چیزی شبیه شکل زیر را تولید کند:</p>

<pre class="snippet cm-s-default" data-language="null" ><a class="c_ident" id="c_7bNzisP4Fe" href="#c_7bNzisP4Fe" tabindex="-1" role="presentation"></a> # # # #
# # # #
 # # # #
# # # #
 # # # #
# # # #
 # # # #
# # # #</pre>

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

<pre class="snippet cm-s-default" data-language="javascript" ><span class="cm-comment">// Your code here.</span></pre>

<div class="solution"><div class="solution-text">

<p>با یک رشته‌ی خالی (<code>&quot;&quot;</code>) می‌توانید ساخت رشته‌ی مورد نظر را شروع کنید و بعد به صورت مداوم کاراکتر‌ها را اضافه نمایید. یک کاراکتر خط جدید به صورت <bdo><code>&quot;\n&quot;</code></bdo> نوشته می‌شود.</p>

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

<p>به دو متغیر برای ردگیری پیشرفت برنامه نیاز خواهید داشت. برای دانستن اینکه در یک موقعیت آیا باید فضای خالی قرار دهید یا کاراکتر <code>#</code>، می‌توانید بررسی کنید که جمع دو شمارنده مقداری زوج باشد (<bdo><code>% 2</code></bdo>).</p>

<p>پایان دادن یک خط با یک کاراکتر خط جدید (<bdo><code>&quot;\n&quot;</code></bdo>) باید بعد از اینکه هر خط ساخته شد اتفاق بیفتند، بنابراین این کار را بعد از حلقه‌ی درونی اما درون حلقه‌ی بیرونی انجام دهید.</p>

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