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
|
---
title: JavaScript中的基础数学 — 数字和操作符
slug: Learn/JavaScript/First_steps/Math
translation_of: Learn/JavaScript/First_steps/Math
---
<div>{{LearnSidebar}}</div>
<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</div>
<p class="summary">在本次课程中,我们讨论 JavaScript 中的数学 — 我们如何使用 {{Glossary("Operator","运算符")}} 和其他功能来成功地操作数字以完成我们的请求。</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">前提:</th>
<td>基本的计算机知识,对HTML和CSS初步了解,知道JavaScript是什么。</td>
</tr>
<tr>
<th scope="row">目标:</th>
<td>熟悉 JavaScript 中 Math 的基础知识。</td>
</tr>
</tbody>
</table>
<h2 id="人人都爱数学">人人都爱数学</h2>
<p>好吧,可能不是。有些人喜欢数学,有些人可能从在学校必须学习乘法表和长除法时就讨厌数学,还有人介于两者之间。但我们都不能否认,数学是生活的基本组成部分,我们离不了它。尤其如此,当我们学习编写 JavaScript 程序(或任何其他语言),我们所做的很多事情都依赖于处理数值数据,计算新值等。你将不会惊讶地认识到 JavaScript 有一套可用的全功能的数学功能。</p>
<p>本文仅讨论您现在需要了解的基本部分。</p>
<h3 id="数字类型">数字类型</h3>
<p>在编程中,即使是人人熟知的最普遍的十进制数,也比你想象的要复杂的多。我们使用不同的术语来描述不同类型的十进制数,例如:</p>
<ul>
<li><strong>整数</strong> 就是整数,例如 10, 400, 或者 -5.</li>
<li><strong>浮点数</strong> (浮点) 有小数点或小数位,例如 12.5,和 56.7786543。</li>
<li><strong>双精度</strong>双精度是一种特定类型的浮点数,它们具有比标准浮点数更高的精度(这意味着它们精确到更大的小数位数)。</li>
</ul>
<p>我们甚至有不同类型的数字系统! 十进制是基数10(意味着它在每列使用0-9),但是我们也有这样的东西:</p>
<ul>
<li><strong>二进制</strong> — 计算机的最基础语言—— 0 和 1</li>
<li><strong>八进制</strong> — 基数8,每列使用0-7</li>
<li><strong>十六进制</strong> — 基数16,每列使用0-9,然后使用a-f。 在CSS中设置颜色时,可能会遇到这些数字。</li>
</ul>
<p>在你开始担心你的大脑混乱之前,先停下来吧! 一开始,我们将在本课程中坚持使用十进制数; 你很少会遇到需要开始考虑其他类型的情况,如果有的话。</p>
<p>第二个好消息是,与其他一些编程语言不同,JavaScript只有一个数据类型用来表示数字(包括 integers 和 decimals ),您猜对了,{{jsxref("Number")}}。 这意味着,你在JavaScript中处理的任何类型的数字,都以完全相同的方式处理它们。</p>
<h3 id="这是我们的全部数字">这是我们的全部数字</h3>
<p>让我们快点玩一些数字,以重新定义我们所需要的基本语法。 在您的<a href="/zh-CN/docs/Learn/Discover_browser_developer_tools">开发工具JavaScript控制台</a>中输入下面列出的命令。</p>
<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/">在新窗口中打开</a></strong></p>
<ol>
<li>首先,我们先声明一对变量,并分别用一个整数和一个浮点数来初始化它们,然后再输入变量名来检查是否正确:
<pre class="brush: js notranslate">let myInt = 5;
let myFloat = 6.667;
myInt;
myFloat;</pre>
</li>
<li>数值键入不带引号 —— 在继续之前尝试声明和初始化更多包含数字的变量。</li>
<li>现在我们来看看我们的原始变量是否是相同的数据类型。 在JavaScript中有一个称为{{jsxref("Operators / typeof", "typeof")}} 的运算符。 输入如下所示的两行:
<pre class="brush: js notranslate">typeof myInt;
typeof myFloat;</pre>
在这两种情况下,都应该返回 <code>"number"</code> —— 这使得事情变得更简单,因为若是不同的数字具有不同的数据类型,那么我们还须以不同的方式处理它们。呦!</li>
</ol>
<h2 id="算术运算符">算术运算符</h2>
<p>算术运算符是我们用来做和的基本运算符:</p>
<table class="standard-table" style="height: 321px; width: 852px;">
<thead>
<tr>
<th scope="col">运算符</th>
<th scope="col">名称</th>
<th scope="col">作用</th>
<th scope="col">示例</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>+</code></td>
<td>加法</td>
<td>两个数相加。</td>
<td><code>6 + 9</code></td>
</tr>
<tr>
<td><code>-</code></td>
<td>减法</td>
<td>从左边减去右边的数。</td>
<td><code>20 - 15</code></td>
</tr>
<tr>
<td><code>*</code></td>
<td>乘法</td>
<td>两个数相乘。</td>
<td><code>3 * 7</code></td>
</tr>
<tr>
<td><code>/</code></td>
<td>除法</td>
<td>用右边的数除左边的数</td>
<td><code>10 / 5</code></td>
</tr>
<tr>
<td><code>%</code></td>
<td>求余(有时候也叫取模)</td>
<td>
<p>在你将左边的数分成同右边数字相同的若干整数部分后,返回剩下的余数</p>
</td>
<td><code>8 % 3</code> (返回 2,8除以3的倍数,余下2 。)</td>
</tr>
<tr>
<td><code>**</code></td>
<td>幂</td>
<td>
<p>取底数的指数次方,即指数所指定的底数相乘。它在EcmaScript 2016 中首次引入。</p>
</td>
<td><code>5 ** 5</code> (返回 3125,相当于 <code>5 * 5 * 5 * 5 * 5</code> 。)</td>
</tr>
</tbody>
</table>
<div class="note">
<p><strong>Note</strong>: 你以后有时候会看到参与算术计算的数字被称为 操作数({{Glossary("Operand", "operands")}})。</p>
</div>
<div class="blockIndicator note">
<p>Note: 有时你可能会看到使用较旧的 {{jsxref("Math.pow()")}} 方法表达的指数,该方法的工作方式非常相似。 例如,在 <code>Math.pow(7, 3)</code> 中,<code>7</code> 是基数,<code>3</code> 是指数,因此表达式的结果是 <code>343</code>。 <code>Math.pow(7, 3)</code> 相当于 <code>7 ** 3</code>。</p>
</div>
<p>我们可能不需要教你如何做基础数学,但我们想测试你对所涉及的语法的理解。 尝试将下面的示例输入到<a href="/zh-CN/docs/Learn/Discover_browser_developer_tools">开发者工具JavaScript控制台</a>中。</p>
<ol>
<li>首先尝试输入一些简单的例子,例如
<pre class="brush: js notranslate">10 + 7
9 * 8
60 % 3</pre>
</li>
<li>您还可以尝试声明变量并用数字初始化变量,然后尝试使用这些变量来求和 - 求和中变量的行为与直接用其持有的数来求和完全一样。 例如:
<pre class="brush: js notranslate">let num1 = 10;
let num2 = 50;
9 * num1;
num1 ** 3;
num2 / num1;</pre>
</li>
<li>最后在本节中,尝试输入一些更复杂的表达式,如:
<pre class="brush: js notranslate">5 + 10 * 3;
num2 % 9 * num1;
num2 + num1 / 8 + 2;</pre>
</li>
</ol>
<p>这最后的一组计算中可能没有给出你期望的结果; 下面的部分也许能告诉你为什么。</p>
<h3 id="运算符优先级">运算符优先级</h3>
<p>我们来看看上面的最后一个例子,假设num2的值为50,num1的值为10(如上所述):</p>
<pre class="brush: js notranslate">num2 + num1 / 8 + 2;</pre>
<p>一般人,你会将它看作“50加10等于60”,然后“8加2等于10”,最后“60除以10等于6”。</p>
<p>但浏览器的“10除以8等于1.25”,那么“50加1.25加2等于53.25”。</p>
<p>这是因为<strong>运算符优先级</strong> —— 一些运算符将在计算算式(在编程中称为表达式)的结果时先于其他运算符被执行。 JavaScript中的运算符优先级与学校的数学课程相同 - 乘法和除法总是先完成,然后是加法和减法(总是从左到右进行计算)。</p>
<p>如果想要改变计算优先级,可以把想要优先计算的部分用括号围住。 所以要得到结果为6,我们可以这样做:</p>
<pre class="brush: js notranslate">(num2 + num1) / (8 + 2);</pre>
<p>尝试看看。</p>
<div class="note">
<p><strong>Note</strong>: 注意:可以在<a href="/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators#运算符优先级">表达式和运算符</a>中找到所有JavaScript运算符的完整列表及其优先级。</p>
</div>
<h2 id="自增和自减运算符">自增和自减运算符</h2>
<p>有时候,您需要反复把一个变量加1或减1。 这可以方便地使用增量(<code>++</code>)和递减( <code>--</code> )运算符来完成。 我们在<a href="/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript 初体验</a>文章的“猜数字”游戏中使用了++,当我们添加1到我们的guessCount变量来跟踪用户在每次转动之后剩下的猜测时。</p>
<pre class="brush: js notranslate">guessCount++;</pre>
<div class="note">
<p><strong>Note</strong>: 它们最常用于 <a href="/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration">循环</a> 中,您将在以后的课程中了解。 例如,假设您想循环查看价格表,并为每个价格增加销售税。 您可以使用循环依次查看每个值,并在每种情况下进行必要的计算,以添加销售税。 当需要时,增量器用于移动到下一个值。 我们实际上提供了一个简单的例子,显示了如何完成 —— <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/loop.html">在线查看效果</a>,并 <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/maths/loop.html">查看源代码</a>,看看是否可以发现增量器! 我们稍后将会详细介绍循环。</p>
</div>
<p>我们来试试看你们的控制台。 首先,请注意,您不能将这些直接应用于一个数字,这可能看起来很奇怪,但是我们为变量赋值一个新的更新值,而不是对该值进行操作。 以下将返回错误:</p>
<pre class="brush: js notranslate">3++;</pre>
<p>所以,你只能增加一个现有的变量。 尝试这个:</p>
<pre class="brush: js notranslate">let num1 = 4;
num1++;</pre>
<p>好的,第二个奇怪的东西! 执行此操作时,您会看到返回值为4,这是因为浏览器返回当前值,然后增加变量。 如果您再次返回变量值,则可以看到它已经递增:</p>
<pre class="brush: js notranslate">num1;</pre>
<p>递减 <code>--</code> 同样如此,尝试以下操作:</p>
<pre class="brush: js notranslate">let num2 = 6;
num2--;
num2;</pre>
<div class="note">
<p><strong>Note</strong>: 您可以使浏览器以其他方式进行操作 - 递增/递减变量,然后返回值 - 将操作符放在变量的开头,而不是结束。 再次尝试上面的例子,但这次使用 <code>++num1</code> 和 <code>--num2</code>。</p>
</div>
<h2 id="赋值运算符">赋值运算符</h2>
<p>赋值运算符是向变量分配值的运算符。 我们已经使用了最基本的一个很多次了:<code>=</code>, 它只是将右边的值赋给左边的变量 ,即:</p>
<pre class="brush: js notranslate">let x = 3; // x 的值是 3
let y = 4; // y 的值是 4
x = y; // x 和 y 有相同的值, 4</pre>
<p>但是还有一些更复杂的类型,它们提供了有用的快捷方式,可以使您的代码更加清洁和高效。 最常见的如下:</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">运算符</th>
<th scope="col">名称</th>
<th scope="col">作用</th>
<th scope="col">示例</th>
<th scope="col">等价于</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>+=</code></td>
<td>加法赋值</td>
<td>右边的数值加上左边的变量,然后再返回新的变量。</td>
<td><code>x = 3;<br>
x += 4;</code></td>
<td><code>x = 3;<br>
x = x + 4;</code></td>
</tr>
<tr>
<td><code>-=</code></td>
<td>减法赋值</td>
<td>左边的变量减去右边的数值,然后再返回新的变量。</td>
<td><code>x = 6;<br>
x -= 3;</code></td>
<td><code>x = 6;<br>
x = x - 3;</code></td>
</tr>
<tr>
<td><code>*=</code></td>
<td>乘法赋值</td>
<td>左边的变量乘以右边的数值,然后再返回新的变量。</td>
<td><code>x = 2;<br>
x *= 3;</code></td>
<td><code>x = 2;<br>
x = x * 3;</code></td>
</tr>
<tr>
<td><code>/=</code></td>
<td>除法赋值</td>
<td>左边的变量除以右边的数值,然后再返回新的变量。</td>
<td><code>x = 10;<br>
x /= 5;</code></td>
<td><code>x = 10;<br>
x = x / 5;</code></td>
</tr>
</tbody>
</table>
<p>尝试在你的控制台中输入上面的一些示例,以了解它们的工作原理。 在每种情况下,你是否可以猜出在输入第二行之前的值。</p>
<p>请注意,您可以愉快地使用每个表达式右侧的其他变量,例如:</p>
<pre class="brush: js notranslate">let x = 3; // x 包含值 3
let y = 4; // y 包含值 4
x *= y; // x 现在包含值 12</pre>
<div class="note">
<p><strong>Note</strong>: 虽然有很多可用的<a href="/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">赋值运算符</a>, 但是这些是你现在应该学习的基本的一类。</p>
</div>
<h2 id="主动学习:调整画布框的大小">主动学习:调整画布框的大小</h2>
<p>在这个练习中,我们将让你填写一些数字和操作符来操纵一个框的大小。 该框使用称为{{domxref("Canvas API", "", "", "true")}}的浏览器API绘制。 没有必要担心这是如何工作的 - 现在只关注数学。 盒子的宽度和高度(以像素为单位)由变量 <code>x</code> 和 <code>y</code> 定义,变量 <code>x</code> 和 <code>y</code> 最初都被赋值为50。</p>
<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 620)}}</p>
<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html">新窗口打开</a></strong></p>
<p>在上面的可编辑代码框中,有两行标有清晰的注释,我们希望你更新以使框增长/缩小到某些大小,在每种情况下使用某些操作符和/或值。 我们希望你回答以下问题:</p>
<ul>
<li>更改计算x的行,使框仍然是50px宽,并且使用数字43和7以及算术运算符计算50。</li>
<li>更改计算y的行,使框为高75像素,使用数字25和3计算75,以及算术运算符。</li>
<li>更改计算x的行,使框为250px宽,250是使用两个数字和余数(模)运算符计算的。</li>
<li>更改计算y的行,使框为150px高,150是使用三个数字计算的,以及减法和除数运算符。</li>
<li>更改计算x的行,因此该框为200px宽,并且使用数字4和赋值运算符计算200。</li>
<li>更改计算y的行,使框为200px高,使用数字50和3,乘法运算符和加法运算符计算200。</li>
</ul>
<p>如果你完全混淆了代码,别担心。 您可以随时按“重置”按钮,使事情恢复正常。 在您正确回答了上述所有问题后,可以自由地使用代码或创建自己的挑战。</p>
<h2 id="比较运算符">比较运算符</h2>
<p>有时,我们将要运行真/假测试,然后根据该测试的结果进行相应的操作 - 为此,我们使用比较运算符。</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">运算符</th>
<th scope="col">名称</th>
<th scope="col">作用</th>
<th scope="col">示例</th>
</tr>
<tr>
<td><code>===</code></td>
<td>严格等于</td>
<td>测试左右值是否相同</td>
<td><code>5 === 2 + 4</code></td>
</tr>
<tr>
<td><code>!==</code></td>
<td>严格不等于</td>
<td>测试左右值是否<strong>不</strong>相同</td>
<td><code>5 !== 2 + 3</code></td>
</tr>
<tr>
<td><code><</code></td>
<td>小于</td>
<td>测试左值是否小于右值。</td>
<td><code>10 < 6</code></td>
</tr>
<tr>
<td><code>></code></td>
<td>大于</td>
<td>测试左值是否大于右值</td>
<td><code>10 > 20</code></td>
</tr>
<tr>
<td><=</td>
<td>小于或等于</td>
<td>测试左值是否小于或等于右值。</td>
<td><code>3 <= 2</code></td>
</tr>
<tr>
<td>>=</td>
<td>大于或等于</td>
<td>测试左值是否大于或等于正确值。</td>
<td><code>5 >= 4</code></td>
</tr>
</thead>
</table>
<div class="note">
<p><strong>Note</strong>: 您可能会看到有些人在他们的代码中使用<code>==</code>和<code>!=</code>来判断相等和不相等,这些都是JavaScript中的有效运算符,但它们与<code>===</code>/<code>!==</code>不同,前者测试值是否相同, 但是数据类型可能不同,而后者的严格版本测试值和数据类型是否相同。 严格的版本往往导致更少的错误,所以我们建议您使用这些严格的版本。</p>
</div>
<p>如果您尝试在控制台中输入这些值,您将看到它们都返回 <code>true</code>/<code>false</code> 值 - 我们在上一篇文章中提到的那些布尔值。 这些是非常有用的,因为它们允许我们在我们的代码中做出决定 - 每次我们想要选择某种类型时,都会使用这些代码,例如:</p>
<ul>
<li>根据功能是打开还是关闭,在按钮上显示正确的文本标签。</li>
<li>如果游戏结束,则显示游戏消息,或者如果游戏已经获胜,则显示胜利消息。</li>
<li>显示正确的季节性问候,取决于假期季节。</li>
<li>根据选择的缩放级别缩小或放大地图。</li>
</ul>
<p>当我们在以后的的文章中查看条件语句时,我们将介绍如何编写这样的逻辑。 现在,我们来看一个简单的例子:</p>
<pre class="brush: html notranslate"><button>Start machine</button>
<p>The machine is stopped.</p>
</pre>
<pre class="brush: js notranslate">const btn = document.querySelector('button');
const txt = document.querySelector('p');
btn.addEventListener('click', updateBtn);
function updateBtn() {
if (btn.textContent === 'Start machine') {
btn.textContent = 'Stop machine';
txt.textContent = 'The machine has started!';
} else {
btn.textContent = 'Start machine';
txt.textContent = 'The machine is stopped.';
}
}</pre>
<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}</p>
<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html">新窗口打开</a></strong></p>
<p>您可以在updateBtn()函数内看到正在使用的等号运算符。 在这种情况下,我们不会测试两个数学表达式是否具有相同的值 - 我们正在测试一个按钮的文本内容是否包含某个字符串 - 但它仍然是工作原理。 如果按钮当前为“启动机器(start machine)”,则将其标签更改为“停止机器(stop machine)”,并根据需要更新标签。 如果按钮上写着“停机”时被按下,我们将显示回原来的内容。</p>
<div class="note">
<p><strong>Note</strong>: 这种在两个状态之间来回交换的行为通常被称为<strong> </strong><strong>切换 (toggle)</strong>。它在一个状态和另一个状态之间切换 - 点亮,熄灭等</p>
</div>
<h2 id="总结">总结</h2>
<p>在本文中,我们已经介绍了现在需要了解JavaScript中数字的基本信息。 你会发现,在你学习JavaScript过程中,num类型的数据一直都在被使用,所以熟练的掌握它是一个不错的选择。 如果你是那些不喜欢数学的人之一,你应该庆幸这一章内容很简短。</p>
<p>在下一篇文章中,我们将探讨文本,以及JavaScript如何让我们操纵它。</p>
<div class="note">
<p><strong>Note</strong>: 如果您喜欢数学,并希望阅读更多关于它如何在JavaScript中实现的, 那么你可以在 MDN's main JavaScript 部分读到更多关于它的内容。对于学习<a href="/zh-CN/docs/Web/JavaScript/Guide/Numbers_and_dates">数字与日期</a> 和 <a href="/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators#运算符优先级">表达式与运算符</a> 来说,那是一个不错的地方。</p>
</div>
<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</p>
<h2 id="在这个模块">在这个模块</h2>
<ul>
<li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript">什么是 JavaScript?</a></li>
<li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript 初体验</a></li>
<li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/What_went_wrong">哪里出错了</a><a href="/zh-CN/docs/Learn/JavaScript/First_steps/What_went_wrong">? JavaScript 故障排除</a></li>
<li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Variables">存储你需要的信息——变量</a></li>
<li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Math">JavaScript 中的基本运算——数值和运算符</a></li>
<li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Strings">文字处理——JavaScript 字符串</a></li>
<li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Useful_string_methods">实用的strings方法</a></li>
<li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
<li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
</ul>
|