initial commit

11 files changed, 4047 insertions, 0 deletions

diff --git a/files/zh-cn/learn/javascript/first_steps/a_first_splash/index.html b/files/zh-cn/learn/javascript/first_steps/a_first_splash/index.html
new file mode 100644
index 0000000000..d54ec0c4ed
--- /dev/null
+++ b/files/zh-cn/learn/javascript/first_steps/a_first_splash/index.html
@@ -0,0 +1,744 @@
+---
+title: JavaScript 初体验
+slug: Learn/JavaScript/First_steps/A_first_splash
+tags:
+  - JavaScript
+  - 事件
+  - 函数
+  - 初学者
+  - 变量
+  - 学习
+  - 操作符
+  - 教程
+  - 添加
+translation_of: Learn/JavaScript/First_steps/A_first_splash
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">现在，你已经学到了一些 JavaScript 的理论知识，以及用 JavaScript 能够做些什么。下面我们会提供一个讲解 Javascript 基本特性的 Crash Course，课程是一个全面的实践性项目——循序渐进地构建一个简易版“猜数字”游戏。</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的初体验，初步了解编写JavaScript时会涉及哪些内容。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>我们并不要求你立刻完整理解所有代码，当前只是概括地介绍一些抽象的概念，并且让你对JavaScript（以及其他编程语言）工作原理有一定的认知。所有具体特性将在后续文章中详细介绍。</p>
+
+<div class="note">
+<p>注: 可以看到，JavaScript 中许多代码特性和其他编程语言是一致的（ 函数、循环，等等）。尽管代码语法不尽相同，但概念基本类似。</p>
+</div>
+
+<h2 id="像程序员一样思考">像程序员一样思考</h2>
+
+<p><span lang="zh-CN">学习编程，语法本身并不</span><span lang="zh-CN">难，真正困难的是如何应用它来解决现实世界的问题。 你要开始像程序员那样思考。一般来讲，这种思考包括了解你程序运行的目的，为达到该目的应选定的代码类型，以及如何使这些代码协同运行。</span></p>
+
+<p><span id="result_box" lang="zh-CN">为达成这一点，我们需要努力编程，获取语法经验，注重实践，再加一点创造力，几项缺一不可。代码写的越多，就会完成的越优秀。虽然我们不能保证你在5分钟内拥有“程序员大脑”，但是整个课程中你将得到大量机会来训练程序员思维。</span></p>
+
+<p><span id="result_box" lang="zh-CN">请牢记这一点，然后开始观察本文的示例，体会一下将其分解为可操作任务的大体过程。</span></p>
+
+<h2 id="示例——猜数字游戏">示例——猜数字游戏</h2>
+
+<p>本文将向你演示如何构建下面的小游戏：</p>
+
+<div class="hidden">
+<h6 id="Top_hidden_code">Top hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;猜数字游戏&lt;/title&gt;
+    &lt;style&gt;
+        html {
+            font-family: sans-serif;
+        }
+
+        body {
+            width: 50%;
+            max-width: 800px;
+            min-width: 480px;
+            margin: 0 auto;
+        }
+
+        .lastResult {
+            color: white;
+            padding: 3px;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+    &lt;h1&gt;猜数字游戏&lt;/h1&gt;
+    &lt;p&gt;我刚才随机选定了一个100以内的自然数。看你能否在 10 次以内猜中它。每次我都会告诉你所猜的结果是高了还是低了。&lt;/p&gt;
+    &lt;div class="form"&gt; &lt;label for="guessField"&gt;请猜数: &lt;/label&gt;&lt;input type="text" id="guessField" class="guessField"&gt; &lt;input type="submit" value="确定" class="guessSubmit"&gt; &lt;/div&gt;
+    &lt;div class="resultParas"&gt;
+        &lt;p class="guesses"&gt;&lt;/p&gt;
+        &lt;p class="lastResult"&gt;&lt;/p&gt;
+        &lt;p class="lowOrHi"&gt;&lt;/p&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;script&gt;
+    // 在此放置你的 JavaScript 代码
+    let randomNumber = Math.floor(Math.random() * 100) + 1;
+    const guesses = document.querySelector('.guesses');
+    const lastResult = document.querySelector('.lastResult');
+    const lowOrHi = document.querySelector('.lowOrHi');
+    const guessSubmit = document.querySelector('.guessSubmit');
+    const guessField = document.querySelector('.guessField');
+    let guessCount = 1;
+    let resetButton;
+
+    function checkGuess() {
+      let userGuess = Number(guessField.value);
+      if (guessCount === 1) {
+        guesses.textContent = '上次猜的数: ';
+      }
+
+      guesses.textContent += userGuess + ' ';
+
+      if (userGuess === randomNumber) {
+        lastResult.textContent = '恭喜你！猜对了！';
+        lastResult.style.backgroundColor = 'green';
+        lowOrHi.textContent = '';
+        setGameOver();
+      } else if (guessCount === 10) {
+        lastResult.textContent = '!!!GAME OVER!!!';
+        lowOrHi.textContent = '';
+        setGameOver();
+      } else {
+        lastResult.textContent = '你猜错了！';
+        lastResult.style.backgroundColor = 'red';
+        if(userGuess &lt; randomNumber) {
+          lowOrHi.textContent='刚才你猜低了！' ;
+        } else if(userGuess &gt; randomNumber) {
+          lowOrHi.textContent = '刚才你猜高了！';
+        }
+      }
+
+      guessCount++;
+      guessField.value = '';
+    }
+
+    guessSubmit.addEventListener('click', checkGuess);
+
+    function setGameOver() {
+      guessField.disabled = true;
+      guessSubmit.disabled = true;
+      resetButton = document.createElement('button');
+      resetButton.textContent = '开始新游戏';
+      document.body.appendChild(resetButton);
+      resetButton.addEventListener('click', resetGame);
+    }
+
+    function resetGame() {
+      guessCount = 1;
+      const resetParas = document.querySelectorAll('.resultParas p');
+      for(var i = 0 ; i &lt; resetParas.length ; i++) {
+        resetParas[i].textContent='';
+      }
+
+      resetButton.parentNode.removeChild(resetButton);
+      guessField.disabled = false;
+      guessSubmit.disabled = false;
+      guessField.value='';
+      guessField.focus();
+      lastResult.style.backgroundColor='white';
+      randomNumber=Math.floor(Math.random() * 100) + 1;
+    }
+&lt;/script&gt;
+
+&lt;/html&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>先玩上几盘，在继续之前先熟悉一下这个游戏。</p>
+
+<p><span class="short_text" id="result_box" lang="zh-CN"><span>假设你的老板给你布置了以下游戏设计任务要求：</span></span></p>
+
+<blockquote>
+<p>我想让你开发一个猜数字游戏。游戏应随机选择一个 100 以内的自然数, 然后邀请玩家在 10 轮以内猜出这个数字。每轮后都应告知玩家的答案正确与否，如果出错了，则告诉他数字是低了还是高了。并且应显示出玩家前一轮所猜的数字。一旦玩家猜对，或者用尽所有机会，游戏将结束。游戏结束后，可以让玩家选择再次开始。</p>
+</blockquote>
+
+<p><span id="result_box" lang="zh-CN"><span title="Upon looking at this brief, the first thing we can do is to start breaking it down into simple actionable tasks, in as much of a programmer mindset as possible:
+
+    ">看到这个要求，首先我们要做的是将其分解成简单的可操作的任务，尽可能从程序员的思维去思考：</span></span></p>
+
+<ol>
+ <li>随机<span id="result_box" lang="zh-CN"><span title="Generate a random number between 1 and 100.
+    ">生成一个 100 以内的自然数。</span></span></li>
+ <li><span id="result_box" lang="zh-CN"><span title="Record the turn number the player is on.">记录玩家当前的轮数。</span><span title="Start it on 1.
+    ">从 1 开始。</span></span></li>
+ <li><span id="result_box" lang="zh-CN"><span title="Provide the player with a way to guess what the number is.
+    ">为玩家提供一种猜测数字的方法。</span></span></li>
+ <li><span id="result_box" lang="zh-CN"><span title="Once a guess has been submitted first record it somewhere so the user can see their previous guesses.
+    ">一旦有结果提交，先将其记录下来，以便用户可以看到他们先前的猜测。</span></span></li>
+ <li><span id="result_box" lang="zh-CN"><span title="Next, check whether it is the correct number.
+    ">然后检查它是否正确。</span></span></li>
+ <li><span id="result_box" lang="zh-CN"><span title="If it is correct:
+        ">如果正确：</span></span>
+  <ol>
+   <li><span id="result_box" lang="zh-CN"><span title="Display congratulations message.
+        ">显示祝贺消息。</span></span></li>
+   <li><span id="result_box" lang="zh-CN"><span title="Stop the player from being able to enter more guesses (this would mess the game up).
+        ">阻止玩家继续猜测（这会使游戏混乱）。</span></span></li>
+   <li><span id="result_box" lang="zh-CN"><span title="Display control allowing the player to restart the game.
+    ">显示控件允许玩家重新开始游戏。</span></span></li>
+  </ol>
+ </li>
+ <li><span id="result_box" lang="zh-CN"><span title="If it is wrong and the player has turns left:
+        ">如果出错，并且玩家有剩余轮次：</span></span>
+  <ol>
+   <li><span id="result_box" lang="zh-CN"><span title="Tell the player they are wrong.
+        ">告诉玩家他们错了。</span></span></li>
+   <li><span id="result_box" lang="zh-CN"><span title="Allow them to enter another guess.
+        ">允许他们输入另一个猜测。</span></span></li>
+   <li><span id="result_box" lang="zh-CN"><span title="Increment the turn number by 1.
+    ">轮数加 1。</span></span></li>
+  </ol>
+ </li>
+ <li><span id="result_box" lang="zh-CN"><span title="If it is wrong and the player has no turns left:
+        ">如果出错，并且玩家没有剩余轮次：</span></span>
+  <ol>
+   <li><span id="result_box" lang="zh-CN"><span title="Tell the player it is game over.
+        ">告诉玩家游戏结束。</span></span></li>
+   <li><span id="result_box" lang="zh-CN"><span title="Stop the player from being able to enter more guesses (this would mess the game up).
+        ">阻止玩家继续猜测（这会使游戏混乱）。</span></span></li>
+   <li><span id="result_box" lang="zh-CN"><span title="Display control allowing the player to restart the game.
+    ">显示控件允许玩家重新开始游戏。</span></span></li>
+  </ol>
+ </li>
+ <li><span id="result_box" lang="zh-CN"><span title="Once the game restarts, make sure the game logic and UI are completely reset, then go back to step 1.
+
+">一旦游戏重启，确保游戏的逻辑和UI完全重置，然后返回步骤1。</span></span></li>
+</ol>
+
+<p><span id="result_box" lang="zh-CN"><span title="Let's now move forward, looking at how we can turn these steps into code, building up the example, and exploring JavaScript features as we go.">让我们继续，看看我们如何将这些步骤转换为代码，构建这个示例，从而探索 JavaScript 的功能。</span></span></p>
+
+<h3 id="初始设置">初始设置</h3>
+
+<p><span class="short_text" id="result_box" lang="zh-CN">本教程开始前，请将</span> <a class="external external-icon" href="https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">number-guessing-game-start.html</a> 文件保存下来。同时<span id="result_box" lang="zh-CN">在文本编辑器和Web浏览器中将其打开，可以看到一个简单的标题，一段游戏说明，和一个用于输入猜测的表单，此时表单不会执行任何操作。</span></p>
+
+<p><span class="short_text" id="result_box" lang="zh-CN">我们将在 HTML 底部的</span><span class="short_text" lang="zh-CN"> </span> {{htmlelement("script")}} <span class="short_text" lang="zh-CN"> 元素中添加新的代码：</span></p>
+
+<pre class="brush: html">&lt;script&gt;
+
+   <span class="pl-s1"><span class="pl-c"><span class="pl-c">//</span> 开始编写 JavaScript 代码</span></span>
+
+&lt;/script&gt;
+</pre>
+
+<h3 id="添加变量以保存数据">添加变量以保存数据</h3>
+
+<p><span class="short_text" id="result_box" lang="zh-CN">让我们开始吧。首先，在 </span> {{htmlelement("script")}} <span class="short_text" lang="zh-CN"> 元素中添加以下代码：</span></p>
+
+<pre class="brush: js">let randomNumber = Math.floor(Math.random() * 100) + 1;
+
+const guesses = document.querySelector('.guesses');
+const lastResult = document.querySelector('.lastResult');
+const lowOrHi = document.querySelector('.lowOrHi');
+
+const guessSubmit = document.querySelector('.guessSubmit');
+const guessField = document.querySelector('.guessField');
+
+let guessCount = 1;
+let resetButton;</pre>
+
+<p><span id="result_box" lang="zh-CN">这段代码设置了存储数据的变量和常量以供程序使用。变量本质上是值（例如数字或字符串）</span><span lang="zh-CN">的容器。 你可以使用关键字 <code>let</code> （旧代码中使用 <code>var</code>）和一个名字来创建变量（请参阅 <a href="/zh-CN/docs/Learn/JavaScript/First_steps/Variables#var_与_let_的区别">let 和 var 之间的区别</a>）。常量用于存储不希望更改的数据，用关键字 <code>const</code> 创建，本例中用常量来保存对界面元素的引用。界面元素的文字可能会改变，但引用是不变的。</span></p>
+
+<p><span lang="zh-CN">可以使用等号（=）和一个值来为变量赋值。</span></p>
+
+<p><span id="result_box" lang="zh-CN">在我们的示例中：</span></p>
+
+<ul>
+ <li><span lang="zh-CN">我们用数学算法得出一个 1 到 100 之间的随机数，并赋值给第一个变量（<code>randomNumber</code>）。</span></li>
+ <li><span lang="zh-CN">接下来的三个常量均存储着一个引用，分别指向HTML结果段落中某个元素，用于在代码后面段落中插入值：</span> </li>
+ <li>
+  <pre class="brush: html" dir="rtl">&lt;p class="guesses"&gt;&lt;/p&gt;
+&lt;p class="lastResult"&gt;&lt;/p&gt;
+&lt;p class="lowOrHi"&gt;&lt;/p&gt;</pre>
+ </li>
+ <li><span class="short_text" id="result_box" lang="zh-CN">接下来的两个常量存储对表单文本输入和提交按钮的引用，并用于控制以后提交猜测：</span>
+  <pre class="brush: html">&lt;label for="guessField"&gt;请猜数：&lt;/label&gt;
+&lt;input type="text" id="guessField" class="guessField"&gt;
+&lt;input type="submit" value="确定" class="guessSubmit"&gt;</pre>
+ </li>
+ <li><span class="short_text" id="result_box" lang="zh-CN">倒数第二个变量存储一个计数器并初始化为 1（用于跟踪玩家猜测的次数），最后一个变量存储对</span><span class="short_text" lang="zh-CN">重置按钮的引用，这个按钮</span><span class="short_text" id="result_box" lang="zh-CN">尚不存在</span><span class="short_text" lang="zh-CN">（但稍后就有了）。</span></li>
+</ul>
+
+<div class="note">
+<p><strong>注</strong>: <span class="short_text" id="result_box" lang="zh-CN">稍后将讲解更多关于变量/常量的信息。<a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/variables">参见下节</a>。</span></p>
+</div>
+
+<h3 id="函数（Function）">函数（Function）</h3>
+
+<p><span class="short_text" id="result_box" lang="zh-CN">下面，在之前的代码中添加以下内容：</span></p>
+
+<pre class="brush: js">function checkGuess() {
+  alert('我是一个占位符');
+}</pre>
+
+<div id="gt-src-tools">
+<div id="tts_button"><span id="result_box" lang="zh-CN">函数是可复用的代码块，可以一次</span><span lang="zh-CN">编写，反复运行，从而节省了大量的重复代码。它们真的很有用。定义函数的方法很多，但现在我们先集中考虑当前这个简单的方式。 这里我们使用关键字 <code>function</code> 、</span>一个函数名、一对小括号<span lang="zh-CN">定义了一个函数。 随后是一对花括号（<code>{}</code>）。花括号内部是调用函数时要运行的所有代码。</span></div>
+</div>
+
+<div class="g-unit" id="gt-res-c">
+<div id="gt-res-p">
+<div id="gt-res-data">
+<div id="gt-res-wrap">
+<div id="gt-res-content">
+<div dir="ltr"><br>
+要运行一个函数代码时，可以输入函数名加一对小括号。</div>
+
+<div dir="ltr"></div>
+
+<div dir="ltr"><span lang="zh-CN">让我们尝试一下。保存你的代码并刷新浏览器页面 。然后进入</span><br>
+<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/What_are_browser_developer_tools">开发者工具 JavaScript 控制台</a>，并输入<span class="short_text" id="result_box" lang="zh-CN">以下代码：</span></div>
+
+<div dir="ltr"></div>
+</div>
+</div>
+</div>
+</div>
+</div>
+
+<pre class="brush: js">checkGuess();</pre>
+
+<p>在按下 <kbd>Return</kbd>/<kbd>Enter</kbd> 之后，你应该会看到一个告警窗口，显示 "<code><font face="monospace">我是一个占位符</font></code>"；<span lang="zh-CN">我们在代码中定义了一个函数，当我们调用它时，函数创建了一个</span><span id="result_box" lang="zh-CN">告警窗口</span><span lang="zh-CN">。</span></p>
+
+<div class="note">
+<p><strong>注</strong>: <a href="/zh-CN/docs/learn/JavaScript/Building_blocks/Functions">后续课程 </a>将讲解更多有关函数的知识。</p>
+</div>
+
+<h3 id="运算符（Operator）">运算符（Operator）</h3>
+
+<p><span class="short_text" id="result_box" lang="zh-CN">JavaScript 运算符允许我们执行比较，做数学运算，连接字符串，以及其他类似的事情。</span></p>
+
+<p>请保存代码以免丢失，然后刷新浏览器页面，打开 <a href="https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/What_are_browser_developer_tools">开发者工具 JavaScript 控制台</a>。然后我们就可以尝试下文中的示例了：把下表中“示例”一列中的每一项都原封不动输入进来<span lang="zh-CN">，每次输入完毕后都按下 </span> <kbd>Return</kbd>/<kbd>Enter</kbd> <span lang="zh-CN">，可以看到返回的结果。如果你</span>无法访问浏览器开发者工具<span lang="zh-CN">，你随时都</span>可以使用下面的简易版内置控制台。</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * { box-sizing: border-box; }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+      inputDiv.focus();
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p><span class="short_text" id="result_box" lang="zh-CN">首先让我们来看看算术运算符，例如：</span></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">运算符</th>
+   <th scope="col">名称</th>
+   <th scope="col">示例</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+</code></td>
+   <td>加</td>
+   <td><code>6 + 9</code></td>
+  </tr>
+  <tr>
+   <td><code>-</code></td>
+   <td>减</td>
+   <td><code>20 - 15</code></td>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>乘</td>
+   <td><code>3 * 7</code></td>
+  </tr>
+  <tr>
+   <td><code>/</code></td>
+   <td>除</td>
+   <td><code>10 / 5</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="short_text" id="result_box" lang="zh-CN">您也可以使用 </span><span class="short_text" lang="zh-CN"><code>+</code> 运算符将文本字符串连接在一起（术语“串联”（</span><em>concatenation</em><span class="short_text" lang="zh-CN">））。 尝试依次输入以下行：</span></p>
+
+<pre class="brush: js">let name = 'Bingo';
+name;
+let hello = ' says hello!';
+hello;
+let greeting = name + hello;
+greeting;</pre>
+
+<p><span id="result_box" lang="zh-CN">还有一些快捷操作符可用，称为 <a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">复合赋值操作符</a>。 例如，如果你只希望在现有字符串末尾添加一个新串，可以这样做：</span></p>
+
+<pre class="brush: js">name += ' says hello!';</pre>
+
+<p><span class="short_text" id="result_box" lang="zh-CN">这等价于：</span></p>
+
+<pre class="brush: js">name = name + ' says hello!';</pre>
+
+<p><span class="short_text" id="result_box" lang="zh-CN">在执行真/假比较时（例如在条件语句中，见 </span>{{anch("Conditionals", "下表")}}<span class="short_text" lang="zh-CN">），我们使用 <a href="zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">比较运算符</a>，例如：</span></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">运算符</th>
+   <th scope="col">名称</th>
+   <th scope="col">示例</th>
+  </tr>
+  <tr>
+   <td><code>===</code></td>
+   <td>严格等于（它们是否完全一样？）</td>
+   <td><code>5 === 2 + 4</code></td>
+  </tr>
+  <tr>
+   <td><code>!==</code></td>
+   <td>不等于（它们究竟哪里不一样？）</td>
+   <td><code>'Chris' !== 'Ch' + 'ris'</code></td>
+  </tr>
+  <tr>
+   <td><code>&lt;</code></td>
+   <td>小于</td>
+   <td><code>10 &lt; 6</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;</code></td>
+   <td>大于</td>
+   <td><code>10 &gt; 20</code></td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="条件语句（Conditional）">条件语句（Conditional）</h3>
+
+<p><span id="result_box" lang="zh-CN">回到我们的 <code>checkGuess()</code> 函数，我们希望它不仅能够给出一个占位符消息，同时还能检查玩家是否猜对，并做出适当的反应。我想这并不难吧。</span></p>
+
+<p><span class="short_text" id="result_box" lang="zh-CN">现在，将当前的 <code>checkGuess()</code> 函数替换为此版本：</span></p>
+
+<pre class="brush: js">function checkGuess() {
+  let userGuess = Number(guessField.value);
+  if (guessCount === 1) {
+    guesses.textContent = '上次猜的数：';
+  }
+  guesses.textContent += userGuess + ' ';
+
+  if (userGuess === randomNumber) {
+    lastResult.textContent = '恭喜你！猜对了';
+    lastResult.style.backgroundColor = 'green';
+    lowOrHi.textContent = '';
+    setGameOver();
+  } else if (guessCount === 10) {
+    lastResult.textContent = '!!!GAME OVER!!!';
+    setGameOver();
+  } else {
+    lastResult.textContent = '你猜错了！';
+    lastResult.style.backgroundColor = 'red';
+    if(userGuess &lt; randomNumber) {
+      lowOrHi.textContent = '你猜低了！';
+    } else if(userGuess &gt; randomNumber) {
+      lowOrHi.textContent = '你猜高了';
+    }
+  }
+
+  guessCount++;
+  guessField.value = '';
+  guessField.focus();
+}</pre>
+
+<p>唷——好多的<span class="short_text" lang="zh-CN">代码！让我们来逐段探究。</span></p>
+
+<ul>
+ <li><span id="result_box" lang="zh-CN">第一行（行标 2）声明了一个名为 <code>userGuess</code> 的变量，并将其设置为在文本字段中输入的值。 我们还对这个值应用了内置的 <code>Number()</code> 方法，只是为了确保该值是一个数字。</span></li>
+ <li><span id="result_box" lang="zh-CN">接下来，我们遇到我们的第一个条件代码块（3 - 5 行）。 条件代码块让你能够根据某个条件的真假来选择性地运行代码。 虽然看起来有点像一个函数，但它不是。 条件块的最简单形式是从关键字 <code>if</code> 开始，然后是一些括号，然后是一些花括号。 括号内包含一个比较。 如果比较结果为 <code>true</code></span><span lang="zh-CN">，就会执行花括号内的代码。 反之，花括号中的代码就会被跳过，从而执行下面的代码。 本文的示例中，比较测试的是 <code>guessCount</code> 变量是否等于1，即玩家是不是第一次猜数字：</span></li>
+ <li>
+  <pre class="brush: js">guessCount === 1</pre>
+ </li>
+</ul>
+
+<p>如果是, 我们让 <code>guesses</code> 段落的文本内容等于“<code><font face="monospace">上次猜的数：</font></code>”。如果不是就不用了。</p>
+
+<ul>
+ <li><span class="short_text" id="result_box" lang="zh-CN">第 6 行将当前 <code>userGuess</code> 值附加到 </span><code>guesses</code> <span class="short_text" lang="zh-CN">段落的末尾，并加上一个空格，以使每两个猜测值之间有一个空格。</span></li>
+ <li><span class="short_text" id="result_box" lang="zh-CN">下一个代码块中（8 - 24 行）做了几个检查：</span>
+  <ul>
+   <li>第一个 <code>if(){ }</code> 检查用户的猜测是否等于在代码顶端设置的 <code>randomNumber</code> 值。如果是，则玩家猜对了，游戏胜利，我们将向玩家显示一个漂亮的绿色的祝贺信息，并清除“高了 / 低了”信息框的内容，调用 <code>setGameOver()</code> 方法。</li>
+   <li><font face="Open Sans, arial, sans-serif">紧接着是一个 </font><code>else if(){ }</code> 结构。它会检查这个回合是否是玩家的最后一个回合。如果是，程序将做与前一个程序块相同的事情，只是这次它显示的是 Game Over 而不是祝贺消息。</li>
+   <li>最后的一个块是 <code>else { }</code>，前两个比较都不返回 <span id="result_box" lang="zh-CN"><code>true</code></span> 时（也就是玩家尚未猜对，但是还有机会）才会执行这里的代码。在这个情况下，我们会告诉玩家他们猜错了，并执行另一个条件测试，判断并告诉玩家猜测的数字是高了还是低了。</li>
+  </ul>
+ </li>
+ <li>函数最后三行（26 - 28 行）是为下次猜测值提交做准备的。我们把 <code>guessCount</code> 变量的值加 1，以使玩家消耗一次机会 （<code>++</code> 是自增操作符，为自身加 1），然后我们把表单中文本域的值清空，重新聚焦于此，准备下一轮游戏。</li>
+</ul>
+
+<h3 id="事件（Event）">事件（Event）</h3>
+
+<p><span id="result_box" lang="zh-CN">现在，我们有一个实现比较不错的 <code>checkGuess()</code> 函数了，但它现在什么事情也做不了，因为我们还没有调用它。 理想中，我们希望在点击“</span>确定<span lang="zh-CN">”按钮时调用它，为此，我们需要使用事件。 事件就是浏览器中发生的事儿，比如点击按钮、加载页面、播放视频，等等，我们可以通过调用代码来响应事件。 侦听事件发生的结构称为<strong>事件监听器（Event Listener）</strong>，响应事件触发而运行的代码块被称为<strong>事件处理器（Event Handler）</strong>。</span></p>
+
+<p><span class="short_text" id="result_box" lang="zh-CN">在 <code>checkGuess()</code> 函数后添加以下代码：</span></p>
+
+<pre class="brush: js">guessSubmit.addEventListener('click', checkGuess);</pre>
+
+<p>这里为 <code>guessSubmit</code> 按钮添加了一个事件监听器。<code>addEventListener()</code> 方法包含两个可输入值（称为“<em>参数”（argument）</em>），监听事件的类型（本例中为“<code>click</code>”），和当事件发生时我们想要执行的代码（本例中为 <code>checkGuess()</code> 函数）。注意，<code>addEventListener()</code> 中作为参数的函数名不加括号。</p>
+
+<p><span id="result_box" lang="zh-CN">现在，保存代码并</span><span lang="zh-CN">刷新页面，示例应该能够工作了，但还不够完善。 现在唯一的问题是，如果玩家猜对或游戏次数用完，游戏将出错，因为我们尚未定义游戏结束时应运行的<code>setGameOver()</code> 函数。 现在，让我们补全所缺代码，并完善示例功能。</span></p>
+
+<h3 id="补全游戏功能">补全游戏功能</h3>
+
+<p><span id="result_box" lang="zh-CN">在代码最后添加一个 <code>setGameOver()</code> 函数，然后我们一起来看看它：</span></p>
+
+<pre class="brush: js">function setGameOver() {
+  guessField.disabled = true;
+  guessSubmit.disabled = true;
+  resetButton = document.createElement('button');
+  resetButton.textContent = '开始新游戏';
+  document.body.appendChild(resetButton);
+  resetButton.addEventListener('click', resetGame);
+}</pre>
+
+<ul>
+ <li><span id="result_box" lang="zh-CN">前两行通过将 <code>disable</code> 属性设置为 <code>true</code></span><span lang="zh-CN"> 来禁用表单文本输入和按钮。 这样做是必须的，否则用户就可以在游戏结束后提交更多的猜测，游戏的规则将遭到破坏。</span></li>
+ <li>接下来的三行创建一个新的  {{htmlelement("button")}} 元素，设置它的文本为“开始新游戏”，并把它添加到当前 HTML 的底部。</li>
+ <li><span id="result_box" lang="zh-CN">最后一行在新按钮上设置了一个事件监听器，当它被点击时，一个名为 <code>resetGame()</code> 的函数被将被调用。</span></li>
+</ul>
+
+<p><span class="short_text" id="result_box" lang="zh-CN">现在我们需要定义 </span><code><span id="result_box" lang="zh-CN">resetGame()</span></code><span lang="zh-CN"> </span><span class="short_text" lang="zh-CN">这个函数，依然放到代码底部：</span></p>
+
+<pre class="brush: js">function resetGame() {
+  guessCount = 1;
+
+  const resetParas = document.querySelectorAll('.resultParas p');
+  for (let i = 0 ; i &lt; resetParas.length; i++) {
+    resetParas[i].textContent = '';
+  }
+
+  resetButton.parentNode.removeChild(resetButton);
+
+  guessField.disabled = false;
+  guessSubmit.disabled = false;
+  guessField.value = '';
+  guessField.focus();
+
+  lastResult.style.backgroundColor = 'white';
+
+  randomNumber = Math.floor(Math.random() * 100) + 1;
+}</pre>
+
+<p><span class="short_text" id="result_box" lang="zh-CN">这段较长的代码将游戏中的一切重置为初始状态，然后玩家就可以开始新一轮的游戏了。此段代码：</span></p>
+
+<ul>
+ <li><span id="result_box" lang="zh-CN">将 <code>guessCount</code> 重置为 1。</span></li>
+ <li><span class="short_text" id="result_box" lang="zh-CN"><span>清除所有信息段落。</span></span></li>
+ <li><span lang="zh-CN">删除重置按钮</span><span lang="zh-CN">。</span></li>
+ <li><span id="result_box" lang="zh-CN">启用表单元素，清空文本域并</span><span lang="zh-CN">聚焦于此，准备接受新猜测的数字。</span></li>
+ <li><span id="result_box" lang="zh-CN">删除 </span><span lang="zh-CN"><code>lastResult</code> 段落的背景颜色。</span></li>
+ <li><span id="result_box" lang="zh-CN">生成一个新的随机数，这样就可以猜测新的数字了！</span></li>
+</ul>
+
+<p><strong><span class="short_text" id="result_box" lang="zh-CN">此刻一个能功能完善的（简易版）游戏就完成了。恭喜！</span></strong></p>
+
+<p><span class="short_text" id="result_box" lang="zh-CN">我们现在来讨论下其他很重要的代码功能，你可能已经看到过，但是你可能没有意识到这一点。</span></p>
+
+<h3 id="循环（Loop）">循环（Loop）</h3>
+
+<p><span id="result_box" lang="zh-CN">上面代码中有一部分需要我们仔细研读，那就是</span><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for"> for</a> 循环。 <span id="result_box" lang="zh-CN"> 循环是一个非常重要的编程</span><span lang="zh-CN">概念，它让你能够重复运行一段代码，直到满足某个条件为止。</span></p>
+
+<p><span class="short_text" id="result_box" lang="zh-CN">首先，请再次转到</span> <a href="https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/What_are_browser_developer_tools">浏览器开发工具 JavaScript 控制台</a><span class="short_text" id="result_box" lang="zh-CN"> 然后输入以下内容：</span></p>
+
+<pre class="brush: js">for (let i = 1; i &lt; 21; i++) { console.log(i); }</pre>
+
+<p><span class="short_text" id="result_box" lang="zh-CN">发生了什么？ 控制台中打印出了</span><span class="short_text" lang="zh-CN">数字 1 到 20。 这正是循环所为。一个 for 循环需要三个输入值（参数）：</span></p>
+
+<ol>
+ <li><span id="result_box" lang="zh-CN"><strong>起始值</strong>：本例中我们从 1 开始计数，但其他任意数字也可以。 </span><span class="short_text" id="result_box" lang="zh-CN"><code>i</code></span><span lang="zh-CN">也可以用任何你喜欢的名字替换</span><span lang="zh-CN">，但一般约定用 </span><span class="short_text" id="result_box" lang="zh-CN"><code>i</code></span><span lang="zh-CN">，因为它很短，且易于记忆。</span></li>
+ <li><span class="short_text" id="result_box" lang="zh-CN"><strong>退出条件</strong>：这里我们指定 <code>i &lt; 21</code>，直到<code>i</code>不再小于 21 前</span><span class="short_text" lang="zh-CN">循环将继续。当 <code>i</code> 达到 21 时，循环将退出</span>。</li>
+ <li><strong>增加器</strong>：我们指定 <code>i++</code>，意思是向 <code>i</code> 加 1。<code>i</code> 值的每次变动都会引发循环的执行，直到 <code>i</code> 值等于 21（如前文所讲）。为简化问题，在本例中，我们使用<code>console.log()</code>在控制台打印出每次迭代时变量 <code>i</code> 的值。</li>
+</ol>
+
+<p><span class="short_text" id="result_box" lang="zh-CN">现在让我们来观察猜数字游戏中的循环 —— <code>resetGame()</code> 函数中可以找到以下内容：</span></p>
+
+<pre class="brush: js">let resetParas = document.querySelectorAll('.resultParas p');
+for (let i = 0 ; i &lt; resetParas.length ; i++) {
+  resetParas[i].textContent = '';
+}</pre>
+
+<p>这段代码通过 {{domxref("Document.querySelectorAll", "querySelectorAll()")}} 方法创建了一个包含 <code>&lt;div class="resultParas"&gt;</code> 内所有段落的变量，然后通过循环迭代，删除每个段落的文本内容。</p>
+
+<h3 id="浅谈对象（Object）">浅谈对象（Object）</h3>
+
+<p><span id="result_box" lang="zh-CN">在讨论前最后</span><span lang="zh-CN">再改进一波。 在 <code>let resetButton</code>（脚本顶端部分）下方添加下面一行内容，然后保存文件：</span></p>
+
+<pre class="brush: js">guessField.focus();</pre>
+
+<p>这一行通过 {{domxref("HTMLElement.focus", "focus()")}} 方法让光标在页面加载完毕时自动放置于 {{htmlelement("input")}}  输入框内，这意味着玩家可以马上开始第一次猜测，而无需点击输入框。 这只是一个小的改进，却提高了可用性——为使用户能投入游戏提供一个良好的视觉线索。</p>
+
+<p><span id="result_box" lang="zh-CN"><span title="Let's analyze what's going on here in a bit more detail.">深入分析一下。</span><span title="In JavaScript, everything is an object.">JavaScript 中一切都是对象。</span><span title="An object is a collection of related functionality stored in a single grouping.">对象是存储在单个分组中的相关功能的集合。</span><span title="You can create your own objects, but that is quite advanced and we won't be covering it until much later in the course.">可以创建自己的对象，但这是较高阶的知识，我们今后才会谈及。</span><span title="For now, we'll just briefly discuss the built-in objects that your browser contains, which allow you to do lots of useful things.
+
+">现在，仅需简要讨论浏览器内置的</span></span><span lang="zh-CN"><span title="For now, we'll just briefly discuss the built-in objects that your browser contains, which allow you to do lots of useful things.
+
+">对象，它们已经能够做许多有用的事情。</span></span></p>
+
+<p><span id="result_box" lang="zh-CN"><span title="In this particular case, we first created a guessField variable that stores a reference to the text input form field in our HTML — the following line can be found amongst our variable declarations near the top:">在本示例的特定情况下，我们首先创建一个 <code>guessField</code> 常量来存储对 HTML 中的文本输入表单域的引用，在文档顶部的声明区域中可以找到以下行：</span></span></p>
+
+<pre class="brush: js">const guessField = document.querySelector('.guessField');</pre>
+
+<p>使用 {{domxref("document")}} 对象的 {{domxref("document.querySelector", "querySelector()")}} 方法可以获得这个引用。<code>querySelector()</code> 需要一个信息——用一个 <a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS选择器</a> 可以选中需要引用的元素。</p>
+
+<p>因为 <code>guessField</code> 现在包含一个指向 {{htmlelement("input")}} 元素的引用，它现在就能够访问一系列的属性（存储于对象内部的基础变量，其中一些的值无法改变）和方法（存储在对象内部的基础函数）。<code>focus()</code> 是 {{htmlelement("input")}} 元素可用方法之一，因此我们可以使用这行代码将光标聚焦于此文本框上︰</p>
+
+<pre class="brush: js">guessField.focus();</pre>
+
+<p>不包含对表单元素引用的变量不提供 <code>focus()</code>方法。例如，引用 {{htmlelement("p")}} 元素的<code>guesses</code> 常量，包含一个数字的 <code>guessCount</code> 变量。</p>
+
+<h3 id="操作浏览器对象">操作浏览器对象</h3>
+
+<p>浏览器对象如何使用呢，下面我们来小试牛刀。</p>
+
+<ol>
+ <li>首先在浏览器中打开你的程序。</li>
+ <li>接下来打开 <a href="/zh-CN/docs/Learn/Common_questions/What_are_browser_developer_tools">浏览器开发者工具</a>， 并且切换到 JavaScript 控制台的标签页。</li>
+ <li><font face="Open Sans, arial, sans-serif">输入 </font><code>guessField</code> ，控制台将会显示此变量包含一个 {{htmlelement("input")}} 元素。同时控制台还能自动补全运行环境中对象的名字，包括你的变量！</li>
+ <li>现在输入下面的代码：
+  <pre class="brush: js">guessField.value = 'Hello';</pre>
+  <code>value</code> 属性表示当前文本区域中输入的值。 在输入这条指令后，你将看到文本域区中的文本被我们修改了！</li>
+ <li>现在试试输入 <code>guesses</code> 然后回车。控制台会显示一个包含 {{htmlelement("p")}} 元素的变量。</li>
+ <li>现在试试输入下面这一行：
+  <pre class="brush: js">guesses.value</pre>
+  浏览器会返回 <code>undefined</code>，因为段落中并不存在 <code>value</code>。</li>
+ <li>为了改变段落中的文本内容， 你需要用 {{domxref("Node.textContent", "textContent")}} 属性来代替 <code>value</code>。试试这个：
+  <pre class="brush: js">guesses.textContent = '我的段落在哪里？';</pre>
+ </li>
+ <li>下面是一些有趣的东西。 尝试依次输入下面几行：
+  <pre class="brush: js">guesses.style.backgroundColor = 'yellow';
+guesses.style.fontSize = '200%';
+guesses.style.padding = '10px';
+guesses.style.boxShadow = '3px 3px 6px black';</pre>
+ </li>
+ <li><span id="result_box" lang="zh-CN">页面上的每个元素都有一个 <code>style</code> 属性，它本身包含一个对象，其属性包含应用于该元素的所有内联 CSS 样式。 让我们可以使用 JavaScript 在元素上动态设置新的 CSS 样式。</span></li>
+</ol>
+
+<h2 id="大功告成...">大功告成...</h2>
+
+<p><span id="result_box" lang="zh-CN">这个示例已经构建完毕，做得好！来尝试运行一下最终的代码，</span>或者 <a class="external external-icon" href="https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">看看我们的最终版本</a>。<span id="result_box" lang="zh-CN">如果你的版本无法正常工作，请对照</span> <a class="external external-icon" href="https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">源代码</a> 进行检查。</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="本章目录">本章目录</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript 是什么？</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript 初体验</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/What_went_wrong">查找并解决 JavaScript 代码的错误 </a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Variables">变量：储存所需信息</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Math">数字和运算符：JavaScript 的基本算数</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Strings">字符串：JavaScript 文本的处理</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Useful_string_methods">字符串的一些实用方法</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Arrays">数组</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Silly_story_generator">课程评估：笑话机</a></li>
+</ul>
diff --git a/files/zh-cn/learn/javascript/first_steps/arrays/index.html b/files/zh-cn/learn/javascript/first_steps/arrays/index.html
new file mode 100644
index 0000000000..e3cc48d6d5
--- /dev/null
+++ b/files/zh-cn/learn/javascript/first_steps/arrays/index.html
@@ -0,0 +1,522 @@
+---
+title: 数组
+slug: Learn/JavaScript/First_steps/Arrays
+tags:
+  - JavaScript
+  - Join
+  - Pop
+  - Push
+  - shift
+  - split
+  - unshift
+  - 初学者
+  - 数组
+translation_of: Learn/JavaScript/First_steps/Arrays
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">在本模块的最后一篇文章中, 我们将看看数组 —— 一种将一组数据存储在单个变量名下的优雅方式。 现在我们看看它有什么用，然后探索如何来创建一个数组，检索、添加和删除存储在数组中的元素，以及其他更多的功能。</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 中操作数组。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="数组是什么">数组是什么?</h2>
+
+<p>数组通常被描述为“像列表一样的对象”; 简单来说，数组是一个包含了多个值的对象。数组对象可以存储在变量中，并且能用和其他任何类型的值完全相同的方式处理，区别在于我们可以单独访问列表中的每个值，并使用列表执行一些有用和高效的操作，如循环 - 它对数组中的每个元素都执行相同的操作。 也许我们有一系列产品和价格存储在一个数组中，我们想循环遍历所有这些产品，并将它们打印在发票上，同时将所有产品的价格统计在一起，然后将总价格打印在底部。<br>
+  </p>
+
+<p>如果我们没有数组，我们必须将每个产品存储在一个单独的变量中，然后调用打印的代码，并为每个产品单独添加。 花费的时间要长得多，效率很低，而且也容易出错。 如果我们有 10 个产品需要添加发票，那就只是有点麻烦而已，但是 100 个，或者 1000 个呢？ 我们稍后将在文章中使用这个例子。</p>
+
+<p>像以前的文章一样，我们通过在 JavaScript 控制台中输入一些示例来了解数组的基础知识。 我们在下面提供了一个（您也可以在单独的选项卡或窗口中打开此控制台，或者如果您愿意，请使用<a href="/zh-CN/docs/Learn/Discover_browser_developer_tools">浏览器的开发者工具控制台</a>）。</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      if(document.querySelectorAll('div').length &gt; 1) {
+        inputForm.focus();
+      }
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</p>
+
+<h3 id="创建数组">创建数组</h3>
+
+<p>数组由方括号构成，其中包含用逗号分隔的元素列表。</p>
+
+<ol>
+ <li>假设我们想在一个数组中存储一个购物清单 - 我们会做一些像下面这样的事情。 在您的控制台中输入以下行：
+  <pre class="brush: js">let shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
+shopping;</pre>
+ </li>
+ <li>在这种情况下，数组中的每个项目都是一个字符串，但请记住，您可以将任何类型的元素存储在数组中 - 字符串，数字，对象，另一个变量，甚至另一个数组。 您也可以混合和匹配项目类型 - 它们并不都是数字，字符串等。尝试下面这些：
+  <pre class="brush: js">let sequence = [1, 1, 2, 3, 5, 8, 13];
+let random = ['tree', 795, [0, 1, 2]];</pre>
+ </li>
+ <li>尝试创建您自己的几个数组，然后再继续往下看。</li>
+</ol>
+
+<h3 id="访问和修改数组元素">访问和修改数组元素</h3>
+
+<p>然后，您可以使用括号表示法访问数组中的元素，与 <a href="/zh-CN/docs/Learn/JavaScript/First_steps/Useful_string_methods#检索特定字符串字符">检索特定字符串字符</a> 的方法相同。</p>
+
+<ol>
+ <li>在您的控制台中输入以下内容：
+  <pre class="brush: js">shopping[0];
+// returns "bread"</pre>
+ </li>
+ <li>您还可以简单地为单个数组元素提供新值来修改数组中的元素。 例如：
+  <pre class="brush: js">shopping[0] = 'tahini';
+shopping;
+// shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]</pre>
+
+  <div class="note"><strong>Note</strong>: 我们以前说过，但还是提醒一下 —— 电脑从 0 开始计数！</div>
+ </li>
+ <li>
+  <p>请注意，数组中包含数组的话称之为多维数组。 您可以通过将两组方括号链接在一起来访问数组内的另一个数组。 例如，要访问数组内部的一个项目，即 <code>random</code> 数组中的第三个项目（参见上一节），我们可以这样做：</p>
+
+  <pre class="brush: js">random[2][2];</pre>
+ </li>
+ <li>在继续之前，尝试对您的数组示例进行一些修改。 玩一玩，看看哪些有效，哪些无效。</li>
+</ol>
+
+<h3 id="获取数组长度">获取数组长度</h3>
+
+<p>你可以通过使用 {{jsxref("Array.prototype.length","length")}} 属性获取数组的长度（数组中有多少项元素），这与查找字符串的长度（以字符为单位）完全相同 。 尝试以下代码：</p>
+
+<pre class="brush: js">sequence.length;
+// should return 7</pre>
+
+<p>虽然 length 属性也有其他用途，但最常用于循环（循环遍历数组中的所有项）。 例如：</p>
+
+<pre class="brush: js">let sequence = [1, 1, 2, 3, 5, 8, 13];
+for (let i = 0; i &lt; sequence.length; i++) {
+  console.log(sequence[i]);
+}</pre>
+
+<p>您将在以后的文章中正确地了解循环，但简而言之，这段代码的意思是：</p>
+
+<ol>
+ <li>在数组中的元素编号 0 开始循环。</li>
+ <li>在元素编号等于数组长度的时候停止循环。 这适用于任何长度的数组，但在这种情况下，它将在编号 7 的时候终止循环（这很好，因为我们希望最后一位元素的编号是 6）。</li>
+ <li>对于每个元素，使用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Console/log">console.log()</a> 将其打印到浏览器控制台。</li>
+</ol>
+
+<h2 id="一些有用的数组方法">一些有用的数组方法</h2>
+
+<p>在本节中，我们将介绍一些相当有用的数组方法，这些方法允许我们将字符串拆分为字符串数组，反之亦然，以及添加或删除元素。</p>
+
+<h3 id="字符串和数组之间的转换">字符串和数组之间的转换</h3>
+
+<p>通常，您会看到一个包含在一个长长的字符串中的原始数据，您可能希望将有用的项目分成更有用的表单，然后对它们进行处理，例如将它们显示在数据表中。 为此，我们可以使用 {{jsxref("String.prototype.split()","split()")}} 方法。 在其最简单的形式中，这需要一个参数，您要将字符串分隔的字符，并返回分隔符之间的子串，作为数组中的项。</p>
+
+<div class="note">
+<p><strong>Note</strong>:  好吧，从技术上讲，这是一个字符串方法，而不是一个数组方法，但是我们把它放在数组中，因为它在这里很合适。</p>
+</div>
+
+<ol>
+ <li>我们来玩一下这个方法，看看它是如何工作的。 首先，在控制台中创建一个字符串：
+  <pre class="brush: js">let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';</pre>
+ </li>
+ <li>现在我们用每个逗号分隔它：
+  <pre class="brush: js">let myArray = myData.split(',');
+myArray;</pre>
+ </li>
+ <li>最后，尝试找到新数组的长度，并从中检索一些项目：
+  <pre class="brush: js">myArray.length;
+myArray[0]; // the first item in the array
+myArray[1]; // the second item in the array
+myArray[myArray.length-1]; // the last item in the array</pre>
+ </li>
+ <li>您也可以使用 {{jsxref("Array.prototype.join()","join()")}} 方法进行相反的操作。 尝试以下：
+  <pre class="brush: js">let myNewString = myArray.join(',');
+myNewString;</pre>
+ </li>
+ <li>将数组转换为字符串的另一种方法是使用 {{jsxref("Array.prototype.toString()","toString()")}} 方法。 <code>toString()</code> 可以比 <code>join()</code> 更简单，因为它不需要一个参数，但更有限制。 使用 <code>join()</code> 可以指定不同的分隔符（尝试使用与逗号不同的字符运行步骤4）。
+  <pre class="brush: js">let dogNames = ["Rocket","Flash","Bella","Slugger"];
+dogNames.toString(); //Rocket,Flash,Bella,Slugger</pre>
+ </li>
+</ol>
+
+<h3 id="添加和删除数组项">添加和删除数组项</h3>
+
+<p>我们还没有涵盖添加和删除数组元素，现在让我们来看看。 我们将使用在上一节中最后提到的  <code>myArray</code> 数组。 如果您尚未遵循该部分，请先在控制台中创建数组：</p>
+
+<pre class="brush: js">let myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];</pre>
+
+<p>首先，要在数组末尾添加或删除一个项目，我们可以使用  {{jsxref("Array.prototype.push()","push()")}} 和 {{jsxref("Array.prototype.pop()","pop()")}}。</p>
+
+<ol>
+ <li>让我们先使用 <code>push()</code> —— 注意，你需要添加一个或多个要添加到数组末尾的元素。 尝试下面的代码：
+
+  <pre class="brush: js">myArray.push('Cardiff');
+myArray;
+myArray.push('Bradford', 'Brighton');
+myArray;
+</pre>
+ </li>
+ <li>当方法调用完成时，将返回数组的新长度。 如果要将新数组长度存储在变量中。例如：
+  <pre class="brush: js">var newLength = myArray.push('Bristol');
+myArray;
+newLength;</pre>
+ </li>
+ <li>从数组中删除最后一个元素的话直接使用 <code>pop()</code> 就可以。 例如：
+  <pre class="brush: js">myArray.pop();</pre>
+ </li>
+ <li>当方法调用完成时，将返回已删除的项目。 你也可以这样做：
+  <pre class="brush: js">let removedItem = myArray.pop();
+myArray;
+removedItem;</pre>
+ </li>
+</ol>
+
+<p>{{jsxref("Array.prototype.unshift()","unshift()")}} 和 {{jsxref("Array.prototype.shift()","shift()")}} 从功能上与 {{jsxref("Array.prototype.push()","push()")}} 和 {{jsxref("Array.prototype.pop()","pop()")}} 完全相同，只是它们分别作用于数组的开始，而不是结尾。</p>
+
+<ol>
+ <li><font face="Open Sans, arial, sans-serif">首先 </font><code>unshift()</code> ——尝试一下这个命令：
+
+  <pre class="brush: js">myArray.unshift('Edinburgh');
+myArray;</pre>
+ </li>
+ <li>现在 <code>shift()</code> —— 尝试一下！
+  <pre class="brush: js">let removedItem = myArray.shift();
+myArray;
+removedItem;</pre>
+ </li>
+</ol>
+
+<h2 id="积极学习：打印这些产品">积极学习：打印这些产品</h2>
+
+<p>我们回到前面描述的例子 —— 打印出发票上的产品名称和价格，然后计算总价格并将其印在底部。 在下面的可编辑示例中，包含数字的注释 —— 每个注释标记都是您必须向代码添加内容的地方。 它们如下：</p>
+
+<ol>
+ <li>在 <code>// number 1</code> 注释下面是一些字符串，每个字符串包含一个产品名称和一个冒号分隔的价格。 我们希望您将其转换为一个数组，并将其存储在名为 <code>products</code> 的数组中。</li>
+ <li>与 <code>// number 2</code> 注释同一行的是 for 循环的开头。 在这行中，我们目前有 <code>i &lt;= 0</code>，这是一个条件测试，导致 <a href="/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash#循环（Loop）">for循环</a> 立即停止，因为它说“当 <code>i</code> 不再小于或等于0”时停止，而 <code>i</code> 从0开始。 我们希望您使用条件测试来替换它，当 <code>i</code> 不再小于 <code>products</code> 数组的长度时，该条件测试会停止循环。</li>
+ <li>就在 <code>// number 3</code> 注释的下方，我们希望您编写一行代码，将当前数组项目（名称：价格）分成两个独立的项目，一个只包含该名称，一个只包含该价格。 如果您不确定如何执行此操作，请参阅<a href="/zh-CN/docs/Learn/JavaScript/First_steps/Useful_string_methods">有用的字符串方法</a>文章以获得一些帮助，甚至更好的看看本文中的{{anch("转换字符串和数组")}}部分。</li>
+ <li>作为上述代码行的一部分，您还需要将价格从字符串转换为数字。 如果你不记得如何做，请查看<a href="/zh-CN/docs/Learn/JavaScript/First_steps/Strings#创建一个字符串">第一个字符串</a>文章。</li>
+ <li>有一个名为 <code>total</code> 的变量被创建，并在代码的顶部赋值为 0。 在循环内（在 <code>// number 4</code> 注释下面），我们希望您添加一行，将当前项目价格添加到循环中的迭代变量，以便在代码结尾处将正确的总数打印到发票上。 您可能需要一个赋值运算符来执行此操作。</li>
+ <li>我们希望您改变 <code>// number 5</code> 注释的行，以便使  <code>itemText</code> 变量等于“当前项目名称 - $ 当前项目价格”，例如“Shoes - $ 23.99”，以此将每个项目的正确信息都印在发票上。 这只是简单的字符串连接，您应该对此很熟悉。</li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;div class="output" style="min-height: 150px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;p&gt;&lt;/p&gt;
+
+&lt;/div&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 370px;"&gt;
+var list = document.querySelector('.output ul');
+var totalBox = document.querySelector('.output p');
+var total = 0;
+list.innerHTML = '';
+totalBox.textContent = '';
+// number 1
+                'Underpants:6.99'
+                'Socks:5.99'
+                'T-shirt:14.99'
+                'Trousers:31.99'
+                'Shoes:23.99';
+
+for (var i = 0; i &lt;= 0; i++) { // number 2
+  // number 3
+
+  // number 4
+
+  // number 5
+  itemText = 0;
+
+  var listItem = document.createElement('li');
+  listItem.textContent = itemText;
+  list.appendChild(listItem);
+}
+
+totalBox.textContent = 'Total: $' + total.toFixed(2);
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  textarea.value = jsSolution;
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar totalBox = document.querySelector(\'.output p\');\nvar total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nvar products = [\'Underpants:6.99\',\n                \'Socks:5.99\',\n                \'T-shirt:14.99\',\n                \'Trousers:31.99\',\n                \'Shoes:23.99\'];\n\nfor(var i = 0; i &lt; products.length; i++) {\n  var subArray = products[i].split(\':\');\n  var name = subArray[0];\n  var price = Number(subArray[1]);\n  total += price;\n  itemText = name + \' — $\' + price;\n\n  var listItem = document.createElement(\'li\');\n  listItem.textContent = itemText;\n  list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'Total: $\' + total.toFixed(2);';
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', '100%', 600) }}</p>
+
+<h2 id="积极学习：前5个搜索">积极学习：前5个搜索</h2>
+
+<p>当您在 Web 程序中维护当前活动元素的记录时，{{jsxref("Array.prototype.push()","push()")}} 和 {{jsxref("Array.prototype.pop()","pop()")}} 是不错的方法。 例如，在动画场景中，您可能会有一系列表示当前显示的背景图像的对象，并且由于性能或混乱原因，您可能只需要一次显示 50 个。 当创建新对象并将其添加到数组中时，可以从数组中删除较旧的对象以保持所需的数量。</p>
+
+<p>在这个例子中，我们将展示一种更简单的使用方法 - 在这里我们给你一个假的搜索网站，一个搜索框。 这个想法是，当在搜索框中输入时，列表中会显示5个先前的搜索字词。 当列表项目数量超过 5 时，每当新项目被添加到顶部时，最后一个项目开始被删除，因此总是显示5个以前的搜索字词。</p>
+
+<div class="note">
+<p><strong>Note</strong>: 在真正的搜索应用中，您可能可以点击先前的搜索字词返回上一次搜索，并显示实际的搜索结果！ 我们现在只是保持简单的逻辑。</p>
+</div>
+
+<p>要完成该应用程序，我们需要您：</p>
+
+<ol>
+ <li>在 <code>//number 1</code> 注释下面添加一行，将输入到搜索框中的当前值添加到数组的开头。 这可以使用 <code>searchInput.value</code> 检索。</li>
+ <li>在 <code>// number 2</code> 注释下方添加一行，该行删除数组末尾的当前值。</li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html">&lt;div class="output" style="min-height: 150px;"&gt;
+
+&lt;input type="text"&gt;&lt;button&gt;Search&lt;/button&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 370px;"&gt;
+var list = document.querySelector('.output ul');
+var searchInput = document.querySelector('.output input');
+var searchBtn = document.querySelector('.output button');
+
+list.innerHTML = '';
+
+var myHistory = [];
+
+searchBtn.onclick = function() {
+  // 如果搜索框不为空，我们则将搜索词添加到开头
+  if (searchInput.value !== '') {
+    // number 1
+
+    // 清空显示的搜索关键词列表，防止显示
+    // 每次输入搜索词都会重新生成显示的内容
+    list.innerHTML = '';
+
+    // 通过循环遍历，显示所有的搜索关键词
+    for (var i = 0; i &lt; myHistory.length; i++) {
+      var itemText = myHistory[i];
+      var listItem = document.createElement('li');
+      listItem.textContent = itemText;
+      list.appendChild(listItem);
+    }
+
+    // 如果数组的长度大于 5，那么便移除旧的搜索关键词
+    if (myHistory.length &gt;= 5) {
+      // number 2
+
+    }
+
+    // 清空并聚焦到搜索框，准备下一次的搜索
+    searchInput.value = '';
+    searchInput.focus();
+  }
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  textarea.value = jsSolution;
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar searchInput = document.querySelector(\'.output input\');\nvar searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nvar myHistory= [];\n\nsearchBtn.onclick = function() {\n  if(searchInput.value !== \'\') {\n    myHistory.unshift(searchInput.value);\n\n    list.innerHTML = \'\';\n\n    for(var i = 0; i &lt; myHistory.length; i++) {\n     var itemText = myHistory[i];\n      var listItem = document.createElement(\'li\');\n      listItem.textContent = itemText;\n      list.appendChild(listItem);\n    }\n\n    if(myHistory.length &gt;= 5) {\n      myHistory.pop();\n    }\n\n    searchInput.value = \'\';\n    searchInput.focus();\n  }\n}';
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', '100%', 600) }}</p>
+
+<h2 id="总结">总结</h2>
+
+<p>阅读本文后，我们相信您会明白数组是很有用的; 你会看到它们在 JavaScript 中随处可见，通常与循环相关，以便对数组中的每个元素做同样的事情。 我们将教你所有有用的基础知识，了解下一个模块中的循环，但现在你应该给自己鼓掌，并稍加休息; 您已经完成了本单元中的所有文章！</p>
+
+<p>唯一需要做的就是通过这个模块的评估，这将测试你对之前的文章的理解。</p>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a> — 数组及其表兄弟类型阵列的高级指导。</li>
+ <li>{{jsxref("Array")}} — Array 对象引用页面 - 有关此页面中讨论功能的详细参考指南等。</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}</p>
+
+
+
+<h2 id="在本单元中">在本单元中</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
diff --git a/files/zh-cn/learn/javascript/first_steps/index.html b/files/zh-cn/learn/javascript/first_steps/index.html
new file mode 100644
index 0000000000..e53fc2761f
--- /dev/null
+++ b/files/zh-cn/learn/javascript/first_steps/index.html
@@ -0,0 +1,57 @@
+---
+title: JavaScript 第一步
+slug: Learn/JavaScript/First_steps
+tags:
+  - JavaScript
+  - 入门
+  - 指南
+  - 新手
+translation_of: Learn/JavaScript/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">在第一个 JavaScript 板块，带领各位体验编写 JavaScript 程序前，首先回答一些基本问题：「什么是 JavaScript？」，「它看上去是什么样的？」，「它能做什么？」。此后，我们将详细讨论一些关键构件，例如变量、字符串、数值和数组。</p>
+
+<h2 id="事前准备">事前准备</h2>
+
+<p>学习这个板块前，你不需要预先了解任何 JavaScript 知识，但你应当对 HTML 和 CSS 有所熟悉。我们建议学习 JavaScript 前，先完成以下板块阅读：</p>
+
+<ul>
+	<li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web">开始使用 Web</a>（包括 <a href="/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 基础简介</a>）。</li>
+	<li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML 简介</a>。</li>
+	<li><a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS">CSS 简介</a>。</li>
+</ul>
+
+<div class="note">
+<p><strong>注意：</strong>如果你无法在你使用的电脑/平板/其他设备上创建自己的文件，尝试使用在线编程应用来运行（大部分）代码示例，例如 <a href="http://jsbin.com/">JSBin</a> 和 <a href="https://thimble.mozilla.org/">Thimble</a>。</p>
+</div>
+
+<h2 id="学习指南">学习指南</h2>
+
+<dl>
+	<dt><a href="/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript">什么是 JavaScript？</a></dt>
+	<dd>欢迎来到 MDN JavaScript 新手课程！第一篇文章，我们将从较高层次审视 JavaScript，解答诸如「它是什么？」、「它在做些什么？」的问题，确保你理解 JavaScript 的用途。</dd>
+	<dt><a href="/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript 初体验</a></dt>
+	<dd>你已经学习了一些 JavaScript 理论，了解了可以用它做什么，接下来我们将通过一个非常实用的教程，带给你一节 JavaScript 基本特性速成课。在这里你将一步一步构建出一个「猜数字」游戏。</dd>
+	<dt><a href="/zh-CN/docs/Learn/JavaScript/First_steps/What_went_wrong">哪里出错了？JavaScript 疑难解答</a></dt>
+	<dd>构建上篇文章中的「猜数字」游戏时，你可能发现它没法运行。不要害怕——这篇文章来解救正为问题挠头的你，它为你提供一些从 JavaScript 程序中发现并解决问题的思路。</dd>
+	<dt><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Variables">存储你需要的信息——变量</a></dt>
+	<dd>读过最近几篇文章，你应当了解 JavaScript 是什么，它能为你做什么，如何搭配其他 web 技术使用，以及从较高层次来看，它的主要特性是什么样的。这篇文章，我们将深入真正的基础，看看如何使用 JavaScript 的基本构件——变量。</dd>
+	<dt><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Math">JavaScript 中的基本运算——数值和运算符</a></dt>
+	<dd>这一课我们讨论 JavaScript 的运算——如何将运算符与其他特性结合使用，完美操作数值来实现需求。</dd>
+	<dt><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Strings">文字处理——JavaScript 字符串</a></dt>
+	<dd>接下来将目光转向字符串——编程世界中文字片段被称为字符串。本文涉及你在学习 JavaScript 时应当了解的有关字符串的所有常见情形，例如生成字符串、字符串中的引用以及合并字符串。</dd>
+	<dt><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Useful_string_methods">实用字符串方法</a></dt>
+	<dd>我们已经了解字符串的基本内容，接下来再上一个台阶，思考利用字符串内建方法实现的实用操作，例如获取字符串长度、字符串合并与分割、替换字符串中特定字符，等等。</dd>
+	<dt><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Arrays">数组</a></dt>
+	<dd>这个版块最后一篇文章，我们来看数组——干净整洁地把一连串数据项存储在同一个变量名下。这里我们要理解为什么说它实用，探索如何创建数组，如何获取、添加、删除数组中的项目等等内容。</dd>
+</dl>
+
+<h2 id="自我评估">自我评估</h2>
+
+<p>下面的评估会检验你对上述学习指南中 JavaScript 基础的理解。</p>
+
+<dl>
+	<dt><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Silly_story_generator">笑话生成器</a></dt>
+	<dd>这项评估中，你将运用你在这个版块的文章中学到的知识，构建一个生成随机笑话的好玩 app。玩得开心！</dd>
+</dl>
diff --git a/files/zh-cn/learn/javascript/first_steps/math/index.html b/files/zh-cn/learn/javascript/first_steps/math/index.html
new file mode 100644
index 0000000000..b9bb3e012f
--- /dev/null
+++ b/files/zh-cn/learn/javascript/first_steps/math/index.html
@@ -0,0 +1,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> — 计算机的最基础语言; 0s and 1s</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>&lt;</code></td>
+   <td>小于</td>
+   <td>测试左值是否小于右值。</td>
+   <td><code>10 &lt; 6</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;</code></td>
+   <td>大于</td>
+   <td>测试左值是否大于右值</td>
+   <td><code>10 &gt; 20</code></td>
+  </tr>
+  <tr>
+   <td>&lt;=</td>
+   <td>小于或等于</td>
+   <td>测试左值是否小于或等于右值。</td>
+   <td><code>3 &lt;= 2</code></td>
+  </tr>
+  <tr>
+   <td>&gt;=</td>
+   <td>大于或等于</td>
+   <td>测试左值是否大于或等于正确值。</td>
+   <td><code>5 &gt;= 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">&lt;button&gt;Start machine&lt;/button&gt;
+&lt;p&gt;The machine is stopped.&lt;/p&gt;
+</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（）函数内看到正在使用的等号运算符。 在这种情况下，我们不会测试两个数学表达式是否具有相同的值 - 我们正在测试一个按钮的文本内容是否包含某个字符串 - 但它仍然是工作原理。 如果按钮当前按“启动机”，则将其标签更改为“停机”，并根据需要更新标签。 如果按下按钮当前正在说“停机”，我们再次将显示器交换回来。</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>
diff --git a/files/zh-cn/learn/javascript/first_steps/silly_story_generator/index.html b/files/zh-cn/learn/javascript/first_steps/silly_story_generator/index.html
new file mode 100644
index 0000000000..f99ff16949
--- /dev/null
+++ b/files/zh-cn/learn/javascript/first_steps/silly_story_generator/index.html
@@ -0,0 +1,239 @@
+---
+title: 笑话生成器
+slug: Learn/JavaScript/First_steps/Silly_story_generator
+tags:
+  - JavaScript
+  - 初学者
+  - 变量
+  - 字符串
+  - 学习
+  - 操作符
+  - 数字
+  - 数组
+  - 测试
+  - 脚本代码
+  - 课程设计
+translation_of: Learn/JavaScript/First_steps/Silly_story_generator
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">本节是一个小测验，要求你运用所学知识制作一个笑话生成器。祝玩的愉快！</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">预备知识：</th>
+   <td>请读完本章所有小节的内容后再开始这个测验。</td>
+  </tr>
+  <tr>
+   <th scope="row">目标：</th>
+   <td>测试你对变量、数字、操作符、字符串和数组等 Javascript 基本概念的理解程度。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="起点">起点</h2>
+
+<p>测验开始之前需要下载并保存 <a class="external external-icon" href="https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html">index.html</a>、<a class="external external-icon" href="https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/style.css">style.css</a>、<a class="external external-icon" href="https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt">raw-text.txt</a>。</p>
+
+<div class="note">
+<p><strong>注：</strong> 你还可以用类似 <a class="external external-icon" href="http://jsbin.com/">JSBin</a> 或 <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> 这些在线编辑器来完成测验。你可以把 HTML、CSS 及 JavaScript 代码复制过去。如果你选的工具没有独立的 JavaScript 版面，可以随时在 HTML 页面中添加 <code>&lt;script&gt;</code> 元素。</p>
+</div>
+
+<h2 id="项目简介">项目简介</h2>
+
+<p>我们提供了一些原始的 HTML / CSS，以及若干字符串和 JavaScript 函数，还需要你来编写一些 JavaScript 代码让项目运行起来：</p>
+
+<ul>
+ <li>点击“随机生成笑话”按钮时生成一则笑话。</li>
+ <li>若“生成”按钮按下之前，你在“输入自定义的名字”文字框中输入了一个自定义名字，那么生成的笑话中原有的名字（李雷 / Bob）将被取代。</li>
+ <li>通过选择国家名称的单选按钮来确定界面语言以及笑话中温度和重量的制式。</li>
+ <li>点一次按钮，生成一个新故事。点一次生成一个……</li>
+</ul>
+
+<p>可以尝试操作一下：（别偷看源代码哦！）</p>
+
+<div class="hidden">
+<h6 id="Silly_story_generator">Silly story generator</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;style&gt;
+        body {
+            font-family: helvetica, sans-serif;
+            width: 350px;
+            border: 1px solid;
+            padding: 1em;
+        }
+        label {
+            font-weight: bold;
+        }
+        div {
+            padding-bottom: 20px;
+        }
+        input[type="text"] {
+            padding: 5px;
+            width: 150px;
+        }
+        p {
+            background: #FFC125;
+            color: #5E2612;
+            padding: 10px;
+            visibility: hidden;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;div&gt;
+    &lt;label for="customname" id="lbl-customname"&gt;请输入自定义的名字：&lt;/label&gt;
+    &lt;input id="customname" type="text" placeholder="李雷"&gt;
+&lt;/div&gt;
+&lt;div&gt;
+      &lt;label for="metric"&gt;公制&lt;/label&gt;&lt;input id="metric" type="radio" name="measure" value="metric" checked&gt;
+      &lt;label for="american"&gt;美制&lt;/label&gt;&lt;input id="american" type="radio" name="measure" value="american"&gt;
+&lt;/div&gt;
+&lt;div&gt;
+    &lt;button class="randomize"&gt;随机生成笑话&lt;/button&gt;
+&lt;/div&gt;
+&lt;!-- Thanks a lot to Willy Aguirre for his help with the code for this assessment --&gt;
+&lt;p class="story"&gt;&lt;/p&gt;
+
+&lt;script&gt;
+const customName = document.getElementById('customname');
+const randomize = document.querySelector('.randomize');
+const story = document.querySelector('.story');
+
+function randomValueFromArray(array){
+  const random = Math.floor(Math.random() * array.length);
+  return array[random];
+}
+
+let storyText = '今天气温 35 摄氏度，:insertx:出门散步。当走到:inserty:门前时，突然就:insertz:。人们都惊呆了，李雷全程目睹但并没有慌，因为:insertx:是一个 140 公斤的胖子，天气又辣么热。';
+let insertX = ['怪兽威利', '大老爹', '圣诞老人'];
+let insertY = ['肯德基', '迪士尼乐园', '白宫'];
+let insertZ = ['自燃了', '在人行道化成了一坨泥', '变成一只鼻涕虫爬走了'];
+
+randomize.addEventListener('click', result);
+
+function result() {
+  let newStory = storyText;
+
+  let xItem = randomValueFromArray(insertX);
+  let yItem = randomValueFromArray(insertY);
+  let zItem = randomValueFromArray(insertZ);
+
+  newStory = newStory.replace(':insertx:', xItem);
+  newStory = newStory.replace(':insertx:', xItem);
+  newStory = newStory.replace(':inserty:', yItem);
+  newStory = newStory.replace(':insertz:', zItem);
+
+  if(customName.value !== '') {
+    const name = customName.value;
+    newStory = newStory.replace('李雷', name);
+  }
+
+  if(document.getElementById("american").checked) {
+    const weight = Math.round(140 * 2.20462) + ' 磅';
+    const temperature =  Math.round(35 * 9 / 5 + 32) + ' 华氏度';
+    newStory = newStory.replace('35 摄氏度', temperature);
+    newStory = newStory.replace('140 公斤', weight);
+  }
+
+  story.textContent = newStory;
+  story.style.visibility = 'visible';
+}
+&lt;/script&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Silly_story_generator', '100%', 350, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>译注： </strong><a class="external external-icon">点击在线试用</a> 汉化版本。有兴趣还可以在本节结束后回来 <a class="external external-icon" href="https://github.com/roy-tian/learning-area/tree/master/javascript/introduction-to-js-1/assessment-finished">看看代码</a>。（没兴趣就跳过吧 :）</p>
+</div>
+
+<h2 id="步骤">步骤</h2>
+
+<p>以下是你的工作。</p>
+
+<p>初始化变量和函数:</p>
+
+<ol>
+ <li>将刚下载的文本文件中的“1. 定义变量和函数”标题项下所有代码复制粘贴至 main.js 中。此时你就有了三个变量（<code>customName</code> 是对“输入自定义的名字”文本框的引用，<code>randomize</code> 是对“随机生成笑话”按钮的引用，<code>story</code> 是对 HTML 底部的、准备存放笑话的 {{htmlelement("p")}} 元素的引用）和一个函数（<code>randomValueFromArray()</code> 取一个数组作参数，随机返回数组中的一个元素）。</li>
+ <li>然后是文本文件的第二节——“2. 纯文本字符串”。这里包含了一些字符串，这些字符串是项目的输入信息。你应该在 main.js 文件中用变量来保存它们。
+  <ol>
+   <li>用 <code>storyText</code> 变量保存第一个长字符串，“今天气温……”。</li>
+   <li>用 <code>insertX</code> 数组保存第一组三个字符串，“怪兽威利……”。</li>
+   <li>用 <code>insertY</code> 数组保存第二组三个字符串。“肯德基……”。</li>
+   <li>用 <code>insertZ</code> 数组保存第三组三个字符串。“自燃了……”。</li>
+  </ol>
+ </li>
+</ol>
+
+<p>放置事件处理器并补全：</p>
+
+<ol>
+ <li>返回刚才的文本文件。</li>
+ <li>将“3. 事件监听器和未完成的函数定义”标题项下的代码复制粘贴至 <code>main.js</code> 文件。这将：
+  <ul>
+   <li>为 <code>randomize</code> 变量增加一个点击事件的监听器。于是当所引用的按钮被点击时，<code>result()</code> 函数就会运行。</li>
+   <li>为代码添加一个未完成的 <code>result()</code> 函数定义。本测验剩下的工作就是完成这个函数，让程序正常运行起来。</li>
+  </ul>
+ </li>
+</ol>
+
+<p>补全 <code>result()</code> 函数：</p>
+
+<ol>
+ <li>将 <code>newStory</code> 的值设置为 <code>storyText</code>。声明新变量有必要的，只有这样才能在每次按下按钮后、在函数运行时生成一个新的随机笑话。如果直接操作 <code>storyText</code> 则只能生成一次新故事</li>
+ <li>将 <code>xItem</code>、<code>yItem</code> 和 <code>zItem</code> 分别设置为 <code>randomValueFromArray(insertX)</code>、<code>randomValueFromArray(insertY)</code> 和 <code>randomValueFromArray(insertZ)</code>。</li>
+ <li>接下来将 <code>newStory</code> 中的占位符（<code>:inserta:</code>、<code>:insertb:</code> 和 <code>:insertc:</code> ）替换为 <code>xItem</code>、<code>yItem</code> 和 <code>zItem</code>。有专用的字符串方法可供使用，并用该方法的返回值为 <code>newStory</code> 赋值。每当按下按钮时，这些占位符都会替换为随机的笑话字符串。再给你一点提示，我们所说的这种方法每次只会将所找到的首个子字符串进行替换，因此该方法对某个占位符需要执行两次。</li>
+ <li>在第一个 <code>if</code> 块中再次调用这个字符串替换方法，以使 <code>newStory</code> 字符串中的名字“李雷”替换为变量 <code>name</code> 的值 。这里我们说：“如果 <code>customName</code> 中有值，就把故事里的 “李雷”替换成它。” 如果是汉化版将newStory中的“李雷”替换成 <code>name</code> 的值；</li>
+ <li>在第二个 <code>if</code> 块中检查 <code>american</code> 单选按钮是否被选中。如果选中，就要将故事中的重量和温度值从公斤和摄氏度转换为磅和华氏度，具体事项如下：
+  <ol>
+   <li>确定英美单位的转换公式。</li>
+   <li>定义变量 <code>weight</code>、<code>temperature</code> 的行中，分别将美制单位按公式转化为英制，用 <code>Math.round()</code> 对计算结果取整。然后将英式单位连接到末尾。</li>
+   <li>就在上述两个变量的定义下方增加两个字符串置换操作，将“35 摄氏度”替换为 <code>temperature</code> 的值，将“140 公斤”替换为 <code>weight</code> 的值。</li>
+  </ol>
+ </li>
+ <li>最后，在函数倒数第二行，将 <code>story.textContent</code>（程序中显示笑话结果的段落） 赋值为 <code>newStory</code>。</li>
+</ol>
+
+<h2 id="提示">提示</h2>
+
+<ul>
+ <li>除了在 HTML 文件中引入这个 JavaScript 文件之外，完全不需要编辑 HTML。</li>
+ <li>如果你不确定当前 JavaScript 是否正确添加到了你的 HTML 中，可以尝试暂时删除 JavaScript 文件的所有内容，然后加上一些简单但效果显著的 JavaScript 代码，保存文件并刷新浏览器。下面的示例会让 {{htmlelement("html")}} 背景变为红色，如果 JavaScript 成功加载，那么整个浏览器窗口将变红：</li>
+ <li>
+  <pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'html'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="string token">'red'</span><span class="punctuation token">;</span></code></pre>
+ </li>
+ <li><code class="language-js"><span class="punctuation token"><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/round">Math.round()</a></span></code> 是 Javascript 的内建函数，可取得与传入小数最接近的整数。</li>
+ <li>本示例中有三类字符串需要替换。可以多次重复 <code>replace()</code> 方法，也可使用正则表达式。例如：<code>var text = 'I am the biggest lover, I love my love';</code> 或 <code>text.replace(/love/g,'like');</code> 会将所有的“love”替换为“like”。记住,字符串本身是不可修改的!</li>
+</ul>
+
+<h2 id="测验">测验</h2>
+
+<p>如果你是在课堂上进行这个测验，你可以把作品交给导师或教授去打分了。如果你是在自学，也可以在 <a href="https://discourse.mozilla.org/t/silly-story-generator-assessment/24686">本节测验的讨论页</a> 或者 <a href="https://wiki.mozilla.org/IRC">Mozilla 聊天室 </a>的 <a href="irc://irc.mozilla.org/mdn">#mdn</a> 频道取得帮助。要自己先尝试，作弊是不会有收获的！</p>
+
+<p>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="本章目录">本章目录</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript 是什么？</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript 初体验</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">查找并解决 JavaScript 代码的错误 </a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables">变量：储存所需信息</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math">数字和运算符：JavaScript 的基本算数</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Strings">字符串：JavaScript 文本的处理</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">字符串的一些实用方法</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays">数组</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">课程评估：笑话机</a></li>
+</ul>
diff --git a/files/zh-cn/learn/javascript/first_steps/strings/index.html b/files/zh-cn/learn/javascript/first_steps/strings/index.html
new file mode 100644
index 0000000000..36352b5f48
--- /dev/null
+++ b/files/zh-cn/learn/javascript/first_steps/strings/index.html
@@ -0,0 +1,288 @@
+---
+title: 文本处理 — JavaScript中的字符串
+slug: Learn/JavaScript/First_steps/Strings
+tags:
+  - JavaScript
+  - Join
+  - 初学者
+  - 字符串
+  - 指南
+  - 文章
+  - 脚本编写
+translation_of: Learn/JavaScript/First_steps/Strings
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">接下来，我们将把注意力转向文本片段——也就是编程中所说的<strong>字符串</strong>。在本文中，我们将了解在学习JavaScript时，您应该了解的关于字符串的所有常见事项，例如创建字符串、在字符串中转义引号，和连接字符串。</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中字符串的基本知识。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="语言的力量">语言的力量</h2>
+
+<p>语言对人类非常重要——它们是我们交流的重要组成部分。由于Web是一种主要基于文本的媒介，旨在让人们进行交流和分享信息，因此对我们来说，掌握它所出现的单词是很有用的。{{glossary("HTML")}}为我们的文本提供了结构和意义， {{glossary("CSS")}} 允许我们精确地设计它的样式，JavaScript包含许多操作字符串的特性，创建定制的欢迎消息，在需要时显示正确的文本标签，将术语排序到所需的顺序，等等。</p>
+
+<p>到目前为止，我们在课程中展示的所有程序都涉及到一些字符串操作。</p>
+
+<h2 id="字符串_—_基本知识">字符串 — 基本知识</h2>
+
+<p>字符串与数字的处理方式第一眼看上去十分相似，但是当您深入挖掘时，您将会看到一些显著的差异。让我们首先在一个控制台输入一些基本的行来熟悉一下。<br>
+ 我们在下面提供了一个(您也可以在一个单独的选项卡或窗口中<a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">打开这个控制台</a>，或者如果您愿意使用<a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">浏览器开发人员控制台</a>)。</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</p>
+
+<h3 id="创建一个字符串">创建一个字符串</h3>
+
+<ol>
+ <li>首先, 输入下面的代码:
+  <pre class="brush: js">let string = 'The revolution will not be televised.';
+string;</pre>
+  就像我们处理数字一样，我们声明一个变量，用一个字符串值初始化它，然后返回值。这里惟一的区别是，在编写字符串时，我们需要在字符串上加上引号。</li>
+ <li>如果你不这样做，或者在书写过程中，漏掉其中一个引号，你就会得到一个错误。<br>
+  试着输入以下几行:
+  <pre class="brush: js example-bad">let badString = This is a test;
+let badString = 'This is a test;
+let badString = This is a test';</pre>
+  这些行不起作用，因为没有引号的任何文本字符串都被假定为变量名、属性名、保留字或类似。如果浏览器不能找到它，那么将会引发语法错误(例如:"missing ; before statement")。<br>
+  如果浏览器能够识别字符串从哪里开始，但是不能找到字符串的结尾符，如第二行所示，那么它则会提示这样的错误(“unterminated string literal”)。如果您写的程序目前也引发这样的错误，那么请你回过头来仔细检查你的代码，看是否漏写了引号。</li>
+ <li>如果您之前定义了变量字符串，下面的操作将会起作用 — 现在来试一试:
+  <pre class="brush: js">let badString = string;
+badString;</pre>
+
+  <p>现在将 <code>string</code> 的值赋值给 <code>badString</code>，赋值之后，两个字符串的值相等。</p>
+ </li>
+</ol>
+
+<h3 id="单引号和双引号">单引号和双引号</h3>
+
+<ol>
+ <li>在JavaScript中，您可以选择单引号或双引号来包裹字符串。<br>
+  下面两种方式都可以:
+  <pre class="brush: js">let sgl = 'Single quotes.';
+let dbl = "Double quotes";
+sgl;
+dbl;</pre>
+ </li>
+ <li>两者之间几乎没有什么区别，根据个人偏好来使用。但是，您应该选择一个并坚持使用它，不一致的引号混用代码可能会让人很迷惑，特别是如果您在同一个字符串中使用不同的引号！<br>
+  下面将返回一个错误:
+  <pre class="brush: js example-bad">let badQuotes = 'What on earth?";</pre>
+ </li>
+ <li>浏览器会认为字符串没有被关闭，因为在字符串中您没有使用其他类型的引号。<br>
+  例如，这两种情况都是可以的:
+  <pre class="brush: js">let sglDbl = 'Would you eat a "fish supper"?';
+let dblSgl = "I'm feeling blue.";
+sglDbl;
+dblSgl;</pre>
+ </li>
+ <li>但是，您不能在字符串中包含相同的引号，因为它是用来包含它们的。下面将会出现错误，因为它会混淆浏览器和字符串的结束位置:
+  <pre class="brush: js example-bad">let bigmouth = 'I've got no right to take my place...';</pre>
+  这个指引将会让我们很好地进入下一个主题。</li>
+</ol>
+
+<h3 id="转义字符串中的字符">转义字符串中的字符</h3>
+
+<p>要修复我们之前的问题代码行，我们需要避免引号的问题。转义字符意味着我们对它们做一些事情，以确保它们被识别成文本，而不是代码的一部分。在JavaScript中，我们通过在字符之前放一个反斜杠来实现这一点。试试这个:</p>
+
+<pre class="brush: js">let bigmouth = 'I\'ve got no right to take my place...';
+bigmouth;</pre>
+
+<p>这回正常了。你可以用别的方式来达到一样的目的， 例如. <code>\",</code> 除此之外有一些特殊的代码 。更多细节请参见<a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#Parameters">转义符号</a>。</p>
+
+<h2 id="连接字符串">连接字符串</h2>
+
+<ol>
+ <li>连接是一个很花哨的编程词，意思是“连接在一起”。在JavaScript中连接字符串使用加号(+)操作符，我们也用它来将数字加在一起，但是在这种情况下，它做了一些不同的事情。让我们在控制台中尝试一个例子。
+  <pre class="brush: js">let one = 'Hello, ';
+let two = 'how are you?';
+let joined = one + two;
+joined;</pre>
+  变量 <code>joined</code> 的值的结果，它包含的值为 "Hello, how are you?"。</li>
+ <li>最后一个例子中， 我们只是把两个字符串连接在一起，但是你可以喜欢连接多少就多少个， 只需要在它们之间加上 + 操作符。试试这个：
+  <pre class="brush: js">let multiple = one + one + one + one + two;
+multiple;</pre>
+ </li>
+ <li>你还能用真实的字符串和变量来混合。试试这个：
+  <pre class="brush: js">let response = one + 'I am fine — ' + two;
+response;</pre>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>注意</strong>: 当您在您的代码中输入一个实际的字符串时，用单引号或双引号括起来，它被称为字符串文字。</p>
+</div>
+
+<h3 id="上下文中的串联">上下文中的串联</h3>
+
+<p>让我们看一下在操作中使用的连接——这是本课程早些时候的一个例子:</p>
+
+<pre class="brush: html">&lt;button&gt;Press me&lt;/button&gt;</pre>
+
+<pre class="brush: js">const button = document.querySelector('button');
+
+button.onclick = function() {
+  let name = prompt('What is your name?');
+  alert('Hello ' + name + ', nice to see you!');
+}</pre>
+
+<p>{{ EmbedLiveSample('上下文中的串联', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>这里我们使用的是第4行中的 {{domxref("window.prompt()", "window.prompt()")}} 函数， 它要求用户通过一个弹出对话框回答一个问题然后将他们输入的文本存储在一个给定的变量中 — 在这个例子中是就是 <code>name</code> 变量。然后，我们在第5行中使用  {{domxref("window.alert()","window.alert()")}}  函数来显示另一个弹出窗口，其中包含一个字符串，我们用两个字符串常量和name变量通过连接进行组合。</p>
+
+<h3 id="数字与字符">数字与字符</h3>
+
+<ol>
+ <li>当我们尝试添加(或连接)一个字符串和一个数字时，会发生什么?<br>
+  让我们在我们的控制台中尝试一下:
+  <pre class="brush: js">'Front ' + 242;
+</pre>
+  您可能会认为这会抛出一个错误，但它运行得很好。<br>
+  试图将字符串表示为一个数字并不是很讲的通，但是用数字表示一个字符串则不然，因此浏览器很聪明地将数字转换为字符串，并将这两个字符串连接在一起。</li>
+ <li>你甚至可以用两个数字来这么操作——你可以通过用引号将数字包装成一个字符串。尝试以下方法(我们使用typeof操作符来检查变量是一个数字还是一个字符串):
+  <pre class="brush: js">let myDate = '19' + '67';
+typeof myDate;</pre>
+ </li>
+ <li>如果您有一个数值变量，您想要将其转换为字符串，并且不改变其他地方，或者您想将一个字符串转换为一个数字而不改变其其他地方，那么您可以使用以下两个构造:
+  <ul>
+   <li>如果可以的话， {{jsxref("Number")}} 对象将把传递给它的任何东西转换成一个数字。<br>
+    试一试:
+    <pre class="brush: js">let myString = '123';
+let myNum = Number(myString);
+typeof myNum;</pre>
+   </li>
+   <li>另一方面，每个数字都有一个名为 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">toString()</a> 的方法，它将把它转换成等价的字符串。<br>
+    试试这个:
+    <pre class="brush: js">let myNum = 123;
+let myString = myNum.toString();
+typeof myString;</pre>
+   </li>
+  </ul>
+  这些结构在某些情况下是非常有用的，例如，如果一个用户将一个数字输入到一个表单文本字段中，这将是一个字符串，但是如果你想要将这个数字添加到某些东西中时，你需要它是一个数字，所以你可以通过 <code>Number()</code> 来处理这个问题。我们在<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L54">数字猜谜游戏中第54行</a>就是这么做的。</li>
+</ol>
+
+<h2 id="结论">结论</h2>
+
+<p>这就是JavaScript中所涉及的字符串的基本内容。在下一篇文章中，我们将在此基础上，研究JavaScript中字符串的一些内置方法，以及如何使用它们来操纵我们的字符串，使之成为我们想要的形式。</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</p>
+
+<p>
+ <audio style="display: none;"></audio>
+</p>
diff --git a/files/zh-cn/learn/javascript/first_steps/test_your_skills_colon__variables/index.html b/files/zh-cn/learn/javascript/first_steps/test_your_skills_colon__variables/index.html
new file mode 100644
index 0000000000..af9b56b9ae
--- /dev/null
+++ b/files/zh-cn/learn/javascript/first_steps/test_your_skills_colon__variables/index.html
@@ -0,0 +1,78 @@
+---
+title: 'Test your skills: variables'
+slug: 'Learn/JavaScript/First_steps/Test_your_skills:_variables'
+translation_of: 'Learn/JavaScript/First_steps/Test_your_skills:_variables'
+---
+<div>{{learnsidebar}}</div>
+
+<p>这个能力测试用于评估你自己是否理解了 <a href="/zh-CN/docs/Learn/JavaScript/First_steps/Variables">如何存储你需要的信息 — 变量</a> 这篇文章.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> to work on the tasks.<br>
+ <br>
+ 如果你遇到问题需要我们帮助 — 请前往在这一页的底部的 {{anch("Assessment or further help")}} 部分.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: In the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's JavaScript console, in the case of the downloadable version).</p>
+</div>
+
+<h2 id="Variables_1">Variables 1</h2>
+
+<p>In this task we want you to:</p>
+
+<ul>
+ <li>Declare a variable called <code>myName</code>.</li>
+ <li>Initialize <code>myName</code> with a suitable value, on a separate line (you can use your actual name, or something else).</li>
+ <li>Declare a variable called <code>myAge</code> and initialize it with a value, on the same line.</li>
+</ul>
+
+<p>Try updating the live code below to recreate the finished example:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/variables/variables1.html", '100%', 400)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/variables/variables1-download.html">Download the starting point for this task</a> to work in your own editor or in an online editor.</p>
+</div>
+
+<h2 id="Variables_2">Variables 2</h2>
+
+<p>In this task you need to add a new line to correct the value stored in the existing <code>myName</code> variable to your own name.</p>
+
+<p>Try updating the live code below to recreate the finished example:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/variables/variables2.html", '100%', 400)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/variables/variables2-download.html">Download the starting point for this task</a> to work in your own editor or in an online editor.</p>
+</div>
+
+<h2 id="Variables_3">Variables 3</h2>
+
+<p>The final task for now — in this case you are provided with some existing code, which has two errors present in it. The results panel should be outputting the name <code>Chris</code>, and a statement about how old Chris will be in 20 years' time. How can you fix the problem and correct the output?</p>
+
+<p>Try updating the live code below to recreate the finished example:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/variables/variables3.html", '100%', 400)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/variables/variables3-download.html">Download the starting point for this task</a> to work in your own editor or in an online editor.</p>
+</div>
+
+<h2 id="Assessment_or_further_help">Assessment or further help</h2>
+
+<p>You can practice these examples in the Interactive Editors above.</p>
+
+<p>If you would like your work assessed, or are stuck and want to ask for help:</p>
+
+<ol>
+ <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li>
+ <li>Write a post asking for assessment and/or help at the <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a>. Your post should include:
+  <ul>
+   <li>A descriptive title such as "Assessment wanted for Variables 1 skill test".</li>
+   <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li>
+   <li>A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li>
+   <li>A link to the actual task or assessment page, so we can find the question you want help with.</li>
+  </ul>
+ </li>
+</ol>
diff --git a/files/zh-cn/learn/javascript/first_steps/useful_string_methods/index.html b/files/zh-cn/learn/javascript/first_steps/useful_string_methods/index.html
new file mode 100644
index 0000000000..0dda086985
--- /dev/null
+++ b/files/zh-cn/learn/javascript/first_steps/useful_string_methods/index.html
@@ -0,0 +1,474 @@
+---
+title: 有用的字符串方法
+slug: Learn/JavaScript/First_steps/Useful_string_methods
+tags:
+  - JavaScript
+  - String
+  - 大写
+  - 字符串
+  - 小写
+  - 替换
+  - 格式
+  - 长度
+translation_of: Learn/JavaScript/First_steps/Useful_string_methods
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">现在我们学习基本的字符串语法, 让我们开始思考一下我们可以对内置方法的字符串做什么有用的操作，例如查找文本字符串的长度，加入和分割字符串， 将字符串中的一个字符替换为另一个字符。</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>明白字符串这个对象，学会使用字符串的基本方法去处理字符串</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="把字符串当作对象">把字符串当作对象</h2>
+
+<p id="Useful_string_methods">我们曾经说过，现在我们重申一遍—在javascript中，一切东西都可以被当作对象。例如我们创建一个字符串。</p>
+
+<pre class="brush: js">let string = 'This is my string';</pre>
+
+<p>一旦你的变量成为字符串对象实例, 你就可以有大量的原型和方法编辑它. 如果你进入{{jsxref("String")}}对象页并观察页面旁边的列表你就会明白这一点。</p>
+
+<p><strong>可能现在你的大脑开始迷糊了，不要担心！</strong> 在你的学习进程中你真的不需要过早地理解大部分这方面知识，但是接下来我们这儿要看的是你要经常使用的一些知识。</p>
+
+<p>现在我们在控制台中加些示例 ，我们已经提供了以下示例（你可在单独打开控制台标签或窗口，或者选择使用<a href="/zh-CN/docs/Learn/Discover_browser_developer_tools">浏览器开发者控制台</a>）</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class', 'input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</p>
+
+<h3 id="获得字符串的长度">获得字符串的长度</h3>
+
+<p>这很简单 — 你可以很轻松的使用 {{jsxref("String.prototype.length", "length")}} 属性. 尝试输入以下的两行代码：</p>
+
+<pre class="brush: js">let browserType = 'mozilla';
+browserType.length;</pre>
+
+<p>这个结果应该返回一个数字：7,因为"mozilla"的长度为7个字符. 说字符串的长度有用是有很多原因的, 例如，你可能想算出一连串名字的长度，并用名字长度来作为名字排序的依据，亦或让一个用户知道他输入的用户名太长，已经超出了输入的字符串长度限制。</p>
+
+<h3 id="检索特定字符串字符">检索特定字符串字符</h3>
+
+<p>在相关的注释中，您可以使用方括号表示法返回字符串中的任何字符 - 这意味着您可以在变量名的末尾包含方括号（[ ]）。 在方括号内，您可以包含要返回的字符的编号，例如，您要检索第一个字母，可以这样做：</p>
+
+<pre class="brush: js">browserType[0];</pre>
+
+<p>电脑从0开始，不是1！ 要检索任何字符串的最后一个字符，我们可以使用下面这行，将这种技术与我们上面看到的length属性相结合起来：</p>
+
+<pre class="brush: js">browserType[browserType.length-1];</pre>
+
+<p>“mozilla”的长度为7，但由于计数从0开始，所以字符位置为6，因此需要长度为<strong>length-1</strong>。 例如，您可以使用它来查找一系列字符串的第一个字母，并按字母顺序排列。</p>
+
+<h3 id="在字符串中查找子字符串并提取它">在字符串中查找子字符串并提取它</h3>
+
+<ol>
+ <li>有时候你会想要找出一个较小的字符串是否存在于一个较大的字符串中（我们通常会说一个字符串中存在一个子字符串）。 这可以使用{{jsxref("String.prototype.indexOf()","indexOf()")}}方法来完成，该方法需要一个{{glossary("parameter")}} — 你想要搜索的子字符串。 尝试以下：
+  <pre class="brush: js">browserType.indexOf('zilla');</pre>
+  结果是2，因为子字符串“zilla”从“mozilla”内的位置2（0，1，2 —— 所以从第3个字符）开始。 这样的代码可以用来过滤字符串。 例如，假设我们有一个Web地址列表，但我们只想打印出包含“mozilla”的那些地址。</li>
+</ol>
+
+<ol start="2">
+ <li>这可以用另一种可能更有效的方式来实现。 尝试以下：
+  <pre class="brush: js">browserType.indexOf('vanilla');</pre>
+  这应该会得到 <code>-1</code> 的结果 —— 当在主字符串中找不到子字符串（在本例中为“vanilla”）时将返回 <code>-1</code>。<br>
+  <br>
+  您可以使用它来查找不包含子串“mozilla”的所有字符串实例，或者如果使用否定运算符，请执行以下操作。 你可以这样做：
+  <pre class="brush: js">if(browserType.indexOf('mozilla') !== -1) {
+  // do stuff with the string
+}</pre>
+ </li>
+ <li>当你知道字符串中的子字符串开始的位置，以及想要结束的字符时，{{jsxref("String.prototype.slice()", "slice()")}}可以用来提取 它。 尝试以下：
+  <pre class="brush: js">browserType.slice(0,3);</pre>
+  这时返回"moz"——第一个参数是开始提取的字符位置，第二个参数是提取的最后一个字符的后一个位置。所以提取从第一个位置开始，直到但不包括最后一个位置。（此例中）你也可以说第二个参数等于被返回的字符串的长度。<br>
+   </li>
+ <li>此外，如果您知道要在某个字符之后提取字符串中的所有剩余字符，则不必包含第二个参数，而只需要包含要从中提取的字符位置 字符串中的其余字符。 尝试以下：
+  <pre class="brush: js">browserType.slice(2);</pre>
+  这返回“zilla” —— 这是因为2的字符位置是字母z，并且因为没有包含第二个参数，所以返回的子字符串是字符串中的所有剩余字符。</li>
+</ol>
+
+<div class="note">
+<p><strong>Note: </strong><code>slice()</code>的第二个参数是可选的 ：如果没有传入这个参数，分片结束位置会在原始字符串的末尾。这个方法也有其他的选项；学习{{jsxref("String.prototype.slice()", "slice()")}}这页，来看看你还能发现什么其他作用。</p>
+</div>
+
+<h3 id="转换大小写">转换大小写</h3>
+
+<p>字符串方法{{jsxref("String.prototype.toLowerCase()","toLowerCase()")}}和{{jsxref("String.prototype.toUpperCase()","toUpperCase()")}}字符串并将所有字符分别转换为小写或大写。 例如，如果要在将数据存储在数据库中之前对所有用户输入的数据进行规范化，这可能非常有用。</p>
+
+<p>让我们尝试输入以下几行来看看会发生什么：</p>
+
+<pre class="brush: js">let radData = 'My NaMe Is MuD';
+radData.toLowerCase();
+radData.toUpperCase();</pre>
+
+<h3 id="替换字符串的某部分">替换字符串的某部分</h3>
+
+<p>您可以使用{{jsxref("String.prototype.replace()","replace()")}}方法将字符串中的一个子字符串替换为另一个子字符串。在基础的层面上， 这个工作非常简单。你当然可以用它做一些更高级的事情，但目前我们不会涉及到。</p>
+
+<p>它需要两个参数 - 要被替换下的字符串和要被替换上的字符串。 尝试这个例子：</p>
+
+<pre class="brush: js">browserType.replace('moz','van');</pre>
+
+<p>注意，在实际程序中，想要真正更新 <code>browserType</code> 变量的值，您需要设置变量的值等于刚才的操作结果；它不会自动更新子串的值。所以事实上你需要这样写：<code>browserType = browserType.replace('moz','van');</code>。</p>
+
+<h2 id="主动学习的示例">主动学习的示例</h2>
+
+<p>在本节中，我们会让您尽力编写一些字符串操作代码。 在下面的每个练习中，我们有一个字符串数组，一个循环，用于处理数组中的每个值，并将其显示在项目符号列表中。 您现在不需要了解数组或循环 - 这些将在以后的文章中解释。 所有你需要做的每一种情况都是写出将以我们想要的格式输出字符串的代码。</p>
+
+<p>每个示例都附带一个“重置”按钮，您可以使用该按钮重置代码，如果您犯了错误，并且无法再次工作，并且显示解决方案按钮，您可以按下来看到一个潜在的答案，如果你真的卡住了。</p>
+
+<h3 id="过滤问候留言">过滤问候留言</h3>
+
+<p>在第一个练习中，我们将简单介绍一下 - 我们有一系列的问候卡片消息，但我们希望对它们进行排序，以列出圣诞消息。 我们希望您在 <code>if(...)</code> 结构中填写条件测试，以测试每个字符串，并将其打印在列表中，如果它是圣诞消息。</p>
+
+<ol>
+ <li>首先考虑一下如何测试每种情况下的消息是否为圣诞消息。 所有这些消息中都有什么字符串，您可以使用什么方法来测试是否存在？</li>
+ <li>然后，您需要编写<em> 操作数1 操作符 操作数2</em> 形式的条件测试。 左边的东西等于右边的东西吗？ 或者在这种情况下，方法调用在左边返回的结果在右边？</li>
+ <li>提示：在这种情况下，测试方法调用是否不等于某个结果可能更有用。</li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;div class="output" style="min-height: 125px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 290px;"&gt;
+var list = document.querySelector('.output ul');
+list.innerHTML = '';
+var greetings = ['Happy Birthday!',
+                 'Merry Christmas my love',
+                 'A happy Christmas to all the family',
+                 'You\'re all I want for Christmas',
+                 'Get well soon'];
+
+for (var i = 0; i &lt; greetings.length; i++) {
+  var input = greetings[i];
+  // Your conditional test needs to go inside the parentheses
+  // in the line below, replacing what's currently there
+  if (greetings[i]) {
+    var result = input;
+    var listItem = document.createElement('li');
+    listItem.textContent = result;
+    list.appendChild(listItem);
+  }
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  textarea.value = jsSolution;
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar greetings = [\'Happy Birthday!\',\n                 \'Merry Christmas my love\',\n                 \'A happy Christmas to all the family\',\n                 \'You\\\'re all I want for Christmas\',\n                 \'Get well soon\'];\n\nfor(var i = 0; i &lt; greetings.length; i++) {\n  var input = greetings[i];\n  if(greetings[i].indexOf(\'Christmas\') !== -1) {\n    var result = input;\n    var listItem = document.createElement(\'li\');\n    listItem.textContent = result;\n    list.appendChild(listItem);\n  }\n}';
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', '100%', 490) }}</p>
+
+<h3 id="大写修正">大写修正</h3>
+
+<p>在这个练习中，我们有英国城市的名字，但是这个大写字母都搞砸了。 我们希望你改变它们，使它们都是小写字母，除了首字母。 一个很好的方法是：</p>
+
+<ol>
+ <li>将输入变量中包含的整个字符串转换为小写，并将其存储在新变量中。</li>
+ <li>在此新变量中获取字符串的第一个字母并将其存储在另一个变量中。</li>
+ <li>将此最新变量用作子字符串，将小写字符串的第一个字母从小写更改为大写。 将此替换过程的结果存储在另一个新变量中。</li>
+ <li>让 <code>result</code> 变量的值与最终结果相等，而不是使用 <code>input</code> 变量。</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: 一个提示 - 字符串方法的参数不必是字符串文字; 它们也可以是变量，甚至是在其上调用方法的变量。</p>
+</div>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html">&lt;div class="output" style="min-height: 125px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 250px;"&gt;
+var list = document.querySelector('.output ul');
+list.innerHTML = '';
+var cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];
+for(var i = 0; i &lt; cities.length; i++) {
+  var input = cities[i];
+  // write your code just below here
+
+  var result = input;
+  var listItem = document.createElement('li');
+  listItem.textContent = result;
+  list.appendChild(listItem);
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  textarea.value = jsSolution;
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];\n\nfor(var i = 0; i &lt; cities.length; i++) {\n  var input = cities[i];\n  var lower = input.toLowerCase();\n  var firstLetter = lower.slice(0,1);\n  var capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());\n  var result = capitalized;\n  var listItem = document.createElement(\'li\');\n  listItem.textContent = result;\n  list.appendChild(listItem);\n\n}';
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', '100%', 450) }}</p>
+
+<h3 id="从原先部分得到新字符串">从原先部分得到新字符串</h3>
+
+<p>在最后一个练习中，阵列包含一堆字符串，其中包含有关英格兰北部火车站的信息。 字符串是包含三字母站代码的数据项，后面是一些机器可读数据，后跟分号，后跟可读站名。 例如：</p>
+
+<pre>MAN675847583748sjt567654;Manchester Piccadilly</pre>
+
+<p>我们要提取站点代码和名称，并将它们放在一起，具有以下结构的字符串：</p>
+
+<pre>MAN: Manchester Piccadilly</pre>
+
+<p>我们建议这样做：</p>
+
+<ol>
+ <li>提取三个字母的站代码并将其存储在一个新的变量中。</li>
+ <li>查找分号的字符索引号。</li>
+ <li>使用分号字符索引号作为参考点提取人可读的站名，并将其存储在新变量中。</li>
+ <li>连接两个新的变量和一个字符串文字，使最终的字符串。</li>
+ <li>将 <code>result</code> 变量的值更改为等于最终的字符串，而不是 <code>input</code>。</li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code_3">Playable code 3</h6>
+
+<pre class="brush: html">&lt;div class="output" style="min-height: 125px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 285px;"&gt;
+var list = document.querySelector('.output ul');
+list.innerHTML = '';
+var stations = ['MAN675847583748sjt567654;Manchester Piccadilly',
+                'GNF576746573fhdg4737dh4;Greenfield',
+                'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',
+                'SYB4f65hf75f736463;Stalybridge',
+                'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];
+
+for (var i = 0; i &lt; stations.length; i++) {
+  var input = stations[i];
+  // write your code just below here
+
+  var result = input;
+  var listItem = document.createElement('li');
+  listItem.textContent = result;
+  list.appendChild(listItem);
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  textarea.value = jsSolution;
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',\n                \'GNF576746573fhdg4737dh4;Greenfield\',\n                \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',\n                \'SYB4f65hf75f736463;Stalybridge\',\n                \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];\n\nfor(var i = 0; i &lt; stations.length; i++) {\n  var input = stations[i];\n  var code = input.slice(0,3);\n  var semiC = input.indexOf(\';\');\n  var name = input.slice(semiC + 1);\n  var final = code + \': \' + name;\n  var result = final;\n var listItem = document.createElement(\'li\');\n  listItem.textContent = result;\n  list.appendChild(listItem);\n}';
+
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_3', '100%', 485) }}</p>
+
+<h2 id="结论">结论</h2>
+
+<p>你不能逃避的事实是在编程中处理单词和句子是非常重要的——特别是在JavaScript中，因为网站都是关于与人沟通的。 本文已经给出了您现在需要了解的关于操作字符串的基础知识。这将在未来进入更复杂的主题时为您服务。 接下来，我们将在短期内研究我们需要关注的最后一个主要的数据类型——数组。</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p>
diff --git a/files/zh-cn/learn/javascript/first_steps/variables/index.html b/files/zh-cn/learn/javascript/first_steps/variables/index.html
new file mode 100644
index 0000000000..3ba4e02f60
--- /dev/null
+++ b/files/zh-cn/learn/javascript/first_steps/variables/index.html
@@ -0,0 +1,431 @@
+---
+title: 如何存储你需要的信息 — 变量
+slug: Learn/JavaScript/First_steps/Variables
+tags:
+  - 初始化
+  - 变量
+  - 声明
+  - 字符串
+  - 数组
+translation_of: Learn/JavaScript/First_steps/Variables
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">在读完之前的一些文章之后，你现在应该大概知道了JavaScript是什么，你能用它干什么，它是怎么跟其他web技术（HTML，CSS）协同工作的，以及它有哪些主要特性。在本章节，我们将开始学习JavaScript的基础，了解如何使用 -- 变量。</p>
+
+<table class="learn-box">
+ <tbody>
+  <tr>
+   <th scope="row">预备知识:</th>
+   <td>电脑基础知识，了解基本的 HTML 和 CSS，了解JavaScript是什么。</td>
+  </tr>
+  <tr>
+   <th scope="row">目标:</th>
+   <td>熟悉JavaScript的变量使用</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="需要的工具">需要的工具</h2>
+
+<p>在本章中，你将要输入一些代码来测试你对相关内容的理解。如果你是用的桌面浏览器，输入这些代码最好的地方是浏览器的JavaScript终端，(参考 <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">什么是浏览器开发工具</a> 查看如何使用这些工具)。</p>
+
+<p>当然，我们也提供了一个简单的JavaScript终端，嵌入在下文的页面中，以便你更容易的输入和测试这些代码。</p>
+
+<h2 id="变量是什么">变量是什么?</h2>
+
+<p>一个变量，就是一个用于存放数值的容器。这个数值可能是一个用于累加计算的数字，或者是一个句子中的字符串。变量的独特之处在于它存放的数值是可以改变的。让我们看一个简单的例子:</p>
+
+<pre class="brush: html notranslate">&lt;button&gt;Press me&lt;/button&gt;</pre>
+
+<pre class="brush: js notranslate">const button = document.querySelector('button');
+
+button.onclick = function() {
+  let name = prompt('What is your name?');
+  alert('Hello ' + name + ', nice to see you!');
+}</pre>
+
+<p>{{ EmbedLiveSample('变量是什么', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>在上面的例子中，点击按钮之后，第一行代码会在屏幕上弹出一个对话框，让你输入名字，然后存储输入的名字到一个变量。第二行代码将会显示包含你名字的欢迎信息，你的名字就是从之前的变量里面读取的。</p>
+
+<p>为了理解变量的作用，我们可以思考一下，如果不使用变量，我们实现上述功能的代码将是这样的：</p>
+
+<pre class="example-bad notranslate">let name = prompt('What is your name?');
+
+if (name === 'Adam') {
+  alert('Hello Adam, nice to see you!');
+} else if (name === 'Alan') {
+  alert('Hello Alan, nice to see you!');
+} else if (name === 'Bella') {
+  alert('Hello Bella, nice to see you!');
+} else if (name === 'Bianca') {
+  alert('Hello Bianca, nice to see you!');
+} else if (name === 'Chris') {
+  alert('Hello Chris, nice to see you!');
+}
+
+// ... and so on ...</pre>
+
+<p>你可能暂时还没有完全理解这些代码和语法，但是你应该能够理解到 -- 如果我们没有变量，我们就不得不写大量的代码去枚举和检查输入的名字，然后去显示它们。这样做显然是低效率和不可行的 -- 你没有办法列举出所有可能的输入。</p>
+
+<p>变量的另一个特性就是它们能够存储任何的东西 -- 不只是字符串和数字。变量可以存储更复杂的数据，甚至是函数。你将在后续的内容中体验到这些用法。</p>
+
+<p><u><strong>我们说，变量是用来存储数值的，那么有一个重要的概念需要区分。变量不是数值本身，它们仅仅是一个用于存储数值的容器。你可以把变量想象成一个个用来装东西的纸箱子。</strong></u></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13506/boxes.png" style="display: block; height: 436px; margin: 0px auto; width: 1052px;"></p>
+
+<h2 id="声明变量">声明变量</h2>
+
+<p>要想使用变量，你需要做的第一步就是创建它 -- 更准确的说，是声明一个变量。声明一个变量的语法是在 <code>var</code> 或 <code>let</code> 关键字之后加上这个变量的名字：</p>
+
+<pre class="brush: js notranslate">let myName;
+let myAge;</pre>
+
+<p>在这里我们声明了两个变量 <code>myName</code> 和 <code>myAge</code>. 那么现在尝试输入这些代码到你的浏览器终端或者下面提供的JavaScript终端 (你也可以在另一个独立的标签页或窗口 <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">open this consol</a> ). 此外，你也可以多声明几个变量.</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    let geval = eval;
+    function createInput() {
+      let inputDiv = document.createElement('div');
+      let inputPara = document.createElement('p');
+      let inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        let result = geval(e.target.value);
+      } catch(e) {
+        let result = 'error — ' + e.message;
+      }
+
+      let outputDiv = document.createElement('div');
+      let outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>提示</strong>: 在JavaScript中，所有代码指令都会以分号结尾 (<code>;</code>) — 如果忘记加分号，你的单行代码可能执行正常，但是在多行代码在一起的时候就可能出错。所以，最好是养成主动以分号作为代码结尾的习惯。</p>
+</div>
+
+<p>你可以通过使用变量的方式来验证这个变量的数值是否在执行环境中已经存在。例如，</p>
+
+<pre class="brush: js notranslate">myName;
+myAge;</pre>
+
+<p>以上这两个变量并没有数值，他们是空的容器。当你输入变量名并回车后，你会得到一个<code>undefined</code>的返回值。如果他们并不存在的话，那你就会得到一个报错信息。不信的话，可以尝试输入:</p>
+
+<pre class="brush: js notranslate">scoobyDoo;</pre>
+
+<div class="note">
+<p><strong>提示</strong>: 千万不要把两个概念弄混淆了，“一个变量存在，但是没有数值”和“一个变量并不存在” — 他们完全是两回事 — 在前面你看到的盒子的类比中，不存在意味着没有可以存放变量的“盒子”。没有定义的值意味着有一个“盒子”，但是它里面没有任何值。</p>
+</div>
+
+<h2 id="初始化变量">初始化变量</h2>
+
+<p>一旦你定义了一个变量，你就能够初始化它. 方法如下，在变量名之后跟上一个“=”，然后是数值:</p>
+
+<pre class="brush: js notranslate">myName = 'Chris';
+myAge = 37;</pre>
+
+<p>现在回到控制台并且尝试输入这几行。每输入一条你都应该确认一下控制台输出的变量是不是你刚赋的值。 同样，你可以通过在控制台中输入变量的名称来返回该变量的值 — 再次尝试下这些:</p>
+
+<pre class="brush: js notranslate">myName;
+myAge;</pre>
+
+<p>你可以像这样在声明变量的时候给变量初始化:</p>
+
+<pre class="brush: js notranslate">let myName = 'Chris';</pre>
+
+<p>这可能是大多数时间你都会使用的方式， 因为它要比在单独的两行上做两次操作要快。</p>
+
+<div class="note">
+<p><strong>Note</strong>: 如果你写一个声明和初始化变量的多行JavaScript代码的程序，你可以在初始化变量之后再实际声明它，并且它仍然可以工作。这是因为变量的声明通常在其余的代码执行之前完成。这叫做<strong>顶置</strong>—阅读<a href="/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">var hoisting</a>来了解更多细节。</p>
+</div>
+
+<h2 id="var_与_let_的区别">var 与 let 的区别</h2>
+
+<p>此时，您可能会想：“为什么我们需要两个关键字来定义变量?”，“为什么有 <code>var</code> 和 <code>let</code> 呢？"。</p>
+
+<p>原因是有些历史性的。 回到最初创建 JavaScript 时，是只有 <code>var</code> 的。 在大多数情况下，这种方法可以接受， 但有时在工作方式上会有一些问题——它的设计会令人困惑或令人讨厌 。 因此，<code>let</code> 是在现代版本中的 JavaScript 创建的一个新的关键字，用于创建与 <code>var</code> 工作方式有些不同的变量，解决了过程中的问题。</p>
+
+<p>下面解释几个简单的差异。 我们现在不会讨论所有的差异，但是当您了解有关 JavaScript 的更多信息时，您将开始发现它们（如果您现在真的想要阅读它们，请随时查看我们的<a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">参考页面</a>）。</p>
+
+<p>首先，如果你编写一个声明并初始化变量的多行 JavaScript 程序，你可以在初始化一个变量之后用 <code>var</code> 声明它，它仍然可以工作。 例如：</p>
+
+<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">myName <span class="operator token">=</span> <span class="string token">'Chris'</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">logName</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>myName<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="function token">logName</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+var myName<span class="punctuation token">;</span></code></pre>
+
+<div class="blockIndicator note">
+<p>Note: 只有在 web 文档中运行多行 JavaScript 时才会有这种效果，当在 JavaScript 控制台中键入单独的行，这将不起作用。</p>
+</div>
+
+<p>这是由于变量的<strong>提升</strong>，更多细节请阅读<a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/var#变量提升">变量提升</a>。</p>
+
+<p>但提升操作不再适用于 <code>let</code> 。如果将上面例子中的 <code>var</code> 替换成 <code>let</code> 将不起作用并引起一个错误。 这是一件好事——因为初始化后再声明一个变量会使代码变得混乱和难以理解。</p>
+
+<p>其次，当你使用 <code>var</code> 时，可以根据需要多次声明相同名称的变量，但是 <code>let</code> 不能。 以下将有效：</p>
+
+<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> myName <span class="operator token">=</span> <span class="string token">'Chris'</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> myName <span class="operator token">=</span> <span class="string token">'Bob'</span><span class="punctuation token">;</span></code></pre>
+
+<p>但是以下内容会在第二行引发错误：</p>
+
+<pre class="brush: js example-bad notranslate"><code class="language-js"><span class="keyword token">let</span> myName <span class="operator token">=</span> <span class="string token">'Chris'</span><span class="punctuation token">;</span>
+<span class="keyword token">let</span> myName <span class="operator token">=</span> <span class="string token">'Bob'</span><span class="punctuation token">;</span></code></pre>
+
+<p>你必须这样做：</p>
+
+<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> myName <span class="operator token">=</span> <span class="string token">'Chris'</span><span class="punctuation token">;</span>
+myName <span class="operator token">=</span> <span class="string token">'Bob'</span><span class="punctuation token">;</span></code></pre>
+
+<p>同样，这是一个明智的语言决定。没有理由重新声明变量——这只会让事情变得更加混乱。</p>
+
+<p>出于这些以及其他原因，我们建议您在代码中尽可能多地使用 <code>let</code>，而不是 <code>var</code>。因为没有理由使用 <code>var</code>，除非您需要用代码支持旧版本的 Internet Explorer (它直到第 11 版才支持 <code>let</code> ，现代的 Windows Edge 浏览器支持的很好)。</p>
+
+<div class="blockIndicator note">
+<p>  <strong>Note: </strong>我们目前正在更新课程以使用let而不是var。 忍耐一下！</p>
+</div>
+
+<h2 id="更新变量">更新变量</h2>
+
+<p>一旦变量赋值，您可以通过简单地给它一个不同的值来更新它。试试在你的控制台中输入下面几行:</p>
+
+<pre class="brush: js notranslate">myName = 'Bob';
+myAge = 40;</pre>
+
+<h3 id="关于变量命名的规则">关于变量命名的规则</h3>
+
+<p>你可以给你的变量赋任何你喜欢的名字，但有一些限制。 一般你应当坚持使用拉丁字符(0-9,a-z,A-Z)和下划线字符。</p>
+
+<ul>
+ <li>你不应当使用规则之外的其他字符，因为它们可能引发错误，或对国际用户来说难以理解。</li>
+ <li>变量名不要以下划线开头—— 以下划线开头的被某些JavaScript设计为特殊的含义，因此可能让人迷惑。</li>
+ <li>变量名不要以数字开头。这种行为是不被允许的，并且将引发一个错误。</li>
+ <li>一个可靠的命名约定叫做 <a href="https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms">"小写驼峰命名法"</a>，用来将多个单词组在一起，小写整个命名的第一个字母然后大写剩下单词的首字符。我们已经在文章中使用了这种命名方法。</li>
+ <li>让变量名直观，它们描述了所包含的数据。不要只使用单一的字母/数字，或者长句。</li>
+ <li>变量名大小写敏感——因此<code>myage</code>与<code>myAge</code>是2个不同的变量。</li>
+ <li>最后也是最重要的一点—— 你应当避免使用JavaScript的保留字给变量命名。保留字，即是组成JavaScript的实际语法的单词！因此诸如 <code>var</code>, <code>function</code>, <code>let和</code> <code>for</code>等，都不能被作为变量名使用。浏览器将把它们识别为不同的代码项，因此你将得到错误。</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: 你能从<a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">词汇语法—关键字</a>找到一个相当完整的保留关键字列表来避免使用关键字当作变量。</p>
+</div>
+
+<p>好的命名示例:</p>
+
+<pre class="example-good notranslate">age
+myAge
+init
+initialColor
+finalOutputValue
+audio1
+audio2</pre>
+
+<p>错误与差的命名示例:</p>
+
+<pre class="example-bad notranslate">1
+a
+_12
+myage
+MYAGE
+var
+Document
+skjfndskjfnbdskjfb
+thisisareallylongstupidvariablenameman</pre>
+
+<p>现在尝试创建更多的变量，请将上面的指导铭记于心。</p>
+
+<h2 id="变量类型">变量类型</h2>
+
+<p>可以为变量设置不同的数据类型。本节我们将对其进行简短的介绍，在以后的文章中，你会更详细地了解它们。</p>
+
+<p>到目前为止我们已经认识了前2个，但是还有其他的。</p>
+
+<h3 id="Number">Number</h3>
+
+<p>你可以在变量中存储数字，不论这些数字是像30（也叫整数）这样，或者像2.456这样的小数（也叫做浮点数）。与其他编程语言不同，在 JavaScript 中你不需要声明一个变量的类型。当你给一个变量数字赋值时，不需要用引号括起来。 </p>
+
+<pre class="brush: js notranslate">let myAge = 17;</pre>
+
+<h3 id="String">String</h3>
+
+<p>字符串是文本的一部分。当你给一个变量赋值为字符串时，你需要用单引号或者双引号把值给包起来，否则JavaScript将会把这个字符串值理解成别的变量名。</p>
+
+<pre class="brush: js notranslate">let dolphinGoodbye = 'So long and thanks for all the fish';</pre>
+
+<h3 id="Boolean">Boolean</h3>
+
+<p>Boolean 的值有2种：true或false。它们通常被用于在适当的代码之后，测试条件是否成立。举个例子，一个简单的示例如下： </p>
+
+<pre class="brush: js notranslate">let iAmAlive = true;</pre>
+
+<p>然而实际上通常是以下用法：</p>
+
+<pre class="brush: js notranslate">let test = 6 &lt; 3;</pre>
+
+<p>这是使用“小于”操作符（&lt;）来测试6小于3。正如你所料的，将会返回<code>false</code>，因为6并不小于3！在这个课程中，以后你将会学到许多有关操作符的知识。</p>
+
+<h3 id="Array">Array</h3>
+
+<p>数组是一个单个对象，其中包含很多值，方括号括起来，并用逗号分隔。尝试在您的控制台输入以下行:</p>
+
+<pre class="brush: js notranslate">let myNameArray = ['Chris', 'Bob', 'Jim'];
+let myNumberArray = [10,15,40];</pre>
+
+<p>当数组被定义后，您可以使用如下所示的语法来访问各自的值，例如下行:</p>
+
+<pre class="brush: js notranslate">myNameArray[0]; // should return 'Chris'
+myNumberArray[2]; // should return 40</pre>
+
+<p>此处的方括号包含一个索引值，该值指定要返回的值的位置。 您可能已经注意到，计算机从0开始计数，而不是像我们人类那样的1。</p>
+
+<p>在以后的文章，你将更多地了解数组。</p>
+
+<h3 id="Object">Object</h3>
+
+<p>在编程中，对象是现实生活中的模型的一种代码结构。您可以有一个简单的对象，代表一个停车场，并包含有关其宽度和长度的信息，或者您可以有一个代表一个人的对象，并包含有关他们的名字，身高，体重，他们说什么语言，如何说 你好，他们，等等。</p>
+
+<p>尝试在您的控制台输入以下行:</p>
+
+<pre class="brush: js notranslate">let dog = { name : 'Spot', breed : 'Dalmatian' };</pre>
+
+<p>要检索存储在对象中的信息，可以使用以下语法:</p>
+
+<pre class="brush: js notranslate">dog.name</pre>
+
+<p>我们现在不会看对象了 - 您可以在将来的模块中了解更多关于这些对象的信息.</p>
+
+<h2 id="动态类型">动态类型</h2>
+
+<p>JavaScript是一种“动态类型语言”，这意味着不同于其他一些语言(译者注：如C、JAVA)，您不需要指定变量将包含什么数据类型（例如number或string）</p>
+
+<p>例如，如果你声明一个变量并给它一个带引号的值，浏览器就会知道它是一个字符串：</p>
+
+<pre class="brush: js notranslate">let myString = 'Hello';</pre>
+
+<p>即使它包含数字，但它仍然是一个字符串，所以要小心：</p>
+
+<pre class="brush: js notranslate">let myNumber = '500'; // oops, this is still a string
+typeof myNumber;
+myNumber = 500; // much better — now this is a number
+typeof myNumber</pre>
+
+<p>尝试依次将上述代码输入您的控制台，看看结果是什么（无须输入//之后的注释）。 我们使用了一个名为<code>typeof</code>的特殊的操作符 ——它会返回所传递给它的变量的数据类型。 第一次在上面的代码中调用它，它应该返回string，因为此时myNumber变量包含一个字符串'500'。 看看它第二次将返回什么。</p>
+
+<h2 id="总结">总结</h2>
+
+<p>到目前为止，您应该了解了一些JavaScript变量以及如何创建它们。 在下一篇文章中，我们将更详细地关注数字，了解如何在JavaScript中使用基础数学。</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="在此模块内">在此模块内</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</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>
diff --git a/files/zh-cn/learn/javascript/first_steps/what_is_javascript/index.html b/files/zh-cn/learn/javascript/first_steps/what_is_javascript/index.html
new file mode 100644
index 0000000000..b62daa5a1d
--- /dev/null
+++ b/files/zh-cn/learn/javascript/first_steps/what_is_javascript/index.html
@@ -0,0 +1,501 @@
+---
+title: 什么是 JavaScript？
+slug: Learn/JavaScript/First_steps/What_is_JavaScript
+tags:
+  - API
+  - JavaScript
+  - 初学者
+  - 核心
+  - 浏览器
+translation_of: Learn/JavaScript/First_steps/What_is_JavaScript
+---
+<div dir="ltr">{{LearnSidebar}}</div>
+
+<div dir="ltr">{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary" dir="ltr">欢迎来到 MDN 的 JavaScript 初学者课程！本节将在一定高度俯瞰 JavaScript，回答一些诸如“它是什么？”和“它能做什么？”的问题 。并使你熟悉 JavaScript 的用途。</p>
+
+<table class="learn-box standard-table" dir="ltr">
+ <tbody>
+  <tr>
+   <th scope="row">预备知识:</th>
+   <td>计算机基础知识，初步理解 HTML 和 CSS 。</td>
+  </tr>
+  <tr>
+   <th scope="row">目标:</th>
+   <td>初步了解 JavaScript，包括一些概念、用途、嵌入网站的方法。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 dir="ltr" id="广义的定义">广义的定义</h2>
+
+<p dir="ltr">JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。JavaScript 怎能缺席。它是标准 Web 技术蛋糕的第三层，其中 <a href="/en-US/docs/Learn/HTML">HTML </a>和 <a href="/en-US/docs/Learn/CSS">CSS </a>我们已经在学习中心的其他部分进行了详细的讲解。</p>
+
+<p><img alt="" dir="ltr" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; height: 291px; margin: 0px auto; width: 300px;"></p>
+
+<ul dir="ltr">
+ <li>{{glossary("HTML")}}是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。</li>
+ <li>{{glossary("CSS")}} 是一种样式规则语言，可将样式应用于 HTML 内容， 例如设置背景颜色和字体，在多个列中布局内容。</li>
+ <li>{{glossary("JavaScript")}} 是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（好吧，虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。）</li>
+</ul>
+
+<p dir="ltr">这三层依次建立，秩序井然。以文本标签(text label)的简单示例。首先用 HTML 将文本标记起来，从而赋予它结构和目的：</p>
+
+<pre class="brush: html notranslate" dir="rtl">&lt;p&gt;玩家1：小明&lt;/p&gt;</pre>
+
+<p dir="ltr">玩家1：小明</p>
+
+<p dir="ltr">然后我们可以为它加一点 CSS 让它更好看：</p>
+
+<pre class="brush: css notranslate" dir="rtl">p {
+  font-family: sans-serif, '黑体';
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-align: center;
+  border: 2px solid rgba(0, 0, 200, 0.6);
+  background: rgba(0, 0, 200, 0.3);
+  color: rgba(0, 0, 200, 0.6);
+  box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
+  border-radius: 10px;
+  padding: 3px 10px;
+  display: inline-block;
+  cursor: pointer;
+}</pre>
+
+<div class="hidden" dir="ltr">
+<h6 id="Beautiful_name_label">Beautiful name label</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;&lt;head&gt;&lt;style&gt;
+p {
+  font-family: sans-serif, '黑体';
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-align: center;
+  border: 2px solid rgba(0, 0, 200, 0.6);
+  background: rgba(0, 0, 200, 0.3);
+  color: rgba(0, 0, 200, 0.6);
+  box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
+  border-radius: 10px;
+  padding: 3px 10px;
+  display: inline-block;
+  cursor: pointer;
+}
+&lt;/style&gt;&lt;/head&gt;
+&lt;body&gt;
+&lt;p&gt;玩家1：小明&lt;/p&gt;
+&lt;/body&gt;&lt;/html&gt;</pre>
+</div>
+
+<p dir="ltr">{{ EmbedLiveSample('Beautiful_name_label', '100%', 80, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p dir="ltr">最后，我们可以再加上一些 JavaScript 来实现动态行为：</p>
+
+<pre class="brush: js notranslate" dir="rtl">const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('输入一个新的名字：');
+  para.textContent = '玩家1：' + name;
+}
+</pre>
+
+<div class="hidden" dir="ltr">
+<h6 id="Customizable_name_label">Customizable name label</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;&lt;head&gt;&lt;style&gt;
+p {
+font-family: sans-serif, '黑体';
+letter-spacing: 1px;
+text-transform: uppercase;
+text-align: center;
+border: 2px solid rgba(0,0,200,0.6);
+background: rgba(0,0,200,0.3);
+color: rgba(0,0,200,0.6);
+box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
+border-radius: 10px;
+padding: 3px 10px;
+display: inline-block;
+cursor: pointer;
+}
+&lt;/style&gt;&lt;/head&gt;
+&lt;body&gt;
+&lt;p&gt;玩家1：小明&lt;/p&gt;
+&lt;script&gt;
+const para = document.querySelector('p');
+para.addEventListener('click', updateName);
+function updateName() {
+  const name = prompt('输入一个新的名字：');
+  para.textContent = '玩家1：' + name;
+}
+&lt;/script&gt;
+&lt;/body&gt;&lt;/html&gt;</pre>
+</div>
+
+<p dir="ltr">{{ EmbedLiveSample('Customizable_name_label', '100%', 80, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p dir="ltr">尝试点击最后一个版本的文本标签，观察会发生什么（也可在 GitHub 上查看这个 demo 的 <a class="external external-icon" href="https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">源代码</a> 或 <a class="external external-icon" href="https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">在线运行</a>。）</p>
+
+<p dir="ltr">JavaScript 能做的远不止这些。让我们来仔细探索。</p>
+
+<h2 dir="ltr" id="它到底可以做什么？">它到底可以做什么？</h2>
+
+<p dir="ltr">客户端（client-side）JavaScript 语言的核心包含一些普遍的编程特性，以让你可以做到如下的事情：</p>
+
+<ul dir="ltr">
+ <li>在变量中储存有用的值。比如上文的示例中，我们请求客户输入一个新名字，然后将其储存到 <code>name</code> 变量中。</li>
+ <li>操作一段文本（在编程中称为“字符串”（string））。上文的示例中，我们取字符串 "玩家1："，然后把它和 <code>name</code> 变量连结起来，创造出完整的文本标签，比如："玩家1：小明"。</li>
+ <li>运行代码以响应网页中发生的特定事件。上文的示例中，我们用一个 {{Event("click")}} 事件来检测按钮什么时候被点击，然后运行代码更新文本标签。</li>
+ <li>以及更多！</li>
+</ul>
+
+<p dir="ltr">JavaScript 语言核心之上所构建的功能更令人兴奋。<strong>应用程序接口（Application Programming Interfaces</strong>（<strong>API</strong>））将为你的代码提供额外的超能力。</p>
+
+<p dir="ltr">API 是已经建立好的一套代码组件，可以让开发者实现原本很难甚至无法实现的程序。就像现成的家具套件之于家居建设，用一些已经切好的木板组装一个书柜，显然比自己设计，寻找合适的木材，裁切至合适的尺寸和形状，找到正确尺寸的螺钉，再组装成书柜要简单得多。</p>
+
+<p dir="ltr">API 通常分为两类。</p>
+
+<p><img alt="" dir="ltr" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p>
+
+<p dir="ltr"><strong>浏览器 API</strong> 内建于 web 浏览器中，它们可以将数据从周边计算机环境中筛选出来，还可以做实用的复杂工作。例如：</p>
+
+<ul dir="ltr">
+ <li>{{domxref("Document_Object_Model","文档对象模型 API（DOM（Document Object Model）API）")}} 能通过创建、移除和修改 HTML，为页面动态应用新样式等手段来操作 HTML 和 CSS。比如当某个页面出现了一个弹窗，或者显示了一些新内容（像上文小 demo 中看到那样），这就是 DOM 在运行。</li>
+ <li>{{domxref("Geolocation","地理位置 API（Geolocation API）")}} 获取地理信息。这就是为什么 <a href="https://www.google.cn/maps">谷歌地图</a> 可以找到你的位置，而且标示在地图上。</li>
+ <li>{{domxref("Canvas_API","画布（Canvas）")}} 和 {{domxref("WebGL_API","WebGL")}} API 可以创建生动的 2D 和 3D 图像。人们正运用这些 web 技术制作令人惊叹的作品。参见 <a href="https://www.chromeexperiments.com/webgl">Chrome Experiments</a> 以及 <a href="http://webglsamples.org/">webglsamples</a>。</li>
+ <li>诸如 {{domxref("HTMLMediaElement")}} 和 {{domxref("WebRTC API", "WebRTC")}} 等 <a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">影音类 API</a> 让你可以利用多媒体做一些非常有趣的事，比如在网页中直接播放音乐和影片，或用自己的网络摄像头获取录像，然后在其他人的电脑上展示（试用简易版 <a href="http://chrisdavidmills.github.io/snapshot/">截图 demo</a> 以理解这个概念）。</li>
+</ul>
+
+<div class="note" dir="ltr">
+<p><strong>注</strong>: 上述很多演示都不能在旧浏览器中运行。推荐你在测试代码时使用诸如 Firefox, Chrome, Edge 或者 Opera 等现代浏览器。当代码即将交付生产环境时（也就是真实的客户即将使用真实的代码时），你还需要深入考虑 <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">跨平台测试</a>。</p>
+</div>
+
+<p dir="ltr"><strong>第三方 API </strong>并没有默认嵌入浏览器中，一般要从网上取得它们的代码和信息。比如：</p>
+
+<ul dir="ltr">
+ <li><a href="https://dev.twitter.com/overview/documentation">Twitter API</a>、<a href="https://open.weibo.com/">新浪微博 API</a> 可以在网站上展示最新推文之类。</li>
+ <li><a href="https://developers.google.com/maps/">谷歌地图 API</a>、<a href="https://lbs.amap.com/">高德地图 API</a> 可以在网站嵌入定制的地图等等。</li>
+</ul>
+
+<div class="note" dir="ltr">
+<p><strong>注</strong>：这些 API 较为高级，我们的课程中不会涉及，更多信息请参考：<a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs">客户端 web API 模块</a>.</p>
+</div>
+
+<p dir="ltr">先稳住！你看到的只是冰山一角。你不可能学一天 JavaScript 就能构建下一个Facebook, 谷歌地图, 或者 Instagram。敬请「牢记初心，砥砺前行」。</p>
+
+<h2 dir="ltr" id="JavaScript_在页面上做了什么？">JavaScript 在页面上做了什么？</h2>
+
+<p dir="ltr">现在我们实实在在的学习一些代码，与此同时，探索 JavaScript 运行时背后发生的事情。</p>
+
+<p dir="ltr">让我们简单回顾一下，浏览器在读取一个网页时都发生什么（<a href="/zh-CN/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">CSS 如何工作</a> 一文中首次谈及）。浏览器在读取一个网页时，代码（HTML, CSS 和 JavaScript）将在一个运行环境（浏览器标签页）中得到执行。就像一间工厂，将原材料（代码）加工为一件产品（网页）。</p>
+
+<p><img alt="" dir="ltr" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p>
+
+<p dir="ltr">在 HTML 和 CSS 集合组装成一个网页后，浏览器的 JavaScript 引擎将执行 JavaScript 代码。这保证了当 JavaScript 开始运行之前，网页的结构和样式已经就位。</p>
+
+<p dir="ltr">这样很好，因为JavaScript 最普遍的用处是通过 DOM API（见上文）动态修改 HTML 和 CSS 来更新用户界面 （user interface）。如果 JavaScript 在 HTML 和 CSS 就位之前加载运行，就会引发错误。</p>
+
+<h3 dir="ltr" id="浏览器安全">浏览器安全</h3>
+
+<p dir="ltr">每个浏览器标签页就是其自身用来运行代码的独立容器（这些容器用专业术语称为“运行环境”）。大多数情况下，每个标签页中的代码完全独立运行，而且一个标签页中的代码不能直接影响另一个标签页（或者另一个网站）中的代码。这是一个好的安全措施，如果不这样，黑客就可以从其他网站盗取信息，等等。</p>
+
+<div class="note" dir="ltr">
+<p><strong>注</strong>：以安全的方式在不同网站/标签页中传送代码和数据的方法是存在的，但这些技术较为高级，本课程不会涉及。</p>
+</div>
+
+<h3 dir="ltr" id="JavaScript_运行次序">JavaScript 运行次序</h3>
+
+<p dir="ltr">当浏览器执行到一段 JavaScript 代码时，通常会按从上往下的顺序执行这段代码。这意味着你需要注意代码书写的顺序。比如，我们回到第一个例子中的 JavaScript 代码：</p>
+
+<pre class="brush: js notranslate" dir="rtl">const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('输入一个新的名字：');
+  para.textContent = '玩家1：' + name;
+}</pre>
+
+<p dir="ltr">这里我们选定一个文本段落（第 1 行)，然后给它附上一个事件监听器（第 3 行），使得在它被点击时，<code>updateName()</code> 代码块（code block） （5 – 8 行）便会运行。<code>updateName()</code> （这类可以重复使用的代码块称为“函数”）向用户请求一个新名字，然后把这个名字插入到段落中以更新显示。</p>
+
+<p dir="ltr">如果你互换了代码里最初两行的顺序，会导致问题。浏览器<a href="zh-CN/docs/Learn/Discover_browser_developer_tools">开发者控制台</a>将返回一个错误： <code>TypeError: para is undefined</code>。这意味着 <code>para</code> 对象还不存在，所以我们不能为它增添一个事件监听器。</p>
+
+<div class="note" dir="ltr">
+<p><strong>注</strong>：这是一个很常见的错误，在引用对象之前必须确保该对象已经存在。</p>
+</div>
+
+<h3 dir="ltr" id="解释代码_vs_编译代码">解释代码 vs 编译代码</h3>
+
+<p dir="ltr">作为程序员，你或许听说过这两个术语：<strong>解释（</strong><strong>interpret）</strong>和 <strong>编译(compile)</strong>。在解释型语言中，代码自上而下运行，且实时返回运行结果。代码在由浏览器执行前，不需要将其转化为其他形式。代码将直接以文本格式（text form）被接收和处理。</p>
+
+<p dir="ltr">相对的，编译型语言需要先将代码转化（编译）成另一种形式才能运行。比如 C/C++ 先被编译成汇编语言，然后才能由计算机运行。程序将以二进制的格式运行，这些二进制内容是由程序源代码产生的。</p>
+
+<p dir="ltr">JavaScript 是轻量级解释型语言。浏览器接受到JavaScript代码，并以代码自身的文本格式运行它。技术上，几乎所有 JavaScript 转换器都运用了一种叫做即时编译（just-in-time compiling）的技术；当 JavaScript 源代码被执行时，它会被编译成二进制的格式，使代码运行速度更快。尽管如此，JavaScript 仍然是一门解释型语言，因为编译过程发生在代码运行中，而非之前。</p>
+
+<p dir="ltr">两种类型的语言各有优势，这个问题我们暂且不谈。</p>
+
+<h3 dir="ltr" id="服务器端代码_vs_客户端代码">服务器端代码 vs 客户端代码</h3>
+
+<p dir="ltr">你或许还听说过<strong>服务器端（server-side）</strong>和 <strong>客户端（client-side）</strong>代码这两个术语，尤其是在web开发时。客户端代码是在用户的电脑上运行的代码，在浏览一个网页时，它的客户端代码就会被下载，然后由浏览器来运行并展示。这就是<strong>客户端 JavaScript</strong>。</p>
+
+<p dir="ltr">而服务器端代码在服务器上运行，接着运行结果才由浏览器下载并展示出来。流行的服务器端 web 语言包括：PHP、Python、Ruby、ASP.NET 以及...... JavaScript！JavaScript 也可用作服务器端语言，比如现在流行的 Node.js 环境，你可以在我们的 <a href="/zh-CN/docs/Learn/Server-side">动态网页 - 服务器端编程</a> 主题中找到更多关于服务器端 JavaScript 的知识。</p>
+
+<h3 dir="ltr" id="动态代码_vs_静态代码">动态代码 vs 静态代码</h3>
+
+<p dir="ltr">“<strong>动态</strong>”一词既适用于客户端 JavaScript，又适用于描述服务器端语言。是指通过按需生成新内容来更新 web 页面 / 应用，使得不同环境下显示不同内容。服务器端代码会在服务器上动态生成新内容，例如从数据库中提取信息。而客户端 JavaScript 则在用户端浏览器中动态生成新内容，比如说创建一个新的 HTML 表格，用从服务器请求到的数据填充，然后在网页中向用户展示这个表格。两种情况的意义略有不同，但又有所关联，且两者（服务器端和客户端）经常协同作战。</p>
+
+<p dir="ltr">没有动态更新内容的网页叫做“<strong>静态</strong>”页面<strong>，</strong>所显示的内容不会改变。</p>
+
+<h2 dir="ltr" id="怎样向页面添加_JavaScript？">怎样向页面添加 JavaScript？</h2>
+
+<p dir="ltr">可以像添加 CSS 那样将 JavaScript 添加到 HTML 页面中。CSS 使用 {{htmlelement("link")}} 元素链接外部样式表，使用 {{htmlelement("style")}} 元素向 HTML 嵌入内部样式表，JavaScript 这里只需一个元素——{{htmlelement("script")}}。我们来看看它是怎么工作的。</p>
+
+<h3 dir="ltr" id="内部_JavaScript">内部 JavaScript</h3>
+
+<ol dir="ltr">
+ <li>首先，下载示例文件 <a href="https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html" id="92a6bf0d0009a65dbe8e2051e58c9e9c-69e65808c197b337a320d1613964f0ea3e3ba5f1" title="apply-javascript.html">apply-javascript.html</a>。放在一个好记的文件夹里。</li>
+ <li>分别在浏览器和文本编辑器中打开这个文件。你会看到这个 HTML 文件创建了一个简单的网页，其中有一个可点击按钮。</li>
+ <li><font face="Open Sans, Arial, sans-serif">然后转到文本编辑器，在 </font><code>&lt;/body&gt;</code> 标签结束前插入以下代码：
+  <pre class="brush: html notranslate">&lt;script&gt;
+
+  // 在此编写 JavaScript 代码
+
+&lt;/script&gt;</pre>
+ </li>
+ <li>下面，在 {{htmlelement("script")}} 元素中添加一些 JavaScript 代码，这个页面就能做一些更有趣的事。在“/ /在此编写 JavaScript 代码”一行下方添加以下代码：
+  <pre class="brush: js notranslate">document.addEventListener("DOMContentLoaded", function() {
+  function createParagraph() {
+    let para = document.createElement('p');
+    para.textContent = '你点击了这个按钮！';
+    document.body.appendChild(para);
+  }
+
+  const buttons = document.querySelectorAll('button');
+
+  for(let i = 0; i &lt; buttons.length ; i++) {
+    buttons[i].addEventListener('click', createParagraph);
+  }
+});</pre>
+ </li>
+ <li>保存文件并刷新浏览器，然后你会发现，点击按钮文档下方将会添加一个新段落。</li>
+</ol>
+
+<div class="note" dir="ltr">
+<p><strong>注</strong>: 如果示例不能正常工作，请依次检查所有步骤，并保证没有纰漏。原始文件是否以 <code>.html</code> 为扩展名保存到本地了？<code>&lt;/body&gt;</code> 标签前是否添加了 {{htmlelement("script")}} 元素？JavaScript 代码输入是否正确 ？ <strong>JavaScript 是区分大小写的，而且非常精确，所以你需要准确无误地输入所示的句法，否则可能会出错。</strong></p>
+</div>
+
+<div class="note" dir="ltr">
+<p><strong>注</strong>: 你可以在 GitHub 上查看此版本 <a class="external external-icon" href="https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-internal.html</a> (<a class="external external-icon" href="https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">也可在线查看</a>)。</p>
+</div>
+
+<h3 dir="ltr" id="外部_JavaScript">外部 JavaScript</h3>
+
+<p dir="ltr">这很不错，但是能不能把 JavaScript 代码放置在一个外部文件中呢？现在我们来研究一下。</p>
+
+<ol dir="ltr">
+ <li>首先，在刚才的 HTML 文件所在的目录下创建一个名为 <code>script.js</code> 的新文件。请确保扩展名为 <code>.js</code>，只有这样才能被识别为 JavaScript 代码。</li>
+ <li>将 {{htmlelement("script")}} 元素替换为：
+  <pre class="brush: html notranslate">&lt;script src="script.js" async&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>在 <code>script.js</code> 文件中，添加下面的脚本：
+  <pre class="brush: js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">createParagraph</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  let para <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  para<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'你点击了这个按钮！'</span><span class="punctuation token">;</span>
+  document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>para<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code>
+
+const buttons <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">'button'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">for</span><span class="punctuation token">(let</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> buttons<span class="punctuation token">.</span>length <span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  buttons<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> createParagraph<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span> </pre>
+ </li>
+ <li>保存并刷新浏览器，你会发现二者完全一样。但是现在我们把 JavaScript 写进了一个外部文件。这样做一般会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯。</li>
+</ol>
+
+<div class="note" dir="ltr">
+<p><strong>注</strong>：你可以在 GitHub 上查看这个版本 <a class="external external-icon" href="https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-external.html</a> 以及 <a class="external external-icon" href="https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> (<a class="external external-icon" href="https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">也可在线查看</a>).</p>
+</div>
+
+<h3 dir="ltr" id="内联_JavaScript_处理器">内联 JavaScript 处理器</h3>
+
+<p dir="ltr">注意，有时候你会遇到在 HTML 中存在着一丝真实的 JavaScript 代码。它或许看上去像这样：</p>
+
+<pre class="brush: js example-bad line-numbers  language-js notranslate" dir="rtl"><code class="language-js"><span class="keyword token">function</span> <span class="function token">createParagraph</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  const para <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  para<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'你点击了这个按钮！'</span><span class="punctuation token">;</span>
+  document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>para<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<pre class="brush: html example-bad notranslate" dir="rtl">&lt;button onclick="createParagraph()"&gt;点我呀&lt;/button&gt;</pre>
+
+<p dir="ltr">你可以在下面尝试这个版本的 demo。</p>
+
+<div class="hidden" dir="ltr">
+<h6 id="Inline_JavaScript">Inline JavaScript</h6>
+
+<pre class="brush: html notranslate"><code>&lt;!DOCTYPE html&gt;</code>
+<code>&lt;html lang="zh-CN"&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript 示例&lt;/title&gt;
+    &lt;script&gt;
+     </code><code class="language-js"><span class="keyword token">function</span> <span class="function token">createParagraph</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+       const para <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+       para<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'你点击了这个按钮！'</span><span class="punctuation token">;</span>
+       document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>para<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">     }</span></code>
+<code>    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;button onclick="createParagraph()"&gt;点我呀&lt;/button&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</code>
+
+</pre>
+</div>
+
+<p dir="ltr">{{ EmbedLiveSample('Inline_JavaScript', '100%', 150, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p dir="ltr">这个 demo 与之前的两个功能完全一致，只是在 {{htmlelement("button")}} 元素中包含了一个内联的 <code>onclick</code> 处理器，使得函数在按钮被按下时运行。</p>
+
+<p dir="ltr"><strong>然而请不要这样做。</strong> 这将使 JavaScript 污染到 HTML，而且效率低下。对于每个需要应用 JavaScript 的按钮，你都得手动添加 <code>onclick="createParagraph()"</code> 属性。</p>
+
+<p dir="ltr">可以使用纯 JavaScript 结构来通过一个指令选取所有按钮。下文的这段代码即实现了这一目的：</p>
+
+<pre class="brush: js notranslate" dir="rtl">const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+
+<p dir="ltr">这样写乍看去比 <code>onclick</code> 属性要长一些，但是这样写会对页面上所有按钮生效，无论多少个，或添加或删除，完全无需修改 JavaScript 代码。</p>
+
+<div class="note" dir="ltr">
+<p><strong>注</strong>：请尝试修改 <code>apply-javascript.html</code> 以添加更多按钮。刷新后可发现按下任一按钮时都会创建一个段落。很高效吧。</p>
+</div>
+
+<h3 dir="ltr" id="脚本调用策略">脚本调用策略</h3>
+
+<p dir="ltr">要让脚本调用的时机符合预期，需要解决一系列的问题。这里看似简单，实际大有文章。最常见的问题就是：HTML 元素是按其在页面中出现的次序调用的，如果用 JavaScript 来管理页面上的元素（更精确的说法是使用 <a href="/zh-CN/docs/Web/API/Document_Object_Model">文档对象模型</a> DOM），若 JavaScript 加载于欲操作的 HTML 元素之前，则代码将出错。</p>
+
+<p dir="ltr">在上文的“内部”、“外部”示例中，JavaScript 调用于文档头处，解析 HTML 文档体之前。这样做是有隐患的，需要使用一些结构来避免错误发生。</p>
+
+<p dir="ltr">“内部”示例使用了以下结构：</p>
+
+<pre class="brush: js notranslate" dir="rtl">document.addEventListener("DOMContentLoaded", function() {
+  . . .
+});</pre>
+
+<p dir="ltr">这是一个事件监听器，它监听浏览器的 "<code>DOMContentLoaded</code>" 事件，即 HTML 文档体加载、解释完毕事件。事件触发时将调用 " <code>. . .</code>" 处的代码，从而避免了错误发生（<a href="/zh-CN/docs/Learn/JavaScript/Building_blocks/Events">事件</a> 的概念稍后学习）。</p>
+
+<p dir="ltr">“外部”示例中使用了 JavaScript 的一项现代技术（<code>async</code> “异步”属性）来解决这一问题，它告知浏览器在遇到 <code>&lt;script&gt;</code> 元素时不要中断后续 HTML 内容的加载。</p>
+
+<pre class="brush: html notranslate" dir="rtl">&lt;script src="script.js" async&gt;&lt;/script&gt;</pre>
+
+<p dir="ltr">上述情况下，脚本和 HTML 将一并加载，代码将顺利运行。</p>
+
+<div class="blockIndicator note" dir="ltr">
+<p><strong>注</strong>：“外部”示例中 <code>async</code> 属性可以解决调用顺序问题，因此无需使用 <code>DOMContentLoaded</code> 事件。而 <code>async</code> 只能用于外部脚本，因此不适用于“内部”示例。</p>
+</div>
+
+<p dir="ltr">解决此问题的旧方法是：把脚本元素放在文档体的底端（<code>&lt;/body&gt;</code> 标签之前，与之相邻），这样脚本就可以在 HTML 解析完毕后加载了。此方案（以及上述的 <code>DOMContentLoaded</code> 方案）的问题是：只有在所有 HTML DOM 加载完成后才开始脚本的加载/解析过程。对于有大量 JavaScript 代码的大型网站，可能会带来显著的性能损耗。这也是 <code>async</code> 属性诞生的初衷。</p>
+
+<h4 dir="ltr" id="async_和_defer"><code>async</code> 和 <code>defer</code></h4>
+
+<p dir="ltr">上述的脚本阻塞问题实际有两种解决方案 —— <code>async</code> 和 <code>defer</code>。我们来依次讲解。</p>
+
+<p dir="ltr">浏览器遇到 <code>async</code> 脚本时不会阻塞页面渲染，而是直接下载然后运行。这样脚本的运行次序就无法控制，只是脚本不会阻止剩余页面的显示。当页面的脚本之间彼此独立，且不依赖于本页面的其它任何脚本时，<code>async</code> 是最理想的选择。</p>
+
+<p dir="ltr">比如，如果你的页面要加载以下三个脚本：</p>
+
+<pre class="brush: html notranslate" dir="rtl">&lt;script async src="js/vendor/jquery.js"&gt;&lt;/script&gt;
+
+&lt;script async src="js/script2.js"&gt;&lt;/script&gt;
+
+&lt;script async src="js/script3.js"&gt;&lt;/script&gt;</pre>
+
+<p dir="ltr">三者的调用顺序是不确定的。<code>jquery.js</code> 可能在 <code>script2</code> 和 <code>script3</code> 之前或之后调用，如果这样，后两个脚本中依赖 <code>jquery</code> 的函数将产生错误，因为脚本运行时 <code>jquery</code> 尚未加载。</p>
+
+<p dir="ltr">解决这一问题可使用 <code>defer</code> 属性，脚本将按照在页面中出现的顺序加载和运行：</p>
+
+<pre class="brush: html notranslate" dir="ltr">&lt;script defer src="js/vendor/jquery.js"&gt;&lt;/script&gt;
+
+&lt;script defer src="js/script2.js"&gt;&lt;/script&gt;
+
+&lt;script defer src="js/script3.js"&gt;&lt;/script&gt;</pre>
+
+<p dir="ltr">添加 <code>defer</code> 属性的脚本将按照在页面中出现的顺序加载，因此第二个示例可确保 <code>jquery.js</code> 必定加载于 <code>script2.js</code> 和 <code>script3.js</code> 之前，同时 <code>script2.js</code> 必定加载于 <code>script3.js</code> 之前。</p>
+
+<p dir="ltr">脚本调用策略小结：</p>
+
+<ul dir="ltr">
+ <li>如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 <code>async</code>。</li>
+ <li>如果脚本需要等待页面解析，且依赖于其它脚本，调用这些脚本时应使用 <code>defer</code>，将关联的脚本按所需顺序置于 HTML 中。</li>
+</ul>
+
+<h2 dir="ltr" id="注释">注释</h2>
+
+<p dir="ltr">就像 HTML 和 CSS，JavaScript 代码中也可以添加注释，浏览器会忽略它们，注释只是为你的同事（还有你，如果半年后再看自己写的代码你会说，这是什么垃圾玩意。）提供关于代码如何工作的指引。注释非常有用，而且应该经常使用，尤其在大型应用中。注释分为两类：</p>
+
+<ul dir="ltr">
+ <li>在双斜杠后添加单行注释，比如：
+  <pre class="brush: js notranslate">// 我是一条注释</pre>
+ </li>
+ <li>在 <code>/*</code> 和 <code>*/</code> 之间添加多行注释，比如：
+  <pre class="brush: js notranslate">/*
+  我也是
+  一条注释
+*/</pre>
+ </li>
+</ul>
+
+<p dir="ltr">比如说，我们可以这样为上一个 demo 添加注释：</p>
+
+<pre class="brush: js notranslate" dir="rtl">// 函数：创建一个新的段落并添加至 HTML body 底部。
+function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = '你点了这个按钮！';
+  document.body.appendChild(para);
+}
+
+/*
+  1. 取得页面上所有按钮的引用并将它们置于一个数组中。
+  2. 通过一个循环为每个按钮添加一个点击事件的监听器。
+  当按钮被点击时，调用 createParagraph() 函数。
+*/
+
+const buttons = document.querySelectorAll('button');
+
+for (let i = 0; i &lt; buttons.length; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+
+<h2 dir="ltr" id="小结">小结</h2>
+
+<p dir="ltr">恭喜你，迈出了探索 JavaScript 世界的第一步。我们从理论开始，介绍为什么要使用 JavaScript，以及用它能做什么事情。过程中穿插了一些代码示例并讲解了 JavaScript 如何与网站中其他代码适配，等等。</p>
+
+<p dir="ltr">现在 JavaScript 或许还有些令人生畏，但不用担心。在课程中我们会循序渐进。下一节将<a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash"> 全力投入实战</a>，让你专注其中，并建立自己的 JavaScript 示例。</p>
+
+<p dir="ltr">{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 dir="ltr" id="本章目录">本章目录</h2>
+
+<ul dir="ltr">
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript 是什么？</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript 初体验</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/What_went_wrong">查找并解决 JavaScript 代码的错误 </a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Variables">变量：储存所需信息</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Math">数字和运算符：JavaScript 的基本算数</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Strings">字符串：JavaScript 文本的处理</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Useful_string_methods">字符串的一些实用方法</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Arrays">数组</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Silly_story_generator">课程评估：笑话机</a></li>
+</ul>
+
+<p>
+ <audio style="display: none;"></audio>
+</p>
diff --git a/files/zh-cn/learn/javascript/first_steps/what_went_wrong/index.html b/files/zh-cn/learn/javascript/first_steps/what_went_wrong/index.html
new file mode 100644
index 0000000000..b36d8be3df
--- /dev/null
+++ b/files/zh-cn/learn/javascript/first_steps/what_went_wrong/index.html
@@ -0,0 +1,284 @@
+---
+title: 查找并解决 JavaScript 代码的错误
+slug: Learn/JavaScript/First_steps/What_went_wrong
+tags:
+  - JavaScript
+  - 初学者
+  - 开发者工具
+  - 指导教程
+  - 文章
+  - 调试
+  - 错误
+translation_of: Learn/JavaScript/First_steps/What_went_wrong
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">上一节中你创建了“猜数字”游戏，但它可能没有正常工作。别担心，本节将为你提供一些简单的提示，来帮助你查找并修复JavaScript程序中的错误，从而让你远离困扰。</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>获得独立修复简单问题的能力和信心。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="错误类型">错误类型</h2>
+
+<p>一般来说，代码错误主要分为两种：</p>
+
+<ul>
+ <li><strong>语法错误</strong>：代码中存在拼写错误，将导致程序完全或部分不能运行，通常你会收到一些出错信息。只要熟悉语言并了解出错信息的含义，你就能够顺利修复它们。</li>
+ <li><strong>逻辑错误</strong>：有些代码语法虽正确，但执行结果和预期相悖，这里便存在着逻辑错误。这意味着程序虽能运行，但会给出错误的结果。由于一般你不会收到来自这些错误的提示，它们通常比语法错误更难修复。</li>
+</ul>
+
+<p>事情远没有你想的那么简单，随着探究的深入，会有更多差异因素浮出水面。但在编程生涯的初级阶段上述分类方法已足矣。下面我们将依次分析。</p>
+
+<h2 id="一个出错的示例">一个出错的示例</h2>
+
+<p>让我们重回猜数字游戏，这次我们将故意引入一些错误。请到Github下载一份 <a href="https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a> （或 <a class="external external-icon" href="https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">在线运行</a>）。</p>
+
+<ol>
+ <li>请分别在你的文本编辑器和浏览器中打开刚下载的文件。</li>
+ <li>先试玩游戏，你会发现在点击“确定”按钮时，游戏并没有响应。</li>
+</ol>
+
+<div class="note">
+<p><strong>注</strong>：你可能还在为修复你自己版本的游戏头疼，但我们仍然希望你先用我们的版本来完成这一节，这样你才能学到本节中的技术。然后再去修复自己的游戏也不晚。</p>
+</div>
+
+<p>首先查看开发者控制台，看是否存在语法错误，然后尝试修复。详见下文。</p>
+
+<h2 id="修复语法错误">修复语法错误</h2>
+
+<p>以前的课程中，你学会了在 <a href="/zh-CN/docs/Learn/Common_questions/What_are_browser_developer_tools">开发工具 JavaScript 控制台</a> 中输入一些简单的 JavaScript 命令。（如果你忘记了如何在浏览器中打开它，可以直接打开上面的链接）。更实用的是，当 JavaScript 代码进入浏览器的 JavaScript 引擎时，如果存在语法错误，控制台会提供出错信息。现在我们去看一看。</p>
+
+<ol>
+ <li>
+  <p class="brush: bash">打开 <code>number-game-errors.html</code> 所在的标签页，然后打开 JavaScript 控制台。你将看到以下出错信息：</p>
+  <img alt="不是函数" src="https://mdn.mozillademos.org/files/16256/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7_2018-10-17_20.27.08.png" style="display: block; height: 1116px; margin: 0px auto; width: 1564px;"></li>
+ <li>这个错误很容易跟踪，浏览器为你提供了几条有用的信息（截图来自 Firefox，其他浏览器也提供类似信息）。从左到右依次为：</li>
+</ol>
+
+<ul>
+ <li>红色 “!” 表示这是一个错误。</li>
+ <li>一条出错信息，表示问题出在哪儿：“TypeError：<strong>guessSubmit</strong>.addeventListener is not a function”（类型错误：<strong>guessSubmit</strong>.addeventListener 不是函数）</li>
+ <li>点击[详细了解]将跳转到一个 MDN 页面，其中包含了此类错误超详细的解释。</li>
+ <li>JavaScript 文件名，点击将跳转到开发者工具的“调试器”标签页。 如果你按照这个链接，你会看到错误突出显示的确切行。</li>
+ <li>出错的行，以及导致错误的首个字符号。这里错误来自 86 行，第 3 个字符。</li>
+</ul>
+
+<ol start="3">
+ <li>我们在代码编辑器中找到第 86 行：</li>
+</ol>
+
+<pre class="brush: js notranslate">guessSubmit.addeventListener('click', checkGuess);</pre>
+
+<ol start="4">
+ <li>出错信息显示“guessSubmit.addeventListener 不是一个函数”，说明这里可能存在拼写错误。如果你不确定某语法的拼写是否正确，可以到 MDN 上去查找，目前最简便的方法就是去你喜欢的搜索引擎搜索“MDN + 语言<em>特性”。就本文当前内容你可以点击</em>：<code><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>。</li>
+ <li>因此这里错误显然是我们把函数名写错造成的。请记住，JavaScript 区分大小写，所以任何轻微的不同或大小写问题都会导致出错。将 <code>addeventListener</code> 改为 <code>addEventListener</code> 便可解决。</li>
+</ol>
+
+<div class="note">
+<p><strong>注：</strong>更多信息请参考 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Errors/Not_a_function">类型错误：“x”不是一个函数</a>。</p>
+</div>
+
+<h3 id="语法错误：第二轮">语法错误：第二轮</h3>
+
+<ol>
+ <li>保存页面并刷新，可以看到出错信息不见了。</li>
+ <li>现在，如果尝试输入一个数字并按确定按钮，你会看到...另一个错误！ <img alt="" src="https://mdn.mozillademos.org/files/16264/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7_2018-10-17_21.56.00.png" style="display: block; height: 1266px; margin: 0px auto; width: 1646px;"></li>
+ <li>此次出错信息为“TypeError：lowOrHi is null”（“类型错误：lowOrHi为null”），在第 78 行。
+  <div class="note"><strong>注</strong>：<code><a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Null">Null</a></code>是一个特殊值，意思是“什么也没有”，或者“没有值”。这表示 <code>lowOrHi</code> 已声明并初始化，但没有任何有意义的值，可以说：它没有类型没有值。</div>
+
+  <div class="note"><strong>注</strong>：这条错误没有在页面加载时立即发生，是因为它发生在函数内部（<code>checkGuess() { ... }</code>块中）。函数内部的代码运行于一个外部代码相互独立的域内，后面函数的文章中将更详细地讲解。此时此刻，只有当代码运行至86行并调用 <code>checkGuess()</code> 函数时，代码才会抛出出错信息。</div>
+ </li>
+ <li>请观察第 78 行代码：
+  <pre class="brush: js notranslate">lowOrHi.textContent = '你猜高了！';</pre>
+ </li>
+ <li>该行试图将 <code>lowOrHi</code> 变量中的<code> textContent</code> 属性设置为一个字符串，但是失败了，这是因为 <code>lowOrHi</code> 并不包含预期的内容。为了一探究竟，你可以在代码中查找一下该变量的的其他实例。<code>lowOrHi</code> 最早出现于第 48 行：
+  <pre class="brush: js notranslate">const lowOrHi = document.querySelector('lowOrHi');</pre>
+ </li>
+ <li>此处，我们试图让该变量包含一个指向文档 HTML 中特定元素的引用。我们来检查一下在该行代码执行后变量的值是否为 <code>null</code>。在第 49 行添加以下代码：
+  <pre class="brush: js notranslate">console.log(lowOrHi);</pre>
+
+  <div class="note">
+  <p><strong>注</strong>：<code><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Console/log">console.log()</a></code> 是一个非常实用的调试功能，它可以把值打印到控制台。因此我们将其置于代码第 48 行时，它会将 <code>lowOrHi</code> 的值打印至控制台。</p>
+  </div>
+ </li>
+ <li>保存并刷新，你将在控制台看到 <code>console.log()</code> 的执行结果：<img alt="" src="https://mdn.mozillademos.org/files/16275/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7_2018-10-18_16.43.40.png" style="display: block; height: 1246px; margin: 0px auto; width: 1606px;"> 显然，此处 <code>lowOrHi</code> 的值为 <code>null</code>，所以第 48 行肯定有问题。</li>
+ <li>我们来思考问题有哪些可能。第 48 行使用 <code><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector">document.querySelector()</a></code> 方法和一个 CSS 选择器来取得一个元素的引用。进一步查看我们的文件，我们可以找到有问题的段落：
+  <pre class="brush: js notranslate">&lt;p class="lowOrHi"&gt;&lt;/p&gt;</pre>
+ </li>
+ <li>这里我们需要一个类选择器，它应以一个点开头（<code>.</code>），但被传递到第 48 行的<code>querySelector()</code>方法中的选择器没有点。这可能是问题所在！尝试将第 48 行中的<code> lowOrHi</code> 改成 <code>.lowOrHi</code>。</li>
+ <li>再次保存并刷新，此时 <code>console.log()</code> 语句应该返回我们想要的 <code>&lt;p&gt;</code> 元素。终于把错误搞定了！此时你可以把 <code>console.log()</code> 一行删除，或保留它以便随后参考。选择权在你。</li>
+</ol>
+
+<div class="note">
+<p><strong>注</strong>：此错误的更多详细信息请参阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Errors/Unexpected_type">类型错误：“x”（不）是“y”</a>。</p>
+</div>
+
+<h3 id="语法错误：第三轮">语法错误：第三轮</h3>
+
+<ol>
+ <li>现在，如果你再次试玩，你离成功更进了一步。游戏过程按部就班，直到猜测正确或机会用完，游戏结束。</li>
+ <li>此时如果点击“开始新游戏”，游戏将再次出错，抛出与开始时同样的错误——“TypeError：resetButton.addeventListener is not a function”！这次它来自第 94 行。</li>
+ <li>查看第 94 行，很容易看到我们犯了同样的错误。我们只需要再次将 <code>addeventListener </code>改为 <code>addEventListener</code>。现在就改吧。</li>
+</ol>
+
+<h2 id="逻辑错误">逻辑错误</h2>
+
+<p>此时，游戏应该可以顺利进行了。但经过几次试玩后你一定会注意到要猜的随机数不是 0 就是 1。这可不是我们期望的！</p>
+
+<p>游戏的逻辑肯定是哪里出现了问题，因为游戏并没有返回错误，只是不能正确运行。</p>
+
+<ol>
+ <li>寻找<code> randomNumber</code> 变量和首次设定随机数的代码。保存着游戏开始时玩家要猜的随机数的实例大约在 44 行：
+
+  <pre class="brush: js notranslate">let randomNumber = Math.floor(Math.random()) + 1;</pre>
+
+  <p>重新开始游戏产生随机数的设定语句大约在 113 行：</p>
+
+  <pre class="brush: js notranslate">randomNumber = Math.floor(Math.random()) + 1;</pre>
+ </li>
+ <li>为了检查问题是否来自这两行，我们要再次转到我们的朋友-控制台：在两行代码之后各插入下面的代码：
+  <pre class="brush: js notranslate">console.log(randomNumber);</pre>
+ </li>
+ <li>保存并刷新，然后试玩，你会看到在控制台显示的随机数总是等于1。</li>
+</ol>
+
+<h3 id="修正逻辑错误">修正逻辑错误</h3>
+
+<p>为了解决这个问题，让我们来思考这行代码如何工作。首先，我们调用 <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code>,它生成一个在 0 和 1 之间的十进制随机数，例如 0.5675493843。</p>
+
+<pre class="brush: js notranslate">Math.random()
+</pre>
+
+<p>接下来，我们把调用 <code>Math.random()</code> 的结果作为参数传递给 <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code>，它会舍弃小数部分返回与之最接近的整数。然后我们给这个结果加上1：</p>
+
+<pre class="notranslate">Math.floor(Math.random()) + 1
+</pre>
+
+<p>由于将一个 0 和 1 之间的随机小数的小数部分舍弃，返回的整数一定为 0，因此在此基础上加 1 之后返回值一定为 1。要在舍弃小数部分之前将它乘以100。便可得到 0 到 99 之间的随机数：</p>
+
+<pre class="brush: js notranslate">Math.floor(Math.random() * 100);
+</pre>
+
+<p>然后再加 1，便可得到一个 100 以内随机的自然数:</p>
+
+<pre class="brush: js notranslate">Math.floor(Math.random() * 100) + 1;</pre>
+
+<p>将上述两行内容替换为此，然后保存刷新，游戏终于如期运行了！</p>
+
+<h2 id="其它常见错误">其它常见错误</h2>
+
+<p>代码中还会遇到其他常见错误。 本节将指出其中的大部分。</p>
+
+<h3 id="SyntaxError_missing_before_statement_（语法错误：语句缺少分号）">SyntaxError: missing ; before statement<br>
+ （语法错误：语句缺少分号）</h3>
+
+<p>这个错误通常意味着你漏写了一行代码最后的分号，但是此类错误有时候会更加隐蔽。例如如果我们把 <code>checkGuess()</code> 函数中的这一行 :</p>
+
+<pre class="brush: js notranslate">let userGuess = Number(guessField.value);
+</pre>
+
+<p>改成</p>
+
+<pre class="brush: js notranslate">let userGuess === Number(guessField.value);
+</pre>
+
+<p>将抛出一个错误。因为系统认为你在做其他事情。请不要把赋值运算符（<code>=</code>，为一个变量赋值）和严格等于运算符（<code>===</code>，比较两个值是否相等，返回 <code>true</code>/<code>false</code>）弄混淆。</p>
+
+<div class="note">
+<p><strong>注：</strong>此错误的更多详细信息请参考 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements">SyntaxError: missing ; before statement</a> 。</p>
+</div>
+
+<h3 id="不管输入什么程序总说“你猜对了！”">不管输入什么程序总说“你猜对了！”</h3>
+
+<p>这是混淆赋值和严格等于运算符的又一症状。例如我们把 <code>checkGuess()</code> 里的：</p>
+
+<pre class="brush: js notranslate">if (userGuess === randomNumber) {</pre>
+
+<p>改成</p>
+
+<pre class="brush: js notranslate">if (userGuess = randomNumber) {
+</pre>
+
+<p>因为条件永远返回 <code>true</code>，使得程序报告你猜对了。小心哦！</p>
+
+<h3 id="SyntaxError_missing_after_argument_list_（语法错误：参数表末尾缺少括号）">SyntaxError: missing ) after argument list<br>
+ （语法错误：参数表末尾缺少括号）</h3>
+
+<p>这个很简单。通常意味着函数/方法调用后的结束括号忘写了。</p>
+
+<div class="note">
+<p><strong>注：</strong>有关此错误的更多详细信息请参考： <a href="/zh-CN/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: missing ) after argument list</a>。</p>
+</div>
+
+<h3 id="SyntaxError_missing_after_property_id_（语法错误：属性ID后缺少冒号）">SyntaxError: missing : after property id<br>
+ （语法错误：属性ID后缺少冒号）</h3>
+
+<p>JavaScript 对象的形式有错时通常会导致此类错误，如果把</p>
+
+<pre class="brush: js notranslate">function checkGuess() {</pre>
+
+<p>写成了</p>
+
+<pre class="brush: js notranslate">function checkGuess( {</pre>
+
+<p>浏览器会认为我们试图将函数的内容当作参数传回函数。写圆括号时要小心！</p>
+
+<h3 id="SystaxError_missing_after_function_body_（语法错误：函数体末尾缺少花括号）">SystaxError: missing } after function body<br>
+ （语法错误：函数体末尾缺少花括号）</h3>
+
+<p>这个简单。通常意味着函数或条件结构中丢失了一个花括号。如果我们将 <code>checkGuess()</code> 函数末尾的花括号删除，就会得到这个错误。</p>
+
+<h3 id="SyntaxError_expected_expression_got_string_（语法错误：得到一个_string_而非表达式）">SyntaxError: expected expression, got '<em>string</em>'<br>
+ （语法错误：得到一个 '<em>string</em>' 而非表达式）</h3>
+
+<p>或者</p>
+
+<h3 id="SyntaxError_unterminated_string_literal_（语法错误：字符串字面量未正常结束）">SyntaxError: unterminated string literal<br>
+ （语法错误：字符串字面量未正常结束）</h3>
+
+<p>这个错误通常意味着字符串两端的引号漏写了一个。如果你漏写了字符串开始的引号，将得到第一条出错信息，这里的 '<em>string' </em>将被替换为浏览器发现的意外字符。如果漏写了末尾的引号将得到第二条。</p>
+
+<p>对于所有的这些错误，想想我们在实例中是如何逐步解决的。错误出现时，转到错误所在的行观察是否能发现问题所在。记住，错误不一定在那一行，错误的原因也可能和我们在上面所说的不同！</p>
+
+<div class="note">
+<p><strong>注：</strong> 有关这些错误的更多详细信息请参考：<a href="/zh-CN/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: Unexpected token</a> 以及 <a href="/zh-CN/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal">SyntaxError: unterminated string literal</a>。</p>
+</div>
+
+<h2 id="小结">小结</h2>
+
+<p>我们有了能够在简单的 JavaScript 程序中除错的基础知识。解决代码中的错误并不总是那么简单，但至少本节内容可以为刚刚踏上学习之路的你节省出几个小时来补觉，同时让问题更快速得到解决。</p>
+
+<h2 id="另请参阅">另请参阅</h2>
+
+<ul>
+ <li>许多错误不能一一的在这里列出来，我们正在编写一个参考文档来详细说明它们的含义。请参阅 <a href="/zh-CN/docs/Web/JavaScript/Reference/Errors">JavaScript 出错信息参考</a>.</li>
+ <li>如果你在阅读了本文之后遇到了一些错误但不知如何解决，你能够得到别人的帮助！ <span class="short_text" id="result_box" lang="zh-CN"><span>可以到<a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294"> 学习区</a></span></span> 或者 <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> 的 <a href="irc://irc.mozilla.org/mdn">#mdn</a> 聊天室来提问。告诉我们你遇到的错误是什么，我们会尽量帮助你。附加一段你的代码也是很有用的。</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="本章目录">本章目录</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript 是什么？</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript 初体验</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">查找并解决 JavaScript 代码的错误 </a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables">变量：储存所需信息</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math">数字和运算符：JavaScript 的基本算数</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Strings">字符串：JavaScript 文本的处理</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">字符串的一些实用方法</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays">数组</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">课程评估：笑话机</a></li>
+</ul>