aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/learn/javascript/first_steps/test_your_skills_colon__variables/index.md
blob: 4141e0551dcf1e0b433ff3b9f2d49d4937ab570a (plain)
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
---
title: '技能测试:变量'
slug: 'Learn/JavaScript/First_steps/Test_your_skills:_variables'
translation_of: 'Learn/JavaScript/First_steps/Test_your_skills:_variables'
tags:
  - 初学者
  - JavaScript
  - 学习
  - 技能测试
  - 变量
---
{{learnsidebar}}

本测试旨在评估读者对 [存储所需信息 - 变量](/zh-CN/docs/Learn/JavaScript/First_steps/Variables) 一文的理解程度。

> **备注:** 可在下文的互动编辑器中尝试完成评估,也可借助 [CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) 等在线编程实用工具完成任务。
>
> 可访问本页最后一节来 [了解更多](#了解更多)。

> **备注:** 以下示例中,如果代码存在错误,将在互动编译器的输出框中显示提示信息来帮助你完成,(如果使用下载版本,则在浏览器的 JavaScript 控制台显示)

## 变量 1

本任务中,我们期望你做到:

- 声明 `myName` 变量。
- 在单独的一行中,用合适的值来初始化 `myName` 变量。(可用你自己的名字,或其他)
- 在一行内,声明 `myAge` 变量并初始化。

尝试更新下方互动编辑器中的代码来实现预期效果:

```html hidden
  <head>
    <meta charset="utf-8" />
    <title>变量:任务1</title>
    <link rel="stylesheet" href="https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/tasks/styles.css" />

  </head>

  <body>
    <section class="preview"></section>
    <textarea class="playable playable-js" style="height: 280px;">
  // 在下方编写代码



  // 不要编写此行以下的代码!

  section.innerHTML = ' ';
  let para1 = document.createElement('p');
  para1.textContent = myName;
  let para2 = document.createElement('p');
  para2.textContent = myAge;
  section.appendChild(para1);
  section.appendChild(para2);
    </textarea>

    <div class="playable-buttons">
      <input id="reset" type="button" value="Reset" />
    </div>
  </body>
  <script class="editable"></script>
  <script src="https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/tasks/playable.js"></script>
```

{{ EmbedLiveSample('变量 1', '100%', 420, '', '', 'hide-codepen-jsfiddle') }}

> **标注:** [下载 任务1 的起始版本](https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/tasks/variables/variables1-download.html),然后使用你自选的编辑器完成任务。


## 变量 2

本任务中我们希望你将代码中 `myName` 当前保存的值修改为你自己的名字。

尝试更新下方互动编辑器中的代码来实现预期效果:

```html hidden
    <head>
    <meta charset="utf-8" />
    <title>变量:任务2</title>
    <link rel="stylesheet" href="https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/tasks/styles.css" />
  </head>

  <body>
    <section class="preview"></section>

    <textarea class="playable playable-js" style="height: 220px;">

// 在下方编写代码

let myName = '韩梅梅';

// 不要编写此行以下的代码!

section.innerHTML = ' ';
let para = document.createElement('p');
para.textContent = myName;
section.appendChild(para);
    </textarea>

    <div class="playable-buttons">
      <input id="reset" type="button" value="Reset" />
    </div>
  </body>
  <script class="editable"></script>
  <script src="https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/tasks/playable.js"></script>
```

{{ EmbedLiveSample('变量 2', '100%', 360, '', '', 'hide-codepen-jsfiddle') }}

> **标注:** [下载 任务2 的起始版本](https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/tasks/variables/variables2-download.html),然后使用你自选的编辑器完成任务。


## 变量 3

现在是最后一个任务——现有代码中存在 2 处错误,请找出并修正,使输出窗口得到正确结果,即:“我是某某,20年后我?岁。”

尝试更新下方互动编辑器中的代码来实现预期效果:

```html hidden
    <head>
    <meta charset="utf-8" />
    <title>变量:任务3</title>
    <link rel="stylesheet" href="https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/tasks/styles.css" />
  </head>

  <body>
    <section class="preview"></section>

    <textarea class="playable playable-js" style="height: 300px;">
// 修改下面的代码

const myName = 'Default';
myName = '李雷';

let myAge = '18';

// 不要编写此行以下的代码!

section.innerHTML = ' ';
let para1 = document.createElement('p');
let para2 = document.createElement('p');
para1.textContent = `我是 ${myName}`;
para2.textContent = `20 年后我 ${myAge + 20} 岁`;
section.appendChild(para1);
section.appendChild(para2);
    </textarea>

    <div class="playable-buttons">
      <input id="reset" type="button" value="Reset" />
    </div>
  </body>
  <script class="editable"></script>
  <script src="https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/tasks/playable.js"></script>
```
{{ EmbedLiveSample('变量 3', '100%', 420, '', '', 'hide-codepen-jsfiddle') }}

> **标注:** [下载 任务3 的起始版本](https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/tasks/variables/variables3-download.html),然后使用你自选的编辑器完成任务。

## 了解更多

可以在互动编辑器中完成上面的练习。

如果你期望对练习结果进行评估,或者遇到困难需要帮助,可以:

1. 可借助 [CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) 等在线编程实用工具完成任务。在那里你可以自行编写代码,也可以使用上文中所给的初始代码。
2. 在 [MDN论坛学习区](https://discourse.mozilla.org/c/mdn/learn/) 寻求他人的评估和帮助。你发表的文章应包括:
    - 一个描述性的标题,比如《请为“变量 1”水平测试进行评估》
    - 讲清你已经做出的努力,以及需要我们做什么,比如你遇到了困难并需要帮助,或者期望得到评估。
    - 一个链接指向你需要得到评估或帮助的实例,步骤1中三个在线编程工具之一均可。我们对希望得到帮助但由不提供代码的求助也很无奈。
    - 一个链接指向 MDN 测试的原始页面,在那里我们可以找到你需要获得帮助的原始信息。