| ` inside a table, taken from the specification: +Here's the picture, taken from the specification, of the capturing `(1)`, target `(2)` and bubbling `(3)` phases for a click event on a ` | ` inside a table:  That is: for a click on ` | ` the event first goes through the ancestors chain down to the element (capturing phase), then it reaches the target and triggers there (target phase), and then it goes up (bubbling phase), calling handlers on its way.
-**Before we only talked about bubbling, because the capturing phase is rarely used. Normally it is invisible to us.**
+Until now, we only talked about bubbling, because the capturing phase is rarely used.
-Handlers added using `on `, then the sequence is:
-1. `HTML` -> `BODY` -> `FORM` -> `DIV` (capturing phase, the first listener):
-2. `P` (target phrase, triggers two times, as we've set two listeners: capturing and bubbling)
-3. `DIV` -> `FORM` -> `BODY` -> `HTML` (bubbling phase, the second listener).
+1. `HTML` -> `BODY` -> `FORM` -> `DIV -> P` (capturing phase, the first listener):
+2. `P` -> `DIV` -> `FORM` -> `BODY` -> `HTML` (bubbling phase, the second listener).
+
+Please note, the `P` shows up twice, because we've set two listeners: capturing and bubbling. The target triggers at the end of the first and at the beginning of the second phase.
There's a property `event.eventPhase` that tells us the number of the phase on which the event was caught. But it's rarely used, because we usually know it in the handler.
@@ -190,7 +192,7 @@ There's a property `event.eventPhase` that tells us the number of the phase on w
If we `addEventListener(..., true)`, then we should mention the same phase in `removeEventListener(..., true)` to correctly remove the handler.
```
-````smart header="Listeners on same element and same phase run in their set order"
+````smart header="Listeners on the same element and same phase run in their set order"
If we have multiple event handlers on the same phase, assigned to the same element with `addEventListener`, they run in the same order as they are created:
```js
@@ -199,6 +201,12 @@ elem.addEventListener("click", e => alert(2));
```
````
+```smart header="The `event.stopPropagation()` during the capturing also prevents the bubbling"
+The `event.stopPropagation()` method and its sibling `event.stopImmediatePropagation()` can also be called on the capturing phase. Then not only the futher capturing is stopped, but the bubbling as well.
+
+In other words, normally the event goes first down ("capturing") and then up ("bubbling"). But if `event.stopPropagation()` is called during the capturing phase, then the event travel stops, no bubbling will occur.
+```
+
## Summary
@@ -206,7 +214,7 @@ When an event happens -- the most nested element where it happens gets labeled a
- Then the event moves down from the document root to `event.target`, calling handlers assigned with `addEventListener(..., true)` on the way (`true` is a shorthand for `{capture: true}`).
- Then handlers are called on the target element itself.
-- Then the event bubbles up from `event.target` up to the root, calling handlers assigned using `on Once upon a time there was a mother pig who had three little pigs. The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you."
+ The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you." The three little pigs set off. "We will take care that the wolf does not catch us," they said. Once upon a time there was a mother pig who had three little pigs. The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you."
+ The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you." The three little pigs set off. "We will take care that the wolf does not catch us," they said. Drag the ball. Mouse over here to see the date Date: ${new Date()} Date: ${new Date()} |
(253-1) (that's `9007199254740991`), or less than -(253-1) for negatives.
+
+To be really precise, the "number" type can store larger integers (up to 1.7976931348623157 * 10308), but outside of the safe integer range ±(253-1) there'll be a precision error, because not all digits fit into the fixed 64-bit storage. So an "approximate" value may be stored.
+
+For example, these two numbers (right above the safe range) are the same:
+
+```js
+console.log(9007199254740991 + 1); // 9007199254740992
+console.log(9007199254740991 + 2); // 9007199254740992
+```
+
+So to say, all odd integers greater than (253-1) can't be stored at all in the "number" type.
+
+For most purposes ±(253-1) range is quite enough, but sometimes we need the entire range of really big integers, e.g. for cryptography or microsecond-precision timestamps.
+
+`BigInt` type was recently added to the language to represent integers of arbitrary length.
+
+A `BigInt` value is created by appending `n` to the end of an integer:
+
+```js
+// the "n" at the end means it's a BigInt
+const bigInt = 1234567890123456789012345678901234567890n;
+```
+
+As `BigInt` numbers are rarely needed, we don't cover them here, but devoted them a separate chapter 253 （或小於 -253 ）的整數，這是其內部表示系統上的技術限制。這大約是 16 位十進位數字，在大多數的情況下，這個限制都不是問題，但有時我們真的需要很大的數字，例如用於密碼學或是精準度到 microsecond 的時間戳記。
@@ -88,8 +144,13 @@ JavaScript 中的字串（string）必須被引號（quotes）所環繞。
```js
let str = "Hello";
+<<<<<<< HEAD
let str2 = 'Single quotes are ok too（單引號也可以）';
let phrase = `can embed ${str}（字串可被 \${內嵌}）`;
+=======
+let str2 = 'Single quotes are ok too';
+let phrase = `can embed another ${str}`;
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```
在 JavaScript 中，有三種引號。
@@ -98,7 +159,11 @@ let phrase = `can embed ${str}（字串可被 \${內嵌}）`;
2. 單引號：`'Hello'`。
3. 反引號：`Hello`。
+<<<<<<< HEAD
單雙引號都是 "簡易的" 引號，在 JavaScript 中它們沒有差異。
+=======
+Double and single quotes are "simple" quotes. There's practically no difference between them in JavaScript.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
反引號是 "功能擴展" 引號，讓我們可以在字串中利用 `${...}` 嵌入變數或是表達式，例如：
@@ -121,6 +186,7 @@ alert( "the result is ${1 + 2}" ); // the result is ${1 + 2}（雙引號什麼
我們會在章節 ±(253-1).
+ - `bigint` for integer numbers of arbitrary length.
+ - `string` for strings. A string may have zero or more characters, there's no separate single-character type.
+ - `boolean` for `true`/`false`.
+ - `null` for unknown values -- a standalone type that has a single value `null`.
+ - `undefined` for unassigned values -- a standalone type that has a single value `undefined`.
+ - `symbol` for unique identifiers.
+- And one non-primitive data type:
+ - `object` for more complex data structures.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
`typeof` 運算子讓我們確認變數中儲存的類型。
+<<<<<<< HEAD
- 兩種格式：`typeof x` 或 `typeof(x)`。
- 回傳一個類型名稱的字串，像是 `"string"`。
- 對於 `null` 回傳 `"object"` -- 這是語言中的錯誤，它實際上不是個物件。
接下來的章節中，我們將更專注於介紹原生類型，一旦對它們更熟悉了，就會開始來介紹物件。
+=======
+- Usually used as `typeof x`, but `typeof(x)` is also possible.
+- Returns a string with the name of the type, like `"string"`.
+- For `null` returns `"object"` -- this is an error in the language, it's not actually an object.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
diff --git a/1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/solution.md b/1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/solution.md
similarity index 100%
rename from 1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/solution.md
rename to 1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/solution.md
diff --git a/1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/task.md b/1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/task.md
similarity index 100%
rename from 1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/task.md
rename to 1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/task.md
diff --git a/1-js/02-first-steps/09-alert-prompt-confirm/article.md b/1-js/02-first-steps/06-alert-prompt-confirm/article.md
similarity index 68%
rename from 1-js/02-first-steps/09-alert-prompt-confirm/article.md
rename to 1-js/02-first-steps/06-alert-prompt-confirm/article.md
index 19dc9ad91..863066954 100644
--- a/1-js/02-first-steps/09-alert-prompt-confirm/article.md
+++ b/1-js/02-first-steps/06-alert-prompt-confirm/article.md
@@ -1,5 +1,6 @@
# 互動： alert, prompt, confirm
+<<<<<<< HEAD:1-js/02-first-steps/09-alert-prompt-confirm/article.md
此部分的教程涵蓋 "原本" 的 JavaScript，不需對環境做特別調整。
但因為我們將使用瀏覽器做為演示環境，所以我們應該至少知道一些跟使用者互動的函式。在本章，我們將會對 `alert`、`prompt` 和 `confirm` 瀏覽器函式更為熟悉。
@@ -13,6 +14,13 @@ alert(message);
```
會顯示一段訊息並中斷腳本執行直到使用者按下 "OK"。
+=======
+As we'll be using the browser as our demo environment, let's see a couple of functions to interact with the user: `alert`, `prompt` and `confirm`.
+
+## alert
+
+This one we've seen already. It shows a message and waits for the user to press "OK".
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/06-alert-prompt-confirm/article.md
例如：
@@ -20,7 +28,11 @@ alert(message);
alert("Hello");
```
+<<<<<<< HEAD:1-js/02-first-steps/09-alert-prompt-confirm/article.md
該顯示訊息的迷你窗口稱之為 *模態視窗 （modal window）*。"模態 (modal)" 這個字代表使用者不能與頁面其他部分互動或按其他按鈕等，直到他們處理了這個視窗為止，在此處為 -- 直到它們按下 "OK"。
+=======
+The mini-window with the message is called a *modal window*. The word "modal" means that the visitor can't interact with the rest of the page, press other buttons, etc, until they have dealt with the window. In this case -- until they press "OK".
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/06-alert-prompt-confirm/article.md
## prompt
@@ -38,7 +50,15 @@ result = prompt(title, [default]);
`default`
: 可選的第二個參數，為輸入欄位的初始值。
+<<<<<<< HEAD:1-js/02-first-steps/09-alert-prompt-confirm/article.md
訪問者可在 prompt 輸入欄位寫些東西然後按下 OK。或者可藉由按下 Cancel 或 `key:Esc` 按鍵取消輸入。
+=======
+```smart header="The square brackets in syntax `[...]`"
+The square brackets around `default` in the syntax above denote that the parameter is optional, not required.
+```
+
+The visitor can type something in the prompt input field and press OK. Then we get that text in the `result`. Or they can cancel the input by pressing Cancel or hitting the `key:Esc` key, then we get `null` as the `result`.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/06-alert-prompt-confirm/article.md
呼叫 `prompt` 後會回傳輸入欄位的文字，或輸入被取消時則回傳 `null`。
diff --git a/1-js/02-first-steps/07-operators/3-primitive-conversions-questions/task.md b/1-js/02-first-steps/07-operators/3-primitive-conversions-questions/task.md
index 26348cecb..d56fc6187 100644
--- a/1-js/02-first-steps/07-operators/3-primitive-conversions-questions/task.md
+++ b/1-js/02-first-steps/07-operators/3-primitive-conversions-questions/task.md
@@ -16,7 +16,6 @@ true + false
"$" + 4 + 5
"4" - 2
"4px" - 2
-7 / 0
" -9 " + 5
" -9 " - 5
null + 1
diff --git a/1-js/02-first-steps/06-type-conversions/article.md b/1-js/02-first-steps/07-type-conversions/article.md
similarity index 71%
rename from 1-js/02-first-steps/06-type-conversions/article.md
rename to 1-js/02-first-steps/07-type-conversions/article.md
index 039cd128c..a8d75223b 100644
--- a/1-js/02-first-steps/06-type-conversions/article.md
+++ b/1-js/02-first-steps/07-type-conversions/article.md
@@ -1,13 +1,24 @@
# 類型轉換
+<<<<<<< HEAD:1-js/02-first-steps/06-type-conversions/article.md
大多時候，運算子和函式會自動轉換給予它們的值為正確類型。
+=======
+Most of the time, operators and functions automatically convert the values given to them to the right type.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/07-type-conversions/article.md
例如，`alert` 自動將任何值轉換成字串並顯示，數學運算子會把值轉換成數值。
當然某些情況我們得明確地轉換一個值至預期的類型。
+<<<<<<< HEAD:1-js/02-first-steps/06-type-conversions/article.md
```smart header="還沒開始談到物件類型"
在這章節，我們將不會轉換物件類型，我們會從原生類型開始說起。等晚點我們學完物件後，會在章節 true 和 false | `1` 和 `0` |
| `string` | 先去除頭尾空白，如果剩下的字串是空字串則結果是 `0`，否則數值將被從剩下的字串中被 "讀取"，此時若有錯誤將產生 `NaN`。 |
+=======
+|true and false | `1` and `0` |
+| `string` | Whitespaces (includes spaces, tabs `\t`, newlines `\n` etc.) from the start and end are removed. If the remaining string is empty, the result is `0`. Otherwise, the number is "read" from the string. An error gives `NaN`. |
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/07-type-conversions/article.md
例子：
@@ -81,6 +101,7 @@ alert( Number(false) ); // 0
請注意 `null` 和 `undefined` 的行為在此處不同：`null` 會變成零，而 `undefined` 會變成 `NaN`。
+<<<<<<< HEAD:1-js/02-first-steps/06-type-conversions/article.md
````smart header="加法 '+' 連接字串們"
幾乎所有數學運算子都會將值轉成數值，而加法 `+` 是個值得一提的例外。如果加法某側運算元是個字串，另一側將也會被轉換成字串。
@@ -93,6 +114,9 @@ alert( '1' + 2 ); // '12'（左側為字串）
這只發生在當至少一側的引數是字串時，否則值都會被轉為數值。
````
+=======
+Most mathematical operators also perform such conversion, we'll see that in the next chapter.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/07-type-conversions/article.md
# Boolean Conversion
@@ -139,7 +163,11 @@ alert( Boolean(" ") ); // 空白，也是 true（任何非空字串都是 true
|`undefined`|`NaN`|
|`null`|`0`|
|true / false | `1 / 0` |
+<<<<<<< HEAD:1-js/02-first-steps/06-type-conversions/article.md
| `string` | 字串 "依原樣" 讀取並忽略頭尾空白，若為空字串則為 `0`，有錯誤則成為 `NaN`。 |
+=======
+| `string` | The string is read "as is", whitespaces (includes spaces, tabs `\t`, newlines `\n` etc.) from both sides are ignored. An empty string becomes `0`. An error gives `NaN`. |
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/07-type-conversions/article.md
**`布林轉換`** -- 用於邏輯運算，可使用 `Boolean(value)` 來轉換。
diff --git a/1-js/02-first-steps/07-operators/1-increment-order/solution.md b/1-js/02-first-steps/08-operators/1-increment-order/solution.md
similarity index 100%
rename from 1-js/02-first-steps/07-operators/1-increment-order/solution.md
rename to 1-js/02-first-steps/08-operators/1-increment-order/solution.md
diff --git a/1-js/02-first-steps/07-operators/1-increment-order/task.md b/1-js/02-first-steps/08-operators/1-increment-order/task.md
similarity index 100%
rename from 1-js/02-first-steps/07-operators/1-increment-order/task.md
rename to 1-js/02-first-steps/08-operators/1-increment-order/task.md
diff --git a/1-js/02-first-steps/07-operators/2-assignment-result/solution.md b/1-js/02-first-steps/08-operators/2-assignment-result/solution.md
similarity index 100%
rename from 1-js/02-first-steps/07-operators/2-assignment-result/solution.md
rename to 1-js/02-first-steps/08-operators/2-assignment-result/solution.md
diff --git a/1-js/02-first-steps/07-operators/2-assignment-result/task.md b/1-js/02-first-steps/08-operators/2-assignment-result/task.md
similarity index 100%
rename from 1-js/02-first-steps/07-operators/2-assignment-result/task.md
rename to 1-js/02-first-steps/08-operators/2-assignment-result/task.md
diff --git a/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md
new file mode 100644
index 000000000..7370b66af
--- /dev/null
+++ b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md
@@ -0,0 +1,25 @@
+
+```js no-beautify
+"" + 1 + 0 = "10" // (1)
+"" - 1 + 0 = -1 // (2)
+true + false = 1
+6 / "3" = 2
+"2" * "3" = 6
+4 + 5 + "px" = "9px"
+"$" + 4 + 5 = "$45"
+"4" - 2 = 2
+"4px" - 2 = NaN
+" -9 " + 5 = " -9 5" // (3)
+" -9 " - 5 = -14 // (4)
+null + 1 = 1 // (5)
+undefined + 1 = NaN // (6)
+" \t \n" - 2 = -2 // (7)
+```
+
+1. The addition with a string `"" + 1` converts `1` to a string: `"" + 1 = "1"`, and then we have `"1" + 0`, the same rule is applied.
+2. The subtraction `-` (like most math operations) only works with numbers, it converts an empty string `""` to `0`.
+3. The addition with a string appends the number `5` to the string.
+4. The subtraction always converts to numbers, so it makes `" -9 "` a number `-9` (ignoring spaces around it).
+5. `null` becomes `0` after the numeric conversion.
+6. `undefined` becomes `NaN` after the numeric conversion.
+7. Space characters are trimmed off string start and end when a string is converted to a number. Here the whole string consists of space characters, such as `\t`, `\n` and a "regular" space between them. So, similarly to an empty string, it becomes `0`.
diff --git a/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md
new file mode 100644
index 000000000..d56fc6187
--- /dev/null
+++ b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md
@@ -0,0 +1,27 @@
+importance: 5
+
+---
+
+# 類型轉換
+
+這些表達式的結果會是什麼？
+
+```js no-beautify
+"" + 1 + 0
+"" - 1 + 0
+true + false
+6 / "3"
+"2" * "3"
+4 + 5 + "px"
+"$" + 4 + 5
+"4" - 2
+"4px" - 2
+" -9 " + 5
+" -9 " - 5
+null + 1
+undefined + 1
+" \t \n" - 2
+```
+
+好好想一下，把結果寫下來並和答案對照看看。
+
diff --git a/1-js/02-first-steps/08-operators/4-fix-prompt/solution.md b/1-js/02-first-steps/08-operators/4-fix-prompt/solution.md
new file mode 100644
index 000000000..209a0702c
--- /dev/null
+++ b/1-js/02-first-steps/08-operators/4-fix-prompt/solution.md
@@ -0,0 +1,32 @@
+The reason is that prompt returns user input as a string.
+
+So variables have values `"1"` and `"2"` respectively.
+
+```js run
+let a = "1"; // prompt("First number?", 1);
+let b = "2"; // prompt("Second number?", 2);
+
+alert(a + b); // 12
+```
+
+What we should do is to convert strings to numbers before `+`. For example, using `Number()` or prepending them with `+`.
+
+For example, right before `prompt`:
+
+```js run
+let a = +prompt("First number?", 1);
+let b = +prompt("Second number?", 2);
+
+alert(a + b); // 3
+```
+
+Or in the `alert`:
+
+```js run
+let a = prompt("First number?", 1);
+let b = prompt("Second number?", 2);
+
+alert(+a + +b); // 3
+```
+
+Using both unary and binary `+` in the latest code. Looks funny, doesn't it?
diff --git a/1-js/02-first-steps/08-operators/4-fix-prompt/task.md b/1-js/02-first-steps/08-operators/4-fix-prompt/task.md
new file mode 100644
index 000000000..b3ea4a3a3
--- /dev/null
+++ b/1-js/02-first-steps/08-operators/4-fix-prompt/task.md
@@ -0,0 +1,18 @@
+importance: 5
+
+---
+
+# Fix the addition
+
+Here's a code that asks the user for two numbers and shows their sum.
+
+It works incorrectly. The output in the example below is `12` (for default prompt values).
+
+Why? Fix it. The result should be `3`.
+
+```js run
+let a = prompt("First number?", 1);
+let b = prompt("Second number?", 2);
+
+alert(a + b); // 12
+```
diff --git a/1-js/02-first-steps/07-operators/article.md b/1-js/02-first-steps/08-operators/article.md
similarity index 63%
rename from 1-js/02-first-steps/07-operators/article.md
rename to 1-js/02-first-steps/08-operators/article.md
index dd328a96f..fe73b1e80 100644
--- a/1-js/02-first-steps/07-operators/article.md
+++ b/1-js/02-first-steps/08-operators/article.md
@@ -1,8 +1,16 @@
+<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md
# 運算子（Operators）
+=======
+# Basic operators, maths
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/08-operators/article.md
我們從學校學到許多運算子，像是加法 `+`、乘法 `*`、減法 `-` 等等。
+<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md
在本章，我們會更專注有別於學校算術運算涵蓋的部分。
+=======
+In this chapter, we’ll start with simple operators, then concentrate on JavaScript-specific aspects, not covered by school arithmetic.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/08-operators/article.md
## 術語："一元運算子（unary）"、“二元運算子（binary）"、"運算元（operand）"
@@ -28,9 +36,66 @@
正式地說，上例中的兩種不同運算子使用同一個符號：一元負號運算子（單一個運算元，正負轉換）和二元減號運算子（兩個運算元，一對一的數值減法）。
+<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md
## 字串連接，二元運算子 +
現在來看看學校沒教的 JavaScript 特殊功能運算子。
+=======
+## Maths
+
+The following math operations are supported:
+
+- Addition `+`,
+- Subtraction `-`,
+- Multiplication `*`,
+- Division `/`,
+- Remainder `%`,
+- Exponentiation `**`.
+
+The first four are straightforward, while `%` and `**` need a few words about them.
+
+### Remainder %
+
+The remainder operator `%`, despite its appearance, is not related to percents.
+
+The result of `a % b` is the [remainder](https://en.wikipedia.org/wiki/Remainder) of the integer division of `a` by `b`.
+
+For instance:
+
+```js run
+alert( 5 % 2 ); // 1, the remainder of 5 divided by 2
+alert( 8 % 3 ); // 2, the remainder of 8 divided by 3
+alert( 8 % 4 ); // 0, the remainder of 8 divided by 4
+```
+
+### Exponentiation **
+
+The exponentiation operator `a ** b` raises `a` to the power of `b`.
+
+In school maths, we write that as ab.
+
+For instance:
+
+```js run
+alert( 2 ** 2 ); // 2² = 4
+alert( 2 ** 3 ); // 2³ = 8
+alert( 2 ** 4 ); // 2⁴ = 16
+```
+
+Just like in maths, the exponentiation operator is defined for non-integer numbers as well.
+
+For example, a square root is an exponentiation by ½:
+
+```js run
+alert( 4 ** (1/2) ); // 2 (power of 1/2 is the same as a square root)
+alert( 8 ** (1/3) ); // 2 (power of 1/3 is the same as a cubic root)
+```
+
+
+## String concatenation with binary +
+
+Let's meet the features of JavaScript operators that are beyond school arithmetics.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/08-operators/article.md
通常加法運算子 `+` 用於加總數值。
@@ -41,7 +106,11 @@ let s = "my" + "string";
alert(s); // mystring
```
+<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md
注意只要某一側運算元是字串，另一側將會被轉換成字串類型。
+=======
+Note that if any of the operands is a string, then the other one is converted to a string too.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/08-operators/article.md
例如：
@@ -50,21 +119,40 @@ alert( '1' + 2 ); // "12"
alert( 2 + '1' ); // "21"
```
+<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md
看吧，它並不在意字串是第一個還是第二個運算元，規則就是如此簡單：若一側運算元是字串，另一側就也會被轉成字串。
然而要注意由左到右一系列的運算。如果是兩個數值運算然後才接著字串，數值們會在被轉成字串前先被加總：
+=======
+See, it doesn't matter whether the first operand is a string or the second one.
+
+Here's a more complex example:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/08-operators/article.md
```js run
alert(2 + 2 + '1' ); // "41" 而非 "221"
```
+<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md
字串連結與轉換是二元加法運算子的一個特殊功能。其他算術運算只用於數值上，且總是會將它們的運算元轉為數值。
例如，減法和除法：
+=======
+Here, operators work one after another. The first `+` sums two numbers, so it returns `4`, then the next `+` adds the string `1` to it, so it's like `4 + '1' = '41'`.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/08-operators/article.md
```js run
-alert( 2 - '1' ); // 1
-alert( '6' / '2' ); // 3
+alert('1' + 2 + 2); // "122" and not "14"
+```
+Here, the first operand is a string, the compiler treats the other two operands as strings too. The `2` gets concatenated to `'1'`, so it's like `'1' + 2 = "12"` and `"12" + 2 = "122"`.
+
+The binary `+` is the only operator that supports strings in such a way. Other arithmetic operators work only with numbers and always convert their operands to numbers.
+
+Here's the demo for subtraction and division:
+
+```js run
+alert( 6 - '2' ); // 4, converts '2' to a number
+alert( '6' / '2' ); // 3, converts both operands to numbers
```
## 數值轉換，一元運算子 +
@@ -132,11 +220,16 @@ alert( +apples + +oranges ); // 5
JavaScript 中有許多運算子，每個運算子都有個對應的優先權號碼，更大號碼的運算子會更早執行。若優先權相同，則按照左至右的方式執行。
+<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md
這個表格來自於 [優先權列表](https://developer.mozilla.org/en/JavaScript/Reference/operators/operator_precedence)（你不需要記憶這個表，只要注意一元運算子都比對應的二元運算子有更高權限就好）：
+=======
+Here's an extract from the [precedence table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence) (you don't need to remember this, but note that unary operators are higher than corresponding binary ones):
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/08-operators/article.md
| 優先權 | 名稱 | 符號 |
|------------|------|------|
| ... | ... | ... |
+<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md
| 17 | 一元正號 | `+` |
| 17 | 一元負號 | `-` |
| 15 | 乘法 | `*` |
@@ -148,10 +241,28 @@ JavaScript 中有許多運算子，每個運算子都有個對應的優先權號
| ... | ... | ... |
我們可以看到，"一元正號運算子" 有著優先權號碼 `17`，比 "加法（二元加法運算子）" 的 `13` 還高。這也是為什麼在表達式 `"+apples + +oranges"` 中，一元正號運算子比加法還要更早運作。
+=======
+| 14 | unary plus | `+` |
+| 14 | unary negation | `-` |
+| 13 | exponentiation | `**` |
+| 12 | multiplication | `*` |
+| 12 | division | `/` |
+| 11 | addition | `+` |
+| 11 | subtraction | `-` |
+| ... | ... | ... |
+| 2 | assignment | `=` |
+| ... | ... | ... |
+
+As we can see, the "unary plus" has a priority of `14` which is higher than the `11` of "addition" (binary plus). That's why, in the expression `"+apples + +oranges"`, unary pluses work before the addition.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/08-operators/article.md
## 指定運算子（Assignment）
+<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md
注意看指定符號 `=` 也是一個運算子，它也被列在優先權列表中，但只有非常低的優先權 `3`。
+=======
+Let's note that an assignment `=` is also an operator. It is listed in the precedence table with the very low priority of `2`.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/08-operators/article.md
這就是為什麼當我們指定一個變數，像是 `x = 2 * 2 + 1` 時，計算會先完成然後才指定，把結果存入 `x` 中。
@@ -161,11 +272,15 @@ let x = 2 * 2 + 1;
alert( x ); // 5
```
+<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md
鏈結指定是可行的：
+=======
+### Assignment = returns a value
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/08-operators/article.md
-```js run
-let a, b, c;
+The fact of `=` being an operator, not a "magical" language construct has an interesting implication.
+<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md
*!*
a = b = c = 2 + 2;
*/!*
@@ -179,6 +294,9 @@ alert( c ); // 4
````smart header="指定運算子 `\"=\"` 會回傳一個值"
一個運算子總是會回傳一個值，這在大部分像是加法 `+` 或乘法 `*` 運算上都很明顯，而指定運算子也遵守這個規則。
+=======
+All operators in JavaScript return a value. That's obvious for `+` and `-`, but also true for `=`.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/08-operators/article.md
呼叫 `x = value` 把 `value` 寫進 `x` 內 *並且回傳 x*。
@@ -198,6 +316,7 @@ alert( c ); // 0
上面例子中，表達式 `(a = b + 1)` 的結果是 `a` 被指定的值 (也就是 `3`)，接著被用於進一步的運算上。
+<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md
很有趣的程式碼對吧？我們應該了解它是如何運作的，因為有時候會在 JavaScript 函式庫中看到它。但我們不該自己寫成這樣，這種技巧真的不會讓程式碼變得更乾淨或易讀。
````
@@ -222,13 +341,52 @@ alert( 6 % 3 ); // 0 是 6 除以 3 的餘數
對一個數 `b` 而言，`a ** b` 的結果是 `a` 與自己相乘共 `b` 次。
例如：
+=======
+Funny code, isn't it? We should understand how it works, because sometimes we see it in JavaScript libraries.
+
+Although, please don't write the code like that. Such tricks definitely don't make code clearer or readable.
+
+### Chaining assignments
+
+Another interesting feature is the ability to chain assignments:
```js run
-alert( 2 ** 2 ); // 4 (2 * 2)
-alert( 2 ** 3 ); // 8 (2 * 2 * 2)
-alert( 2 ** 4 ); // 16 (2 * 2 * 2 * 2)
+let a, b, c;
+
+*!*
+a = b = c = 2 + 2;
+*/!*
+
+alert( a ); // 4
+alert( b ); // 4
+alert( c ); // 4
```
+Chained assignments evaluate from right to left. First, the rightmost expression `2 + 2` is evaluated and then assigned to the variables on the left: `c`, `b` and `a`. At the end, all the variables share a single value.
+
+Once again, for the purposes of readability it's better to split such code into few lines:
+
+```js
+c = 2 + 2;
+b = c;
+a = c;
+```
+That's easier to read, especially when eye-scanning the code fast.
+
+## Modify-in-place
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/08-operators/article.md
+
+We often need to apply an operator to a variable and store the new result in that same variable.
+
+For example:
+
+```js
+let n = 2;
+n = n + 5;
+n = n * 2;
+```
+
+<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md
該運算子也可用於非整數上。
如：
@@ -236,11 +394,33 @@ alert( 2 ** 4 ); // 16 (2 * 2 * 2 * 2)
```js run
alert( 4 ** (1/2) ); // 2（數學上 1/2 次方代表著開平方根）
alert( 8 ** (1/3) ); // 2（1/3 次方代表著開立方根）
+=======
+This notation can be shortened using the operators `+=` and `*=`:
+
+```js run
+let n = 2;
+n += 5; // now n = 7 (same as n = n + 5)
+n *= 2; // now n = 14 (same as n = n * 2)
+
+alert( n ); // 14
+```
+
+Short "modify-and-assign" operators exist for all arithmetical and bitwise operators: `/=`, `-=`, etc.
+
+Such operators have the same precedence as a normal assignment, so they run after most other calculations:
+
+```js run
+let n = 2;
+
+n *= 3 + 5; // right part evaluated first, same as n *= 8
+
+alert( n ); // 16
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/08-operators/article.md
```
## 遞增（Increment）/ 遞減（decrement）
-
+
一次遞增或遞減一個數值幾乎是最常見到的數值運算。
@@ -367,6 +547,7 @@ counter++;
- RIGHT SHIFT ( `>>` )
- ZERO-FILL RIGHT SHIFT ( `>>>` )
+<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md
這些運算子很少被使用，為了理解它們，我們必須得鑽研數值的底層表示方式，但現在不是個好時機，尤其是我們不會很快需要使用它們時。如果你有興趣，可以閱讀 MDN 上的這篇文章 [Bitwise Operators](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators)。在有具體需求時再來查看比較實際。
## 原地修改 (Modify-in-place)
@@ -402,6 +583,9 @@ n *= 3 + 5;
alert( n ); // 16（右側先被計算，與 n *= 8 相同）
```
+=======
+These operators are used very rarely, when we need to fiddle with numbers on the very lowest (bitwise) level. We won't need these operators any time soon, as web development has little use of them, but in some special areas, such as cryptography, they are useful. You can read the [Bitwise Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise_operators) chapter on MDN when a need arises.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/08-operators/article.md
## 逗號運算子
diff --git a/1-js/02-first-steps/08-comparison/1-comparison-questions/solution.md b/1-js/02-first-steps/09-comparison/1-comparison-questions/solution.md
similarity index 52%
rename from 1-js/02-first-steps/08-comparison/1-comparison-questions/solution.md
rename to 1-js/02-first-steps/09-comparison/1-comparison-questions/solution.md
index ed93816e6..8b250b2fe 100644
--- a/1-js/02-first-steps/08-comparison/1-comparison-questions/solution.md
+++ b/1-js/02-first-steps/09-comparison/1-comparison-questions/solution.md
@@ -12,6 +12,7 @@ null === +"\n0\n" → false
答案解析:
+<<<<<<< HEAD:1-js/02-first-steps/08-comparison/1-comparison-questions/solution.md
1. 數字間的大小比較，很顯然答案為 true。
2. 按字典順序比較，因此為 false。
3. 與上題相同，按字典順序比較，第一個字母 `"2"` 大於另一個字串的第一個字母 `"1"`。
@@ -19,3 +20,12 @@ null === +"\n0\n" → false
5. 嚴格比較下，比較不同類別的值會得到 false。
6. 與`（4）` 相仿，`null` 只與 `undefined` 相等。
7. 嚴格比較下，不同類別的值會直接回傳 false。
+=======
+1. Obviously, true.
+2. Dictionary comparison, hence false. `"a"` is smaller than `"p"`.
+3. Again, dictionary comparison, first char `"2"` is greater than the first char `"1"`.
+4. Values `null` and `undefined` equal each other only.
+5. Strict equality is strict. Different types from both sides lead to false.
+6. Similar to `(4)`, `null` only equals `undefined`.
+7. Strict equality of different types.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/09-comparison/1-comparison-questions/solution.md
diff --git a/1-js/02-first-steps/08-comparison/1-comparison-questions/task.md b/1-js/02-first-steps/09-comparison/1-comparison-questions/task.md
similarity index 100%
rename from 1-js/02-first-steps/08-comparison/1-comparison-questions/task.md
rename to 1-js/02-first-steps/09-comparison/1-comparison-questions/task.md
diff --git a/1-js/02-first-steps/08-comparison/article.md b/1-js/02-first-steps/09-comparison/article.md
similarity index 79%
rename from 1-js/02-first-steps/08-comparison/article.md
rename to 1-js/02-first-steps/09-comparison/article.md
index bf8c97d4c..c836ac879 100644
--- a/1-js/02-first-steps/08-comparison/article.md
+++ b/1-js/02-first-steps/09-comparison/article.md
@@ -1,15 +1,34 @@
# 值的比較
+<<<<<<< HEAD:1-js/02-first-steps/08-comparison/article.md
我們知道許多數學上的比較運算子：
- 大於/小於：a > b, a < b。
- 大於等於/小於等於：a >= b, a <= b。
- 等於：`a == b`（請注意這裡使用的是兩個等號 `=`。單一個等號 `a = b` 代表的是賦值。
- 不等於：在數學中我們使用 ≠ 來表示，但在 JavaScript 中，是透過在單一個等號前方加上驚嘆號作為表示：a != b。
+=======
+We know many comparison operators from maths.
+
+In JavaScript they are written like this:
+
+- Greater/less than: a > b, a < b.
+- Greater/less than or equals: a >= b, a <= b.
+- Equals: `a == b`, please note the double equality sign `==` means the equality test, while a single one `a = b` means an assignment.
+- Not equals: In maths the notation is ≠, but in JavaScript it's written as a != b.
+
+In this article we'll learn more about different types of comparisons, how JavaScript makes them, including important peculiarities.
+
+At the end you'll find a good recipe to avoid "JavaScript quirks"-related issues.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/09-comparison/article.md
## 比較結果為布林（Boolean）類型
+<<<<<<< HEAD:1-js/02-first-steps/08-comparison/article.md
如同其他運算子，一個比較運算會回傳一個值。在這個例子中，其回傳值的類型為布林值（Boolean）。
+=======
+All comparison operators return a boolean value:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/09-comparison/article.md
- `true` -- 代表 "yes（是）", "correct（正確）" 或 "the truth（真理）"。
- `false` -- means "no（否）", "wrong（錯誤）" 或 "not the truth（非真理）"。
@@ -51,7 +70,13 @@ alert( 'Bee' > 'Be' ); // true
4. 重複上述步驟直到任一字串率先用完所有字元。
5. 如果兩個字串同時比完所有字元，意即擁有相同長度，則可判定雙方為相等。否則，具有尚未比完字元的字串（長度較長）者為大。
+<<<<<<< HEAD:1-js/02-first-steps/08-comparison/article.md
在上面的範例中，`'Z' > 'A'` 在第一步驟就取得結果，而字串 `"Glow"` 和 `"Glee"` 則繼續按字元逐個比較：
+=======
+In the first example above, the comparison `'Z' > 'A'` gets to a result at the first step.
+
+The second comparison `'Glow'` and `'Glee'` needs more steps as strings are compared character-by-character:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/09-comparison/article.md
1. `G` 和 `G` 相等。
2. `l` 和 `l` 相等。
@@ -192,6 +217,7 @@ alert( undefined == 0 ); // false (3)
- 比較式 `（1）`與`（2）`回傳 `false`，因為 `undefined` 在進行比較時，被轉換成了 `NaN`，而 `NaN` 是一個特殊的數字類型，它與任何值比較都會回傳 `false`。
- 相等性檢查 `（3）`回傳 `false`，因為在定義中， `undefined` 只與 `null` 和 `undefined` 相等，不會與其他值相等。
+<<<<<<< HEAD:1-js/02-first-steps/08-comparison/article.md
### 避免錯誤
為何我們要研究上述範例呢？我們應該要時刻記住這些奇怪的規則嗎？其實並不需要。實際上，隨著時間，你會對這些奇怪的事情漸漸熟悉，但有個更為可靠的方式可以用來避免這方面的問題：
@@ -199,6 +225,14 @@ alert( undefined == 0 ); // false (3)
除了嚴格相等 `===` 以外，其他凡是有 `undefined/null` 參與的比較運算，多放點心思注意一下。
除非你非常清楚自己在做什麼，否則不要使用 `>= > < <=` 去比較一個可能為 `null/undefined` 的變數。如果一個變數可能會是 `null/undefined`，將這兩者的可能情況分開檢查。
+=======
+### Avoid problems
+
+Why did we go over these examples? Should we remember these peculiarities all the time? Well, not really. Actually, these tricky things will gradually become familiar over time, but there's a solid way to avoid problems with them:
+
+- Treat any comparison with `undefined/null` except the strict equality `===` with exceptional care.
+- Don't use comparisons `>= > < <=` with a variable which may be `null/undefined`, unless you're really sure of what you're doing. If a variable can have these values, check for them separately.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/09-comparison/article.md
## 總結
diff --git a/1-js/02-first-steps/10-ifelse/2-check-standard/task.md b/1-js/02-first-steps/10-ifelse/2-check-standard/task.md
index 5068d41ea..0ba14d542 100644
--- a/1-js/02-first-steps/10-ifelse/2-check-standard/task.md
+++ b/1-js/02-first-steps/10-ifelse/2-check-standard/task.md
@@ -6,7 +6,11 @@ importance: 2
使用 `if..else` 結構，寫一段程式碼詢問：'What is the "official" name of JavaScript?'
+<<<<<<< HEAD
如果訪問者輸入 "ECMAScript"，則輸出 "Right!"，否則 -- 輸出："Didn't know? ECMAScript!"
+=======
+If the visitor enters "ECMAScript", then output "Right!", otherwise -- output: "You don't know? ECMAScript!"
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
diff --git a/1-js/02-first-steps/10-ifelse/article.md b/1-js/02-first-steps/10-ifelse/article.md
index 0d6293568..28f2148a5 100644
--- a/1-js/02-first-steps/10-ifelse/article.md
+++ b/1-js/02-first-steps/10-ifelse/article.md
@@ -1,4 +1,8 @@
+<<<<<<< HEAD
# 條件運算子：if、'?'
+=======
+# Conditional branching: if, '?'
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
有時候我們需要根據不同條件執行不同操作。
@@ -68,9 +72,13 @@ if (cond) {
## "else" 語句
+<<<<<<< HEAD
`if` 述語可以包含一個可選的 "else" 區塊，它會在條件為 false 時執行。
例如：
+=======
+The `if` statement may contain an optional `else` block. It executes when the condition is falsy.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js run
let year = prompt('In which year was the ECMAScript-2015 specification published?', '');
@@ -183,10 +191,17 @@ alert( message );
第一眼可能很難看出發生什麼事，但進一步細看，我們可以發現這只是普通的一連串檢查：
+<<<<<<< HEAD
1. 第一個問號確認 `age < 3`。
2. 若為真 -- 回傳 `'Hi, baby!'`，否則進到冒號 `":"` 後的表達式，檢查 `age < 18`。
3. 若為真 -- 回傳 `'Hello!'`，否則進到下一個冒號 `":"` 後的表達式，檢查 `age < 100`。
4. 若為真 -- 回傳 `'Greetings!'`，否則進到最後一個冒號 `":"` 後的表達式，回傳 `'What an unusual age!'`。
+=======
+1. The first question mark checks whether `age < 3`.
+2. If true -- it returns `'Hi, baby!'`. Otherwise, it continues to the expression after the colon ":", checking `age < 18`.
+3. If that's true -- it returns `'Hello!'`. Otherwise, it continues to the expression after the next colon ":", checking `age < 100`.
+4. If that's true -- it returns `'Greetings!'`. Otherwise, it continues to the expression after the last colon ":", returning `'What an unusual age!'`.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
使用 `if...else` 達到同樣效果的樣子：
diff --git a/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md b/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md
index 953add9e1..ac57c9969 100644
--- a/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md
+++ b/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md
@@ -6,8 +6,14 @@ alert( alert(1) || 2 || alert(3) );
呼叫 `alert` 沒有回傳值。或者，換句話說，它回傳 `undefined`。
+<<<<<<< HEAD
1. 第一個 OR `||` 核定它左側的運算元 `alert(1)`，它顯示第一段訊息 `1`。
2. 該 `alert` 回傳 `undefined`，接著 OR 來到第二個運算元尋找真值。
3. 第二個運算元 `2` 是真值，所以執行停止，`2` 被回傳並且被外部的 alert 顯示。
+=======
+1. The first OR `||` evaluates its left operand `alert(1)`. That shows the first message with `1`.
+2. The `alert` returns `undefined`, so OR goes on to the second operand searching for a truthy value.
+3. The second operand `2` is truthy, so the execution is halted, `2` is returned and then shown by the outer alert.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
不會顯示 `3`，因為核定根本到不了 `alert(3)`。
diff --git a/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md b/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md
index ad005468e..8a12006ee 100644
--- a/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md
+++ b/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md
@@ -1,6 +1,6 @@
答案是：`null`，因為它是串列中的第一個虛值。
```js run
-alert( 1 && null && 2 );
+alert(1 && null && 2);
```
diff --git a/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md b/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md
index 51c19b413..7da17dfc4 100644
--- a/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md
+++ b/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md
@@ -4,7 +4,11 @@ importance: 3
# 檢查區間
+<<<<<<< HEAD
寫一個 "if" 條件來檢查 `age` 是否在包含 `14` 至 `90` 的閉區間內。
"包含" 代表著 `age` 可抵達 `14` 或 `90` 邊界。
+=======
+Write an `if` condition to check that `age` is between `14` and `90` inclusively.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
diff --git a/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md b/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md
index 11fa8373a..dd2b5d0fe 100644
--- a/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md
+++ b/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md
@@ -4,7 +4,11 @@ importance: 3
# 檢查出界
+<<<<<<< HEAD
寫一個 `if` 條件檢查 `age` **沒有** 在包含 14 到 90 的閉區間內。
寫出兩種變化：第一個使用 NOT `!`，第二個不使用。
+=======
+Write an `if` condition to check that `age` is NOT between `14` and `90` inclusively.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
diff --git a/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md b/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md
index 1eab2623c..10862c4c7 100644
--- a/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md
+++ b/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md
@@ -1,19 +1,19 @@
```js run demo
let userName = prompt("Who's there?", '');
-if (userName == 'Admin') {
+if (userName === 'Admin') {
let pass = prompt('Password?', '');
- if (pass == 'TheMaster') {
+ if (pass === 'TheMaster') {
alert( 'Welcome!' );
- } else if (pass == '' || pass == null) {
+ } else if (pass === '' || pass === null) {
alert( 'Canceled' );
} else {
alert( 'Wrong password' );
}
-} else if (userName == '' || userName == null) {
+} else if (userName === '' || userName === null) {
alert( 'Canceled' );
} else {
alert( "I don't know you" );
diff --git a/1-js/02-first-steps/11-logical-operators/article.md b/1-js/02-first-steps/11-logical-operators/article.md
index 64fd4a800..c87f2c218 100644
--- a/1-js/02-first-steps/11-logical-operators/article.md
+++ b/1-js/02-first-steps/11-logical-operators/article.md
@@ -1,6 +1,10 @@
# 邏輯運算子
+<<<<<<< HEAD
JavaScript 中有三種邏輯運算子：`||`（OR）、`&&`（AND）和 `!`（NOT）。
+=======
+There are four logical operators in JavaScript: `||` (OR), `&&` (AND), `!` (NOT), `??` (Nullish Coalescing). Here we cover the first three, the `??` operator is in the next article.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
雖然被稱為 "邏輯"，這些運算子也可被用於不只是布林類型的任何值上，結果亦可能是任何類型。
@@ -64,7 +68,11 @@ if (hour < 10 || hour > 18 || isWeekend) {
}
```
+<<<<<<< HEAD
## OR "||" 找出第一個真值
+=======
+## OR "||" finds the first truthy value [#or-finds-the-first-truthy-value]
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
前面提到的邏輯運算有點傳統，現在來看些 JavaScript 的 "額外" 特性。
@@ -84,34 +92,55 @@ OR `||` 運算子做以下的事：
回傳值是其原始型式，而非轉換的結果。
+<<<<<<< HEAD
也就是說，一連串 OR `||` 回傳第一個真值，或在都沒有找到真值時回傳最後一個值。
+=======
+In other words, a chain of OR `||` returns the first truthy value or the last one if no truthy value is found.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
舉個例：
```js run
+<<<<<<< HEAD
alert( 1 || 0 ); // 1（1 是真值）
alert( true || 'no matter what' ); //（true 是真值）
alert( null || 1 ); // 1（1 是第一個真值）
alert( null || 0 || 1 ); // 1（第一個真值）
alert( undefined || null || 0 ); // 0（皆為虛值，回傳最後一個值）
+=======
+alert( 1 || 0 ); // 1 (1 is truthy)
+
+alert( null || 1 ); // 1 (1 is the first truthy value)
+alert( null || 0 || 1 ); // 1 (the first truthy value)
+
+alert( undefined || null || 0 ); // 0 (all falsy, returns the last value)
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```
這導致一些跟 "純粹傳統布林限定 OR" 不太一樣的有趣用法。
1. **取得一串變數或表達式中的第一個真值。**
+<<<<<<< HEAD
想像我們有一串變數，之中包含著資料或者 `null/undefined`。我們要如何找到第一筆資料？
我們可以使用 OR `||`:
+=======
+ For instance, we have `firstName`, `lastName` and `nickName` variables, all optional (i.e. can be undefined or have falsy values).
+
+ Let's use OR `||` to choose the one that has the data and show it (or `"Anonymous"` if nothing set):
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js run
- let currentUser = null;
- let defaultUser = "John";
+ let firstName = "";
+ let lastName = "";
+ let nickName = "SuperCoder";
*!*
- let name = currentUser || defaultUser || "unnamed";
+ alert( firstName || lastName || nickName || "Anonymous"); // SuperCoder
*/!*
+<<<<<<< HEAD
alert( name ); // 選出 "John" - 第一個真值
```
@@ -149,6 +178,30 @@ alert( undefined || null || 0 ); // 0（皆為虛值，回傳最後一個值）
如果我們所見，這種用法是 "簡短版 `if`"。第一個運算元被轉換成布林值，如果其為假，第二個運算元才被接著核定。
大部分時間使用 "正規的" `if` 會比較好，能讓程式碼更容易被理解，但有時候這麼做滿方便的就是。
+=======
+ ```
+
+ If all variables were falsy, `"Anonymous"` would show up.
+
+2. **Short-circuit evaluation.**
+
+ Another feature of OR `||` operator is the so-called "short-circuit" evaluation.
+
+ It means that `||` processes its arguments until the first truthy value is reached, and then the value is returned immediately, without even touching the other argument.
+
+ The importance of this feature becomes obvious if an operand isn't just a value, but an expression with a side effect, such as a variable assignment or a function call.
+
+ In the example below, only the second message is printed:
+
+ ```js run no-beautify
+ *!*true*/!* || alert("not printed");
+ *!*false*/!* || alert("printed");
+ ```
+
+ In the first line, the OR `||` operator stops the evaluation immediately upon seeing `true`, so the `alert` isn't run.
+
+ Sometimes, people use this feature to execute commands only if the condition on the left part is falsy.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
## &&（AND）
@@ -236,7 +289,12 @@ AND `&&` 運算子的優先權比 OR `||` 還高。
所以程式碼 `a && b || c && d` 本質上跟 `&&` 使用括號的表達式一樣：`(a && b) || (c && d)`。
````
+<<<<<<< HEAD
跟 OR 一樣，AND `&&` 運算子有時可以取代 `if`。
+=======
+````warn header="Don't replace `if` with `||` or `&&`"
+Sometimes, people use the AND `&&` operator as a "shorter way to write `if`".
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
舉個例：
@@ -253,14 +311,18 @@ let x = 1;
```js run
let x = 1;
-if (x > 0) {
- alert( 'Greater than zero!' );
-}
+if (x > 0) alert( 'Greater than zero!' );
```
+<<<<<<< HEAD
使用 `&&` 的方式看起來更簡短，但 `if` 更明顯易懂且多了那麼點可讀性。
所以我們建議根據用途使用不同的程式碼建構方式：要用條件式時選 `if`，要做 AND 運算時用 `&&`。
+=======
+Although, the variant with `&&` appears shorter, `if` is more obvious and tends to be a little bit more readable. So we recommend using every construct for its purpose: use `if` if we want `if` and use `&&` if we want AND.
+````
+
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
## !（NOT）
diff --git a/1-js/02-first-steps/12-nullish-coalescing-operator/article.md b/1-js/02-first-steps/12-nullish-coalescing-operator/article.md
new file mode 100644
index 000000000..0b2f092ab
--- /dev/null
+++ b/1-js/02-first-steps/12-nullish-coalescing-operator/article.md
@@ -0,0 +1,169 @@
+# Nullish coalescing operator '??'
+
+[recent browser="new"]
+
+The nullish coalescing operator is written as two question marks `??`.
+
+As it treats `null` and `undefined` similarly, we'll use a special term here, in this article. For brevity, we'll say that a value is "defined" when it's neither `null` nor `undefined`.
+
+The result of `a ?? b` is:
+- if `a` is defined, then `a`,
+- if `a` isn't defined, then `b`.
+
+In other words, `??` returns the first argument if it's not `null/undefined`. Otherwise, the second one.
+
+The nullish coalescing operator isn't anything completely new. It's just a nice syntax to get the first "defined" value of the two.
+
+We can rewrite `result = a ?? b` using the operators that we already know, like this:
+
+```js
+result = (a !== null && a !== undefined) ? a : b;
+```
+
+Now it should be absolutely clear what `??` does. Let's see where it helps.
+
+The common use case for `??` is to provide a default value.
+
+For example, here we show `user` if its value isn't `null/undefined`, otherwise `Anonymous`:
+
+```js run
+let user;
+
+alert(user ?? "Anonymous"); // Anonymous (user is undefined)
+```
+
+Here's the example with `user` assigned to a name:
+
+```js run
+let user = "John";
+
+alert(user ?? "Anonymous"); // John (user is not null/undefined)
+```
+
+We can also use a sequence of `??` to select the first value from a list that isn't `null/undefined`.
+
+Let's say we have a user's data in variables `firstName`, `lastName` or `nickName`. All of them may be not defined, if the user decided not to fill in the corresponding values.
+
+We'd like to display the user name using one of these variables, or show "Anonymous" if all of them are `null/undefined`.
+
+Let's use the `??` operator for that:
+
+```js run
+let firstName = null;
+let lastName = null;
+let nickName = "Supercoder";
+
+// shows the first defined value:
+*!*
+alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder
+*/!*
+```
+
+## Comparison with ||
+
+The OR `||` operator can be used in the same way as `??`, as it was described in the [previous chapter](info:logical-operators#or-finds-the-first-truthy-value).
+
+For example, in the code above we could replace `??` with `||` and still get the same result:
+
+```js run
+let firstName = null;
+let lastName = null;
+let nickName = "Supercoder";
+
+// shows the first truthy value:
+*!*
+alert(firstName || lastName || nickName || "Anonymous"); // Supercoder
+*/!*
+```
+
+Historically, the OR `||` operator was there first. It's been there since the beginning of JavaScript, so developers were using it for such purposes for a long time.
+
+On the other hand, the nullish coalescing operator `??` was added to JavaScript only recently, and the reason for that was that people weren't quite happy with `||`.
+
+The important difference between them is that:
+- `||` returns the first *truthy* value.
+- `??` returns the first *defined* value.
+
+In other words, `||` doesn't distinguish between `false`, `0`, an empty string `""` and `null/undefined`. They are all the same -- falsy values. If any of these is the first argument of `||`, then we'll get the second argument as the result.
+
+In practice though, we may want to use default value only when the variable is `null/undefined`. That is, when the value is really unknown/not set.
+
+For example, consider this:
+
+```js run
+let height = 0;
+
+alert(height || 100); // 100
+alert(height ?? 100); // 0
+```
+
+- The `height || 100` checks `height` for being a falsy value, and it's `0`, falsy indeed.
+ - so the result of `||` is the second argument, `100`.
+- The `height ?? 100` checks `height` for being `null/undefined`, and it's not,
+ - so the result is `height` "as is", that is `0`.
+
+In practice, the zero height is often a valid value, that shouldn't be replaced with the default. So `??` does just the right thing.
+
+## Precedence
+
+The precedence of the `??` operator is the same as `||`. They both equal `3` in the [MDN table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table).
+
+That means that, just like `||`, the nullish coalescing operator `??` is evaluated before `=` and `?`, but after most other operations, such as `+`, `*`.
+
+So we may need to add parentheses in expressions like this:
+
+```js run
+let height = null;
+let width = null;
+
+// important: use parentheses
+let area = (height ?? 100) * (width ?? 50);
+
+alert(area); // 5000
+```
+
+Otherwise, if we omit parentheses, then as `*` has the higher precedence than `??`, it would execute first, leading to incorrect results.
+
+```js
+// without parentheses
+let area = height ?? 100 * width ?? 50;
+
+// ...works this way (not what we want):
+let area = height ?? (100 * width) ?? 50;
+```
+
+### Using ?? with && or ||
+
+Due to safety reasons, JavaScript forbids using `??` together with `&&` and `||` operators, unless the precedence is explicitly specified with parentheses.
+
+The code below triggers a syntax error:
+
+```js run
+let x = 1 && 2 ?? 3; // Syntax error
+```
+
+The limitation is surely debatable, it was added to the language specification with the purpose to avoid programming mistakes, when people start to switch from `||` to `??`.
+
+Use explicit parentheses to work around it:
+
+```js run
+*!*
+let x = (1 && 2) ?? 3; // Works
+*/!*
+
+alert(x); // 2
+```
+
+## Summary
+
+- The nullish coalescing operator `??` provides a short way to choose the first "defined" value from a list.
+
+ It's used to assign default values to variables:
+
+ ```js
+ // set height=100, if height is null or undefined
+ height = height ?? 100;
+ ```
+
+- The operator `??` has a very low precedence, only a bit higher than `?` and `=`, so consider adding parentheses when using it in an expression.
+- It's forbidden to use it with `||` or `&&` without explicit parentheses.
diff --git a/1-js/02-first-steps/12-while-for/1-loop-last-value/solution.md b/1-js/02-first-steps/13-while-for/1-loop-last-value/solution.md
similarity index 100%
rename from 1-js/02-first-steps/12-while-for/1-loop-last-value/solution.md
rename to 1-js/02-first-steps/13-while-for/1-loop-last-value/solution.md
diff --git a/1-js/02-first-steps/12-while-for/1-loop-last-value/task.md b/1-js/02-first-steps/13-while-for/1-loop-last-value/task.md
similarity index 100%
rename from 1-js/02-first-steps/12-while-for/1-loop-last-value/task.md
rename to 1-js/02-first-steps/13-while-for/1-loop-last-value/task.md
diff --git a/1-js/02-first-steps/12-while-for/2-which-value-while/solution.md b/1-js/02-first-steps/13-while-for/2-which-value-while/solution.md
similarity index 100%
rename from 1-js/02-first-steps/12-while-for/2-which-value-while/solution.md
rename to 1-js/02-first-steps/13-while-for/2-which-value-while/solution.md
diff --git a/1-js/02-first-steps/12-while-for/2-which-value-while/task.md b/1-js/02-first-steps/13-while-for/2-which-value-while/task.md
similarity index 100%
rename from 1-js/02-first-steps/12-while-for/2-which-value-while/task.md
rename to 1-js/02-first-steps/13-while-for/2-which-value-while/task.md
diff --git a/1-js/02-first-steps/12-while-for/3-which-value-for/solution.md b/1-js/02-first-steps/13-while-for/3-which-value-for/solution.md
similarity index 100%
rename from 1-js/02-first-steps/12-while-for/3-which-value-for/solution.md
rename to 1-js/02-first-steps/13-while-for/3-which-value-for/solution.md
diff --git a/1-js/02-first-steps/12-while-for/3-which-value-for/task.md b/1-js/02-first-steps/13-while-for/3-which-value-for/task.md
similarity index 100%
rename from 1-js/02-first-steps/12-while-for/3-which-value-for/task.md
rename to 1-js/02-first-steps/13-while-for/3-which-value-for/task.md
diff --git a/1-js/02-first-steps/12-while-for/4-for-even/solution.md b/1-js/02-first-steps/13-while-for/4-for-even/solution.md
similarity index 100%
rename from 1-js/02-first-steps/12-while-for/4-for-even/solution.md
rename to 1-js/02-first-steps/13-while-for/4-for-even/solution.md
diff --git a/1-js/02-first-steps/12-while-for/4-for-even/task.md b/1-js/02-first-steps/13-while-for/4-for-even/task.md
similarity index 100%
rename from 1-js/02-first-steps/12-while-for/4-for-even/task.md
rename to 1-js/02-first-steps/13-while-for/4-for-even/task.md
diff --git a/1-js/02-first-steps/12-while-for/5-replace-for-while/solution.md b/1-js/02-first-steps/13-while-for/5-replace-for-while/solution.md
similarity index 100%
rename from 1-js/02-first-steps/12-while-for/5-replace-for-while/solution.md
rename to 1-js/02-first-steps/13-while-for/5-replace-for-while/solution.md
diff --git a/1-js/02-first-steps/12-while-for/5-replace-for-while/task.md b/1-js/02-first-steps/13-while-for/5-replace-for-while/task.md
similarity index 100%
rename from 1-js/02-first-steps/12-while-for/5-replace-for-while/task.md
rename to 1-js/02-first-steps/13-while-for/5-replace-for-while/task.md
diff --git a/1-js/02-first-steps/12-while-for/6-repeat-until-correct/solution.md b/1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md
similarity index 57%
rename from 1-js/02-first-steps/12-while-for/6-repeat-until-correct/solution.md
rename to 1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md
index 3efe7cfb5..301431a52 100644
--- a/1-js/02-first-steps/12-while-for/6-repeat-until-correct/solution.md
+++ b/1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md
@@ -9,8 +9,13 @@ do {
兩個檢查都是真值時，迴圈 `do..while` 將重複：
+<<<<<<< HEAD:1-js/02-first-steps/12-while-for/6-repeat-until-correct/solution.md
1. 檢查 `num <= 100` -- 意即，輸入的值尚未大於 `100`。
2. 檢查 `&& num`，只有在 `num` 為 `null` 或空字串時才為假，此時 `while` 迴圈也會停止。
註：若 `num` 為 `null`，則 `num <= 100` 是 `true`。所以如果沒有第二層檢查，該迴圈在使用者點下 CANCEL 後將不會停止，故兩個檢查都是必要的。
+=======
+1. The check for `num <= 100` -- that is, the entered value is still not greater than `100`.
+2. The check `&& num` is false when `num` is `null` or an empty string. Then the `while` loop stops too.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md
diff --git a/1-js/02-first-steps/12-while-for/6-repeat-until-correct/task.md b/1-js/02-first-steps/13-while-for/6-repeat-until-correct/task.md
similarity index 100%
rename from 1-js/02-first-steps/12-while-for/6-repeat-until-correct/task.md
rename to 1-js/02-first-steps/13-while-for/6-repeat-until-correct/task.md
diff --git a/1-js/02-first-steps/12-while-for/7-list-primes/solution.md b/1-js/02-first-steps/13-while-for/7-list-primes/solution.md
similarity index 100%
rename from 1-js/02-first-steps/12-while-for/7-list-primes/solution.md
rename to 1-js/02-first-steps/13-while-for/7-list-primes/solution.md
diff --git a/1-js/02-first-steps/12-while-for/7-list-primes/task.md b/1-js/02-first-steps/13-while-for/7-list-primes/task.md
similarity index 100%
rename from 1-js/02-first-steps/12-while-for/7-list-primes/task.md
rename to 1-js/02-first-steps/13-while-for/7-list-primes/task.md
diff --git a/1-js/02-first-steps/12-while-for/article.md b/1-js/02-first-steps/13-while-for/article.md
similarity index 77%
rename from 1-js/02-first-steps/12-while-for/article.md
rename to 1-js/02-first-steps/13-while-for/article.md
index 7dccebe5a..9c087c098 100644
--- a/1-js/02-first-steps/12-while-for/article.md
+++ b/1-js/02-first-steps/13-while-for/article.md
@@ -6,7 +6,24 @@
*迴圈* 是種多次重複執行相同程式碼的方法。
+<<<<<<< HEAD:1-js/02-first-steps/12-while-for/article.md
## "while" 迴圈
+=======
+```smart header="The for..of and for..in loops"
+A small announcement for advanced readers.
+
+This article covers only basic loops: `while`, `do..while` and `for(..;..;..)`.
+
+If you came to this article searching for other types of loops, here are the pointers:
+
+- See [for..in](info:object#forin) to loop over object properties.
+- See [for..of](info:array#loops) and [iterables](info:iterable) for looping over arrays and iterable objects.
+
+Otherwise, please read on.
+```
+
+## The "while" loop
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/13-while-for/article.md
`while` 迴圈有著以下語法：
@@ -106,10 +123,17 @@ for (let i = 0; i < 3; i++) { // 顯示 0，接著 1，然後 2
| 段落 | | |
|-------|----------|----------------------------------------------------------------------------|
+<<<<<<< HEAD:1-js/02-first-steps/12-while-for/article.md
| begin | `i = 0` | 在進入迴圈時執行一次。 |
| condition | `i < 3`| 每次迴圈迭代開始前檢查，若為假則迴圈停止。 |
| body | `alert(i)`| 當條件是真值時，一直重複執行。 |
| step| `i++` | 每次迭代時會在本體之後才執行。 |
+=======
+| begin | `let i = 0` | Executes once upon entering the loop. |
+| condition | `i < 3`| Checked before every loop iteration. If false, the loop stops. |
+| body | `alert(i)`| Runs again and again while the condition is truthy. |
+| step| `i++` | Executes after the body on each iteration. |
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/13-while-for/article.md
一般的迴圈演算法像這樣子運行：
@@ -162,12 +186,15 @@ for (i = 0; i < 3; i++) { // 使用某個已存在的變數
alert(i); // 3，可被看見，因為是在迴圈之外被宣告的
```
-
````
+<<<<<<< HEAD:1-js/02-first-steps/12-while-for/article.md
### 省略某幾段
`for` 的任何一段都可被省略。
+=======
+### Skipping parts
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/13-while-for/article.md
例如，當我們不需要在迴圈開始時做任何事，就可以忽略 `begin`。
@@ -267,7 +294,11 @@ for (let i = 0; i < 10; i++) {
從技術角度上來看，這跟上面的例子是等效的。確實，我們可以將程式碼包裝在一個 `if` 區塊內，而不使用 `continue`。
+<<<<<<< HEAD:1-js/02-first-steps/12-while-for/article.md
但這麼做有副作用，它會建立多一層的巢狀結構（大括號內的 `alert` 呼叫）。若 `if` 內的程式碼不只短短幾行，就會降低整體的可讀性。
+=======
+But as a side effect, this created one more level of nesting (the `alert` call inside the curly braces). If the code inside of `if` is longer than a few lines, that may decrease the overall readability.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/13-while-for/article.md
````
````warn header="不能在 '?' 右側使用 `break/continue`"
@@ -283,7 +314,11 @@ if (i > 5) {
}
```
+<<<<<<< HEAD:1-js/02-first-steps/12-while-for/article.md
...改寫成使用問號：
+=======
+...and rewrite it using a question mark:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/13-while-for/article.md
```js no-beautify
(i > 5) ? alert(i) : *!*continue*/!*; // continue 不允許出現在這
@@ -316,10 +351,17 @@ alert('Done!');
我們需要一個若使用者取消輸入時，用來結束運行的方式。
+<<<<<<< HEAD:1-js/02-first-steps/12-while-for/article.md
一般在 `input` 之後放入 `break` 只會中斷內部的迴圈，這還不夠 -- 可以用 "標籤" 來幫助我們！
一個 *標籤（label）* 是一個在迴圈前有著冒號的識別符：
+=======
+The ordinary `break` after `input` would only break the inner loop. That's not sufficient -- labels, come to the rescue!
+
+A *label* is an identifier with a colon before a loop:
+
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/13-while-for/article.md
```js
labelName: for (...) {
...
@@ -341,6 +383,7 @@ labelName: for (...) {
// 用輸入的值做些事情...
}
}
+
alert('Done!');
```
@@ -362,13 +405,36 @@ for (let i = 0; i < 3; i++) { ... }
例如，不能這麼做：
+<<<<<<< HEAD:1-js/02-first-steps/12-while-for/article.md
```js
break label; // 不能跳到下面的標籤
+=======
+For example, it is impossible to do this:
+
+```js
+break label; // jump to the label below (doesn't work)
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/13-while-for/article.md
label: for (...)
```
+<<<<<<< HEAD:1-js/02-first-steps/12-while-for/article.md
只有在迴圈內部才可呼叫 `break/continue`，且標籤必須在該指令的上方某處。
+=======
+A `break` directive must be inside a code block. Technically, any labelled code block will do, e.g.:
+
+```js
+label: {
+ // ...
+ break label; // works
+ // ...
+}
+```
+
+...Although, 99.9% of the time `break` is used inside loops, as we've seen in the examples above.
+
+A `continue` is only possible from inside a loop.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/13-while-for/article.md
````
## 總結
diff --git a/1-js/02-first-steps/13-switch/1-rewrite-switch-if-else/solution.md b/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/solution.md
similarity index 100%
rename from 1-js/02-first-steps/13-switch/1-rewrite-switch-if-else/solution.md
rename to 1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/solution.md
diff --git a/1-js/02-first-steps/13-switch/1-rewrite-switch-if-else/task.md b/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/task.md
similarity index 100%
rename from 1-js/02-first-steps/13-switch/1-rewrite-switch-if-else/task.md
rename to 1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/task.md
diff --git a/1-js/02-first-steps/13-switch/2-rewrite-if-switch/solution.md b/1-js/02-first-steps/14-switch/2-rewrite-if-switch/solution.md
similarity index 100%
rename from 1-js/02-first-steps/13-switch/2-rewrite-if-switch/solution.md
rename to 1-js/02-first-steps/14-switch/2-rewrite-if-switch/solution.md
diff --git a/1-js/02-first-steps/13-switch/2-rewrite-if-switch/task.md b/1-js/02-first-steps/14-switch/2-rewrite-if-switch/task.md
similarity index 100%
rename from 1-js/02-first-steps/13-switch/2-rewrite-if-switch/task.md
rename to 1-js/02-first-steps/14-switch/2-rewrite-if-switch/task.md
diff --git a/1-js/02-first-steps/13-switch/article.md b/1-js/02-first-steps/14-switch/article.md
similarity index 97%
rename from 1-js/02-first-steps/13-switch/article.md
rename to 1-js/02-first-steps/14-switch/article.md
index 314c6cef8..d86babcec 100644
--- a/1-js/02-first-steps/13-switch/article.md
+++ b/1-js/02-first-steps/14-switch/article.md
@@ -47,7 +47,7 @@ switch (a) {
break;
*/!*
case 5:
- alert( 'Too large' );
+ alert( 'Too big' );
break;
default:
alert( "I don't know such values" );
@@ -139,7 +139,7 @@ switch (a) {
Now both `3` and `5` show the same message.
-The ability to "group" cases is a side-effect of how `switch/case` works without `break`. Here the execution of `case 3` starts from the line `(*)` and goes through `case 5`, because there's no `break`.
+The ability to "group" cases is a side effect of how `switch/case` works without `break`. Here the execution of `case 3` starts from the line `(*)` and goes through `case 5`, because there's no `break`.
## Type matters
diff --git a/1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md b/1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md
new file mode 100644
index 000000000..e3a0df77c
--- /dev/null
+++ b/1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md
@@ -0,0 +1,3 @@
+No difference!
+
+In both cases, `return confirm('Did parents allow you?')` executes exactly when the `if` condition is falsy.
\ No newline at end of file
diff --git a/1-js/02-first-steps/14-function-basics/1-if-else-required/task.md b/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md
similarity index 100%
rename from 1-js/02-first-steps/14-function-basics/1-if-else-required/task.md
rename to 1-js/02-first-steps/15-function-basics/1-if-else-required/task.md
diff --git a/1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/solution.md b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md
similarity index 53%
rename from 1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/solution.md
rename to 1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md
index 63f423dc8..4531a8d57 100644
--- a/1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/solution.md
+++ b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md
@@ -14,5 +14,9 @@ function checkAge(age) {
}
```
+<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/solution.md
注意圍繞著 `age > 18` 的括號在此並非必要，它們存在的原因只是為了更佳的可讀性。
+=======
+Note that the parentheses around `age > 18` are not required here. They exist for better readability.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md
diff --git a/1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/task.md b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md
similarity index 100%
rename from 1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/task.md
rename to 1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md
diff --git a/1-js/02-first-steps/14-function-basics/3-min/solution.md b/1-js/02-first-steps/15-function-basics/3-min/solution.md
similarity index 100%
rename from 1-js/02-first-steps/14-function-basics/3-min/solution.md
rename to 1-js/02-first-steps/15-function-basics/3-min/solution.md
diff --git a/1-js/02-first-steps/14-function-basics/3-min/task.md b/1-js/02-first-steps/15-function-basics/3-min/task.md
similarity index 100%
rename from 1-js/02-first-steps/14-function-basics/3-min/task.md
rename to 1-js/02-first-steps/15-function-basics/3-min/task.md
diff --git a/1-js/02-first-steps/14-function-basics/4-pow/solution.md b/1-js/02-first-steps/15-function-basics/4-pow/solution.md
similarity index 100%
rename from 1-js/02-first-steps/14-function-basics/4-pow/solution.md
rename to 1-js/02-first-steps/15-function-basics/4-pow/solution.md
diff --git a/1-js/02-first-steps/14-function-basics/4-pow/task.md b/1-js/02-first-steps/15-function-basics/4-pow/task.md
similarity index 100%
rename from 1-js/02-first-steps/14-function-basics/4-pow/task.md
rename to 1-js/02-first-steps/15-function-basics/4-pow/task.md
diff --git a/1-js/02-first-steps/14-function-basics/article.md b/1-js/02-first-steps/15-function-basics/article.md
similarity index 70%
rename from 1-js/02-first-steps/14-function-basics/article.md
rename to 1-js/02-first-steps/15-function-basics/article.md
index 84e386c2a..ed38e611c 100644
--- a/1-js/02-first-steps/14-function-basics/article.md
+++ b/1-js/02-first-steps/15-function-basics/article.md
@@ -20,11 +20,15 @@ function showMessage() {
}
```
+<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/article.md
`function` 關鍵字寫在最前面，然後是 *函式的名字*，接著一串在小括號內的 *參數（parameters）*（用逗號分開，上面的例子中為空），最後在大括號之間的是函式的程式碼，也被稱為 "函式本體（function body）"。
+=======
+The `function` keyword goes first, then goes the *name of the function*, then a list of *parameters* between the parentheses (comma-separated, empty in the example above, we'll see examples later) and finally the code of the function, also named "the function body", between curly braces.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/15-function-basics/article.md
```js
-function name(parameters) {
- ...body...
+function name(parameter1, parameter2, ... parameterN) {
+ // body
}
```
@@ -137,25 +141,34 @@ alert( userName ); // *!*John*/!* 維持不變，函式並沒有存取外部變
## 參數（Parameters）
+<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/article.md
我們可以使用參數，或稱為 *函式引數（function arguments）*，來傳遞任意資料給函式。
+=======
+We can pass arbitrary data to functions using parameters.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/15-function-basics/article.md
在上面的例子中，函式有兩個參數：`from` 和 `text`。
```js run
+<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/article.md
function showMessage(*!*from, text*/!*) { // 引數：from、text
+=======
+function showMessage(*!*from, text*/!*) { // parameters: from, text
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/15-function-basics/article.md
alert(from + ': ' + text);
}
-*!*
-showMessage('Ann', 'Hello!'); // Ann: Hello! (*)
-showMessage('Ann', "What's up?"); // Ann: What's up? (**)
-*/!*
+*!*showMessage('Ann', 'Hello!');*/!* // Ann: Hello! (*)
+*!*showMessage('Ann', "What's up?");*/!* // Ann: What's up? (**)
```
當函式在 `(*)` 和 `(**)` 被呼叫時，被給予的值將會被複製到區域變數 `from` 和 `text` 中，然後函式才使用它們。
+<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/article.md
這裡有另一個例子：我們把一個變數 `from` 傳遞給函式。請注意，此函式改變了 `from`，但這個改變在外部看不到，因為函式總是使用該值的複製品：
+=======
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/15-function-basics/article.md
```js run
function showMessage(from, text) {
@@ -174,9 +187,27 @@ showMessage(from, "Hello"); // *Ann*: Hello
alert( from ); // Ann
```
+<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/article.md
## 預設值
若參數沒被提供，它的值會變成 `undefined`。
+=======
+When a value is passed as a function parameter, it's also called an *argument*.
+
+In other words, to put these terms straight:
+
+- A parameter is the variable listed inside the parentheses in the function declaration (it's a declaration time term).
+- An argument is the value that is passed to the function when it is called (it's a call time term).
+
+We declare functions listing their parameters, then call them passing arguments.
+
+In the example above, one might say: "the function `showMessage` is declared with two parameters, then called with two arguments: `from` and `"Hello"`".
+
+
+## Default values
+
+If a function is called, but an argument is not provided, then the corresponding value becomes `undefined`.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/15-function-basics/article.md
舉個例，前述的函式 `showMessage(from, text)` 可以使用單一個引數來呼叫：
@@ -184,9 +215,15 @@ alert( from ); // Ann
showMessage("Ann");
```
+<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/article.md
那並非錯誤，這種呼叫方式會輸出 `"Ann: undefined"`。因為沒有 `text`，所以它預設成 `text === undefined`。
如果在這種情況想使用一個 "預設的" `text`，那我們可以加個 `=` 並在其後指定預設值：
+=======
+That's not an error. Such a call would output `"*Ann*: undefined"`. As the value for `text` isn't passed, it becomes `undefined`.
+
+We can specify the so-called "default" (to use if omitted) value for a parameter in the function declaration, using `=`:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/15-function-basics/article.md
```js run
function showMessage(from, *!*text = "no text given"*/!*) {
@@ -196,7 +233,17 @@ function showMessage(from, *!*text = "no text given"*/!*) {
showMessage("Ann"); // Ann: no text given
```
+<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/article.md
若現在沒有傳遞 `text` 參數，它將會拿到值 `"no text given"`。
+=======
+Now if the `text` parameter is not passed, it will get the value `"no text given"`.
+
+The default value also jumps in if the parameter exists, but strictly equals `undefined`, like this:
+
+```js
+showMessage("Ann", undefined); // Ann: no text given
+```
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/15-function-basics/article.md
這邊的 `"no text given"` 是一個字串，但它可以是更為複雜的表達式，該表達式只在未給予參數時才會被計算和指定。所以這麼做是可以的：
@@ -210,6 +257,7 @@ function showMessage(from, text = anotherFunction()) {
```smart header="預設參數的計算"
在 JavaScript 中，每次呼叫函式卻沒帶對應參數時，該預設參數才會被計算。
+<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/article.md
上面的例子中，在呼叫 `showMessage()` 卻沒帶 `text` 參數時，才會去呼叫 `anotherFunction()`。
```
@@ -217,6 +265,19 @@ function showMessage(from, text = anotherFunction()) {
舊版本的 JavaScript 不支援預設參數，所以有幾種替代方案來支援，你可以在大多數老舊的腳本中找到。
舉個例，明確檢查 `undefined`：
+=======
+In the example above, `anotherFunction()` isn't called at all, if the `text` parameter is provided.
+
+On the other hand, it's independently called every time when `text` is missing.
+```
+
+````smart header="Default parameters in old JavaScript code"
+Several years ago, JavaScript didn't support the syntax for default parameters. So people used other ways to specify them.
+
+Nowadays, we can come across them in old scripts.
+
+For example, an explicit check for `undefined`:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/15-function-basics/article.md
```js
function showMessage(from, text) {
@@ -230,11 +291,20 @@ function showMessage(from, text) {
}
```
+<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/article.md
...或使用 `||` 運算子：
```js
function showMessage(from, text) {
// 若 text 為虛值，則 text 會得到其 "預設" 值
+=======
+...Or using the `||` operator:
+
+```js
+function showMessage(from, text) {
+ // If the value of text is falsy, assign the default value
+ // this assumes that text == "" is the same as no text at all
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/15-function-basics/article.md
text = text || 'no text given';
...
}
@@ -243,7 +313,56 @@ function showMessage(from, text) {
## 回傳值
+<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/article.md
函式可以回傳一個值給呼叫它的程式碼作為結果。
+=======
+### Alternative default parameters
+
+Sometimes it makes sense to assign default values for parameters at a later stage after the function declaration.
+
+We can check if the parameter is passed during the function execution, by comparing it with `undefined`:
+
+```js run
+function showMessage(text) {
+ // ...
+
+*!*
+ if (text === undefined) { // if the parameter is missing
+ text = 'empty message';
+ }
+*/!*
+
+ alert(text);
+}
+
+showMessage(); // empty message
+```
+
+...Or we could use the `||` operator:
+
+```js
+function showMessage(text) {
+ // if text is undefined or otherwise falsy, set it to 'empty'
+ text = text || 'empty';
+ ...
+}
+```
+
+Modern JavaScript engines support the [nullish coalescing operator](info:nullish-coalescing-operator) `??`, it's better when most falsy values, such as `0`, should be considered "normal":
+
+```js run
+function showCount(count) {
+ // if count is undefined or null, show "unknown"
+ alert(count ?? "unknown");
+}
+
+showCount(0); // 0
+showCount(null); // unknown
+showCount(); // unknown
+```
+
+## Returning a value
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/15-function-basics/article.md
把兩個值相加的最簡單做法是利用函式：
@@ -395,9 +514,15 @@ checkPermission(..) // 確認權限，並回傳 true/false
```smart header="極短函式名稱"
*很常* 被使用的函式有時有著極短的名稱。
+<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/article.md
例如，[jQuery](http://jquery.com) 框架使用 `$` 定義了一個函式。而 [Lodash](http://lodash.com/) 函式庫以 `_` 作為其核心函式的名稱。
這些都只是例外，一般的函式名稱應該要精簡易懂。
+=======
+For example, the [jQuery](https://jquery.com/) framework defines a function with `$`. The [Lodash](https://lodash.com/) library has its core function named `_`.
+
+These are exceptions. Generally function names should be concise and descriptive.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/15-function-basics/article.md
```
## 函式 == 註解
@@ -463,7 +588,11 @@ function name(parameters, delimited, by, comma) {
為了讓程式碼簡潔易懂，建議在函式中以使用區域變數和參數為主，少用外部變數。
+<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/article.md
比起沒有取得任何參數，直接修改外部變數作為副作用的做法，函式先獲取參數並對其操作再回傳結果，更容易讓人理解。
+=======
+It is always easier to understand a function which gets parameters, works with them and returns a result than a function which gets no parameters, but modifies outer variables as a side effect.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/15-function-basics/article.md
函式命名：
diff --git a/1-js/02-first-steps/15-function-expressions/article.md b/1-js/02-first-steps/16-function-expressions/article.md
similarity index 69%
rename from 1-js/02-first-steps/15-function-expressions/article.md
rename to 1-js/02-first-steps/16-function-expressions/article.md
index 797338a82..4bbaa8e65 100644
--- a/1-js/02-first-steps/15-function-expressions/article.md
+++ b/1-js/02-first-steps/16-function-expressions/article.md
@@ -12,7 +12,13 @@ function sayHi() {
有另一種創建函式的語法，稱之為 *函式表達式（Function Expression）*。
+<<<<<<< HEAD:1-js/02-first-steps/15-function-expressions/article.md
寫法如下：
+=======
+It allows us to create a new function in the middle of any expression.
+
+For example:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/16-function-expressions/article.md
```js
let sayHi = function() {
@@ -20,9 +26,25 @@ let sayHi = function() {
};
```
+<<<<<<< HEAD:1-js/02-first-steps/15-function-expressions/article.md
在這邊，函式被創建，並像其他值ㄧ樣，明確地指定給一個變數。無論函式是如何被定義的，它只是一個儲存於變數 `sayHi` 的值。
這兩段程式碼範例的意思是相同的："創造一個函式，並將其放入變數 `sayHi`"。
+=======
+Here we can see a variable `sayHi` getting a value, the new function, created as `function() { alert("Hello"); }`.
+
+As the function creation happens in the context of the assignment expression (to the right side of `=`), this is a *Function Expression*.
+
+Please note, there's no name after the `function` keyword. Omitting a name is allowed for Function Expressions.
+
+Here we immediately assign it to the variable, so the meaning of these code samples is the same: "create a function and put it into the variable `sayHi`".
+
+In more advanced situations, that we'll come across later, a function may be created and immediately called or scheduled for a later execution, not stored anywhere, thus remaining anonymous.
+
+## Function is a value
+
+Let's reiterate: no matter how the function is created, a function is a value. Both examples above store a function in the `sayHi` variable.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/16-function-expressions/article.md
我們甚至可以利用 `alert` 將其值印出：
@@ -64,21 +86,31 @@ sayHi(); // Hello // 這也能正常運作（怎麼會不行呢）
2. 行 `(2)` 將其複製給變數 `func`。請注意：`sayHi` 後面沒有括號。如果有括號，`func = sayHi()` 會將 `sayHi()` *呼叫的結果* 寫入 `func`，而非 `sayHi` 函式本身。
3. 現在 `sayHi()` 與 `func()` 都可以呼叫到同個函式。
+<<<<<<< HEAD:1-js/02-first-steps/15-function-expressions/article.md
注意這裡的第一行中，我們也可以使用函式表達式來宣告 `sayHi`：
+=======
+We could also have used a Function Expression to declare `sayHi`, in the first line:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/16-function-expressions/article.md
```js
-let sayHi = function() {
+let sayHi = function() { // (1) create
alert( "Hello" );
};
-let func = sayHi;
+let func = sayHi; //(2)
// ...
```
這並不影響其餘運作，一切都與先前相同。
+<<<<<<< HEAD:1-js/02-first-steps/15-function-expressions/article.md
````smart header="為何函式表達式的結尾有個分號？"
你可能會好奇，為什麼函式表達式的結尾有個分號 `;`，而函式宣告式卻沒有：
+=======
+
+````smart header="Why is there a semicolon at the end?"
+You might wonder, why do Function Expressions have a semicolon `;` at the end, but Function Declarations do not:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/16-function-expressions/article.md
```js
function sayHi() {
@@ -90,9 +122,15 @@ let sayHi = function() {
}*!*;*/!*
```
+<<<<<<< HEAD:1-js/02-first-steps/15-function-expressions/article.md
答案很簡單：
- 在使用像是 `if { ... }`、`for { }`、`function f { }` 等的程式碼區塊與語法結構時，並不需要在結尾放上 `;`。
- 函式表達式通常使用在述語中： `let sayHi = ...;`，像個變數。這並不是一個程式碼區塊，而是一段指定運算。不管是什麼值，建議總是在述語結尾處加上分號 `;`。所以這裡的分號與函式表達式本身沒有關係，他只是用來終止述語。
+=======
+The answer is simple: a Function Expression is created here as `function(…) {…}` inside the assignment statement: `let sayHi = …;`. The semicolon `;` is recommended at the end of the statement, it's not a part of the function syntax.
+
+The semicolon would be there for a simpler assignment, such as `let sayHi = 5;`, and it's also there for a function assignment.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/16-function-expressions/article.md
````
## 回呼函式（Callback functions）
@@ -132,13 +170,21 @@ function showCancel() {
ask("Do you agree?", showOk, showCancel);
```
+<<<<<<< HEAD:1-js/02-first-steps/15-function-expressions/article.md
實務上，類似的函式挺有用的。現實生活中的 `ask` 實作與上述範例的主要差別在於，現實中的函式用更複雜的方式與使用者互動，而不是簡單的 `confirm` （確認）。在瀏覽器中，這樣的函式通常會繪製一個漂亮的問答窗口。但那牽扯到另一個主題了。
+=======
+In practice, such functions are quite useful. The major difference between a real-life `ask` and the example above is that real-life functions use more complex ways to interact with the user than a simple `confirm`. In the browser, such functions usually draw a nice-looking question window. But that's another story.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/16-function-expressions/article.md
**`ask` 的引數 `showOk` 與 `showCancel` 稱作 *回呼函數* 或就叫 *回乎*。**
背後的想法是，我們傳遞一個函式，並期望稍後它能在必要時被 "回呼"。在我們的例子中，`showOk` 成為了 "yes" 答案的回呼，而 `showCancel` 則是對應 "no" 答案。
+<<<<<<< HEAD:1-js/02-first-steps/15-function-expressions/article.md
我們可以使用函式表達式來將其簡寫：
+=======
+We can use Function Expressions to write an equivalent, shorter function:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/16-function-expressions/article.md
```js run no-beautify
function ask(question, yes, no) {
@@ -174,7 +220,13 @@ ask(
首先是語法：如何在程式碼中區別他們。
+<<<<<<< HEAD:1-js/02-first-steps/15-function-expressions/article.md
- *函式宣告式：* 一個函式，在主程式碼中分開宣告的述語。
+=======
+First, the syntax: how to differentiate between them in the code.
+
+- *Function Declaration:* a function, declared as a separate statement, in the main code flow:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/16-function-expressions/article.md
```js
// 函數宣告式
@@ -182,8 +234,12 @@ ask(
return a + b;
}
```
+<<<<<<< HEAD:1-js/02-first-steps/15-function-expressions/article.md
- *函式表達式：* 一個函式，在一個表達式或另一個語法結構中創建。這邊的例子，函式在指定運算表達符號 `=` 的右側被創建：
+=======
+- *Function Expression:* a function, created inside an expression or inside another syntax construct. Here, the function is created on the right side of the "assignment expression" `=`:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/16-function-expressions/article.md
```js
// Function Expression
@@ -280,9 +336,15 @@ if (age < 18) {
welcome(); // \ (運行)
*/!*
// |
+<<<<<<< HEAD:1-js/02-first-steps/15-function-expressions/article.md
function welcome() { // |
alert("Hello!"); // | 函式宣告式可被存取於
} // | 其所被宣告區塊內的任何地方
+=======
+ function welcome() { // |
+ alert("Hello!"); // | Function Declaration is available
+ } // | everywhere in the block where it's declared
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/16-function-expressions/article.md
// |
*!*
welcome(); // / (運行)
@@ -290,7 +352,7 @@ alert("Hello!"); // | 函式宣告式可被存取於
} else {
- function welcome() {
+ function welcome() {
alert("Greetings!");
}
}
@@ -350,7 +412,12 @@ welcome(); // ok now
```smart header="何時選擇函式宣告式或函式表達式？"
根據經驗，當我們需要宣告函式時，首先考慮的是函式宣告式語法。對於組織我們的程式碼上，它給了我們更多的自由，因為我們可以在這些函式被宣告前呼叫他們。
+<<<<<<< HEAD:1-js/02-first-steps/15-function-expressions/article.md
在可讀性上也更好，在程式碼中找尋 `function f(...) {...}` 比起 `let f = function(...) {...}` 更簡單。函式宣告式更能 "吸引目光"。
+=======
+```smart header="When to choose Function Declaration versus Function Expression?"
+As a rule of thumb, when we need to declare a function, the first thing to consider is Function Declaration syntax. It gives more freedom in how to organize our code, because we can call such functions before they are declared.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/16-function-expressions/article.md
...但如果函式宣告式由於某些原因不適合我們，或是我們需要條件式宣告（我們剛剛才看過例子），那就應該使用函式表達式。
```
diff --git a/1-js/02-first-steps/16-arrow-functions-basics/1-rewrite-arrow/solution.md b/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/solution.md
similarity index 86%
rename from 1-js/02-first-steps/16-arrow-functions-basics/1-rewrite-arrow/solution.md
rename to 1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/solution.md
index 0f0264d67..4e5b217d7 100644
--- a/1-js/02-first-steps/16-arrow-functions-basics/1-rewrite-arrow/solution.md
+++ b/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/solution.md
@@ -1,7 +1,7 @@
```js run
function ask(question, yes, no) {
- if (confirm(question)) yes()
+ if (confirm(question)) yes();
else no();
}
diff --git a/1-js/02-first-steps/16-arrow-functions-basics/1-rewrite-arrow/task.md b/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/task.md
similarity index 89%
rename from 1-js/02-first-steps/16-arrow-functions-basics/1-rewrite-arrow/task.md
rename to 1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/task.md
index 1c095b8c3..1cbb05b4f 100644
--- a/1-js/02-first-steps/16-arrow-functions-basics/1-rewrite-arrow/task.md
+++ b/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/task.md
@@ -5,7 +5,7 @@
```js run
function ask(question, yes, no) {
- if (confirm(question)) yes()
+ if (confirm(question)) yes();
else no();
}
diff --git a/1-js/02-first-steps/16-arrow-functions-basics/article.md b/1-js/02-first-steps/17-arrow-functions-basics/article.md
similarity index 52%
rename from 1-js/02-first-steps/16-arrow-functions-basics/article.md
rename to 1-js/02-first-steps/17-arrow-functions-basics/article.md
index 8655855a2..cecc4e2fe 100644
--- a/1-js/02-first-steps/16-arrow-functions-basics/article.md
+++ b/1-js/02-first-steps/17-arrow-functions-basics/article.md
@@ -5,15 +5,19 @@
它被稱為 "箭頭函式（arrow functions）"，因為它看起來像這樣：
```js
-let func = (arg1, arg2, ...argN) => expression
+let func = (arg1, arg2, ..., argN) => expression;
```
+<<<<<<< HEAD:1-js/02-first-steps/16-arrow-functions-basics/article.md
...這會創建一個接受引數 `arg1..argN` 的函式 `func`，運行右側的 `expression` 並回傳結果。
+=======
+This creates a function `func` that accepts arguments `arg1..argN`, then evaluates the `expression` on the right side with their use and returns its result.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/17-arrow-functions-basics/article.md
換句話說，它是這個的簡短版本：
```js
-let func = function(arg1, arg2, ...argN) {
+let func = function(arg1, arg2, ..., argN) {
return expression;
};
```
@@ -33,7 +37,11 @@ let sum = function(a, b) {
alert( sum(1, 2) ); // 3
```
+<<<<<<< HEAD:1-js/02-first-steps/16-arrow-functions-basics/article.md
如你所見，`(a, b) => a + b` 代表接收兩個名為 `a` 與 `b` 引數的函式。在執行時，它會運算 `a + b` 的表達式然後回傳結果。
+=======
+As you can see, `(a, b) => a + b` means a function that accepts two arguments named `a` and `b`. Upon the execution, it evaluates the expression `a + b` and returns the result.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/17-arrow-functions-basics/article.md
- 如果我們只有一個引數，那麼參數旁的括號可以省略，讓它更短。
@@ -48,7 +56,11 @@ alert( sum(1, 2) ); // 3
alert( double(3) ); // 6
```
+<<<<<<< HEAD:1-js/02-first-steps/16-arrow-functions-basics/article.md
- 如果沒有任何引數，括號應該是空的（但他們應該被保留）：
+=======
+- If there are no arguments, parentheses are empty, but they must be present:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/17-arrow-functions-basics/article.md
```js run
let sayHi = () => alert("Hello!");
@@ -64,7 +76,7 @@ alert( sum(1, 2) ); // 3
let age = prompt("What is your age?", 18);
let welcome = (age < 18) ?
- () => alert('Hello') :
+ () => alert('Hello!') :
() => alert("Greetings!");
welcome();
@@ -76,9 +88,15 @@ welcome();
## 多行箭頭函式
+<<<<<<< HEAD:1-js/02-first-steps/16-arrow-functions-basics/article.md
上述的範例拿取 `=>` 左側的引數並在右側的表達式中使用它們。
有時我們需要一些更複雜的東西，像是多個表達式或是述語。這也是可行的，但我們應該用大括弧將它們括起來。然後在其中使用普通的 `return`。
+=======
+The arrow functions that we've seen so far were very simple. They took arguments from the left of `=>`, evaluated and returned the right-side expression with them.
+
+Sometimes we need a more complex function, with multiple expressions and statements. In that case, we can enclose them in curly braces. The major difference is that curly braces require a `return` within them to return a value (just like a regular function does).
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/17-arrow-functions-basics/article.md
像這樣：
@@ -86,7 +104,11 @@ welcome();
let sum = (a, b) => { // 大括弧開啟多行函式
let result = a + b;
*!*
+<<<<<<< HEAD:1-js/02-first-steps/16-arrow-functions-basics/article.md
return result; // 如果我們使用大括弧，則需要明確的 "return"
+=======
+ return result; // if we use curly braces, then we need an explicit "return"
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/17-arrow-functions-basics/article.md
*/!*
};
@@ -105,7 +127,14 @@ alert( sum(1, 2) ); // 3
## 總結
+<<<<<<< HEAD:1-js/02-first-steps/16-arrow-functions-basics/article.md
箭頭函式對於單行動作來說非常方便，以下是它的兩個樣貌：
1. 沒有大括號：`(...args) => expression` -- 右側是一個表達式：函式執行它並回傳結果。
2. 有大括號：`(...args) => { body }` -- 括號允許我們在函式內撰寫多行述語，但我們需要用明確地 `return` 來回傳東西。
+=======
+Arrow functions are handy for simple actions, especially for one-liners. They come in two flavors:
+
+1. Without curly braces: `(...args) => expression` -- the right side is an expression: the function evaluates it and returns the result. Parentheses can be omitted, if there's only a single argument, e.g. `n => n*2`.
+2. With curly braces: `(...args) => { body }` -- brackets allow us to write multiple statements inside the function, but we need an explicit `return` to return something.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/17-arrow-functions-basics/article.md
diff --git a/1-js/02-first-steps/17-javascript-specials/article.md b/1-js/02-first-steps/18-javascript-specials/article.md
similarity index 67%
rename from 1-js/02-first-steps/17-javascript-specials/article.md
rename to 1-js/02-first-steps/18-javascript-specials/article.md
index 2313a1059..84530c974 100644
--- a/1-js/02-first-steps/17-javascript-specials/article.md
+++ b/1-js/02-first-steps/18-javascript-specials/article.md
@@ -57,7 +57,11 @@ for(;;) {
該指令必須放在 JavaScript 腳本的頂部或是函數的開頭。
+<<<<<<< HEAD:1-js/02-first-steps/17-javascript-specials/article.md
沒有使用 `"use strict"`，一切依然能正常運行，但是某些特性會以 "兼容" 舊式的方式表現，我們通常偏好使用現代的方式。
+=======
+Without `"use strict"`, everything still works, but some features behave in the old-fashioned, "compatible" way. We'd generally prefer the modern behavior.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/18-javascript-specials/article.md
語言內有些現代功能與特性（像是我們將來要學的類別）會隱式地啟用嚴格模式。
@@ -83,6 +87,7 @@ let x = 5;
x = "John";
```
+<<<<<<< HEAD:1-js/02-first-steps/17-javascript-specials/article.md
有 8 種資料類型：
- `number` 可以是浮點數或是整數。
@@ -94,6 +99,17 @@ x = "John";
- `object` 與 `symbol` -- 用於複雜的資料結構和唯一識別符號，我們還沒學習這個類型。
`typeof` 運算子會回傳值的類型，但有兩個例外：
+=======
+There are 8 data types:
+
+- `number` for both floating-point and integer numbers,
+- `bigint` for integer numbers of arbitrary length,
+- `string` for strings,
+- `boolean` for logical values: `true/false`,
+- `null` -- a type with a single value `null`, meaning "empty" or "does not exist",
+- `undefined` -- a type with a single value `undefined`, meaning "not assigned",
+- `object` and `symbol` -- for complex data structures and unique identifiers, we haven't learnt them yet.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/18-javascript-specials/article.md
```js
typeof null == "object" // 語言本身的錯誤
@@ -106,6 +122,7 @@ typeof function(){} == "function" // 函式被特別對待
我們使用瀏覽器作為工作環境，所以基本的 UI 功能會是：
+<<<<<<< HEAD:1-js/02-first-steps/17-javascript-specials/article.md
[`prompt(question, [default])`](mdn:api/Window/prompt)
: 詢問一個 `question`，並回傳使用者輸入的內容，若使用者按下 "取消"，則回傳 `null` 。
@@ -114,6 +131,16 @@ typeof function(){} == "function" // 函式被特別對待
[`alert(message)`](mdn:api/Window/alert)
: 輸出一個 `message`。
+=======
+[`prompt(question, [default])`](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt)
+: Ask a `question`, and return either what the visitor entered or `null` if they clicked "cancel".
+
+[`confirm(question)`](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm)
+: Ask a `question` and suggest to choose between Ok and Cancel. The choice is returned as `true/false`.
+
+[`alert(message)`](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert)
+: Output a `message`.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/18-javascript-specials/article.md
所有這些函式都是 *模態*，他們會暫停程式碼執行並阻擋使用者與頁面互動，直到使用者回應模態。
@@ -146,8 +173,13 @@ JavaScript 支援以下運算子：
指定運算子（Assignments）
： 簡單的指定： `a = b` 和結合其他運算的指定運算 `a *= 2`。
+<<<<<<< HEAD:1-js/02-first-steps/17-javascript-specials/article.md
位元操作（Bitwise）
： 位元操作在最底層的位元層面使用 32-bit 整數： 有需要時，請參閱 [docs](mdn:/JavaScript/Reference/Operators/Bitwise_Operators)。
+=======
+Bitwise
+: Bitwise operators work with 32-bit integers at the lowest, bit-level: see the [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise_operators) when they are needed.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/18-javascript-specials/article.md
條件運算（Conditional）
： 唯一具有三個參數的操作： `cond ? resultA : resultB`. 如果 `cond` 是真值，則回傳 `resultA`否則回傳 `resultB`。
@@ -155,8 +187,16 @@ JavaScript 支援以下運算子：
邏輯運算子（Logical operators）
： 邏輯的 AND `&&` 和 OR `||` 執行短路核定，然後回傳停止時的值（不一定為 `true`/`false`）。邏輯的 NOT `!` 轉換操作運算元成布林類型，並回傳相反的值。
+<<<<<<< HEAD:1-js/02-first-steps/17-javascript-specials/article.md
比較運算子（Comparisons）
： 相等性檢查 `==` 將不同類型的值轉換成數值（除了 `null` 和 `undefined`，它們除了彼此相等外，不跟任何人相等），所以這些是相等的：
+=======
+Nullish coalescing operator
+: The `??` operator provides a way to choose a defined value from a list of variables. The result of `a ?? b` is `a` unless it's `null/undefined`, then `b`.
+
+Comparisons
+: Equality check `==` for values of different types converts them to a number (except `null` and `undefined` that equal each other and nothing else), so these are equal:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9:1-js/02-first-steps/18-javascript-specials/article.md
```js run
alert( 0 == false ); // true
@@ -174,7 +214,11 @@ JavaScript 支援以下運算子：
其他運算子
： 有一些其他的運算子，像是逗號運算子。
+<<<<<<< HEAD:1-js/02-first-steps/17-javascript-specials/article.md
更多資訊： （譯者註：這則引用應是個烏龍，孔子沒有說過這句話，可上網查詢相關來源） +======= +## Smart synonyms + +```quote author="Laozi (Tao Te Ching)" +The Tao that can be told is not the eternal Tao. The name that can be named is not the eternal name. +>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9 ``` 對 *同件* 事情使用 *相似* 的名稱使得生活更為有趣，並向大眾顯示出你的創意。 diff --git a/1-js/03-code-quality/05-testing-mocha/article.md b/1-js/03-code-quality/05-testing-mocha/article.md index 2294c993e..903b89e65 100644 --- a/1-js/03-code-quality/05-testing-mocha/article.md +++ b/1-js/03-code-quality/05-testing-mocha/article.md @@ -2,7 +2,11 @@ 自動化測試將會在未來的任務中被使用，且也會在真實專案上被廣泛地使用。 +<<<<<<< HEAD ## 為什麼我們需要測試？ +======= +## Why do we need tests? +>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9 當我們寫下一個函式，我們通常可以想像它應該要做些什麼：哪些參數會給出哪些結果。 @@ -51,7 +55,11 @@ describe("pow", function() { 從上面你可以發現一份規格有三個主要的建構區塊： `describe("title", function() { ... })` +<<<<<<< HEAD : 代表我們正在描述什麼樣的功能。在我們的例子中描述的是 `pow` 這個函式。用來組合 "workers" -- 也就是 `it` 區塊。 +======= +: What functionality we're describing? In our case we're describing the function `pow`. Used to group "workers" -- the `it` blocks. +>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9 `it("use case description", function() { ... })` : 在 `it` 的標題中，我們使用 *人類可讀的方式* 來描述特定的使用情境，而第二個引數是用來測試它的函式。 @@ -67,6 +75,7 @@ describe("pow", function() { 開發流程通常看起來像這樣： +<<<<<<< HEAD 1. 寫下最初規格，測試最為基本的功能。 2. 建立最初實作。 3. 要檢查它是否運作，我們執行測試框架 [Mocha](http://mochajs.org/)（很快就有更多細節）來運行規格。當功能尚未完成時，錯誤會被顯示出來，我們得持續修正直到一切運作正常為止。 @@ -74,20 +83,39 @@ describe("pow", function() { 5. 我們加入更多使用情境到規格中，也許某些在目前的實作中尚未支援，所以測試將會失敗。 6. 回到 3，更新實作直到測試無誤為止。 7. 重複步驟 3-6 直到功能齊全為止。 +======= +1. An initial spec is written, with tests for the most basic functionality. +2. An initial implementation is created. +3. To check whether it works, we run the testing framework [Mocha](https://mochajs.org/) (more details soon) that runs the spec. While the functionality is not complete, errors are displayed. We make corrections until everything works. +4. Now we have a working initial implementation with tests. +5. We add more use cases to the spec, probably not yet supported by the implementations. Tests start to fail. +6. Go to 3, update the implementation till tests give no errors. +7. Repeat steps 3-6 till the functionality is ready. +>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9 所以，開發是 *迭代的*。我們寫下規格、實作它、保證通過測試、然後再寫更多測試、確認它們無誤等等。最後我們將擁有運行正常的實作與其測試。 在我們的實際例子中來看看這個開發流程。 +<<<<<<< HEAD 第一步已經完成了：對於 `pow` 我們已經有初始的規格。現在，在開始實作之前，來用些 JavaScript 函式庫運行測試，看看它們是否運作正常（全部都會失敗）。 +======= +The first step is already complete: we have an initial spec for `pow`. Now, before making the implementation, let's use a few JavaScript libraries to run the tests, just to see that they are working (they will all fail). +>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9 ## 實作規格 在教程中我們將使用以下 JavaScript 函式庫做測試： +<<<<<<< HEAD - [Mocha](http://mochajs.org/) -- 核心框架：它提供包含 `describe` 和 `it` 的常見測試函式，與運行測試的主函式。 - [Chai](http://chaijs.com) -- 有許多斷言的函式庫。它可以使用很多不同的斷言，現在我們只需要 `assert.equal`。 - [Sinon](http://sinonjs.org/) -- 該函式庫可監控函式、模擬內建函式與其它功能，我們稍後會需要它。 +======= +- [Mocha](https://mochajs.org/) -- the core framework: it provides common testing functions including `describe` and `it` and the main function that runs tests. +- [Chai](https://www.chaijs.com/) -- the library with many assertions. It allows to use a lot of different assertions, for now we need only `assert.equal`. +- [Sinon](https://sinonjs.org/) -- a library to spy over functions, emulate built-in functions and more, we'll need it much later. +>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9 這些函式庫用於瀏覽器端或是伺服器端的測試都很適合，在此我們用在瀏覽器上。 @@ -182,11 +210,15 @@ function pow(x, n) { [iframe height=250 src="pow-2" edit border="1"] +<<<<<<< HEAD <<<<<<< HEAD 如我們所預期，第二個測試失敗了。當然，我們的函式總是回傳 `8`，然而 `assert` 預期的是 `27`。 ======= As we could expect, the second test failed. Sure, our function always returns `8`, while the `assert` expects `81`. >>>>>>> 71120d5968cec3103743014cf563e0f7c8045a16 +======= +As we could expect, the second test failed. Sure, our function always returns `8`, while the `assert` expects `81`. +>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9 ## 改進實作 @@ -342,6 +374,7 @@ describe("pow", function() { ```smart header="其它斷言" 請注意斷言 `assert.isNaN`：它用於確認 `NaN`。 +<<<<<<< HEAD [Chai](http://chaijs.com) 中也有其它斷言，例如： - `assert.equal(value1, value2)` -- 確認相等 `value1 == value2`。 @@ -350,6 +383,16 @@ describe("pow", function() { - `assert.isTrue(value)` -- 確認 `value === true` - `assert.isFalse(value)` -- 確認 `value === false` - ...完整的列表在 [文件](http://chaijs.com/api/assert/) +======= +There are other assertions in [Chai](https://www.chaijs.com/) as well, for instance: + +- `assert.equal(value1, value2)` -- checks the equality `value1 == value2`. +- `assert.strictEqual(value1, value2)` -- checks the strict equality `value1 === value2`. +- `assert.notEqual`, `assert.notStrictEqual` -- inverse checks to the ones above. +- `assert.isTrue(value)` -- checks that `value === true` +- `assert.isFalse(value)` -- checks that `value === false` +- ...the full list is in the [docs](https://www.chaijs.com/api/assert/) +>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9 ``` 所以我們應該在 `pow` 多加幾行： diff --git a/1-js/03-code-quality/05-testing-mocha/beforeafter.view/test.js b/1-js/03-code-quality/05-testing-mocha/beforeafter.view/test.js index cad51d3ee..d3de82546 100644 --- a/1-js/03-code-quality/05-testing-mocha/beforeafter.view/test.js +++ b/1-js/03-code-quality/05-testing-mocha/beforeafter.view/test.js @@ -1,5 +1,11 @@ describe("test", function() { + + // Mocha usually waits for the tests for 2 seconds before considering them wrong + + this.timeout(200000); // With this code we increase this - in this case to 200,000 milliseconds + // This is because of the "alert" function, because if you delay pressing the "OK" button the tests will not pass! + before(() => alert("Testing started – before all tests")); after(() => alert("Testing finished – after all tests")); diff --git a/1-js/03-code-quality/06-polyfills/article.md b/1-js/03-code-quality/06-polyfills/article.md index 5964f900e..bef48079b 100644 --- a/1-js/03-code-quality/06-polyfills/article.md +++ b/1-js/03-code-quality/06-polyfills/article.md @@ -1,16 +1,27 @@ -# Polyfills +# Polyfills and transpilers +<<<<<<< HEAD JavaScript 語言穩定發展。有關該語言的新提案會定期出現，他們會被分析，而且如果被認為有價值，則會新增到
(253-1) or be less than -(253-1), as we mentioned earlier in the chapter 253 或小於 -253。 由於 bigints 只用在少數幾個特殊領域，我們將用一個特殊章節來介紹它。 func`string`。 函數 `func` 會被自動調用，接收字串和嵌入式表達式並處理他們，這稱為 "標記模板 (tagged templates)"。 此功能使實現自定義模板更加容易，但很少在實踐中使用。您可以在 [手冊](mdn:/JavaScript/Reference/Template_literals#Tagged_templates) 中了解更多信息。
+=======
+Single and double quotes come from ancient times of language creation, when the need for multiline strings was not taken into account. Backticks appeared much later and thus are more versatile.
+
+Backticks also allow us to specify a "template function" before the first backtick. The syntax is: func`string`. The function `func` is called automatically, receives the string and embedded expressions and can process them. This feature is called "tagged templates", it's rarely seen, but you can read about it in the MDN: [Template literals](mdn:/JavaScript/Reference/Template_literals#Tagged_templates).
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
## 特殊字元
@@ -61,10 +67,17 @@ let guestList = "Guests: // 錯誤：意料之外的令牌（標記、符號）
```js run
let guestList = "Guests:\n * John\n * Pete\n * Mary";
+<<<<<<< HEAD
alert(guestList); // 一個多行的來賓列表
```
例如， 這兩行做法是相同的，只是書寫方式不同：
+=======
+alert(guestList); // a multiline list of guests, same as above
+```
+
+As a simpler example, these two lines are equal, just written differently:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js run
let str1 = "Hello\nWorld"; // 使用一個 "換行符" 創建的兩行字串
@@ -76,12 +89,17 @@ World`;
alert(str1 == str2); // true
```
+<<<<<<< HEAD
還有其他一些不太常見的 "特殊" 字元。
這裡是完整的列表：
+=======
+There are other, less common special characters:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
| 字元 | 描述 |
|-----------|-------------|
+<<<<<<< HEAD
|`\n`| 換行、新行|
|`\r`| 回車：不單獨使用。 Windows 純文字檔案使用兩個字元組合 `\r\n` 來表示換行。 |
|`\'`, `\"`| 引號。|
@@ -103,6 +121,24 @@ alert( "\u{1F60D}" ); // 😍, 一個笑臉符號（另一個長的 unicode）
所有特殊字元均以反斜槓字元 `\` 開頭。也稱為 "跳脫字元"。
當我們想在字串中安插引號，也可以使用它。
+=======
+|`\n`|New line|
+|`\r`|In Windows text files a combination of two characters `\r\n` represents a new break, while on non-Windows OS it's just `\n`. That's for historical reasons, most Windows software also understands `\n`. |
+|`\'`, `\"`, \\`|Quotes|
+|`\\`|Backslash|
+|`\t`|Tab|
+|`\b`, `\f`, `\v`| Backspace, Form Feed, Vertical Tab -- mentioned for completeness, coming from old times, not used nowadays (you can forget them right now). |
+
+As you can see, all special characters start with a backslash character `\`. It is also called an "escape character".
+
+Because it's so special, if we need to show an actual backslash `\` within the string, we need to double it:
+
+```js run
+alert( `The backslash: \\` ); // The backslash: \
+```
+
+So-called "escaped" quotes `\'`, `\"`, \\` are used to insert a quote into the same-quoted string.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
例如：
@@ -112,12 +148,17 @@ alert( 'I*!*\'*/!*m the Walrus!' ); // *!*I'm*/!* the Walrus!
就像你看到的，我們必須在內部的引號前加上反斜槓 `\`，否則它將結束字串。
+<<<<<<< HEAD
當然，只有跟該封閉引號相同的引號才需要跳脫。因此，作為更優雅的解決方案，我們可以轉為使用雙引號或反引號：
+=======
+Of course, only the quotes that are the same as the enclosing ones need to be escaped. So, as a more elegant solution, we could switch to double quotes or backticks instead:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js run
-alert( `I'm the Walrus!` ); // I'm the Walrus!
+alert( "I'm the Walrus!" ); // I'm the Walrus!
```
+<<<<<<< HEAD
請注意，反斜槓 `\` 是為了使 JavaScript 正確讀取字串，然後就消失。儲存的字串中沒有 `\`。你可以在上面的 `alert` 範例中，清楚地看到這點。
但若我們需要在字串中顯示實際的反斜槓 `\` 怎麼辦？
@@ -127,6 +168,9 @@ alert( `I'm the Walrus!` ); // I'm the Walrus!
```js run
alert( `The backslash: \\` ); // The backslash: \
```
+=======
+Besides these special characters, there's also a special notation for Unicode codes `\u…`, it's rarely used and is covered in the optional chapter about [Unicode](info:unicode).
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
## 字串長度
@@ -141,33 +185,55 @@ alert( `My\n`.length ); // 3
```warn header="`length` 是一個屬性"
有其他程式語言背景的人，有時會打字錯誤，用 `str.length()` 而不是 `str.length`。那是行不通的。
+<<<<<<< HEAD
請注意，`str.length` 是數值屬性，而不是函數，不需在後面添加括號。
+=======
+Please note that `str.length` is a numeric property, not a function. There is no need to add parenthesis after it. Not `.length()`, but `.length`.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```
## 訪問字元
+<<<<<<< HEAD
在位置 `pos` 取一個字元，請使用方括號 `[pos]` 或調用方法 [str.charAt(pos)](mdn:js/String/charAt)。 第一個字元是由位置零開始：
+=======
+To get a character at position `pos`, use square brackets `[pos]` or call the method [str.at(pos)](mdn:js/String/at). The first character starts from the zero position:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js run
let str = `Hello`;
// 第一個字元
alert( str[0] ); // H
-alert( str.charAt(0) ); // H
+alert( str.at(0) ); // H
// 最後一個字元
alert( str[str.length - 1] ); // o
+alert( str.at(-1) );
```
+<<<<<<< HEAD
使用方括號，是獲取字元的現代化方式，而 `charAt` 的存在主要出於歷史性原因。
它們之間的唯一區別是，如果找不到字元，則 `[]` 將返回 `undefined`，而 `charAt` 返回一個空字串：
+=======
+As you can see, the `.at(pos)` method has a benefit of allowing negative position. If `pos` is negative, then it's counted from the end of the string.
+
+So `.at(-1)` means the last character, and `.at(-2)` is the one before it, etc.
+
+The square brackets always return `undefined` for negative indexes, for instance:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js run
let str = `Hello`;
+<<<<<<< HEAD
alert( str[1000] ); // undefined
alert( str.charAt(1000) ); // '' (一個空字串)
+=======
+alert( str[-2] ); // undefined
+alert( str.at(-2) ); // l
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```
我們也可以使用 `for..of` 來迭代過每個字元
@@ -216,7 +282,7 @@ alert( 'Interface'.toLowerCase() ); // interface
或者，我們想要一個單獨的小寫字元：
-```js
+```js run
alert( 'Interface'[0].toLowerCase() ); // 'i'
```
@@ -241,7 +307,11 @@ alert( str.indexOf('widget') ); // -1，沒找到，檢索是有區分大小寫
alert( str.indexOf("id") ); // 1, "id" 在索引位置 "1" 處就被找到 (..idget 中的 id) 。
```
+<<<<<<< HEAD
第二個參數是可選的，允許我們從給定的位置開始檢索。
+=======
+The optional second parameter allows us to start searching from a given position.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
舉例來說，`"id"` 第一次出現的位置是 `1`，要尋找下一個，我們從位置 `2` 開始找。
@@ -312,6 +382,7 @@ if (str.indexOf("Widget") != -1) {
}
```
+<<<<<<< HEAD
#### 按位（bitwise）NOT 技巧
這裡使用一個古老的技巧， [bitwise NOT](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT) `~` 運算子。它將數字轉換為一個 32 位元 （32-bit）的整數（如果有小數點則全部捨棄），然後反轉它的二進製表示中的所有位元。
@@ -351,6 +422,8 @@ if (~str.indexOf("Widget")) {
現在，我們只能在舊程式碼中看到此技巧，因為現代 JavaScript 提供了 `.includes` 方法（見下文）。
+=======
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
### includes, startsWith, endsWith
更現代的方法 [str.includes(substr, pos)](mdn:js/String/includes) 會根據 `str` 中是否包含 `substr` 來回傳 `true/false`。
@@ -373,8 +446,13 @@ alert( "Widget".includes("id", 3) ); // false, 從索引位置 3 開始檢索不
方法 [str.startsWith](mdn:js/String/startsWith) 和 [str.endsWith](mdn:js/String/endsWith) 完全如它們所說：
```js run
+<<<<<<< HEAD
alert( "Widget".startsWith("Wid") ); // true, "Widget" 以 "Wid" 開始
alert( "Widget".endsWith("get") ); // true, "Widget" 以 "get" 結尾
+=======
+alert( "*!*Wid*/!*get".startsWith("Wid") ); // true, "Widget" starts with "Wid"
+alert( "Wid*!*get*/!*".endsWith("get") ); // true, "Widget" ends with "get"
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```
## 取得一個子字串
@@ -410,9 +488,16 @@ alert( str.slice(-4, -1) ); // 'gif'
`str.substring(start [, end])` :
回傳該字串 `start` 和 `end` *之間* 的部分。
+<<<<<<< HEAD
它幾乎與 `slice` 一樣，但它允許 `start` 可以大於 `end`。
例如：
+=======
+`str.substring(start [, end])`
+: Returns the part of the string *between* `start` and `end` (not including `end`).
+
+ This is almost the same as `slice`, but it allows `start` to be greater than `end` (in this case it simply swaps `start` and `end` values).
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js run
let str = "st*!*ring*/!*ify";
@@ -447,16 +532,39 @@ alert( str.substr(-4, 2) ); // 'gi', 從位置 4 開始取 2 個字元
讓我們回顧一下這些方法，以免混淆：
+<<<<<<< HEAD
| 方法 | 選擇器 | 負號參數 |
|--------|-----------|-----------|
| `slice(start, end)` | 從 `start` 到 `end` (不包含 `end`) | 允許負號參數 |
| `substring(start, end)` | `start` 與 `end` 之間 | 負號參數視為 `0`|
| `substr(start, length)` | 從 `start` 取 `length` 個字元 | 允許 `start` 為負數 |
+=======
+ ```js run
+ let str = "strin*!*gi*/!*fy";
+ alert( str.substr(-4, 2) ); // 'gi', from the 4th position get 2 characters
+ ```
+
+ This method resides in the [Annex B](https://tc39.es/ecma262/#sec-string.prototype.substr) of the language specification. It means that only browser-hosted Javascript engines should support it, and it's not recommended to use it. In practice, it's supported everywhere.
+
+Let's recap these methods to avoid any confusion:
+
+| method | selects... | negatives |
+|--------|-----------|-----------|
+| `slice(start, end)` | from `start` to `end` (not including `end`) | allows negatives |
+| `substring(start, end)` | between `start` and `end` (not including `end`)| negative values mean `0` |
+| `substr(start, length)` | from `start` get `length` characters | allows negative `start` |
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```smart header="使用哪一個？"
它們都可以勝任工作。從形式上看，`substr` 有個小缺點：它不是在 JavaScript 的核心規範中被描述，而是寫在附件 B 中，它涵蓋了主要由於歷史因素而存在的瀏覽器特性。因此，非瀏覽器環境可能無法支持它，但實際上它在任何地方都可運作。
+<<<<<<< HEAD
另外兩個變種，`slice` 更靈活一點，它允許負號參數，且寫得短些。所以只要記住這三個方法中的 `slice` 就夠了。
+=======
+Of the other two variants, `slice` is a little bit more flexible, it allows negative arguments and shorter to write.
+
+So, for practical use it's enough to remember only `slice`.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```
## Comparing strings 比對字串
@@ -479,6 +587,7 @@ alert( str.substr(-4, 2) ); // 'gi', 從位置 4 開始取 2 個字元
這可能導致奇怪的結果，如果我們排序這些國名，一般人們會認為列表中 `Zealand` 會排在 `Österreich` 之後。
+<<<<<<< HEAD
為了明白發生什麼事，我們回顧一下 JavaScript 中，字串的內部表現形式。
所有字串都是用 [UTF-16](https://en.wikipedia.org/wiki/UTF-16) 編碼的。即：每一個字元都有一個對應的數字代碼。有一些特殊的方法可以獲取代碼表示的字符，以及字符對應的代碼。
@@ -491,10 +600,26 @@ alert( str.substr(-4, 2) ); // 'gi', 從位置 4 開始取 2 個字元
alert( "z".codePointAt(0) ); // 122
alert( "Z".codePointAt(0) ); // 90
```
+=======
+To understand what happens, we should be aware that strings in Javascript are encoded using [UTF-16](https://en.wikipedia.org/wiki/UTF-16). That is: each character has a corresponding numeric code.
+
+There are special methods that allow to get the character for the code and back:
+
+`str.codePointAt(pos)`
+: Returns a decimal number representing the code for the character at position `pos`:
+
+ ```js run
+ // different case letters have different codes
+ alert( "Z".codePointAt(0) ); // 90
+ alert( "z".codePointAt(0) ); // 122
+ alert( "z".codePointAt(0).toString(16) ); // 7a (if we need a hexadecimal value)
+ ```
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
`String.fromCodePoint(code)`：
用字元的代碼數字 `code` 創建字元
+<<<<<<< HEAD
```js run
alert( String.fromCodePoint(90) ); // Z
```
@@ -505,6 +630,12 @@ alert( String.fromCodePoint(90) ); // Z
// 在十六進制系統中 90 為 5a
alert( '\u005a' ); // Z
```
+=======
+ ```js run
+ alert( String.fromCodePoint(90) ); // Z
+ alert( String.fromCodePoint(0x5a) ); // Z (we can also use a hex value as an argument)
+ ```
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
現在我們來看代碼 `60..220` 的字元（拉丁字母和一些額外的字元）方法是用它們創建一個字串：
@@ -515,6 +646,7 @@ for (let i = 65; i <= 220; i++) {
str += String.fromCodePoint(i);
}
alert( str );
+// Output:
// ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~
// ¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜ
```
@@ -525,16 +657,27 @@ alert( str );
字元通過它們的數字代碼進行比較。代碼較大表示該字元較大。 `a` 代碼 (97) 大於 `Z` 代碼 (90)。
+<<<<<<< HEAD
- 所有小寫字母都在大寫字母後面，因為它們的代碼更大。
- 一些字母像是 `Ö` 與主要字母分開。在這裏，它的代碼比從 `a` 到 `z` 的任何字元代碼都大。
### Correct comparisons 正確的比較
+=======
+- All lowercase letters go after uppercase letters because their codes are greater.
+- Some letters like `Ö` stand apart from the main alphabet. Here, its code is greater than anything from `a` to `z`.
+
+### Correct comparisons [#correct-comparisons]
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
執行字串比較，"正確" 的演算法比看起來更複雜，因為不同語言的字母是不同的。
所以，瀏覽器需要知道要比較的語言是什麼。
+<<<<<<< HEAD
幸運的是，所有現代瀏覽器（IE10 -- 需要額外的函式庫 [Intl.JS](https://github.com/andyearnshaw/Intl.js/)）都支援國際化標準 [ECMA 402](http://www.ecma-international.org/ecma-402/1.0/ECMA-402.pdf)。
+=======
+Luckily, modern browsers support the internationalization standard [ECMA-402](https://www.ecma-international.org/publications-and-standards/standards/ecma-402/).
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
It provides a special method to compare strings in different languages, following their rules.
它提供一種特殊方法來比較不同的語言的字串，遵循語言的規則。
@@ -553,6 +696,7 @@ alert( 'Österreich'.localeCompare('Zealand') ); // -1
這個方法實際上在 [此文件](mdn:js/String/localeCompare) 指定了兩個額外的參數，它允許指定語言（預設會在環境中獲取語言，字母順序會根據語言不同）並設定額外規則，像是區分大小寫，或是否將 `"a"` 和 `"á"` 視為相同等等。
+<<<<<<< HEAD
## 內部的, Unicode
```warn header="進階知識"
@@ -672,10 +816,31 @@ alert( "S\u0307\u0323".normalize() == "\u1e68" ); // true
- 字串大小寫轉換，使用：`toLowerCase/toUpperCase`。
- 要搜尋一個子字串，使用： `indexOf`，或用 `includes/startsWith/endsWith` 來做簡單的確認。
- 要依據語言比較字串時使用：`localeCompare`，否則將使用字元編碼比較
+=======
+## Summary
+
+- There are 3 types of quotes. Backticks allow a string to span multiple lines and embed expressions `${…}`.
+- We can use special characters, such as a line break `\n`.
+- To get a character, use: `[]` or `at` method.
+- To get a substring, use: `slice` or `substring`.
+- To lowercase/uppercase a string, use: `toLowerCase/toUpperCase`.
+- To look for a substring, use: `indexOf`, or `includes/startsWith/endsWith` for simple checks.
+- To compare strings according to the language, use: `localeCompare`, otherwise they are compared by character codes.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
關於字串，其他ㄧ些有用的方法：
+<<<<<<< HEAD
- `str.trim()` -- 移除 ("trims") 字串前後的空格。
- `str.repeat(n)` -- 重複該字串 `n` 次。
- ...更多內容請參考 [manual 手冊](mdn:js/String).
字串也有使用正則表達式進行 檢索/替換 的方法。但這是個大主題，因此，將在一個單獨的教程章節 handler is called on this input:
++ + +
+
+Debounced function debounce(handler, 1000) is called on this input:
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md
index 4f5867ded..83e75f315 100644
--- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md
@@ -1,28 +1,13 @@
```js demo
-function debounce(f, ms) {
-
- let isCooldown = false;
-
+function debounce(func, ms) {
+ let timeout;
return function() {
- if (isCooldown) return;
-
- f.apply(this, arguments);
-
- isCooldown = true;
-
- setTimeout(() => isCooldown = false, ms);
+ clearTimeout(timeout);
+ timeout = setTimeout(() => func.apply(this, arguments), ms);
};
-
}
-```
-
-A call to `debounce` returns a wrapper. There may be two states:
-- `isCooldown = false` -- ready to run.
-- `isCooldown = true` -- waiting for the timeout.
-
-In the first call `isCooldown` is falsy, so the call proceeds, and the state changes to `true`.
+```
-While `isCooldown` is true, all other calls are ignored.
+A call to `debounce` returns a wrapper. When called, it schedules the original function call after given `ms` and cancels the previous such timeout.
-Then `setTimeout` reverts it to `false` after the given delay.
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md
index 2620f1c71..5b0fcc5f8 100644
--- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md
@@ -4,21 +4,48 @@ importance: 5
# Debounce decorator
-The result of `debounce(f, ms)` decorator should be a wrapper that passes the call to `f` at maximum once per `ms` milliseconds.
+The result of `debounce(f, ms)` decorator is a wrapper that suspends calls to `f` until there's `ms` milliseconds of inactivity (no calls, "cooldown period"), then invokes `f` once with the latest arguments.
-In other words, when we call a "debounced" function, it guarantees that all future calls to the function made less than `ms` milliseconds after the previous call will be ignored.
+In other words, `debounce` is like a secretary that accepts "phone calls", and waits until there's `ms` milliseconds of being quiet. And only then it transfers the latest call information to "the boss" (calls the actual `f`).
-For instance:
+For instance, we had a function `f` and replaced it with `f = debounce(f, 1000)`.
-```js no-beautify
-let f = debounce(alert, 1000);
+Then if the wrapped function is called at 0ms, 200ms and 500ms, and then there are no calls, then the actual `f` will be only called once, at 1500ms. That is: after the cooldown period of 1000ms from the last call.
-f(1); // runs immediately
-f(2); // ignored
+
-setTimeout( () => f(3), 100); // ignored ( only 100 ms passed )
-setTimeout( () => f(4), 1100); // runs
-setTimeout( () => f(5), 1500); // ignored (less than 1000 ms from the last run)
+...And it will get the arguments of the very last call, other calls are ignored.
+
+Here's the code for it (uses the debounce decorator from the [Lodash library](https://lodash.com/docs/4.17.15#debounce)):
+
+```js
+let f = _.debounce(alert, 1000);
+
+f("a");
+setTimeout( () => f("b"), 200);
+setTimeout( () => f("c"), 500);
+// debounced function waits 1000ms after the last call and then runs: alert("c")
+```
+
+Now a practical example. Let's say, the user types something, and we'd like to send a request to the server when the input is finished.
+
+There's no point in sending the request for every character typed. Instead we'd like to wait, and then process the whole result.
+
+In a web-browser, we can setup an event handler -- a function that's called on every change of an input field. Normally, an event handler is called very often, for every typed key. But if we `debounce` it by 1000ms, then it will be only called once, after 1000ms after the last input.
+
+```online
+
+In this live example, the handler puts the result into a box below, try it:
+
+[iframe border=1 src="debounce" height=200]
+
+See? The second input calls the debounced function, so its content is processed after 1000ms from the last input.
```
-In practice `debounce` is useful for functions that retrieve/update something when we know that nothing new can be done in such a short period of time, so it's better not to waste resources.
+So, `debounce` is a great way to process a sequence of events: be it a sequence of key presses, mouse movements or something else.
+
+It waits the given time after the last call, and then runs its function, that can process the result.
+
+The task is to implement `debounce` decorator.
+
+Hint: that's just a few lines if you think about it :)
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js
index d2cf8e151..e671438f6 100644
--- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js
@@ -7,8 +7,8 @@ describe("throttle(f, 1000)", function() {
}
before(function() {
- f1000 = throttle(f, 1000);
this.clock = sinon.useFakeTimers();
+ f1000 = throttle(f, 1000);
});
it("the first call runs now", function() {
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md
index cf851f771..6950664be 100644
--- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md
@@ -12,11 +12,10 @@ function throttle(func, ms) {
savedThis = this;
return;
}
+ isThrottled = true;
func.apply(this, arguments); // (1)
- isThrottled = true;
-
setTimeout(function() {
isThrottled = false; // (3)
if (savedArgs) {
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md
index 9e08874af..cbd473196 100644
--- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md
@@ -4,16 +4,21 @@ importance: 5
# Throttle decorator
-Create a "throttling" decorator `throttle(f, ms)` -- that returns a wrapper, passing the call to `f` at maximum once per `ms` milliseconds. Those calls that fall into the "cooldown" period, are ignored.
+Create a "throttling" decorator `throttle(f, ms)` -- that returns a wrapper.
-**The difference with `debounce` -- if an ignored call is the last during the cooldown, then it executes at the end of the delay.**
+When it's called multiple times, it passes the call to `f` at maximum once per `ms` milliseconds.
+
+Compared to the debounce decorator, the behavior is completely different:
+- `debounce` runs the function once after the "cooldown" period. Good for processing the final result.
+- `throttle` runs it not more often than given `ms` time. Good for regular updates that shouldn't be very often.
+
+In other words, `throttle` is like a secretary that accepts phone calls, but bothers the boss (calls the actual `f`) not more often than once per `ms` milliseconds.
Let's check the real-life application to better understand that requirement and to see where it comes from.
**For instance, we want to track mouse movements.**
In a browser we can setup a function to run at every mouse movement and get the pointer location as it moves. During an active mouse usage, this function usually runs very frequently, can be something like 100 times per second (every 10 ms).
-
**We'd like to update some information on the web-page when the pointer moves.**
...But updating function `update()` is too heavy to do it on every micro-movement. There is also no sense in updating more often than once per 100ms.
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md
index c0f34850c..5e2f48d71 100644
--- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md
@@ -36,11 +36,11 @@ function cachingDecorator(func) {
slow = cachingDecorator(slow);
-alert( slow(1) ); // slow(1) is cached
-alert( "Again: " + slow(1) ); // the same
+alert( slow(1) ); // slow(1) is cached and the result returned
+alert( "Again: " + slow(1) ); // slow(1) result returned from cache
-alert( slow(2) ); // slow(2) is cached
-alert( "Again: " + slow(2) ); // the same as the previous line
+alert( slow(2) ); // slow(2) is cached and the result returned
+alert( "Again: " + slow(2) ); // slow(2) result returned from cache
```
In the code above `cachingDecorator` is a *decorator*: a special function that takes another function and alters its behavior.
@@ -209,7 +209,7 @@ To make it all clear, let's see more deeply how `this` is passed along:
2. So when `worker.slow(2)` is executed, the wrapper gets `2` as an argument and `this=worker` (it's the object before dot).
3. Inside the wrapper, assuming the result is not yet cached, `func.call(this, x)` passes the current `this` (`=worker`) and the current argument (`=2`) to the original method.
-## Going multi-argument with "func.apply"
+## Going multi-argument
Now let's make `cachingDecorator` even more universal. Till now it was working only with single-argument functions.
@@ -236,7 +236,7 @@ There are many solutions possible:
For many practical applications, the 3rd variant is good enough, so we'll stick to it.
-Also we need to replace `func.call(this, x)` with `func.call(this, ...arguments)`, to pass all arguments to the wrapped function call, not just the first one.
+Also we need to pass not just `x`, but all arguments in `func.call`. Let's recall that in a `function()` we can get a pseudo-array of its arguments as `arguments`, so `func.call(this, x)` should be replaced with `func.call(this, ...arguments)`.
Here's a more powerful `cachingDecorator`:
@@ -284,6 +284,8 @@ There are two changes:
- In the line `(*)` it calls `hash` to create a single key from `arguments`. Here we use a simple "joining" function that turns arguments `(3, 5)` into the key `"3,5"`. More complex cases may require other hashing functions.
- Then `(**)` uses `func.call(this, ...arguments)` to pass both the context and all arguments the wrapper got (not just the first one) to the original function.
+## func.apply
+
Instead of `func.call(this, ...arguments)` we could use `func.apply(this, arguments)`.
The syntax of built-in method [func.apply](mdn:js/Function/apply) is:
@@ -299,18 +301,26 @@ The only syntax difference between `call` and `apply` is that `call` expects a l
So these two calls are almost equivalent:
```js
+<<<<<<< HEAD
func.call(context, ...args); // pass an array as list with spread syntax
func.apply(context, args); // is same as using call
+=======
+func.call(context, ...args);
+func.apply(context, args);
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```
-There's only a minor difference:
+They perform the same call of `func` with given context and arguments.
+
+<<<<<<< HEAD
+=======
+There's only a subtle difference regarding `args`:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
- The spread syntax `...` allows to pass *iterable* `args` as the list to `call`.
- The `apply` accepts only *array-like* `args`.
-So, these calls complement each other. Where we expect an iterable, `call` works, where we expect an array-like, `apply` works.
-
-And for objects that are both iterable and array-like, like a real array, we technically could use any of them, but `apply` will probably be faster, because most JavaScript engines internally optimize it better.
+...And for objects that are both iterable and array-like, such as a real array, we can use any of them, but `apply` will probably be faster, because most JavaScript engines internally optimize it better.
Passing all arguments along with the context to another function is called *call forwarding*.
@@ -344,7 +354,7 @@ function hash(args) {
}
```
-...Unfortunately, that won't work. Because we are calling `hash(arguments)` and `arguments` object is both iterable and array-like, but not a real array.
+...Unfortunately, that won't work. Because we are calling `hash(arguments)`, and `arguments` object is both iterable and array-like, but not a real array.
So calling `join` on it would fail, as we can see below:
diff --git a/1-js/06-advanced-functions/10-bind/5-question-use-bind/solution.md b/1-js/06-advanced-functions/10-bind/5-question-use-bind/solution.md
index 403107ca6..4a381c0b4 100644
--- a/1-js/06-advanced-functions/10-bind/5-question-use-bind/solution.md
+++ b/1-js/06-advanced-functions/10-bind/5-question-use-bind/solution.md
@@ -1,5 +1,5 @@
-The error occurs because `ask` gets functions `loginOk/loginFail` without the object.
+The error occurs because `askPassword` gets functions `loginOk/loginFail` without the object.
When it calls them, they naturally assume `this=undefined`.
diff --git a/1-js/06-advanced-functions/10-bind/article.md b/1-js/06-advanced-functions/10-bind/article.md
index 787c7d68e..6d65e7dd1 100644
--- a/1-js/06-advanced-functions/10-bind/article.md
+++ b/1-js/06-advanced-functions/10-bind/article.md
@@ -167,7 +167,7 @@ sayHi(); // Hello, John!
setTimeout(sayHi, 1000); // Hello, John!
// even if the value of user changes within 1 second
-// sayHi uses the pre-bound value
+// sayHi uses the pre-bound value which is reference to the old user object
user = {
sayHi() { alert("Another user in setTimeout!"); }
};
@@ -187,8 +187,8 @@ let user = {
let say = user.say.bind(user);
-say("Hello"); // Hello, John ("Hello" argument is passed to say)
-say("Bye"); // Bye, John ("Bye" is passed to say)
+say("Hello"); // Hello, John! ("Hello" argument is passed to say)
+say("Bye"); // Bye, John! ("Bye" is passed to say)
```
````smart header="Convenience method: `bindAll`"
@@ -202,7 +202,7 @@ for (let key in user) {
}
```
-JavaScript libraries also provide functions for convenient mass binding , e.g. [_.bindAll(obj)](http://lodash.com/docs#bindAll) in lodash.
+JavaScript libraries also provide functions for convenient mass binding , e.g. [_.bindAll(object, methodNames)](https://lodash.com/docs#bindAll) in lodash.
````
## Partial functions
@@ -247,7 +247,7 @@ The call to `mul.bind(null, 2)` creates a new function `double` that passes call
That's called [partial function application](https://en.wikipedia.org/wiki/Partial_application) -- we create a new function by fixing some parameters of the existing one.
-Please note that here we actually don't use `this` here. But `bind` requires it, so we must put in something like `null`.
+Please note that we actually don't use `this` here. But `bind` requires it, so we must put in something like `null`.
The function `triple` in the code below triples the value:
diff --git a/1-js/06-advanced-functions/12-arrow-functions/article.md b/1-js/06-advanced-functions/12-arrow-functions/article.md
index f5caeaece..8730277ad 100644
--- a/1-js/06-advanced-functions/12-arrow-functions/article.md
+++ b/1-js/06-advanced-functions/12-arrow-functions/article.md
@@ -52,7 +52,7 @@ let group = {
*!*
this.students.forEach(function(student) {
// Error: Cannot read property 'title' of undefined
- alert(this.title + ': ' + student)
+ alert(this.title + ': ' + student);
});
*/!*
}
@@ -87,7 +87,7 @@ For instance, `defer(f, ms)` gets a function and returns a wrapper around it tha
```js run
function defer(f, ms) {
return function() {
- setTimeout(() => f.apply(this, arguments), ms)
+ setTimeout(() => f.apply(this, arguments), ms);
};
}
diff --git a/1-js/07-object-properties/01-property-descriptors/article.md b/1-js/07-object-properties/01-property-descriptors/article.md
index 3593bffae..0a945b377 100644
--- a/1-js/07-object-properties/01-property-descriptors/article.md
+++ b/1-js/07-object-properties/01-property-descriptors/article.md
@@ -19,7 +19,7 @@ We didn't see them yet, because generally they do not show up. When we create a
First, let's see how to get those flags.
-The method [Object.getOwnPropertyDescriptor](mdn:js/Object/getOwnPropertyDescriptor) allows to query the *full* information about a property.
+The method [Object.getOwnPropertyDescriptor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor) allows to query the *full* information about a property.
The syntax is:
```js
@@ -54,7 +54,7 @@ alert( JSON.stringify(descriptor, null, 2 ) );
*/
```
-To change the flags, we can use [Object.defineProperty](mdn:js/Object/defineProperty).
+To change the flags, we can use [Object.defineProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty).
The syntax is:
@@ -123,7 +123,7 @@ user.name = "Pete"; // Error: Cannot assign to read only property 'name'
Now no one can change the name of our user, unless they apply their own `defineProperty` to override ours.
```smart header="Errors appear only in strict mode"
-In the non-strict mode, no errors occur when writing to non-writable properties and such. But the operation still won't succeed. Flag-violating actions are just silently ignored in non-strict.
+In non-strict mode, no errors occur when writing to non-writable properties and such. But the operation still won't succeed. Flag-violating actions are just silently ignored in non-strict.
```
Here's the same example, but the property is created from scratch:
@@ -194,7 +194,7 @@ alert(Object.keys(user)); // name
The non-configurable flag (`configurable:false`) is sometimes preset for built-in objects and properties.
-A non-configurable property can not be deleted.
+A non-configurable property can't be deleted, its attributes can't be modified.
For instance, `Math.PI` is non-writable, non-enumerable and non-configurable:
@@ -214,49 +214,67 @@ alert( JSON.stringify(descriptor, null, 2 ) );
So, a programmer is unable to change the value of `Math.PI` or overwrite it.
```js run
-Math.PI = 3; // Error
+Math.PI = 3; // Error, because it has writable: false
// delete Math.PI won't work either
```
+We also can't change `Math.PI` to be `writable` again:
+
+```js run
+// Error, because of configurable: false
+Object.defineProperty(Math, "PI", { writable: true });
+```
+
+There's absolutely nothing we can do with `Math.PI`.
+
Making a property non-configurable is a one-way road. We cannot change it back with `defineProperty`.
-To be precise, non-configurability imposes several restrictions on `defineProperty`:
-1. Can't change `configurable` flag.
-2. Can't change `enumerable` flag.
-3. Can't change `writable: false` to `true` (the other way round works).
-4. Can't change `get/set` for an accessor property (but can assign them if absent).
+**Please note: `configurable: false` prevents changes of property flags and its deletion, while allowing to change its value.**
-Here we are making `user.name` a "forever sealed" constant:
+Here `user.name` is non-configurable, but we can still change it (as it's writable):
```js run
-let user = { };
+let user = {
+ name: "John"
+};
+
+Object.defineProperty(user, "name", {
+ configurable: false
+});
+
+user.name = "Pete"; // works fine
+delete user.name; // Error
+```
+
+And here we make `user.name` a "forever sealed" constant, just like the built-in `Math.PI`:
+
+```js run
+let user = {
+ name: "John"
+};
Object.defineProperty(user, "name", {
- value: "John",
writable: false,
configurable: false
});
-*!*
// won't be able to change user.name or its flags
// all this won't work:
-// user.name = "Pete"
-// delete user.name
-// defineProperty(user, "name", { value: "Pete" })
-Object.defineProperty(user, "name", {writable: true}); // Error
-*/!*
+user.name = "Pete";
+delete user.name;
+Object.defineProperty(user, "name", { value: "Pete" });
```
-```smart header="\"Non-configurable\" doesn't mean \"non-writable\""
-Notable exception: a value of non-configurable, but writable property can be changed.
+```smart header="The only attribute change possible: writable true -> false"
+There's a minor exception about changing flags.
-The idea of `configurable: false` is to prevent changes to property flags and its deletion, not changes to its value.
+We can change `writable: true` to `false` for a non-configurable property, thus preventing its value modification (to add another layer of protection). Not the other way around though.
```
## Object.defineProperties
-There's a method [Object.defineProperties(obj, descriptors)](mdn:js/Object/defineProperties) that allows to define many properties at once.
+There's a method [Object.defineProperties(obj, descriptors)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties) that allows to define many properties at once.
The syntax is:
@@ -282,7 +300,7 @@ So, we can set many properties at once.
## Object.getOwnPropertyDescriptors
-To get all property descriptors at once, we can use the method [Object.getOwnPropertyDescriptors(obj)](mdn:js/Object/getOwnPropertyDescriptors).
+To get all property descriptors at once, we can use the method [Object.getOwnPropertyDescriptors(obj)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors).
Together with `Object.defineProperties` it can be used as a "flags-aware" way of cloning an object:
@@ -300,7 +318,7 @@ for (let key in user) {
...But that does not copy flags. So if we want a "better" clone then `Object.defineProperties` is preferred.
-Another difference is that `for..in` ignores symbolic properties, but `Object.getOwnPropertyDescriptors` returns *all* property descriptors including symbolic ones.
+Another difference is that `for..in` ignores symbolic and non-enumerable properties, but `Object.getOwnPropertyDescriptors` returns *all* property descriptors including symbolic and non-enumerable ones.
## Sealing an object globally
@@ -308,24 +326,24 @@ Property descriptors work at the level of individual properties.
There are also methods that limit access to the *whole* object:
-[Object.preventExtensions(obj)](mdn:js/Object/preventExtensions)
+[Object.preventExtensions(obj)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions)
: Forbids the addition of new properties to the object.
-[Object.seal(obj)](mdn:js/Object/seal)
+[Object.seal(obj)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal)
: Forbids adding/removing of properties. Sets `configurable: false` for all existing properties.
-[Object.freeze(obj)](mdn:js/Object/freeze)
+[Object.freeze(obj)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze)
: Forbids adding/removing/changing of properties. Sets `configurable: false, writable: false` for all existing properties.
And also there are tests for them:
-[Object.isExtensible(obj)](mdn:js/Object/isExtensible)
+[Object.isExtensible(obj)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isExtensible)
: Returns `false` if adding properties is forbidden, otherwise `true`.
-[Object.isSealed(obj)](mdn:js/Object/isSealed)
+[Object.isSealed(obj)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isSealed)
: Returns `true` if adding/removing properties is forbidden, and all existing properties have `configurable: false`.
-[Object.isFrozen(obj)](mdn:js/Object/isFrozen)
+[Object.isFrozen(obj)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isFrozen)
: Returns `true` if adding/removing/changing properties is forbidden, and all current properties are `configurable: false, writable: false`.
These methods are rarely used in practice.
diff --git a/1-js/07-object-properties/02-property-accessors/article.md b/1-js/07-object-properties/02-property-accessors/article.md
index 889994cf3..c2aa35d53 100644
--- a/1-js/07-object-properties/02-property-accessors/article.md
+++ b/1-js/07-object-properties/02-property-accessors/article.md
@@ -1,11 +1,11 @@
# Property getters and setters
-There are two kinds of properties.
+There are two kinds of object properties.
The first kind is *data properties*. We already know how to work with them. All properties that we've been using until now were data properties.
-The second type of properties is something new. It's *accessor properties*. They are essentially functions that work on getting and setting a value, but look like regular properties to an external code.
+The second type of property is something new. It's an *accessor property*. They are essentially functions that execute on getting and setting a value, but look like regular properties to an external code.
## Getters and setters
@@ -53,7 +53,7 @@ alert(user.fullName); // John Smith
*/!*
```
-From outside, an accessor property looks like a regular one. That's the idea of accessor properties. We don't *call* `user.fullName` as a function, we *read* it normally: the getter runs behind the scenes.
+From the outside, an accessor property looks like a regular one. That's the idea of accessor properties. We don't *call* `user.fullName` as a function, we *read* it normally: the getter runs behind the scenes.
As of now, `fullName` has only a getter. If we attempt to assign `user.fullName=`, there will be an error:
diff --git a/1-js/08-prototypes/01-prototype-inheritance/article.md b/1-js/08-prototypes/01-prototype-inheritance/article.md
index e04e09434..ef6c7ffeb 100644
--- a/1-js/08-prototypes/01-prototype-inheritance/article.md
+++ b/1-js/08-prototypes/01-prototype-inheritance/article.md
@@ -12,7 +12,7 @@ In JavaScript, objects have a special hidden property `[[Prototype]]` (as named
-The prototype is a little bit "magical". When we want to read a property from `object`, and it's missing, JavaScript automatically takes it from the prototype. In programming, such thing is called "prototypal inheritance". Many cool language features and programming techniques are based on it.
+When we read a property from `object`, and it's missing, JavaScript automatically takes it from the prototype. In programming, this is called "prototypal inheritance". And soon we'll study many examples of such inheritance, as well as cooler language features built upon it.
The property `[[Prototype]]` is internal and hidden, but there are many ways to set it.
@@ -27,19 +27,11 @@ let rabbit = {
};
*!*
-rabbit.__proto__ = animal;
+rabbit.__proto__ = animal; // sets rabbit.[[Prototype]] = animal
*/!*
```
-```smart header="`__proto__` is a historical getter/setter for `[[Prototype]]`"
-Please note that `__proto__` is *not the same* as `[[Prototype]]`. That's a getter/setter for it.
-
-It exists for historical reasons. In modern language it is replaced with functions `Object.getPrototypeOf/Object.setPrototypeOf` that also get/set the prototype. We'll study the reasons for that and these functions later.
-
-By the specification, `__proto__` must only be supported by browsers, but in fact all environments including server-side support it. For now, as `__proto__` notation is a little bit more intuitively obvious, we'll use it in the examples.
-```
-
-If we look for a property in `rabbit`, and it's missing, JavaScript automatically takes it from `animal`.
+Now if we read a property from `rabbit`, and it's missing, JavaScript will automatically take it from `animal`.
For instance:
@@ -62,7 +54,7 @@ alert( rabbit.eats ); // true (**)
alert( rabbit.jumps ); // true
```
-Here the line `(*)` sets `animal` to be a prototype of `rabbit`.
+Here the line `(*)` sets `animal` to be the prototype of `rabbit`.
Then, when `alert` tries to read property `rabbit.eats` `(**)`, it's not in `rabbit`, so JavaScript follows the `[[Prototype]]` reference and finds it in `animal` (look from the bottom up):
@@ -130,6 +122,8 @@ alert(longEar.jumps); // true (from rabbit)
+Now if we read something from `longEar`, and it's missing, JavaScript will look for it in `rabbit`, and then in `animal`.
+
There are only two limitations:
1. The references can't go in circles. JavaScript will throw an error if we try to assign `__proto__` in a circle.
@@ -137,6 +131,18 @@ There are only two limitations:
Also it may be obvious, but still: there can be only one `[[Prototype]]`. An object may not inherit from two others.
+```smart header="`__proto__` is a historical getter/setter for `[[Prototype]]`"
+It's a common mistake of novice developers not to know the difference between these two.
+
+Please note that `__proto__` is *not the same* as the internal `[[Prototype]]` property. It's a getter/setter for `[[Prototype]]`. Later we'll see situations where it matters, for now let's just keep it in mind, as we build our understanding of JavaScript language.
+
+The `__proto__` property is a bit outdated. It exists for historical reasons, modern JavaScript suggests that we should use `Object.getPrototypeOf/Object.setPrototypeOf` functions instead that get/set the prototype. We'll also cover these functions later.
+
+By the specification, `__proto__` must only be supported by browsers. In fact though, all environments including server-side support `__proto__`, so we're quite safe using it.
+
+As the `__proto__` notation is a bit more intuitively obvious, we use it in the examples.
+```
+
## Writing doesn't use prototype
The prototype is only used for reading properties.
@@ -197,6 +203,9 @@ alert(admin.fullName); // John Smith (*)
// setter triggers!
admin.fullName = "Alice Cooper"; // (**)
+
+alert(admin.fullName); // Alice Cooper, state of admin modified
+alert(user.fullName); // John Smith, state of user protected
```
Here in the line `(*)` the property `admin.fullName` has a getter in the prototype `user`, so it is called. And in the line `(**)` the property has a setter in the prototype, so it is called.
@@ -277,7 +286,7 @@ for(let prop in rabbit) alert(prop); // jumps, then eats
*/!*
```
-If that's not what we want, and we'd like to exclude inherited properties, there's a built-in method [obj.hasOwnProperty(key)](mdn:js/Object/hasOwnProperty): it returns `true` if `obj` has its own (not inherited) property named `key`.
+If that's not what we want, and we'd like to exclude inherited properties, there's a built-in method [obj.hasOwnProperty(key)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty): it returns `true` if `obj` has its own (not inherited) property named `key`.
So we can filter out inherited properties (or do something else with them):
diff --git a/1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/solution.md b/1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/solution.md
index 0073e252e..372d50dd6 100644
--- a/1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/solution.md
+++ b/1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/solution.md
@@ -38,7 +38,12 @@ Why `user2.name` is `undefined`?
Here's how `new user.constructor('Pete')` works:
1. First, it looks for `constructor` in `user`. Nothing.
-2. Then it follows the prototype chain. The prototype of `user` is `User.prototype`, and it also has nothing.
-3. The value of `User.prototype` is a plain object `{}`, its prototype is `Object.prototype`. And there is `Object.prototype.constructor == Object`. So it is used.
+2. Then it follows the prototype chain. The prototype of `user` is `User.prototype`, and it also has no `constructor` (because we "forgot" to set it right!).
+3. Going further up the chain, `User.prototype` is a plain object, its prototype is the built-in `Object.prototype`.
+4. Finally, for the built-in `Object.prototype`, there's a built-in `Object.prototype.constructor == Object`. So it is used.
-At the end, we have `let user2 = new Object('Pete')`. The built-in `Object` constructor ignores arguments, it always creates an empty object, similar to `let user2 = {}`, that's what we have in `user2` after all.
+Finally, at the end, we have `let user2 = new Object('Pete')`.
+
+Probably, that's not what we want. We'd like to create `new User`, not `new Object`. That's the outcome of the missing `constructor`.
+
+(Just in case you're curious, the `new Object(...)` call converts its argument to an object. That's a theoretical thing, in practice no one calls `new Object` with a value, and generally we don't use `new Object` to make objects at all).
\ No newline at end of file
diff --git a/1-js/08-prototypes/03-native-prototypes/article.md b/1-js/08-prototypes/03-native-prototypes/article.md
index 378936c9a..bdfc86dd8 100644
--- a/1-js/08-prototypes/03-native-prototypes/article.md
+++ b/1-js/08-prototypes/03-native-prototypes/article.md
@@ -2,7 +2,7 @@
The `"prototype"` property is widely used by the core of JavaScript itself. All built-in constructor functions use it.
-First we'll see at the details, and then how to use it for adding new capabilities to built-in objects.
+First we'll look at the details, and then how to use it for adding new capabilities to built-in objects.
## Object.prototype
@@ -33,7 +33,9 @@ We can check it like this:
let obj = {};
alert(obj.__proto__ === Object.prototype); // true
-// obj.toString === obj.__proto__.toString == Object.prototype.toString
+
+alert(obj.toString === obj.__proto__.toString); //true
+alert(obj.toString === Object.prototype.toString); //true
```
Please note that there is no more `[[Prototype]]` in the chain above `Object.prototype`:
diff --git a/1-js/08-prototypes/04-prototype-methods/2-dictionary-tostring/solution.md b/1-js/08-prototypes/04-prototype-methods/2-dictionary-tostring/solution.md
index a92e17900..f3c9cf0e5 100644
--- a/1-js/08-prototypes/04-prototype-methods/2-dictionary-tostring/solution.md
+++ b/1-js/08-prototypes/04-prototype-methods/2-dictionary-tostring/solution.md
@@ -28,4 +28,4 @@ alert(dictionary); // "apple,__proto__"
When we create a property using a descriptor, its flags are `false` by default. So in the code above, `dictionary.toString` is non-enumerable.
-See the the chapter [](info:property-descriptors) for review.
+See the chapter [](info:property-descriptors) for review.
diff --git a/1-js/08-prototypes/04-prototype-methods/article.md b/1-js/08-prototypes/04-prototype-methods/article.md
index dea718b08..52e974185 100644
--- a/1-js/08-prototypes/04-prototype-methods/article.md
+++ b/1-js/08-prototypes/04-prototype-methods/article.md
@@ -3,15 +3,18 @@
In the first chapter of this section, we mentioned that there are modern methods to setup a prototype.
-The `__proto__` is considered outdated and somewhat deprecated (in browser-only part of the JavaScript standard).
+Setting or reading the prototype with `obj.__proto__` is considered outdated and somewhat deprecated (moved to the so-called "Annex B" of the JavaScript standard, meant for browsers only).
-The modern methods are:
+The modern methods to get/set a prototype are:
-- [Object.create(proto[, descriptors])](mdn:js/Object/create) -- creates an empty object with given `proto` as `[[Prototype]]` and optional property descriptors.
- [Object.getPrototypeOf(obj)](mdn:js/Object/getPrototypeOf) -- returns the `[[Prototype]]` of `obj`.
- [Object.setPrototypeOf(obj, proto)](mdn:js/Object/setPrototypeOf) -- sets the `[[Prototype]]` of `obj` to `proto`.
-These should be used instead of `__proto__`.
+The only usage of `__proto__`, that's not frowned upon, is as a property when creating a new object: `{ __proto__: ... }`.
+
+Although, there's a special method for this too:
+
+- [Object.create(proto[, descriptors])](mdn:js/Object/create) -- creates an empty object with given `proto` as `[[Prototype]]` and optional property descriptors.
For instance:
@@ -22,7 +25,7 @@ let animal = {
// create a new object with animal as a prototype
*!*
-let rabbit = Object.create(animal);
+let rabbit = Object.create(animal); // same as {__proto__: animal}
*/!*
alert(rabbit.eats); // true
@@ -36,7 +39,9 @@ Object.setPrototypeOf(rabbit, {}); // change the prototype of rabbit to {}
*/!*
```
-`Object.create` has an optional second argument: property descriptors. We can provide additional properties to the new object there, like this:
+The `Object.create` method is a bit more powerful, as it has an optional second argument: property descriptors.
+
+We can provide additional properties to the new object there, like this:
```js run
let animal = {
@@ -57,27 +62,40 @@ The descriptors are in the same format as described in the chapter Messages: Logger: Logger: Hello
+ This functionality is supported in most modern browsers. After the actions are taken, the alert will trigger immediately.
+
+## FinalizationRegistry
+
+Now it is time to talk about finalizers. Before we move on, let's clarify the terminology:
+
+**Cleanup callback (finalizer)** - is a function that is executed, when an object, registered in the `FinalizationRegistry`, is deleted from memory by the garbage collector.
+
+Its purpose - is to provide the ability to perform additional operations, related to the object, after it has been finally deleted from memory.
+
+**Registry** (or `FinalizationRegistry`) - is a special object in JavaScript that manages the registration and unregistration of objects and their cleanup callbacks.
+
+This mechanism allows registering an object to track and associate a cleanup callback with it.
+Essentially it is a structure that stores information about registered objects and their cleanup callbacks, and then automatically invokes those callbacks when the objects are deleted from memory.
+
+To create an instance of the `FinalizationRegistry`, it needs to call its constructor, which takes a single argument - the cleanup callback (finalizer).
+
+Syntax:
+
+```js
+function cleanupCallback(heldValue) {
+ // cleanup callback code
+}
+
+const registry = new FinalizationRegistry(cleanupCallback);
+```
+
+Here:
+
+- `cleanupCallback` - a cleanup callback that will be automatically called when a registered object is deleted from memory.
+- `heldValue` - the value that is passed as an argument to the cleanup callback. If `heldValue` is an object, the registry keeps a strong reference to it.
+- `registry` - an instance of `FinalizationRegistry`.
+
+`FinalizationRegistry` methods:
+
+- `register(target, heldValue [, unregisterToken])` - used to register objects in the registry.
+
+ `target` - the object being registered for tracking. If the `target` is garbage collected, the cleanup callback will be called with `heldValue` as its argument.
+
+ Optional `unregisterToken` – an unregistration token. It can be passed to unregister an object before the garbage collector deletes it. Typically, the `target` object is used as `unregisterToken`, which is the standard practice.
+- `unregister(unregisterToken)` - the `unregister` method is used to unregister an object from the registry. It takes one argument - `unregisterToken` (the unregister token that was obtained when registering the object).
+
+Now let's move on to a simple example. Let's use the already-known `user` object and create an instance of `FinalizationRegistry`:
+
+```js
+let user = { name: "John" };
+
+const registry = new FinalizationRegistry((heldValue) => {
+ console.log(`${heldValue} has been collected by the garbage collector.`);
+});
+```
+
+Then, we will register the object, that requires a cleanup callback by calling the `register` method:
+
+```js
+registry.register(user, user.name);
+```
+
+The registry does not keep a strong reference to the object being registered, as this would defeat its purpose. If the registry kept a strong reference, then the object would never be garbage collected.
+
+If the object is deleted by the garbage collector, our cleanup callback may be called at some point in the future, with the `heldValue` passed to it:
+
+```js
+// When the user object is deleted by the garbage collector, the following message will be printed in the console:
+"John has been collected by the garbage collector."
+```
+
+There are also situations where, even in implementations that use a cleanup callback, there is a chance that it will not be called.
+
+For example:
+- When the program fully terminates its operation (for example, when closing a tab in a browser).
+- When the `FinalizationRegistry` instance itself is no longer reachable to JavaScript code.
+ If the object that creates the `FinalizationRegistry` instance goes out of scope or is deleted, the cleanup callbacks registered in that registry might also not be invoked.
+
+## Caching with FinalizationRegistry
+
+Returning to our *weak* cache example, we can notice the following:
+- Even though the values wrapped in the `WeakRef` have been collected by the garbage collector, there is still an issue of "memory leakage" in the form of the remaining keys, whose values have been collected by the garbage collector.
+
+Here is an improved caching example using `FinalizationRegistry`:
+
+```js
+function fetchImg() {
+ // abstract function for downloading images...
+}
+
+function weakRefCache(fetchImg) {
+ const imgCache = new Map();
+
+ *!*
+ const registry = new FinalizationRegistry((imgName) => { // (1)
+ const cachedImg = imgCache.get(imgName);
+ if (cachedImg && !cachedImg.deref()) imgCache.delete(imgName);
+ });
+ */!*
+
+ return (imgName) => {
+ const cachedImg = imgCache.get(imgName);
+
+ if (cachedImg?.deref()) {
+ return cachedImg?.deref();
+ }
+
+ const newImg = fetchImg(imgName);
+ imgCache.set(imgName, new WeakRef(newImg));
+ *!*
+ registry.register(newImg, imgName); // (2)
+ */!*
+
+ return newImg;
+ };
+}
+
+const getCachedImg = weakRefCache(fetchImg);
+```
+
+1. To manage the cleanup of "dead" cache entries, when the associated `WeakRef` objects are collected by the garbage collector, we create a `FinalizationRegistry` cleanup registry.
+
+ The important point here is, that in the cleanup callback, it should be checked, if the entry was deleted by the garbage collector and not re-added, in order not to delete a "live" entry.
+2. Once the new value (image) is downloaded and put into the cache, we register it in the finalizer registry to track the `WeakRef` object.
+
+This implementation contains only actual or "live" key/value pairs.
+In this case, each `WeakRef` object is registered in the `FinalizationRegistry`.
+And after the objects are cleaned up by the garbage collector, the cleanup callback will delete all `undefined` values.
+
+Here is a visual representation of the updated code:
+
+
+
+A key aspect of the updated implementation is that finalizers allow parallel processes to be created between the "main" program and cleanup callbacks.
+In the context of JavaScript, the "main" program - is our JavaScript-code, that runs and executes in our application or web page.
+
+Hence, from the moment an object is marked for deletion by the garbage collector, and to the actual execution of the cleanup callback, there may be a certain time gap.
+It is important to understand that during this time gap, the main program can make any changes to the object or even bring it back to memory.
+
+That's why, in the cleanup callback, we must check to see if an entry has been added back to the cache by the main program to avoid deleting "live" entries.
+Similarly, when searching for a key in the cache, there is a chance that the value has been deleted by the garbage collector, but the cleanup callback has not been executed yet.
+
+Such situations require special attention if you are working with `FinalizationRegistry`.
+
+## Using WeakRef and FinalizationRegistry in practice
+
+Moving from theory to practice, imagine a real-life scenario, where a user synchronizes their photos on a mobile device with some cloud service
+(such as [iCloud](https://en.wikipedia.org/wiki/ICloud) or [Google Photos](https://en.wikipedia.org/wiki/Google_Photos)),
+and wants to view them from other devices. In addition to the basic functionality of viewing photos, such services offer a lot of additional features, for example:
+
+- Photo editing and video effects.
+- Creating "memories" and albums.
+- Video montage from a series of photos.
+- ...and much more.
+
+Here, as an example, we will use a fairly primitive implementation of such a service.
+The main point - is to show a possible scenario of using `WeakRef` and `FinalizationRegistry` together in real life.
+
+Here is what it looks like:
+
+
+
+
+On the left side, there is a cloud library of photos (they are displayed as thumbnails).
+We can select the images we need and create a collage, by clicking the "Create collage" button on the right side of the page.
+Then, the resulting collage can be downloaded as an image.
+
+
+To increase page loading speed, it would be reasonable to download and display photo thumbnails in *compressed* quality.
+But, to create a collage from selected photos, download and use them in *full-size* quality.
+
+Below, we can see, that the intrinsic size of the thumbnails is 240x240 pixels.
+The size was chosen on purpose to increase loading speed.
+Moreover, we do not need full-size photos in preview mode.
+
+
+
+
+Let's assume, that we need to create a collage of 4 photos: we select them, and then click the "Create collage" button.
+At this stage, the already known to us weakRefCache function checks whether the required image is in the cache.
+If not, it downloads it from the cloud and puts it in the cache for further use.
+This happens for each selected image:
+
+
+
+
+
+
+Paying attention to the output in the console, you can see, which of the photos were downloaded from the cloud - this is indicated by FETCHED_IMAGE.
+Since this is the first attempt to create a collage, this means, that at this stage the "weak cache" was still empty, and all the photos were downloaded from the cloud and put in it.
+
+But, along with the process of downloading images, there is also a process of memory cleanup by the garbage collector.
+This means, that the object stored in the cache, which we refer to, using a weak reference, is deleted by the garbage collector.
+And our finalizer executes successfully, thereby deleting the key, by which the image was stored in the cache.
+CLEANED_IMAGE notifies us about it:
+
+
+
+
+Next, we realize that we do not like the resulting collage, and decide to change one of the images and create a new one.
+To do this, just deselect the unnecessary image, select another one, and click the "Create collage" button again:
+
+
+
+
+
+But this time not all images were downloaded from the network, and one of them was taken from the weak cache: the CACHED_IMAGE message tells us about it.
+This means that at the time of collage creation, the garbage collector had not yet deleted our image, and we boldly took it from the cache,
+thereby reducing the number of network requests and speeding up the overall time of the collage creation process:
+
+
+
+
+
+Let's "play around" a little more, by replacing one of the images again and creating a new collage:
+
+
+
+
+
+This time the result is even more impressive. Of the 4 images selected, 3 of them were taken from the weak cache, and only one had to be downloaded from the network.
+The reduction in network load was about 75%. Impressive, isn't it?
+
+
+
+
+
+
+Of course, it is important to remember, that such behavior is not guaranteed, and depends on the specific implementation and operation of the garbage collector.
+
+Based on this, a completely logical question immediately arises: why do not we use an ordinary cache, where we can manage its entities ourselves, instead of relying on the garbage collector?
+That's right, in the vast majority of cases there is no need to use `WeakRef` and `FinalizationRegistry`.
+
+Here, we simply demonstrated an alternative implementation of similar functionality, using a non-trivial approach with interesting language features.
+Still, we cannot rely on this example, if we need a constant and predictable result.
+
+You can [open this example in the sandbox](sandbox:weakref-finalizationregistry).
+
+## Summary
+
+`WeakRef` - designed to create weak references to objects, allowing them to be deleted from memory by the garbage collector if there are no longer strong references to them.
+This is beneficial for addressing excessive memory usage and optimizing the utilization of system resources in applications.
+
+`FinalizationRegistry` - is a tool for registering callbacks, that are executed when objects that are no longer strongly referenced, are destroyed.
+This allows releasing resources associated with the object or performing other necessary operations before deleting the object from memory.
\ No newline at end of file
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/google-chrome-developer-tools.png b/1-js/99-js-misc/07-weakref-finalizationregistry/google-chrome-developer-tools.png
new file mode 100644
index 000000000..021637342
Binary files /dev/null and b/1-js/99-js-misc/07-weakref-finalizationregistry/google-chrome-developer-tools.png differ
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-dom.view/index.css b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-dom.view/index.css
new file mode 100644
index 000000000..f6df812d0
--- /dev/null
+++ b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-dom.view/index.css
@@ -0,0 +1,49 @@
+.app {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.start-messages {
+ width: fit-content;
+}
+
+.window {
+ width: 100%;
+ border: 2px solid #464154;
+ overflow: hidden;
+}
+
+.window__header {
+ position: sticky;
+ padding: 8px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background-color: #736e7e;
+}
+
+.window__title {
+ margin: 0;
+ font-size: 24px;
+ font-weight: 700;
+ color: white;
+ letter-spacing: 1px;
+}
+
+.window__button {
+ padding: 4px;
+ background: #4f495c;
+ outline: none;
+ border: 2px solid #464154;
+ color: white;
+ font-size: 16px;
+ cursor: pointer;
+}
+
+.window__body {
+ height: 250px;
+ padding: 16px;
+ overflow: scroll;
+ background-color: #736e7e33;
+}
\ No newline at end of file
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-dom.view/index.html b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-dom.view/index.html
new file mode 100644
index 000000000..7f93af4c7
--- /dev/null
+++ b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-dom.view/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+ Photo Library Collage
+
+
+ `;
+
+ thumbnail.addEventListener("click", (e) => handleSelection(e, img));
+
+ thumbnailsContainerEl.appendChild(thumbnail);
+});
+// Render layouts select.
+LAYOUTS.forEach((layout) => {
+ const option = document.createElement("option");
+ option.value = JSON.stringify(layout);
+ option.innerHTML = layout.name;
+ selectEl.appendChild(option);
+});
+
+const handleStateChange = (state) => {
+ if (state.loading) {
+ selectEl.disabled = true;
+ createCollageBtn.disabled = true;
+ startOverBtn.disabled = true;
+ downloadBtn.disabled = true;
+ previewContainerEl.classList.add("previewContainer--disabled");
+ spinnerContainerEl.classList.remove("spinnerContainer--hidden");
+ spinnerTextEl.innerText = "Loading...";
+ canvasEl.classList.remove("canvas--ready");
+ } else if (!state.loading) {
+ selectEl.disabled = false;
+ createCollageBtn.disabled = false;
+ startOverBtn.disabled = false;
+ downloadBtn.disabled = false;
+ previewContainerEl.classList.remove("previewContainer--disabled");
+ spinnerContainerEl.classList.add("spinnerContainer--hidden");
+ canvasEl.classList.add("canvas--ready");
+ }
+
+ if (!state.selectedImages.size) {
+ createCollageBtn.disabled = true;
+ document.querySelectorAll(".badge").forEach((item) => item.remove());
+ } else if (state.selectedImages.size && !state.loading) {
+ createCollageBtn.disabled = false;
+ }
+
+ if (!state.collageRendered) {
+ downloadBtn.disabled = true;
+ } else if (state.collageRendered) {
+ downloadBtn.disabled = false;
+ }
+};
+handleStateChange(state);
+
+const handleSelection = (e, imgName) => {
+ const imgEl = e.currentTarget;
+
+ imgEl.classList.toggle("thumbnail-item--selected");
+
+ if (state.selectedImages.has(imgName)) {
+ state.selectedImages.delete(imgName);
+ state.selectedImages = new Set(state.selectedImages);
+ imgEl.querySelector(".badge")?.remove();
+ } else {
+ state.selectedImages = new Set(state.selectedImages.add(imgName));
+
+ const badge = document.createElement("div");
+ badge.classList.add("badge");
+ badge.innerHTML = `
+
+ `;
+ imgEl.prepend(badge);
+ }
+};
+
+// Make a wrapper function.
+let getCachedImage;
+(async () => {
+ getCachedImage = await weakRefCache(loadImage);
+})();
+
+const calculateGridRows = (blobsLength) =>
+ Math.ceil(blobsLength / state.currentLayout.columns);
+
+const drawCollage = (images) => {
+ state.drawing = true;
+
+ let context = canvasEl.getContext("2d");
+
+ /**
+ * Calculate canvas dimensions based on the current layout.
+ * */
+ context.canvas.width =
+ state.currentLayout.itemWidth * state.currentLayout.columns;
+ context.canvas.height =
+ calculateGridRows(images.length) * state.currentLayout.itemHeight;
+
+ let currentRow = 0;
+ let currentCanvasDx = 0;
+ let currentCanvasDy = 0;
+
+ for (let i = 0; i < images.length; i++) {
+ /**
+ * Get current row of the collage.
+ * */
+ if (i % state.currentLayout.columns === 0) {
+ currentRow += 1;
+ currentCanvasDx = 0;
+
+ if (currentRow > 1) {
+ currentCanvasDy += state.currentLayout.itemHeight;
+ }
+ }
+
+ context.drawImage(
+ images[i],
+ 0,
+ 0,
+ images[i].width,
+ images[i].height,
+ currentCanvasDx,
+ currentCanvasDy,
+ state.currentLayout.itemWidth,
+ state.currentLayout.itemHeight,
+ );
+
+ currentCanvasDx += state.currentLayout.itemWidth;
+ }
+
+ state.drawing = false;
+ state.collageRendered = true;
+};
+
+const createCollage = async () => {
+ state.loading = true;
+
+ const images = [];
+
+ for (const image of state.selectedImages.values()) {
+ const blobImage = await getCachedImage(image.img);
+
+ const url = URL.createObjectURL(blobImage);
+ const img = await createImageFile(url);
+
+ images.push(img);
+ URL.revokeObjectURL(url);
+ }
+
+ state.loading = false;
+
+ drawCollage(images);
+};
+
+/**
+ * Clear all settled data to start over.
+ * */
+const startOver = () => {
+ state.selectedImages = new Set();
+ state.collageRendered = false;
+ const context = canvasEl.getContext("2d");
+ context.clearRect(0, 0, canvasEl.width, canvasEl.height);
+
+ document
+ .querySelectorAll(".thumbnail-item--selected")
+ .forEach((item) => item.classList.remove("thumbnail-item--selected"));
+
+ loggerContainerEl.innerHTML = '
`: according to the spec only table-specific tags are allowed. So the browser adds `"aaa"` *before* the `
`.
+The browser has to fix it automatically. But there may be no text inside the `
`: according to the spec only table-specific tags are allowed. So the browser shows `"aaa"` *before* the `
`.
Now it's obvious that when we remove the table, it remains.
-The question can be easily answered by exploring the DOM using the browser tools. It shows `"aaa"` before the `
`.
+The question can be easily answered by exploring the DOM using the browser tools. You'll see `"aaa"` before the `
`.
The HTML standard specifies in detail how to process bad HTML, and such behavior of the browser is correct.
diff --git a/2-ui/1-document/07-modifying-document/5-why-aaa/task.md b/2-ui/1-document/07-modifying-document/5-why-aaa/task.md
index f87074dba..861f70503 100644
--- a/2-ui/1-document/07-modifying-document/5-why-aaa/task.md
+++ b/2-ui/1-document/07-modifying-document/5-why-aaa/task.md
@@ -22,6 +22,6 @@ Why does that happen?
alert(table); // the table, as it should be
table.remove();
- // why there's still aaa in the document?
+ // why there's still "aaa" in the document?
```
diff --git a/2-ui/1-document/07-modifying-document/6-create-list/task.md b/2-ui/1-document/07-modifying-document/6-create-list/task.md
index 43b0a34a7..a57e7e2d9 100644
--- a/2-ui/1-document/07-modifying-document/6-create-list/task.md
+++ b/2-ui/1-document/07-modifying-document/6-create-list/task.md
@@ -10,7 +10,7 @@ For every list item:
1. Ask a user about its content using `prompt`.
2. Create the `
+
+
+
+
+
diff --git a/2-ui/3-event-details/6-pointer-events/multitouch.view/index.html b/2-ui/3-event-details/6-pointer-events/multitouch.view/index.html
new file mode 100644
index 000000000..d46e1bc16
--- /dev/null
+++ b/2-ui/3-event-details/6-pointer-events/multitouch.view/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+