Translation[CN]: basics

Author: glenntfung

cn/basics/README.md

@@ -0,0 +1,36 @@
+---
+layout: editorial
+chapter: 2
+pageNumber: 11
+description: Programming means writing code. A book is made up of chapters, paragraphs, sentences, phrases, words, and finally punctuation and letters, likewise a program can be broken down into smaller and smaller components.
+---
+
+
+# 第2章
+
+# 基础
+
+在本章的开头，我们将学习编程与 JavaScript 语言的基础知识。
+
+编程就是编写代码。就像一本书由章、段落、句子、词组、单词，最终到标点符号与字母构成一样，程序也可以被拆分为越来越小的组成部分。当前最重要的部分是“语句”。语句类似于书中的句子。它自身有结构与目的，但如果脱离周围其他语句的上下文，它的意义就不那么充分。
+
+语句在口语中（也是更常见的说法）被称为一 *行代码*。这是因为语句通常写在单独的行上。因此，程序是自上而下、从左到右阅读的。你也许会好奇，什么是代码（也称源代码）。这是一个很宽泛的术语，既可以指整个程序，也可以指最小的部分。因此，一行代码就是你程序中的一行。
+
+下面是一个简单示例：
+
+```javascript
+let hello = "Hello";
+let world = "World";
+
+// message等于 "Hello World"
+let message = hello + " " + world;
+```
+
+这段代码可以由另一个称为 *解释器* 的程序来执行，它会读取代码并以正确的顺序执行所有语句。
+
+在本章中，我们将探讨以下主题：
+
+* [注释](./comments.md)
+* [相等性](./equality.md)
+* [类型](./types.md)
+* [变量](./variables.md)

cn/basics/comments.md

@@ -0,0 +1,82 @@
+---
+chapter: 2
+pageNumber: 12
+description: Comments are used to mark annotations for other programmers or small descriptions about the code that helps others to understand it. These statement are not executed by the interpreter.
+---
+
+# 注释
+
+注释是不会被解释器执行的语句。它们用于为其他程序员做标注或对代码的作用进行简短说明，从而让他人更容易理解你的代码。注释也可用于在不影响程序控制流的情况下临时禁用代码。
+
+## 注释的类型
+
+### 单行注释
+
+单行注释以两个正斜杠（`//`）开始，并持续到该行末尾。斜杠之后的任何内容都会被 JavaScript 解释器忽略。
+
+```javascript
+// 这是一条注释，解释器会忽略它
+let a = "This is a variable";
+```
+
+你也可以在行尾使用它们：
+
+```javascript
+let b = 5; // 这也是一个有效的单行注释
+```
+
+### 多行注释
+
+多行注释以 `/*` 开始并以 `*/` 结束。两者之间的内容都会被忽略。
+
+```javascript
+/*
+  这是一个多行注释。
+  你可以用它来解释更复杂的逻辑
+  或者暂时屏蔽一段代码。
+*/
+let x = 10;
+```
+
+### 现实中的注释示例
+
+```javascript
+// 修改标题：
+document.getElementById("myH").innerHTML = "My First Page";
+
+// 修改段落：
+document.getElementById("myP").innerHTML = "My first paragraph.";
+```
+
+```javascript
+/*
+  在测试新的 UI 流程时，暂时禁用欢迎消息。
+*/
+ 
+/*
+document.getElementById("myH").innerHTML = "Welcome back!";
+document.getElementById("myP").innerHTML = "We're glad to see you again.";
+*/
+```
+
+它们对调试也很有用：
+
+```javascript
+let total = 0;
+// total = calculateTotal(items); // 测试期间暂时禁用
+```
+
+```javascript
+/*
+  登录问题的调试日志
+  问题解决后已注释掉
+*/
+
+/*
+console.log("User data:", user);
+console.log("Auth token:", token);
+console.log("Response from API:", response);
+*/
+```
+
+在代码中包含注释对于维护代码质量、促进协作以及简化调试过程至关重要。通过为程序的各个部分提供上下文与解释，注释能让将来更容易理解代码。因此，在代码中编写注释被视为一种良好的实践。

cn/basics/equality.md

@@ -0,0 +1,55 @@
+---
+chapter: 2
+pageNumber: 17
+description: The equality operator is used for comparision. It can to determine if two variables are equal, even if they are not of the same type.
+---
+
+# 相等性
+
+在编写程序时，我们经常需要判断变量与其他变量是否相等。这通过相等运算符来完成。最基本的相等运算符是 `==`。该运算符会尽其所能判断两个变量是否相等，即使它们的类型并不相同。
+
+例如，假设：
+
+```javascript
+let foo = 42;
+let bar = 42;
+let baz = "42";
+let qux = "life";
+```
+
+`foo == bar` 的结果为 `true`，`baz == qux` 的结果为 `false`，这与直觉一致。然而，尽管 `foo` 和 `baz` 的类型不同，`foo == baz` 也会得到 `true`。在幕后，`==` 相等运算符会在判断是否相等之前，尝试将其操作数强制转换为同一类型。这与 `===` 相等运算符形成对比。
+
+`===` 相等运算符只有在两个变量类型相同 *并且* 值也相同时才认为它们相等。沿用上面的假设，这意味着 `foo === bar` 仍然为 `true`，但 `foo === baz` 现在为 `false`。`baz === qux` 依然为 `false`。
+
+{% exercise %}
+使用 `==` 和 `===` 运算符比较 `str1` 和 `str2` 的值。
+
+{% initial %}
+let str1 = "hello";
+let str2 = "HELLO";
+let bool1 = true;
+let bool2 = 1;
+// 使用 == 比较
+let stringResult1 =
+let boolResult1 =
+// 使用 === 比较
+let stringResult1 =
+let boolResult2 =
+{% solution %}
+let str1 = "hello";
+let str2 = "HELLO";
+let bool1 = true;
+let bool2 = 1;
+// 使用 == 比较
+let stringResult1 = str1 == str2 // false
+let boolResult1 =  bool1 == bool2 // true
+
+// 使用 === 比较
+let stringResult2 = str1 === str2 // false
+let boolResult2 = bool1 === bool2 // false
+
+{% validation %}
+assert(stringResult1 === false && stringResult2 === false && boolResult1 ==true &&  boolResult2 === false );
+
+{% context %}
+{% endexercise %}

cn/basics/types.md

@@ -0,0 +1,103 @@
+---
+chapter: 2
+pageNumber: 15
+description: Types are the kinds of data that can be represented and manipulated in the language. 
+---
+
+# 变量类型
+
+计算机足够复杂，能使用比数字更复杂的变量。这就是变量类型的作用所在。变量有多种类型，不同语言支持的类型也不尽相同。
+
+最常见的类型有：
+
+* **Number**：数字可以是整数（如 `1`、`-5`、`100`）或浮点数（如 `3.14`、`-2.5`、`0.01`）。JavaScript 不区分整数与浮点数；两者都被视为数字。
+* **String**：字符串是由字符组成的序列，可以用单引号（如 `'hello'`）或双引号（如 `"world"`）表示。
+* **Boolean**：布尔值表示真或假，可写为 `true` 或 `false`（不加引号）。
+* **Null**：null 类型表示空值，含义是“没有值”。写作 `null`（不加引号）。
+* **Undefined**：undefined 类型表示尚未被赋值的值。如果一个变量已声明但未被赋值，它就是 `undefined`。
+* **Object**：对象是属性的集合，每个属性都有名称和对应的值。可以使用花括号（`{}`）创建对象，并以“名称-值”对的方式为其赋予属性。
+* **Array**：数组是一种特殊的对象类型，用来保存一组条目。可以使用方括号（`[]`）创建数组，并为其赋予一个值列表。
+* **Function**：函数是一段可以定义并通过名称调用的代码。[函数](../functions/README.md)可以接收参数（输入）并返回一个值（输出）。可以使用 `function` 关键字创建函数。
+
+JavaScript 是一种“*弱类型*”语言，这意味着你不必显式声明变量的数据类型。只需使用 `var` 关键字表明你在声明变量，解释器会根据上下文与是否使用引号推断你所使用的数据类型。
+
+{% exercise %}
+声明三个变量并用以下值初始化：将 `age` 设为数字、`name` 设为字符串、`isMarried` 设为布尔值。
+
+{% initial %}
+let age =
+let name =
+let isMarried =
+{% solution %}
+let age = 30
+let name = "Cecilia"
+let isMarried = true
+
+{% validation %}
+assert(typeof age === "number" && typeof name === "string" && typeof isMarried === "boolean");
+
+{% context %}
+{% endexercise %}
+
+`typeof` 运算符用于检查变量的数据类型。
+
+```javascript
+typeof "John"                 // 返回 "string"
+typeof 3.14                   // 返回 "number"
+typeof NaN                    // 返回 "number"
+typeof false                  // 返回 "boolean"
+typeof [1,2,3,4]              // 返回 "object"
+typeof {name:'John', age:34}  // 返回 "object"
+typeof new Date()             // 返回 "object"
+typeof function () {}         // 返回 "function"
+typeof myCar                  // 返回 "undefined" *
+typeof null                   // 返回 "object
+```
+
+JavaScript 中使用的数据类型可以按“是否能包含值”分为两类。
+
+可以包含值的数据类型：
+
+* `string`
+* `number`
+* `boolean`
+* `object`
+* `function`
+
+{% hint style="info" %}
+`Object`、`Date`、`Array`、`String`、`Number` 与 `Boolean` 是 JavaScript 中可用的对象类型。
+{% endhint %}
+
+不能包含值的数据类型：
+
+* `null`
+* `undefined`
+
+原始（primitive）数据值是没有附加属性与方法、且不是对象的简单数据值。它们是不可变的，也就是不能被就地修改。共有 7 种原始数据类型：
+
+* string
+* number
+* bigint
+* boolean
+* undefined
+* symbol
+* null
+
+{% exercise %}
+声明一个名为 `person` 的变量，并用一个对象初始化它。该对象包含以下属性：`age` 为数字、`name` 为字符串、`isMarried` 为布尔值。
+
+{% initial %}
+let person =
+
+{% solution %}
+let person = {
+name: "Mary",
+age: 25,
+isMarried: false
+};
+
+{% validation %}
+assert(typeof person.age === "number" && typeof person.name === "string" && typeof person.isMarried === "boolean");
+
+{% context %}
+{% endexercise %}

cn/basics/variables.md

@@ -0,0 +1,116 @@
+---
+chapter: 2
+pageNumber: 13
+description: Variables are used to store and hold data. It can hold various types of values, such as numbers, strings, booleans, objects, arrays, functions and more.
+---
+
+# 变量
+
+真正理解编程的第一步是回到代数。如果你还记得在学校学的内容，代数从书写如下项开始。
+
+```javascript
+3 + 5 = 8
+```
+
+当你引入一个未知数时就开始进行计算，例如下面的 `x`：
+
+```javascript
+3 + x = 8
+```
+
+通过移项，你可以确定 `x`：
+
+```javascript
+x = 8 - 3
+-> x = 5
+```
+
+当你引入不止一个未知数时，你的式子会更灵活——这就是在使用变量：
+
+```javascript
+x + y = 8
+```
+
+你可以改变 `x` 和 `y` 的值，而这个公式仍然可以成立：
+
+```javascript
+x = 4
+y = 4
+```
+
+或者
+
+```javascript
+x = 3
+y = 5
+```
+
+编程语言也是如此。在编程中，变量是装载会变化的值的容器。变量可以保存各种值，也可以保存计算的结果。变量有一个用等号 `(=)` 连接的 `名称` 和 `值`。不过，要牢记不同的编程语言对变量名各自有一定的限制与约束，因为语言中的某些词可能被保留用于特定的函数或操作。
+
+来看一下在 JavaScript 中它是如何工作的。下面的代码定义了两个变量，计算它们相加的结果，并将该结果作为第三个变量的值。
+
+```javascript
+let x = 5;
+let y = 6;
+let result = x + y;
+```
+
+命名变量时需要遵循一些准则：
+
+* 变量名必须以字母、下划线 `(_)` 或美元符号 `($)` 开头。
+* 在首字符之后，可以使用*字母*、*数字*、*下划线*或*美元符号*。
+* JavaScript 区分大小写，因此 `myVariable`、`MyVariable` 和 `MYVARIABLE` 是三个不同的变量。
+* 为了让代码易于阅读和维护，建议使用能准确反映用途的描述性变量名。
+
+{% exercise %}
+将变量 `x` 定义为 20。
+
+{% initial %}
+let x =
+
+{% solution %}
+let x = 20;
+
+{% validation %}
+assert(x == 20);
+
+{% context %}
+{% endexercise %}
+**ES6 版本**
+
+[ECMAScript 2015 或 ES2015](https://262.ecma-international.org/6.0/)，也称为 E6，是自 2009 年以来对 JavaScript 的一次重要更新。在 ES6 中，我们有三种声明变量的方式。 
+
+```javascript
+var x = 5;
+const y = 'Test';
+let z = true;
+```
+
+声明方式的差异体现在作用域上。与不考虑块级作用域、在全局或整个函数内声明变量的 `var` 不同，`let` 允许你将变量的作用域限制在其所处的代码块、语句或表达式中。例如：
+
+```javascript
+function varTest(){
+    var x=1;
+    if(true){
+        var x=2; // 同一个变量
+        console.log(x); //2
+    }
+    console.log(x); //2
+}
+
+function letTest(){
+    let x=1;
+    if(true){
+        let x=2;
+        console.log(x); // 2
+    }
+    console.log(x); // 1
+}
+```
+
+`const` 变量是不可变的，这意味着它们不允许被重新赋值。
+
+```javascript
+const x = "hi!";
+x = "bye"; // 这将导致错误
+```