---
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 测试的原始页面,在那里我们可以找到你需要获得帮助的原始信息。