diff --git a/cn/basics/README.md b/cn/basics/README.md new file mode 100644 index 00000000..813293ea --- /dev/null +++ b/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) \ No newline at end of file diff --git a/cn/basics/comments.md b/cn/basics/comments.md new file mode 100644 index 00000000..7760463f --- /dev/null +++ b/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); +*/ +``` + +在代码中包含注释对于维护代码质量、促进协作以及简化调试过程至关重要。通过为程序的各个部分提供上下文与解释,注释能让将来更容易理解代码。因此,在代码中编写注释被视为一种良好的实践。 \ No newline at end of file diff --git a/cn/basics/equality.md b/cn/basics/equality.md new file mode 100644 index 00000000..8e577998 --- /dev/null +++ b/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 %} diff --git a/cn/basics/types.md b/cn/basics/types.md new file mode 100644 index 00000000..2ef21081 --- /dev/null +++ b/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 %} diff --git a/cn/basics/variables.md b/cn/basics/variables.md new file mode 100644 index 00000000..beb223ec --- /dev/null +++ b/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"; // 这将导致错误 +```