├── LICENSE ├── README.md ├── SUMMARY.md ├── arrays ├── README.md ├── indices.md └── length.md ├── basics ├── README.md ├── comments.md ├── equality.md ├── types.md └── variables.md ├── book.json ├── conditional ├── README.md ├── comparators.md ├── concatenate.md ├── else.md └── if.md ├── config.json ├── cover ├── background.jpg └── logo.png ├── functions ├── README.md ├── declare.md └── higher_order.md ├── loops ├── README.md ├── dowhile.md ├── for.md └── while.md ├── numbers ├── README.md ├── advanced.md ├── create.md └── operators.md ├── objects ├── README.md ├── creation.md ├── delete.md ├── enumeration.md ├── global_footprint.md ├── mutable.md ├── properties.md ├── prototype.md └── reference.md ├── package.json └── strings ├── README.md ├── concat.md ├── create.md ├── length.md └── substrings.md /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright {yyyy} {name of copyright owner} 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | 203 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Javascript 导学 2 | 3 | ------------- 4 | 5 | 这本书将教你Javascript编程的相关基础。不管你是菜鸟还是一个有经验的程序猿，这本书是为任何想学习Javascript编程的人而准备的。 6 | 7 | JavaScript (*简称 JS *)是一种能够让网页响应用户交互的编程语言。它产生于1995年，现已是当下最火并且使用最广泛的语言之一。 8 | 9 | **Note:** 这本开源的书来自 [GitBook](http://www.gitbook.io)的[Learn Javascript](https://gitbookio.gitbooks.io/javascript/content/)。 10 | 11 | **自我说明:** 这是我第一次进行开源翻译项目，现在是一个人，也欢迎有其他人加入这个项目。还希望大家指出翻译错误的地方，有问题可以在[GitHub](https://github.com/xinqiu/Learn-Javascript)中提出。 最后，感谢本书作者Gitbook公司提供这套教程。 12 | -------------------------------------------------------------------------------- /SUMMARY.md: -------------------------------------------------------------------------------- 1 | # Summary 2 | 3 | * [基础](basics/README.md) 4 | * [注释](basics/comments.md) 5 | * [变量](basics/variables.md) 6 | * [数据类型](basics/types.md) 7 | * [等式](basics/equality.md) 8 | * [数字](numbers/README.md) 9 | * [创建](numbers/create.md) 10 | * [基本运算符](numbers/operators.md) 11 | * [高级运算符](numbers/advanced.md) 12 | * [字符串](strings/README.md) 13 | * [创建](strings/create.md) 14 | * [连接](strings/concat.md) 15 | * [长度](strings/length.md) 16 | * [条件语句](conditional/README.md) 17 | * [If](conditional/if.md) 18 | * [Else](conditional/else.md) 19 | * [比较](conditional/comparators.md) 20 | * [条件连接](conditional/concatenate.md) 21 | * [数组](arrays/README.md) 22 | * [索引](arrays/indices.md) 23 | * [长度](arrays/length.md) 24 | * [循环](loops/README.md) 25 | * [For](loops/for.md) 26 | * [While](loops/while.md) 27 | * [Do...While](loops/dowhile.md) 28 | * [函数](functions/README.md) 29 | * [声明](functions/declare.md) 30 | * [高阶函数](functions/higher_order.md) 31 | * [对象](objects/README.md) 32 | * [创建](objects/creation.md) 33 | * [属性](objects/properties.md) 34 | * [可变性](objects/mutable.md) 35 | * [引用](objects/reference.md) 36 | * [原型](objects/prototype.md) 37 | * [销毁](objects/delete.md) 38 | * [枚举](objects/enumeration.md) 39 | * [全局化](objects/global_footprint.md) -------------------------------------------------------------------------------- /arrays/README.md: -------------------------------------------------------------------------------- 1 | # 数组 2 | 3 | 数组是编程的基础部分。一个数组就是一系列数据。我们可以储存许多数据在一个变量中，这提高了代码可读性，让人更好理解代码。这使相关数据传递到函数中执行更简单。 4 | 5 | 数组中数据称为 **元素**。 6 | 7 | 这是一个简单的数组： 8 | 9 | ```javascript 10 | // 1, 1, 2, 3, 5 和 8 是数组中的元素 11 | var numbers = [1, 1, 2, 3, 5, 8]; 12 | ``` -------------------------------------------------------------------------------- /arrays/indices.md: -------------------------------------------------------------------------------- 1 | # 索引 2 | 3 | 若你有一个数组，如何访问想要的特定元素？索引出现了。一个 **下标** 指向数组中的一个位置。正如其他大部分语言，索引逻辑上是一个接一个，但要注意第一个数组下标是0。方括号[]被用来表示使用数组下标。 4 | 5 | ```javascript 6 | // 这是字符串构成的数组 7 | var fruits = ["apple", "banana", "pineapple", "strawberry"]; 8 | 9 | // 用fruits数组中的第二个元素的值赋值给变量banana 10 | // 记住索引(即下标)是从0开始，下标1即第二个元素 11 | // 结果: banana = "banana" 12 | var banana = fruits[1]; 13 | ``` 14 | 15 | {% exercise %} 16 | 定义变量使用数组的索引 17 | {% initial %} 18 | var cars = ["Mazda", "Honda", "Chevy", "Ford"] 19 | var honda = 20 | var ford = 21 | var chevy = 22 | var mazda = 23 | {% solution %} 24 | var cars = ["Mazda", "Honda", "Chevy", "Ford"] 25 | var honda = cars[1]; 26 | var ford = cars[3]; 27 | var chevy = cars[2]; 28 | var mazda = cars[0]; 29 | {% validation %} 30 | assert(honda === "Honda"); 31 | assert(ford === "Ford"); 32 | assert(chevy === "Chevy"); 33 | assert(mazda === "Mazda"); 34 | {% endexercise %} 35 | -------------------------------------------------------------------------------- /arrays/length.md: -------------------------------------------------------------------------------- 1 | # 长度 2 | 数组有个属性称为长度，正如字面意思，这就是数组的长度。 3 | 4 | ```javascript 5 | var array = [1 , 2, 3]; 6 | 7 | // 结果: l = 3 8 | var l = array.length; 9 | ``` 10 | 11 | {% exercise %} 12 | 定义变量a为数组的长度 13 | {% initial %} 14 | var array = [1, 1, 2, 3, 5, 8]; 15 | var l = array.length; 16 | var a = 17 | {% solution %} 18 | var array = [1, 1, 2, 3, 5, 8]; 19 | var l = array.length; 20 | var a = 6; 21 | {% validation %} 22 | assert (a === 6) 23 | {% endexercise %} 24 | -------------------------------------------------------------------------------- /basics/README.md: -------------------------------------------------------------------------------- 1 | # 编程基础 2 | 3 | 在第一章，我们将学习Javascript的编程基础。 4 | 5 | 编程其实就是敲代码。就像一本书是包含章节，段落，句子，短语，单词最终由字母组成的一样，程序也能被切分成一块块更小的部分。对于程序，最重要的声明。声明等同于书中的句子。单独看，句子有结构和议题。但脱离了上下文，它却没有该有的意义。 6 | 7 | 声明，即非正式的(广泛的)被认为就是*一行代码*。因为声明通常被写在同一行。正是这样，程序代码通常从上到下，从左往右读。你可能会惊讶什么是代码(也就是源代码)。这是个广泛的术语，指的可以是整个程序也可以是其中最小的部分。因此，一行代码简单的说就是一行你的程序。 8 | 9 | 10 | 举个例子： 11 | 12 | ```javascript 13 | var hello = "Hello"; 14 | var world = "World"; 15 | 16 | // Message equals "Hello World" 17 | var message = hello + " " + world; 18 | ``` 19 | 20 | 这段代码能被 *解释器* 执行，并且按照正确的顺序来执行。 -------------------------------------------------------------------------------- /basics/comments.md: -------------------------------------------------------------------------------- 1 | # 注释 2 | 3 | 注释不会被解释执行，注释被用来将代码解释给其他程序员看，或者是为了对代码作用的简单描述。因此提高代码的可读性。 4 | 5 | 在Javascript中，可以使用两种方式进行注释: 6 | 7 | * 单行注释用 `//`: 8 | 9 | ```javascript 10 | // 这是注释，将被解释器忽略 11 | var a = "this is a variable defined in a statement"; 12 | ``` 13 | 14 | * 多行注释用 `/*`开始，用`*/`结尾: 15 | 16 | ```javascript 17 | /* 18 | 这是多行注释， 19 | 将被解释器忽略 20 | */ 21 | var a = "this is a variable defined in a statement"; 22 | ``` 23 | 24 | 25 | --- 26 | 27 | 将作者的话变成注释 28 | 29 | ```js 30 | 31 | Mark me as a comment 32 | or I'll throw an error 33 | 34 | ``` 35 | 36 | ```js 37 | /* 38 | Mark me as a comment 39 | or I'll throw an error 40 | */ 41 | ``` 42 | 43 | ```js 44 | assert(true); 45 | ``` 46 | 47 | --- 48 | -------------------------------------------------------------------------------- /basics/equality.md: -------------------------------------------------------------------------------- 1 | # 等式 2 | 3 | 程序猿经常需要将等价的值关联起来。这时需要用到等号。 4 | 5 | 最基础的等性运算符是 `==` 。这个运算符可以判断两个变量是否相等，即使不是相同类型。 6 | 7 | 举个例子，假设: 8 | ```javascript 9 | var foo = 42; 10 | var bar = 42; 11 | var baz = "42"; 12 | var qux = "life"; 13 | ``` 14 | 15 | `foo == bar` 将判定为 `true` ，而 `baz == qux` 将判定为 `false`。然而，尽管 `foo` 和 `baz` 是不同类型，`foo == baz` *也*将判定为 `true` 。 `==` 等性运算符在判断等价性之前会尝试强制将操作数转为相同类型。这与 `===` 全等运算符不同。 16 | 17 | `===` 全等运算符判断两个变量是否类型和值 *都* 相等。在这种情况下，`foo === bar` 仍然是 `true`, 而 `foo === baz` 将为 `false`. `baz === qux` 仍为 `false`. -------------------------------------------------------------------------------- /basics/types.md: -------------------------------------------------------------------------------- 1 | # 数据类型 2 | 3 | 计算机很复杂并且可以使用更复杂的变量而不仅仅只是数字。数据类型就出现了。变量的出现伴随着几种类型，不同的语言支持不同的类型。 4 | 5 | 最常见的类型有: 6 | 7 | * **数字** 8 | * **浮点数**: 一个数字, 例如 1.21323, 4, -33.5, 100004 或 0.123 9 | * **整数**: 一个数字例如 1, 12, -33, 140 不可以是 1.233 10 | 11 | * **字符串**: 一行文本比如 "boat", "elephant" or "damn, you are tall!" 12 | 13 | * **布尔**: 只能表示真(true)或假(false) 14 | 15 | * **数组**: 一个数值的集合比如: 1,2,3,4,'I am bored now' 16 | 17 | * **对象**: 一种更复杂的对象的表现 18 | 19 | * **null**: 一个空值变量，它可以为各种可能的类型。 20 | 21 | * **undefined**: 一个未定义值，产生于当你使用一个对象的不存在属性或一个未赋值的变量时。 22 | 23 | JavaScript是一种 *“弱类型”* 语言, 这意味着你不需要明确的声明变量的数据类型。你只需用```var```关键词来暗示你正在声明一个变量，解释器会从上下文(和引号)得出你用的是什么数据类型， 24 | 25 | 26 | --- 27 | 28 | 用关键词 `var` 创建一个名为 `a` 的变量. 29 | 30 | ```js 31 | 32 | ``` 33 | 34 | ```js 35 | var a; 36 | ``` 37 | 38 | ```js 39 | a; 40 | ``` 41 | 42 | --- 43 | -------------------------------------------------------------------------------- /basics/variables.md: -------------------------------------------------------------------------------- 1 | # 变量 2 | 3 | 真正理解编程的第一步是回顾代数知识。如果你记得上学时曾学的代数，起初应该如下。 4 | 5 | ``` 6 | 3 + 5 = 8 7 | ``` 8 | 9 | 你开始执行含有未知数的计算，如下x代表未知数： 10 | 11 | ``` 12 | 3 + x = 8 13 | ``` 14 | 15 | 通过移项可以计算出x： 16 | 17 | ``` 18 | x = 8 - 3 19 | -> x = 5 20 | ``` 21 | 22 | 当你引入不止一个更灵活的的条件 -- 你正在使用变量: 23 | 24 | ``` 25 | x + y = 8 26 | ``` 27 | 28 | 你可以改变x和y的值，表达式依然成立: 29 | 30 | ``` 31 | x = 4 32 | y = 4 33 | ``` 34 | 35 | 或 36 | 37 | ``` 38 | x = 3 39 | y = 5 40 | ``` 41 | 42 | 编程语言都是如此。在编程中，变量是可改变值的容器。变量可以保存各种类型的值或计算结果。变量由变量名、值构成，通过中间的等号(=)将他们分开。变量名可以是任何字母或者单词，但要记住其中有一些限制，比如某些是有特殊功能的关键词。 43 | 44 | 我们来看看这是如何在Javascript中工作的，以下代码定义了两个变量，计算两个之和将其保存在第三个变量中。 45 | 46 | ``` 47 | var x = 5; 48 | var y = 6; 49 | var result = x + y; 50 | ``` 51 | -------------------------------------------------------------------------------- /book.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Javascript", 3 | "version": "0.0.6", 4 | "description": "", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/xinqiu/Learn-Javascript.git" 8 | }, 9 | "author": "xinqiu ", 10 | "license": "Apache 2", 11 | "dependencies": {}, 12 | "devDependencies": { 13 | "grunt": "~0.4.1", 14 | "grunt-gitbook": "0.2.0", 15 | "grunt-gh-pages": "0.9.1", 16 | "grunt-contrib-clean": "~0.5.0" 17 | }, 18 | "peerDependencies": { 19 | "grunt": "~0.4.1" 20 | }, 21 | "plugins": [ 22 | "exercises" 23 | ] 24 | } -------------------------------------------------------------------------------- /conditional/README.md: -------------------------------------------------------------------------------- 1 | # 条件逻辑 2 | 3 | 条件语句可以用来测试。条件判断在编程中非常重要，比如： 4 | 5 | 首先，无论程序运行使用什么数据，所有的条件都能被用来确定程序是否正常。如果盲目的相信数据，你将陷入程序出错的麻烦。如果测试有效并且所需信息格式正确，程序就不会出错，还会变得更稳定。采取这种预防措施的行为被称作防御性编程。 6 | 7 | 另一种条件判断的作用就是分支。你可能已经接触过分支图，比如填写表格时。基本上这指的是依赖if条件语句执行不同的代码分支。 8 | 9 | 在这个章节，我们将会学习Javascript中条件逻辑的基础。 -------------------------------------------------------------------------------- /conditional/comparators.md: -------------------------------------------------------------------------------- 1 | # 比较运算符 2 | 3 | 把焦点放在条件判断部分： 4 | 5 | ```javascript 6 | if (country === "France") { 7 | ... 8 | } 9 | ``` 10 | 11 | 变量 `country` 后面跟着的三个等号(`===`)是条件判断部分。三个等号测试是否变量 `country` 和 `France` 值与类型(`String`)相同。你也可以用两个等号来测试，比如`if (x == 5)`，在`var x = 5;` 或 `var x = "5";` 情况下都返回真。这很不一样取决于你的程序是做什么。比较推荐你经常去尝试比较三个等号(`===` 和 `!==`)和两个等号(`==` 和 `!=`)的区别。 12 | 13 | 其他条件判断的测试： 14 | 15 | * ```x > a```: is x bigger than a? 16 | * ```x < a```: is x less than a? 17 | * ```x <= a```: is x less than or equal to a? 18 | * ```x >=a```: is x greater than or equal to a? 19 | * ```x != a```: is x not a? 20 | * ```x```: does x exist? 21 | 22 | 23 | {% exercise %} 24 | 添加一种条件判断，如果 `x` 比5大，使变量 `a` 赋值为10。 25 | {% initial %} 26 | var x = 6; 27 | var a = 0; 28 | {% solution %} 29 | var x = 6; 30 | var a = 0; 31 | 32 | if (x > 5) { 33 | a = 10; 34 | } 35 | {% validation %} 36 | assert(a === 10); 37 | {% endexercise %} 38 | 39 | ##逻辑比较 40 | 41 | 为了避免if-else麻烦，可以利用一种简单的逻辑比较。 42 | 43 | ```js 44 | var topper = (marks > 85) ? "YES" : "NO"; 45 | ``` 46 | 47 | 在上述例子中，`?` 是逻辑运算符。上述源码表示如果marks的值大于85即 `marks > 85` ，则 `topper = YES` ；否则 `topper = NO` 。基本上，如果比较条件为真，赋第一个参数的值，否则赋的二哥参数的值。 48 | -------------------------------------------------------------------------------- /conditional/concatenate.md: -------------------------------------------------------------------------------- 1 | # 条件连接 2 | 3 | 此外，你可以用 "or” 或 “and” 语句连接不同的条件判断，可以分别的测试是否存在一个为真或同为真。 4 | 5 | 在Javascript中，“or” 可以被写成 `||` ， “and” 可以被写成 `&&`。 6 | 7 | 比如你想要测试 x 的值是否在10到20之间，你可以用上述的方法： 8 | 9 | ``` 10 | if(x > 10 && x < 20) { 11 | ... 12 | } 13 | ``` 14 | 15 | 如果你想要确认 country 是 “England” 或 “Germany”： 16 | 17 | ``` 18 | if(country === 'England' || country === 'Germany') { 19 | ... 20 | } 21 | ``` 22 | 23 | **注意**: 就像对数字的运算符，条件可以用括号来分组，比如： ```if ( (name === "John" || name === "Jennifer") && country === "France")```。 24 | 25 | {% exercise %} 26 | 填写两个条件让仅当name 为 `"John"` ，country 为 `"England"`，`primaryCategory` 才等于 `"E/J"` ，仅当name 为 `"John"` 或 country 为 `"England"`， `secondaryCategory` 才等于 `"E/J"` 。 27 | {% initial %} 28 | var name = "John"; 29 | var country = "England"; 30 | var primaryCategory, secondaryCategory; 31 | 32 | if ( /* Fill here */ ) { 33 | primaryCategory = "E/J"; 34 | } 35 | if ( /* Fill here */ ) { 36 | secondaryCategory = "E|J"; 37 | } 38 | {% solution %} 39 | var name = "John"; 40 | var country = "England"; 41 | var primaryCategory, secondaryCategory; 42 | 43 | if (name === "John" && country === "England") { 44 | primaryCategory = "E/J"; 45 | } 46 | if (name === "John" || country === "England") { 47 | secondaryCategory = "E|J"; 48 | } 49 | {% validation %} 50 | assert(primaryCategory === "E/J" && secondaryCategory === "E|J"); 51 | {% endexercise %} 52 | -------------------------------------------------------------------------------- /conditional/else.md: -------------------------------------------------------------------------------- 1 | # Else 2 | 3 | 当第一个条件语句不成立时， `else` 语句将被执行。如果你想要在特殊条件下才返回一个值，这非常有效： 4 | 5 | ```javascript 6 | var umbrellaMandatory; 7 | 8 | if(country === 'England'){ 9 | umbrellaMandatory = true; 10 | } else { 11 | umbrellaMandatory = false; 12 | } 13 | ``` 14 | 15 | `else` 语句可以和另一个 `if` 语句结合。改造一下上面的例子： 16 | 17 | ```javascript 18 | if(country === 'England') { 19 | ... 20 | } else if(country === 'France') { 21 | ... 22 | } else if(country === 'Germany') { 23 | ... 24 | } 25 | ``` 26 | 27 | {% exercise %} 28 | 填写 `name` 的值，验证 `else` 语句。 29 | {% initial %} 30 | var name = 31 | 32 | if (name === "John") { 33 | 34 | } else if (name === "Aaron") { 35 | // Valid this condition 36 | } 37 | {% solution %} 38 | var name = "Aaron"; 39 | 40 | if (name === "John") { 41 | 42 | } else if (name === "Aaron") { 43 | // Valid this condition 44 | } 45 | {% validation %} 46 | assert(name === "Aaron"); 47 | {% endexercise %} 48 | -------------------------------------------------------------------------------- /conditional/if.md: -------------------------------------------------------------------------------- 1 | # If 2 | 3 | 最简单的条件判断是if语句，语法是 `if(condition){ do this … }` 。条件判断为真，才执行分支中的代码。举个字符串的例子： 4 | ```javascript 5 | var country = 'France'; 6 | var weather; 7 | var food; 8 | var currency; 9 | 10 | if(country === 'England') { 11 | weather = 'horrible'; 12 | food = 'filling'; 13 | currency = 'pound sterling'; 14 | } 15 | 16 | if(country === 'France') { 17 | weather = 'nice'; 18 | food = 'stunning, but hardly ever vegetarian'; 19 | currency = 'funny, small and colourful'; 20 | } 21 | 22 | if(country === 'Germany') { 23 | weather = 'average'; 24 | food = 'wurst thing ever'; 25 | currency = 'funny, small and colourful'; 26 | } 27 | 28 | var message = 'this is ' + country + ', the weather is ' + 29 | weather + ', the food is ' + food + ' and the ' + 30 | 'currency is ' + currency; 31 | ``` 32 | 33 | **注意:** 条件判断可以嵌套。 34 | 35 | {% exercise %} 36 | 填写 `name` 的值，验证条件判断。 37 | {% initial %} 38 | var name = 39 | 40 | if (name === "John") { 41 | 42 | } 43 | {% solution %} 44 | var name = "John"; 45 | 46 | if (name === "John") { 47 | 48 | } 49 | {% validation %} 50 | assert(name === "John"); 51 | {% endexercise %} 52 | -------------------------------------------------------------------------------- /config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Learn Javascript", 3 | "introduction": "这本书将教你Javascript编程的相关基础。不管你是菜鸟还是一个有经验的程序猿，这本书是为任何想学习Javascript编程的人而准备的。", 4 | "path" : { 5 | "toc" : "SUMMARY.md" 6 | } 7 | } -------------------------------------------------------------------------------- /cover/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xinqiu/Learn-Javascript/cac9a914780b7ac20f3eb07ca974dd8e67e0b972/cover/background.jpg -------------------------------------------------------------------------------- /cover/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xinqiu/Learn-Javascript/cac9a914780b7ac20f3eb07ca974dd8e67e0b972/cover/logo.png -------------------------------------------------------------------------------- /functions/README.md: -------------------------------------------------------------------------------- 1 | # 函数 2 | 3 | 函数是编程中功能最强大也是最重要的概念之一。 4 | 5 | 函数就像数学中的函数，有输入值即 **参数** ，**返回**输出值。 6 | -------------------------------------------------------------------------------- /functions/declare.md: -------------------------------------------------------------------------------- 1 | # 函数声明 2 | 3 | 如同变量，函数必须被声明。以下是声明一个函数 `double` 接受 **参数** `x` **返回** x 的两倍： 4 | 5 | ```javascript 6 | function double(x) { 7 | return 2 * x; 8 | } 9 | ``` 10 | 11 | >*注意:* 上述函数**可能**在声明之前被引用。 12 | 13 | 函数在Javascript中也是变量；可以储存值（比如数字，字符串等等），将其作为参数传给其他函数： 14 | 15 | ```javascript 16 | var double = function(x) { 17 | return 2 * x; 18 | }; 19 | ``` 20 | 21 | >*注意:* 上述函数**没有可能**在声明之前被引用，就像其他变量。 22 | 23 | {% exercise %} 24 | 声明一个 `triple` 函数，接受一个参数，返回它的三倍。 25 | {% solution %} 26 | var triple = function(x) { 27 | return x * 3; 28 | } 29 | {% validation %} 30 | assert(triple); 31 | assert(triple(4) === 12); 32 | assert(triple(10) === 30); 33 | {% endexercise %} 34 | -------------------------------------------------------------------------------- /functions/higher_order.md: -------------------------------------------------------------------------------- 1 | # 高阶函数 2 | 3 | 高阶函数是操作其他函数的函数。举个例子，一个函数可以将其他函数作为参数和/或产生一个函数作作为它的返回值。 4 | *精巧的* 功能技术是非常强大的构造，可在Javascript或其他高级语言比如python，lisp等中使用。 5 | 6 | 我们来创建两个简单的函数，`add_2` 和 `double` ，和一个高阶函数 `map` 。`map` 接受两个参数，`func` 和 `list` （它的声明因此为`map(func,list)`），返回一个数组。`func` (第一个参数)作为函数将被应用到每个数组 `list`（第二个参数）的每一个元素中。 7 | 8 | ```javascript 9 | // 定义两个简单函数 10 | var add_2 = function(x) { 11 | return x + 2; 12 | }; 13 | var double = function(x) { 14 | return 2 * x; 15 | }; 16 | 17 | // map接受两个参数 18 | // func 调用函数 19 | // list 数组中元素值传递给 func 20 | var map = function(func, list) { 21 | var output=[]; // 输出 list 22 | for(idx in list) { 23 | output.push( func(list[idx]) ); 24 | } 25 | return output; 26 | } 27 | 28 | 29 | // 使用map将函数应用于整个输入列表 30 | // 产生相应的输出列表 31 | map(add_2, [5,6,7]) // => [7, 8, 9] 32 | map(double, [5,6,7]) // => [10, 12, 14] 33 | ``` 34 | 35 | 上述例子中的函数很简单。然而在作为参数传递给其他函数时，可以使用特殊组合方法构件更复杂的函数。 36 | 37 | 举个例子，如果注意到在代码中平凡使用调用方法`map(add_2, ...)` 和 `map(double, ...)`，可以创建两个特殊用途的列表运行组合起来的函数。使用函数封装，可以如下操作： 38 | 39 | ```javascript 40 | process_add_2 = function(list) { 41 | return map(add_2, list); 42 | } 43 | process_double = function(list) { 44 | return map(double, list); 45 | } 46 | process_add_2([5,6,7]) // => [7, 8, 9] 47 | process_double([5,6,7]) // => [10, 12, 14] 48 | ``` 49 | 50 | 创建一个 `buildProcessor` 函数，它将函数 `func` 作为函数，返回一个 `func`处理程序，这个函数将列表作为输入应用到 `func` 。 51 | 52 | ```javascript 53 | // 函数产生一系列处理程序 54 | var buildProcessor = function(func) { 55 | var process_func = function(list) { 56 | return map(func, list); 57 | } 58 | return process_func; 59 | } 60 | // 调用buildProcessor返回一个调用输入列表的函数 61 | 62 | 63 | // 使用buildProcessor产生 add_2 process_double： 64 | process_add_2 = buildProcessor(add_2); 65 | process_double = buildProcessor(double); 66 | 67 | process_add_2([5,6,7]) // => [7, 8, 9] 68 | process_double([5,6,7]) // => [10, 12, 14] 69 | ``` 70 | 71 | 看另一个例子。 72 | 创建一个 `buildMultiplier` 函数，将 `x` 作为输入，然后一个对其参数 `x` 相乘的函数： 73 | 74 | ```javascript 75 | var buildMultiplier = function(x) { 76 | return function(y) { 77 | return x * y; 78 | } 79 | } 80 | 81 | var double = buildMultiplier(2); 82 | var triple = buildMultiplier(3); 83 | 84 | double(3); // => 6 85 | triple(3); // => 9 86 | ``` 87 | 88 | {% exercise %} 89 | 定义一个 `negate` 函数将 `add1` 作为参数，返回一个函数,这个函数通过 `add1` 返回值的相反数.(开始有点复杂了) 90 | {% initial %} 91 | var add1 = function (x) { 92 | return x + 1; 93 | }; 94 | 95 | var negate = function(func) { 96 | // TODO 97 | }; 98 | 99 | // 应该返回 -6 100 | // 因为 (5+1) * -1 = -6 101 | negate(add1)(5); 102 | 103 | {% solution %} 104 | var add1 = function (x) { 105 | return x + 1; 106 | } 107 | 108 | var negate = function(func) { 109 | return function(x) { 110 | return -1 * func(x); 111 | } 112 | } 113 | 114 | negate(add1)(5); 115 | {% validation %} 116 | assert(negate(add1)(5) === -6); 117 | {% endexercise %} 118 | -------------------------------------------------------------------------------- /loops/README.md: -------------------------------------------------------------------------------- 1 | # 循环 2 | 3 | 循环是一种变量在其中不断改变的重复状。如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。 4 | 5 | 与其用： 6 | 7 | ```javascript 8 | doThing(cars[0]); 9 | doThing(cars[1]); 10 | doThing(cars[2]); 11 | doThing(cars[3]); 12 | doThing(cars[4]); 13 | ``` 14 | 15 | 不如用： 16 | 17 | ```javascript 18 | for (var i=0; i < cars.length; i++) { 19 | doThing(cars[i]); 20 | } 21 | ``` -------------------------------------------------------------------------------- /loops/dowhile.md: -------------------------------------------------------------------------------- 1 | # Do...While 循环 2 | 3 | do...while语句创建的循环会先执行语句直到条件判断为假。 4 | do... while的语法如下： 5 | 6 | ```javascript 7 | do{ 8 | // statement 9 | } 10 | while(expression) ; 11 | ``` 12 | 13 | 来看看如何使用 `do...while` 循环答应小于10的数字： 14 | 15 | ``` 16 | var i = 0; 17 | do { 18 | document.write(i + " "); 19 | i++; // i 增加 1 20 | } while (i < 10); 21 | ``` 22 | 23 | >***注意***: `i = i + 1` 也可以写成 `i++`. 24 | 25 | 26 | {% exercise %} 27 | 使用do...while循环，打印小于5的数字。 28 | {% initial %} 29 | var i = 0; 30 | {% solution %} 31 | var i = 0; 32 | do { 33 | i++; // i 增加 1 34 | } while (i < 5); 35 | {% endexercise %} 36 | -------------------------------------------------------------------------------- /loops/for.md: -------------------------------------------------------------------------------- 1 | # For 循环 2 | 3 | for语句是最简单的循环形式。它的语法类似if语句，只是多了些选项： 4 | 5 | ```javascript 6 | for(condition; end condition; change){ 7 | // do it, do it now 8 | } 9 | ``` 10 | 11 | 来看看如何使用for循环执行10次相同的代码： 12 | 13 | ``` 14 | for(var i = 0; i < 10; i = i + 1){ 15 | // 执行这段代码10次 16 | } 17 | ``` 18 | 19 | >***注意***: `i = i + 1` 也可以写成 `i++`. 20 | 21 | 22 | {% exercise %} 23 | 使用for循环，创建一个 `message` 变量，使其值为整数0到99 (0, 1, 2, ...) 之和。 24 | {% initial %} 25 | var message = ""; 26 | {% solution %} 27 | var message = ""; 28 | 29 | for(var i = 0; i < 100; i++){ 30 | message = message + i; 31 | } 32 | {% validation %} 33 | var message2 = "" 34 | 35 | for(var i = 0; i < 100; i++){ 36 | message2 = message2 + i; 37 | } 38 | assert(message === message2); 39 | {% endexercise %} 40 | -------------------------------------------------------------------------------- /loops/while.md: -------------------------------------------------------------------------------- 1 | # While 循环 2 | 3 | 只要特殊条件为真，While循环就一直执行代码块。 4 | 5 | ```javascript 6 | while(condition){ 7 | // 只要条件为真就继续执行 8 | } 9 | ``` 10 | 11 | 举个例子，以下代码会一直执行，只要变量 i 小于5： 12 | 13 | ```javascript 14 | var i = 0, x = ""; 15 | while (i < 5) { 16 | x = x + "The number is " + i; 17 | i++; 18 | } 19 | ``` 20 | 21 | Do/While循环是while循环的变体。这种循环将先检查条件是否为真，再执行代码块。它将重复循环只要条件为真： 22 | 23 | ```javascript 24 | do { 25 | // 代码块被执行 26 | } while (condition); 27 | ``` 28 | 29 | 30 | **注意**: 要注意避免如果条件总为真导致的无限循环！ 31 | 32 | 33 | {% exercise %} 34 | 使用while循环，创建一个 `message` 变量，保存连接的整数，仅当长度小于100。 35 | {% initial %} 36 | var message = ""; 37 | {% solution %} 38 | var message = ""; 39 | var i = 0; 40 | 41 | while (message.length < 100) { 42 | message = message + i; 43 | i = i + 1; 44 | } 45 | {% validation %} 46 | var message2 = ""; 47 | var i2 = 0; 48 | 49 | while (message2.length < 100) { 50 | message2 = message2 + i2; 51 | i2 = i2 + 1; 52 | } 53 | assert(message === message2); 54 | {% endexercise %} 55 | -------------------------------------------------------------------------------- /numbers/README.md: -------------------------------------------------------------------------------- 1 | # 数字 2 | 3 | JavaScript的数字只有一种类型 - 64位浮点数。这类似于Java的 'double'。不同于其他编程语言，这里不需要区分整数类型，所以 1 和 1.0 是相同值。 4 | 5 | 在这章节，我们将学习如何创建数字和使用运算符(比如加减)。 -------------------------------------------------------------------------------- /numbers/advanced.md: -------------------------------------------------------------------------------- 1 | # 高级运算符 2 | 3 | 一些高级的运算符可以这样用，比如： 4 | 5 | * **求余 (除法的余数)**: ```x = y % 2``` 6 | * **累加**: 让 a = 5 7 | * ```c = a++```, 结果: c = 5 和 a = 6 8 | * ```c = ++a```, 结果: c = 6 和 a = 6 9 | * **递减**: 让 a = 5 10 | * ```c = a--```, 结果: c = 5 和 a = 4 11 | * ```c = --a```, 结果: c = 4 和 a = 4 12 | 13 | 14 | {% exercise %} 15 | 定义一个变量 `c` 作为自减变量 `x` 对3的模。 16 | {% initial %} 17 | var x = 10; 18 | 19 | var c = 20 | {% solution %} 21 | var x = 10; 22 | 23 | var c = (--x) % 3; 24 | {% validation %} 25 | assert(c === 0); 26 | {% endexercise %} 27 | -------------------------------------------------------------------------------- /numbers/create.md: -------------------------------------------------------------------------------- 1 | # 创建 2 | 3 | 创建一个数字很容易，创建任何类型都只需要使用关键词 ```var```。 4 | 5 | 数字可以被创建来自一个常量： 6 | ``` 7 | // 这是浮点型: 8 | var a = 1.2; 9 | 10 | // 这是整型: 11 | var b = 10; 12 | ``` 13 | 14 | 或来自另一个变量： 15 | ``` 16 | var a = 2; 17 | var b = a; 18 | ``` 19 | 20 | {% exercise %} 21 | 创建一个值为 `10` 的变量 `x` ， 创建一个值等于 `a` 的变量 `y`。 22 | {% initial %} 23 | var a = 11; 24 | {% solution %} 25 | var a = 11; 26 | 27 | var x = 10; 28 | var y = a; 29 | {% validation %} 30 | assert(x === 10 && y === a); 31 | {% endexercise %} 32 | -------------------------------------------------------------------------------- /numbers/operators.md: -------------------------------------------------------------------------------- 1 | # 基本运算符 2 | 3 | 你可以对数字使用一些简单的数学运算符比如： 4 | 5 | * **加**: ```c = a + b``` 6 | * **减**: ```c = a - b``` 7 | * **乘**: ```c = a * b``` 8 | * **除**: ```c = a / b``` 9 | 10 | 你可以像在数学中一样，使用括号分隔进行分隔比如：```c = (a / b) + d``` 11 | 12 | {% exercise %} 13 | 创建一个变量 `x` ，它的值为`a` 和 `b` 之和再被 `c` 除，最后乘上 `d`. 14 | {% initial %} 15 | var a = 2034547; 16 | var b = 1.567; 17 | var c = 6758.768; 18 | var d = 45084; 19 | 20 | var x = 21 | {% solution %} 22 | var a = 2034547; 23 | var b = 1.567; 24 | var c = 6758.768; 25 | var d = 45084; 26 | 27 | var x = ((a + b) / c) * d; 28 | {% validation %} 29 | assert(x === (((a + b) / c) * d)); 30 | {% endexercise %} 31 | -------------------------------------------------------------------------------- /objects/README.md: -------------------------------------------------------------------------------- 1 | # 对象 2 | Javascript的原始类型是`true`, `false`, 数字, 字符串, `null` and `undefined`。**所有其他值都是 `对象`.** 3 | 4 | Javascript对象包含成对的`propertyName（属性名）`: `propertyValue（属性值）`。 5 | -------------------------------------------------------------------------------- /objects/creation.md: -------------------------------------------------------------------------------- 1 | # 创建 2 | There are two ways to create an `object` in JavaScript: 3 | 在Javascript中，有两种方法去创建一个 `对象` ： 4 | 5 | 1. 字面上 6 | 7 | ```js 8 | var object = {}; 9 | // 是的，简单是使用一对大括号！ 10 | 11 | ``` 12 | > ***注意:*** 这是 **推荐** 的方法 13 | 14 | 2. 面向对象 15 | 16 | ```js 17 | var object = new Object(); 18 | 19 | ``` 20 | > ***注意:*** 这很像Java 21 | -------------------------------------------------------------------------------- /objects/delete.md: -------------------------------------------------------------------------------- 1 | # 销毁 2 | 3 | `delete` 被用来从一个对象中 **删除一个属性** 。它将删除对象中的一个存在属性，使其不再存在于原型链中。 4 | 从一个对象中删除一个属性就是将改属性从原型中移出： 5 | ```js 6 | var adult = {age:26}, 7 | child = Object.create(adult); 8 | child.age = 8; 9 | 10 | delete child.age; 11 | /* 从child中删除age属性，表明这之后该属性不在被覆盖 */ 12 | var prototypeAge = child.age; 13 | // 26，因为该孩子没有自己的age属性。 14 | ``` 15 | -------------------------------------------------------------------------------- /objects/enumeration.md: -------------------------------------------------------------------------------- 1 | # 枚举 2 | `for in` 语句可以遍历对象中所有的属性。枚举包括函数和原型属性。 3 | ```js 4 | var fruit = { 5 | apple: 2, 6 | orange:5, 7 | pear:1 8 | }, 9 | sentence = 'I have ', 10 | quantity; 11 | for (kind in fruit){ 12 | quantity = fruit[kind]; 13 | sentence += quantity+' '+kind+ 14 | (quantity===1?'':'s')+ 15 | ', '; 16 | } 17 | // The following line removes the trailing coma. 18 | sentence = sentence.substr(0,sentence.length-2)+'.'; 19 | // I have 2 apples, 5 oranges, 1 pear. 20 | ``` 21 | -------------------------------------------------------------------------------- /objects/global_footprint.md: -------------------------------------------------------------------------------- 1 | # 全局化 2 | 3 | 如果想开发一个模块，它可以在网页上运行或也可以运行其他模块，因此你必须注意变量名是否重复。 4 | 5 | 假设我们正在卡开发一个计数器模块： 6 | ```js 7 | var myCounter = { 8 | number : 0, 9 | plusPlus : function(){ 10 | this.number : this.number + 1; 11 | }, 12 | isGreaterThanTen : function(){ 13 | return this.number > 10; 14 | } 15 | } 16 | ``` 17 | > ***注意:*** 这个技巧通常配合闭包使用，以使来自外部的内部状态不变。 18 | 19 | 模块使用唯一一个变量名 — `myCounter`。如果其他模块使用名字比如`number` 或 `isGreaterThanTen` ，这样就会很安全，因为不会覆盖每个其他的值。 20 | -------------------------------------------------------------------------------- /objects/mutable.md: -------------------------------------------------------------------------------- 1 | # 可变性 2 | 对象与原始值不同之处在于**对象可以改变**，原始值是不可变的。 3 | ```js 4 | var myPrimitive = "first value"; 5 | myPrimitive = "another value"; 6 | // myPrimitive现在指向另一个字符串 7 | var myObject = { key: "first value"}; 8 | myObject.key = "another value"; 9 | // myObject 指向的还是原来的对象 10 | ``` 11 | -------------------------------------------------------------------------------- /objects/properties.md: -------------------------------------------------------------------------------- 1 | # 属性 2 | 对象的属性是一对的`propertyName(属性名)`: `propertyValue(属性值)`，**属性的名字只能是字符串**。如果不是字符串，将会转换为字符串。可以在创建对象或之后初始化属性。 3 | ```js 4 | var language = { 5 | name: 'JavaScript', 6 | isSupportedByBrowsers: true, 7 | createdIn: 1995, 8 | author:{ 9 | firstName: 'Brendan', 10 | lastName: 'Eich' 11 | }, 12 | // 是的，对象可以嵌套！ 13 | getAuthorFullName: function(){ 14 | return this.author.firstName + " " + this.author.lastName; 15 | } 16 | // 是的，函数可以有值！ 17 | }; 18 | 19 | ``` 20 | 21 | 以下代码展示如何 **获取** 属性的值。 22 | 23 | ```js 24 | var variable = language.name; 25 | // 变量包含字符串"JavaScript" 26 | variable = language['name']; 27 | // 这行代码和上行功能一样。不同之处在于这行代码将书面化的字符串作为属性名，不过缺少可读性。 28 | variable = language.newProperty; 29 | // 变量没定义，因为该属性没赋值。 30 | ``` 31 | 32 | 以下代码展示如何**添加**一个新属性或**改变**一个存在的属性。 33 | ```js 34 | language.newProperty = 'new value'; 35 | // 现在对象有一个新的属性。如果该属性已经存在，值将会被替换。 36 | language['newProperty'] = 'changed value'; 37 | // 两以上种方法都可以使用，更推荐第一种(使用`.`)。 38 | ``` 39 | -------------------------------------------------------------------------------- /objects/prototype.md: -------------------------------------------------------------------------------- 1 | # 原型 2 | 3 | 每个对象都与对象原型关联，继承了对象原型的属性。 4 | 5 | 所有对象创建时都从字面量对象（`{}`）继承，且都自动链接到的Object.prototype，Object.prototype 来自JavaScript标准。 6 | 7 | 8 | 当JavaScript解释器（在浏览器中一个模块），试图找到一个属性，它要检索，如下面的代码： 9 | ```js 10 | var adult = {age: 26}, 11 | retrievedProperty = adult.age; 12 | // 看上一行 13 | ``` 14 | 首先，解释器检查对象有的每个属性。例如，`adult`只有一个自己的属性 - `age`。但是，除此之外，实际上还有几个属性，这是继承自Object.prototype。 15 | 16 | ```js 17 | var stringRepresentation = adult.toString(); 18 | // 变量的值为 '[object Object]' 19 | ``` 20 | 21 | `toString` 是一个 Object.prototype 的属性, 这是继承。它有一个函数，返回值为一个对象的字符串。如果希望它返回一个更有意义的东西，那么你可以将其覆盖。简单的添加一个属性到adult对象。 22 | 23 | ```js 24 | adult.toString = function(){ 25 | return "I'm "+this.age; 26 | } 27 | ``` 28 | 29 | 如果现在调用 `toString` 函数，解释器将发现一个新的对象中的属性然后停止。 30 | 31 | 解释器解析某个属性时会先检查对象自己，再进一步检查他的原型。 32 | 33 | 要设置自己的对象为原型而不是默认的Object.prototype，你可以调用以下的`Object.create`： 34 | 35 | 36 | ```js 37 | var child = Object.create(adult); 38 | /* 通过这种方式创建的对象可以让我们轻松替换默认的Object.prototype成我们想要的。在这里，child的原型是adult对象。 39 | */ 40 | child.age = 8; 41 | /* 在此之前，child根本没有自己的年龄属性，解释器会寻找child的原型中是否有该属性。现在，当我们设置了child自身年龄，解释器就不深入寻找了。 42 | 注意：adult的年龄仍为26。 43 | */ 44 | var stringRepresentation = child.toString(); 45 | // 值为 "I'm 8"。 46 | /* 注意：我们没覆盖child的toString属性，因此adult类函数不会被调用。如果adult没有toString属性，那么Object.prototype的toString类函数将被调用，我们将得到"[object Object]" 而不是 "I'm 8" 。 47 | */ 48 | ``` 49 | 50 | `child`'的原型是`adult`，其原型为`Object.prototype`。这一系列原型被称为**原型链**。 51 | -------------------------------------------------------------------------------- /objects/reference.md: -------------------------------------------------------------------------------- 1 | # 引用 2 | 对象是**不会被复制**的。它们的传递靠引用。 3 | ```js 4 | // 假设我有一个匹萨 5 | var myPizza = {slices: 5}; 6 | // 然后我和你分享它 7 | var yourPizza = myPizza; 8 | // 我吃了一小片 9 | myPizza.slices = myPizza.slices - 1; 10 | var numberOfSlicesLeft = yourPizza.slices; 11 | // 我们总共有4片 12 | // 因为我们引用了同一块匹萨 13 | var a = {}, b = {}, c = {}; 14 | // a, b, 和 c 都引用不同的空对象 15 | a = b = c = {}; 16 | // a, b, 和 c 都引用同一个空对象 17 | 18 | ``` 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Javascript", 3 | "version": "0.0.6", 4 | "description": "", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/xinqiu/Learn-Javascript.git" 8 | }, 9 | "author": "xinqiu ", 10 | "license": "Apache 2", 11 | "dependencies": {}, 12 | "devDependencies": { 13 | "grunt": "~0.4.1", 14 | "grunt-gitbook": "0.2.0", 15 | "grunt-gh-pages": "0.9.1", 16 | "grunt-contrib-clean": "~0.5.0" 17 | }, 18 | "peerDependencies": { 19 | "grunt": "~0.4.1" 20 | } 21 | } -------------------------------------------------------------------------------- /strings/README.md: -------------------------------------------------------------------------------- 1 | # 字符串 2 | 3 | JavaScript的字符串与其他高级语言字符串的实现类似。这表示文本基于消息和数据。 4 | 5 | 在这章节将涉及一些基础。关于如何创建新的字符串和常见的一些字符串处理。 6 | 以下是是一个例子： 7 | ```javascript 8 | "Hello World" 9 | ``` -------------------------------------------------------------------------------- /strings/concat.md: -------------------------------------------------------------------------------- 1 | # 连接 2 | 3 | 连接同时涉及两个或以上字符串，创建了一个组合这些原始数据的更长的字符串。在Javascript中使用 **+** 运算符。 4 | 5 | ```js 6 | var bigStr = 'Hi ' + 'JS strings are nice ' + 'and ' + 'easy to add'; 7 | ``` 8 | 9 | {% exercise %} 10 | 连接不同的名字，这样变量 `fullName` 就包含了John的全名。 11 | {% initial %} 12 | var firstName = "John"; 13 | var lastName = "Smith"; 14 | 15 | var fullName = 16 | {% solution %} 17 | var firstName = "John"; 18 | var lastName = "Smith"; 19 | 20 | var fullName = firstName + " " + lastName; 21 | {% validation %} 22 | assert(fullName === 'John Smith'); 23 | {% endexercise %} 24 | -------------------------------------------------------------------------------- /strings/create.md: -------------------------------------------------------------------------------- 1 | # 创建 2 | 3 | 你可以在Javascript中，通过单引号或双引号定义字符串： 4 | 5 | ```js 6 | // 可以用单引号 7 | var str = 'Our lovely string'; 8 | 9 | // 也可以用双引号 10 | var otherStr = "Another nice string"; 11 | ``` 12 | 13 | 在Javascript中，字符串可以使用UTF-8编码： 14 | 15 | ```js 16 | "中文 español English हिन्दी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어"; 17 | ``` 18 | 19 | 20 | **注意:** 字符串不能进行减，乘或除的运算。 21 | 22 | {% exercise %} 23 | 创建一个名为 `str` 的变量，值为 `"abc"` 。 24 | {% solution %} 25 | var str = 'abc'; 26 | {% validation %} 27 | assert(str === 'abc'); 28 | {% endexercise %} 29 | -------------------------------------------------------------------------------- /strings/length.md: -------------------------------------------------------------------------------- 1 | # 长度 2 | 3 | 在Javascript中通过使用 `.length` 很容易知道字符串中有多少字母。 4 | 5 | ```js 6 | // 使用 .length 7 | var size = 'Our lovely string'.length; 8 | 9 | ``` 10 | 11 | **注意:** 字符串不能进行减，乘或除的运算。 12 | 13 | {% exercise %} 14 | 在变量 `size` 中储存 `str` 的长度。 15 | {% initial %} 16 | var str = "Hello World"; 17 | 18 | var size = 19 | {% solution %} 20 | var str = "Hello World"; 21 | 22 | var size = str.length; 23 | {% validation %} 24 | assert(size === str.length); 25 | {% endexercise %} -------------------------------------------------------------------------------- /strings/substrings.md: -------------------------------------------------------------------------------- 1 | # substring 2 | 3 | 子串被用来截取一部分字符串。 4 | 语法: substring(first_index,last_index). 5 | 6 | ```js 7 | var a = 'Hello world!'; 8 | document.write(a.substring(1,6)); 9 | ``` 10 | 11 | 上面的代码片段产生了 ```'ello '``` .注意 ‘w'(索引6) 不是这个子串的一部分。 12 | 13 | 我们也可以这样, 14 | ```js 15 | var a = 'Hello world!'; 16 | document.write(a.substring(2)); 17 | ``` 18 | 19 | ``` 'llo world!'```这产生从索引2到末尾的字符串。``` 'llo world!'``` 20 | 21 | ##substr 22 | 23 | 另一个方法substr()稍微有点不同。区别在于第二个参数， 24 | 25 | it gives the number of characters. 26 | ```js 27 | var a = 'Hello world!'; 28 | document.write(a.substr(1,6)); 29 | ``` 30 | 31 | 从索引 1 ('e')，切片出长度为 6 的字符串，也就是输出 ```ello w``` 32 | --------------------------------------------------------------------------------