translate lesson 2 to zh-tw

1-getting-started-lessons/3-accessibility/translations/assignment.zh-tw.md

@@ -6,6 +6,6 @@
 
 ## 學習評量
 
-| 設計準則 | 優良                                                                                | 普通            | 待改進          |
+| 作業內容 | 優良                                                                                | 普通            | 待改進          |
 | -------- | ----------------------- ----------------------------------------------------------- | --------------- | --------------- |
 | 書面報告 | 文章解釋為何網頁需要被改進，將 Lighthouse 結果轉成 pdf 檔，列出十點詳細的改進計畫。 | 缺少 20% 的內容 | 缺少 50% 的內容 |

2-js-basics/1-data-types/translations/README.zh-tw.md

@@ -0,0 +1,197 @@
+# JavaScript 入門 - 資料型態
+
+![JavaScript 入門 - 資料型態](../images/webdev101-js-datatypes.png)
+> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製
+
+## 課前測驗
+[課前測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/7)
+
+這堂課會講述 Javascript 的基礎 ── 一款建立互動性網頁的程式語言。
+
+[![JavaScript 的資料型態](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "JavaScript 的資料型態")
+
+讓我們從程式語言的基礎 ── 「變數」與「資料型態」開始吧！
+
+## 變數 (Variable)
+
+變數會依照程式碼調整並儲存數值。
+
+建立並**宣告**變數的語法有一定的格式： **[關鍵字(keyword)] [變數名稱(name)]**。下列開始分別敘述：
+
+- **關鍵字 (Keyword)** 關鍵字可以是 `let` 或者是 `var`。  
+
+   > 注意，關鍵字 `let` 在 ES6 被導入進去，為變數限制 _區塊範疇(block scope)_。 建議上使用 `let` 勝過於 `var`。我們在往後的章節會講述什麼是區塊範疇。
+
+- **變數名稱 (Variable Name)** 你可以自己定義變數名稱。
+
+### 課題：變數的操作
+
+1. **宣告變數** 利用關鍵字 `let` 來宣告新的變數：
+
+    ```javascript
+    let myVariable;
+    ```
+
+   `myVariable` 已經被關鍵字 `let` 宣告出來了。它現在並沒有被賦予數值。
+
+1. **賦予數值** 以運算子 `=` 來為變數新增數值，後面加上預期的數字。
+
+    ```javascript
+    myVariable = 123;
+    ```
+
+   > 注意：本堂課程中的運算子 `=` 只作為「指派運算子」，處理賦予數值的功用。它與「等於」並沒有關係。
+
+   變數 `myVariable` 現在已經被*初始化*為數值 123。
+
+1. **代碼重構 (Refactor)** 改寫你的程式碼為：
+
+    ```javascript
+    let myVariable = 123;
+    ```
+
+    合併「宣告變數」與「賦予數值」為一條程式碼的步驟稱為 _顯式初始化 (explicit initialization)_。
+
+1. **更改變數數值** 透過下列的方式更改參數數值：
+
+   ```javascript
+   myVariable = 321;
+   ```
+
+   一旦變數被宣告後，你在任何往後的程式碼利用運算子 `=` 賦予新的數值。
+
+   ✅ 動手試試看！ 在瀏覽器中撰寫 JavaScript：開啟瀏覽器並前往開發者工具，你會在 Console 頁面找到命令提示字元。輸入 `let myVariable = 123` 並按下 Enter。輸入 `myVariable`。它出現了什麼? 往後，你會學到更多這些觀念的課程。
+
+## 常數 (Constants)
+
+宣告與初始化常數的行為與變數相似，只差在關鍵字 `const`。通常常數會以全大寫的方式命名。
+
+```javascript
+const MY_VARIABLE = 123;
+```
+
+常數與變數非常類似，主要的兩大差別為：
+
+- **一定要附帶數值** 常數一定要被初始化過，否則在執行程式時會產生錯誤。
+- **參考(Reference)不能被改變** 變數與常數都能根據其他變數或常數作為定義，但是常數的參考在初始化後，就不能再被更改，否則在執行程式時會產生錯誤。我們來看下列兩種例子：
+   - **簡單數值** 下列程式碼是不被允許的：
+   
+      ```javascript
+      const PI = 3;
+      PI = 4; // 錯誤
+      ```
+ 
+   - **有限存取的參考物件** 下列程式碼是不被允許的：
+   
+      ```javascript
+      const obj = { a: 3 };
+      obj = { b: 5 } // 錯誤
+      ```
+
+    - **參考物件** 下列程式碼是「允許」的：
+    
+      ```javascript
+      const obj = { a: 3 };
+      obj.a = 5;  // OK
+      ```
+
+      上述只改變物件的數值而非物件本身，這是可以被允許的。
+
+   > 注意，`const` 代表參考物件在重新賦值上有存取的限制。數值並不是永遠 _不可變的_，如果數值是規劃在其他物件上的話。
+
+## 資料型態 (Data types)
+
+變數可以儲存不一樣的數值型態，好比是數字或是文字。這些多樣的數值型態被稱為**資料型態**。資料型態是軟體開發上重要的環節，它能幫助開發者釐清程式該如何被填寫以及運作。除此之外，有些獨特的資料型態能改變或賦加而外的數值資訊。
+
+✅ 資料型態也存在於 JavaScript 的原始結構中，它們是程式語言中最低階的描述方式。六種資料型態：string、number、bigint、boolean、undefined 和 symbol。 花點時間了解它們的含義。資料 `zebra` 屬於哪一類? 那 `0` 呢? `true` 呢?
+
+### 數字 (Numbers)
+
+在前一個段落中，`myVariable`的數值屬於數字型。
+
+`let myVariable = 123;`
+
+變數能儲存所有類型的數字，包含小數點與負數。數字也可以被套用在四則運算上，這被放在[下一個段落](#operators)中。
+
+### 算術運算子 (Arithmetic Operators)
+
+這些是做四則運算時會使用到的算術運算子，下列舉出了幾項例子：
+
+| 符號   | 描述                          | 舉例                  |
+| ------ | ------------------------------| --------------------- |
+| `+`    | **加法**： 對兩數做相加       | `1 + 2 // 答案為 3`   |
+| `-`    | **減法**： 對兩數做相減       | `1 - 2 // 答案為 -1`  |
+| `*`    | **乘法**： 對兩數做相乘       | `1 * 2 // 答案為 2`   |
+| `/`    | **除法**： 對兩數做相除       | `1 / 2 // 答案為 0.5` |
+| `%`    | **餘數**： 取得兩數相除的餘數 | `1 % 2 // 答案為 1`   |
+
+✅ 試試看！在瀏覽器命令欄中使用算數運算子。你得到了什麼結果?
+
+### 字串 (Strings)
+
+字串由多組字元組成，會以單引號或雙引號匡列起來。
+
+- `'這是一組字串'`
+- `"這也是一組字串"`
+- `let myString = '這是被存在變數中的字串';`
+
+記得使用引號來編寫字串，否則 JavaScript 會把字串內容當作是變數名稱。
+
+### 字串格式化
+
+
+字串由文字組成，自然需要隨時間而做修正。
+
+要**串接**兩個以上的字串，可以使用運算子 `+`。
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+
+```
+
+✅ 在 JavaScript 中，為什麼 `1 + 1 = 2`，但是 `'1' + '1' = 11` 呢? 想想看。那 `'1' + 1` 呢?
+
+**樣板字面值(Template literals)**是另一種格式化字串的方式，它不使用引號，而是使用反引號。任何非純文字字串必須放在 `${ }` 中。這會包入字串型態的任何變數。
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello, World!
+```
+
+這樣就可以達到字串格式化的目的，但要注意樣板字面會遵守變數中的空格與分行符號。
+
+✅ 什麼情況下該使用樣板字面，或者是純文字字串呢?
+
+### 布林 (Booleans)
+
+布林有兩種數值：`true` 或 `false`，使用在程式碼做條件決定的時候。在多數情況下，[運算子](#operators)可以套用在布林上，你會在初始化或更新數值時使用。
+
+- `let myTrueBool = true`
+- `let myFalseBool = false`
+
+✅ 布林值 `true` 亦有廣義的 'truthy' 數值。有趣的是，在 JavaScript 中，[除非被定義為 falsy，其餘的數值都會被當作是 truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)。
+
+---
+
+## 🚀 挑戰
+
+JavaScript 在處理資料結構時有許多種方法，有些場合為人詬病。在這方面做一些調查，例如：大小寫敏感性的問題！在命令欄中輸入看看： `let age = 1; let Age = 2; age == Age`，輸出結果是 `false`，為什麼? 你能找到其他問題嗎?
+
+## 課後測驗
+[課後測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/8)
+
+## 複習與自學
+
+試試看[這些 JavaScript 練習題](https://css-tricks.com/snippets/javascript/)。 你學到了什麼?
+
+## 課題
+
+[練習資料型態](assignment.zh-tw.md)

2-js-basics/1-data-types/translations/assignment.zh-tw.md

@@ -0,0 +1,11 @@
+# 練習資料型態
+
+## 簡介
+
+想像你要建立一條購物清單，寫下你需要使用的資料型態。你是怎麼做出這些選擇的?
+
+## 學習評量
+
+| 作業內容 | 優良                               | 普通                               | 待改進                             |
+| -------- | ----------------------- ---------- | ---------------------------------- | ---------------------------------- |
+|          | 使用六種資料型態並解釋用途以及用法 | 使用四種資料型態並解釋用途以及用法 | 使用兩種資料型態並解釋用途以及用法 |

2-js-basics/2-functions-methods/translations/README.zh-tw.md

@@ -0,0 +1,195 @@
+# JavaScript 入門 - 函式與方法
+
+![JavaScript 入門 - 函式](../images/webdev101-js-functions.png)
+> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製
+
+## 課前測驗
+[課前測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/9)
+
+撰寫程式碼時，我們必須確保程式碼的閱讀性。聽來不太直覺，理解程式碼的時間遠比撰寫時間來的久。裡面最需要被管理的程式項目就是**函式**。
+
+[![函式與方法](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "函式與方法")
+
+> 點擊上方圖片觀看關於函式的影片。
+
+
+## 函式 (Function)
+
+函式是程式碼區塊，會在程式執行時被呼叫運行。有些時候我們需要重複性的執行同一項作業，比起複製整個邏輯到其他區塊，函式是較完美的處理方式。不只方便維護，也可以在任何地方、任何時間被其他函式呼叫執行。
+
+另一項重點是函式的名稱，聽來不太重要，但它能直接地解釋程式碼的內容。你可以想像它是按鈕上的文字，若按鈕上寫著「停止計時」，你會預期按壓按鈕後會終止計時器的運作。
+
+## 建立並呼叫函式
+
+函式的語法格式如下：
+
+```javascript
+function nameOfFunction() { // 函式的定義
+ // 函式的說明與內容
+}
+```
+
+如果你想建立一個打招呼的函式，它可能會以下列的格式呈現：
+
+```javascript
+function displayGreeting() {
+  console.log('Hello, world!');
+}
+```
+
+如果你想呼叫這個函式，我們使用函式的名稱加上 `()`。我們不需要考慮函式是在被呼叫地方的前面或後面才被定義出來，JavaScript 的編譯器會幫你尋找它的定義為置。
+
+```javascript
+// 呼叫函式
+displayGreeting();
+```
+
+> **注意** 另一個你正使用的函式類型稱做 **方法(method)**。事實上，我們能在執行 `console.log` 的 demo 時能找到它。它與函式的差異在於它需要接續在物件後面，在這個例子中就是 `console`，而函式並沒有強制要求的。你會發現許多開發者在兩者之間做切換。
+
+### 函式的重點觀念
+
+在建立函式時，你需要注意一些重點：
+
+- 我們反覆提到的，函式的名字要能了解函式的主要功能。
+- 使用**駝峰式大小寫(camelCasing)**來連接單字。
+- 單一函式只專一在單一功能。
+
+## 向含式傳遞資料
+
+為了讓函式能被重複利用，你會需要餵給函式不同的資料。以上述 `displayGreeting` 的例子中，它只能輸出文字 **Hello, world!**。這並不是個實用的函式。要增加函式的彈性，例如打招呼的對象，我們可以增加新的**參數(parameter/argument)**。它提供額外的資料給函式使用。
+
+參數會寫在定義函式的地方，以括號與逗號標記與分隔：
+
+```javascript
+function name(param, param2, param3) {
+
+}
+```
+
+現在我們更新函式 `displayGreeting`，讓它支援打招呼的對象：
+
+```javascript
+function displayGreeting(name) {
+  const message = `Hello, ${name}!`;
+  console.log(message);
+}
+```
+
+當我們要呼叫函式時，輸入需要的參數在括號中：
+
+```javascript
+displayGreeting('Christopher');
+// 呼叫完，印出字串 "Hello, Christopher!" 
+```
+
+## 預設值(Default values)
+
+我們利用參數增加了函式的彈性。但如果我們不想每次都要指定參數給函式使用呢? 繼續之前的例子，保留對象的名稱外，我們增加招呼語的種類。我們可以定義招呼語的預設值，若使用者沒有指定哪一種招呼語時，就使用預設值。它的方法就與賦予變數數值一樣 ── `parameterName = 'defaultValue'`。例如：
+
+```javascript
+function displayGreeting(name, salutation='Hello') {
+  console.log(`${salutation}, ${name}`);
+}
+```
+
+當我們呼叫函式時，我們可以選擇是否要指定招呼語到 `salutation` 中。
+
+```javascript
+displayGreeting('Christopher');
+// 輸出字串 "Hello, Christopher"
+
+displayGreeting('Christopher', 'Hi');
+// 輸出字串 "Hi, Christopher"
+```
+
+## 回傳值(Return values)
+
+目前為止，我們的函式只能輸出字串到[console](https://developer.mozilla.org/en-US/docs/Web/API/console)上。這或許是我們希望的結果，尤其是需要呼叫其他服務的時候。萬一今天我想建立一個額外的函式負責做資料處理與運算呢?
+
+此時，我們可以利用**回傳值**。回傳值由函式輸出，就像變數一樣儲存像是字串或是數字的結果。
+
+如果函式有定義回傳值，那就需要使用關鍵字 `return` 。關鍵字 `return` 需要附帶回傳的數值或是參考物件在後方，如：
+
+```javascript
+return myVariable;
+```  
+
+我們建立一個函式專門建立招呼訊息並回傳給呼叫者：
+
+```javascript
+function createGreetingMessage(name) {
+  const message = `Hello, ${name}`;
+  return message;
+}
+```
+
+當函式被呼叫時，變數會儲存函式回傳的數值。這就像我們給變數定值一樣： `const name = 'Christopher'`。
+
+```javascript
+const greetingMessage = createGreetingMessage('Christopher');
+```
+
+## 將函式作為函式參數使用
+
+在你的程式旅程中，你會見到有函式將其他函式當作參數使用。這個俐落的手法常被用在一種情況：我們不知道 A 事件什麼時候發生與完成，但我們要在 A 事件後執行 B 事件。
+
+舉例來說，考慮函式[setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)，它會啟動計時機制，並在倒數完後執行下一個程式。我們需要告訴函式哪一個函式要在時間到後執行，一個完美的例子！
+
+執行下方的程式，三秒鐘之後你會看到訊息**已經過三秒鐘**。
+
+```javascript
+function displayDone() {
+  console.log('已經過三秒鐘');
+}
+// 計時單位為毫秒。
+setTimeout(displayDone, 3000);
+```
+
+### 不記名函式(Anonymous functions)
+
+回顧我們所建的函式，這些函式都只被執行了一次。當程式越來越複雜，我們可能建了許多的函式，但他們可能都只被呼叫了一次。這並不是理想的方式，那不如，不要給它函式名稱！
+
+我們可以傳遞函式作為參數使用，也可以直接在參數裡建立新的函式。同樣使用關鍵字 `function`，但我們寫在參數欄當中。
+
+試著以不記名函式的方式改寫程式碼：
+
+```javascript
+setTimeout(function() {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+執行上述程式後可以得到相同的結果。我們建立了一個函式，一個沒有名字的函式！
+
+### 箭頭函式(Fat arrow functions)
+
+許多程式語言，包含 JavaScript，都有一個常見的快捷語法稱作**箭頭(arrow/fat arrow)**函式。 它使用 `=>` 表示法，就像是箭頭一樣，如同它的名稱！使用 `=>` 可以省略關鍵字 `function`。
+
+再一次改寫程式碼，這次我們使用箭頭函式：
+
+```javascript
+setTimeout(() => {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+### 使用不同策略的時機
+
+現在你已經學會了三種將函式作為參數的方法了。你可能會好奇使用它們的時機點為何。如果你知道你會重複使用一個函式，請使用正常的方法；如果你知道函式只用在特定的函式內一次，這就是用無記名函式的時機；箭頭函式與傳統 `function` 語法則是取決與你自己，但多數的開發者比較偏好使用 `=>`。
+
+---
+
+## 🚀 挑戰
+
+你能用一句話清楚地說明這些函式與方法的差別嗎? 試試看吧！
+
+## 課後測驗
+[課後測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/10)
+
+## 複習與自學
+
+這很值得去閱讀[關於箭頭函式的資料](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)，它們越來越常被用在程式碼上。試著寫個函式，再改寫成箭頭語法。
+
+## 課題
+
+[把玩函式](assignment.zh-tw.md)

2-js-basics/2-functions-methods/translations/assignment.zh-tw.md

@@ -0,0 +1,13 @@
+# 把玩函式
+
+## 簡介
+
+建立不同的函式，有的回傳數值，有的不回傳數值。
+
+看看你是否能讓函式有多樣的參數輸入與參數預設值。
+
+## 學習評量
+
+| 作業內容 | 優良                                       | 普通                       | 待改進         |
+| -------- | ----------------------- ------------------ | -------------------------- | -------------- |
+|          | 建立兩個以上多樣參數輸入且功能豐富的函式。 | 建立一個有參數輸入的函式。 | 函式出現問題。 |

2-js-basics/3-making-decisions/translations/README.zh-tw.md

@@ -0,0 +1,176 @@
+# JavaScript 入門 - 做出決定
+
+![JavaScript 入門 - 做出決定](../images/webdev101-js-decisions.png)
+> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製
+
+## 課前測驗
+[課前測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/11)
+
+為程式碼做決定與控制順序以提高其重複利用性與豐富性。這堂課程提供 JavaScript 的資料流控制語法與布林資料型的重點。
+
+[![做出決定](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "做出決定")
+
+> 點擊上方圖片以觀賞關於程式做決定的影片。
+
+## 回顧布林資料型
+
+布林只能有兩種數值： `true` 或 `false`。 布林幫助程式碼間在特定的條件下做出決定。
+
+設定布林值的方式如下：
+
+`let myTrueBool = true`
+`let myFalseBool = false`
+
+✅ 布林的命名來源為一位英格蘭數學家、哲學家暨邏輯學家喬治·布爾 George Boole (1815–1864)。
+
+## 關係運算子與布林
+
+運算子會被使用在執行比較上，並回傳布林值。以下是常用的運算子列表。
+
+| 符號  | 描述                                                                       | 舉例               |
+| ----- | -------------------------------------------------------------------------- | ------------------ |
+| `<`   | **小於**： 比較兩數，當左數小於右數時，回傳 `true`。                       | `5 < 6 // true`    |
+| `<=`  | **小於等於**： 比較兩數，當左數小於右數或左數等於右數時，回傳 `true`。     | `5 <= 6 // true`   |
+| `>`   | **大於**： 比較兩數，當左數大於右數時，回傳 `true`。                       | `5 > 6 // false`   |
+| `>=`  | **大於等於**： 比較兩數，當左數大於右數或左數等於右數時，回傳 `true`。     | `5 >= 6 // false`  |
+| `===` | **嚴格相等**： 比較兩數，當左數等於右數且有相同的資料型態時，回傳 `true`。 | `5 === 6 // false` |
+| `!==` | **嚴格不等於**： 比較兩數，回傳值與嚴格相等恰恰相反。                      | `5 !== 6 // true`  |
+
+✅ 藉由在瀏覽器命令欄中撰寫關係運算子來驗證你學到的知識。你有什麼意外發現嗎?
+
+## If 條件式
+
+當條件成立時，If 條件式會執行區塊內的程式碼。
+
+```javascript
+if (condition){
+    //Condition was true. Code in this block will run.
+}
+```
+
+邏輯運算子常被用在建立條件上。
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice){
+    //Condition was true. Code in this block will run.
+    console.log("Getting a new laptop!");
+}
+```
+
+## IF..Else 條件式
+
+當條件不成立時，`else` 條件式會執行區塊內的程式碼。它可以和 `if` 條件式選擇性地使用。
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice){
+    // if 條件成立時，這段程式碼會被執行。
+    console.log("Getting a new laptop!");
+}
+else{
+    // else 條件成立時，這段程式碼會被執行。
+    console.log("Can't afford a new laptop, yet!");
+}
+```
+
+✅ 在瀏覽器命令欄中測試你是否了解上述程式碼的意義。改變變數 currentMoney 和 laptopPrice 的數值來取得不同的回傳值 `console.log()`。
+
+## 邏輯運算子與布林
+
+有時候條件內容包含兩個以上的比較，邏輯運算子可以協助串接比較式來回傳布林值。
+
+| 符號   | 描述                                                                       | 舉例                                                      |
+| ------ | -------------------------------------------------------------------------- | --------------------------------------------------------- |
+| `&&`   | **邏輯和**： 比較兩個布林條件式，當兩者**皆**回傳 `true` 時，回傳 `true`。 | `(5 > 6) && (5 < 6 ) //左為false、右為true，回傳 false。` |
+| `\|\|` | **邏輯或**： 比較兩個布林條件式，當其中一個回傳 `true` 時，回傳 `true`。   | `(5 > 6) \|\| (5 < 6) //左為false、右為true，回傳 true。` |
+| `!`    | **邏輯非**： 回傳布林條件式的相反回傳值。                                  | `!(5 > 6) // 5 不大於 6，但 "!" 讓回傳值為 true。`        |
+
+## 邏輯運算子下的決定與條件
+
+邏輯運算子可以用在建立 if..else 條件式中的條件。
+
+```javascript
+let currentMoney;
+let laptopPrice;
+let laptopDiscountPrice = laptopPrice - (laptopPrice * .20) //Laptop price at 20 percent off
+
+if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){
+    // if 條件成立時，這段程式碼會被執行。
+    console.log("Getting a new laptop!");
+}
+else {
+    // else 條件成立時，這段程式碼會被執行。
+    console.log("Can't afford a new laptop, yet!");
+}
+```
+
+### 否定運算子
+
+你已經了解如何在 `if...else` 條件式中建立條件。任何 `if` 條件需要決定它的是與否。利用運算子 `!` 來 _否定_ 結果。它以下列方式呈現：
+
+```javascript
+if (!condition) {
+  // condition 為 false 時，執行。
+} else {
+  // condition 為 true 時，執行。
+}
+```
+
+### 條件運算子
+
+`if...else` 並不是唯一表達條件式的方式。你也可以使用名為條件運算子的符號。語法如下：
+
+```javascript
+let variable = condition ? <條件成立時回傳 A> : <條件否定時回傳 B>
+```
+
+下列是較明確的例子：
+
+```javascript
+let firstNumber = 20;
+let secondNumber = 10
+let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber;
+```
+
+✅ 花點時間閱讀這段程式碼。你能了解這些運算子的運作方式嗎?
+
+上述的狀態為：
+- 若 `firstNumber` 大於 `secondNumber` 時
+- 則賦予 `firstNumber` 數值 `biggestNumber` 
+- 否則賦予為數值 `secondNumber`。 
+  
+條件運算子的另一種表達方式為：
+
+```javascript
+let biggestNumber;
+if (firstNumber > secondNumber) {
+  biggestNumber = firstNumber;
+} else {
+  biggestNumber = secondNumber;
+}
+```
+
+---
+
+## 🚀 挑戰
+
+建立一個程式，使用邏輯運算式來做判斷，再將程式碼改寫成條件運算子。你喜歡用哪一種語法?
+
+---
+## 課後測驗
+[課後測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/12)
+
+## 複習與自學
+
+閱讀更多可被使用的運算子：[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)。
+
+瀏覽 Josh Comeau 所編制的[運算子查詢表](https://joshwcomeau.com/operator-lookup/)！
+
+## 課題
+
+[運算子](assignment.zh-tw.md)

2-js-basics/3-making-decisions/translations/assignment.zh-tw.md

@@ -0,0 +1,41 @@
+# 運算子
+
+## 簡介
+
+把玩並熟悉運算子。以下是建議的練習程式模板：
+
+你有兩套提供給同一組學生的成績系統。
+
+### 第一套成績系統
+
+定義分數為 1 到 5。當分數 3 以上時通過測驗。
+
+### 第二套成績系統
+
+定義分數為 `A, A-, B, B-, C, C-`， `A` 為最高分而 `C` 為最低分，皆為通過測驗。
+
+### 課題
+
+使用下列矩陣 `allStudents` 表示所有學生的成績，試著建立新的矩陣 `studentsWhoPass` 包含所有通過學生的編號。
+
+> 提示，使用 for-loop 迴圈、 if...else 條件式與比較運算子：
+
+```javascript
+let allStudents = [
+  'A',
+  'B-',
+  1,
+  4,
+  5,
+  2
+]
+
+let studentsWhoPass = [];
+```
+
+## 學習評量
+
+| 作業內容 | 優良                   | 普通                     | 待改進     |
+| -------- | ---------------------- | ------------------------ | ---------- |
+|          | 提供完整的解答與解釋。 | 只提供部分的解答與解釋。 | 解答有誤。 |
+

2-js-basics/4-arrays-loops/translations/README.zh-tw.md

@@ -0,0 +1,127 @@
+# JavaScript 入門 - 矩陣與迴圈
+
+![JavaScript 入門 - 矩陣](../images/webdev101-js-arrays.png)
+> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製
+
+## 課前測驗
+[課前測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/13)
+
+這堂課會包含程式語言 JavaScript，建立互動式網頁的基礎。課程中，你會學到用來操作資料的矩陣與迴圈。
+
+[![矩陣與迴圈](https://img.youtube.com/vi/Q_CRM2lXXBg/0.jpg)](https://youtube.com/watch?v=Q_CRM2lXXBg "矩陣與迴圈")
+
+> 點擊以上的圖片來觀賞關於矩陣與迴圈的影片。
+
+## 矩陣(Arrays)
+
+處理資料是任何程式語言中最常見的任務，如果能將程式碼有條理地編排成如矩陣的形式，處理任務來會更加輕鬆。矩陣的資料儲存格式就像串列，其中一項好處是矩陣可以儲存不同的資料型態資料。
+
+✅ 矩陣其實圍繞在我們身邊！你能想到現實中那些應用是矩陣的形式，例如太陽能板矩陣嗎？
+
+矩陣的語法需要用到中括號。
+
+`let myArray = [];`
+
+上述為一個空矩陣，矩陣也能在宣告時設定內容資料，資料會以逗號來做區隔。
+
+`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
+
+矩陣數值位置會以**索引(index)**來決定，標記從矩陣的開頭相隔多少元素。在上述例子中，字串 "Chocolate" 的索引為 0，"Rocky Road" 為 4。以中括號帶入索引來接收、修改或加入特定元素數值。
+
+✅ 索引從 0 開始有超出你的預料之外嗎？在部分程式語言中，索引會從 1 開始。這有一段有趣的歷史，你可以[閱讀維基百科](https://zh.wikipedia.org/wiki/%E5%BE%9E%E9%9B%B6%E9%96%8B%E5%A7%8B%E7%9A%84%E7%B7%A8%E8%99%9F)來了解它。
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors[2]; //"Vanilla"
+```
+
+你可以指定索引改變其中的數值，如：
+
+```javascript
+iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
+```
+
+或者是指定索引加入新數值，如：
+
+```javascript
+iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
+```
+
+✅ 另一個常用加入矩陣元素的方式為使用矩陣運算子如 array.push()。
+
+要得知矩陣內有多少元素，可以使用矩陣屬性 `length`。
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors.length; //5
+```
+
+✅ 自己動手試試看！使用瀏覽器命令欄，自由地建立並操控矩陣。
+
+## 迴圈(Loops)
+
+迴圈幫助你處理重複性與**迭代(iterative)**任務，這可以省下許多程式碼行數與時間。每一次迭代可以有不同的變數、數值或條件。在 JavaScript 中有許多種迴圈的樣式，彼此都有些微的差異，但主要功能都一樣：對資料做迴圈。
+
+### For 迴圈(For Loop)
+
+`for` 迴圈有三個條件：
+    - `計數器(counter)` 一個初始化變數決定目前迭代的次數。
+    - `條件式(condition)` 一個以比較運算子表示的陳述式，當結果為 `true` 時終止迴圈。
+    - `迭代陳述式(iteration-expression)` 在每一次迭代完後，改變計數器的數值。
+  
+```javascript
+    // 從 0 加到 10
+    for (let i = 0; i < 10; i++) {
+        console.log(i);
+    }
+```
+
+✅ 在瀏覽器命令欄中運行這段迴圈。在改變計數器、條件式與迭代陳述式後有什麼改變？你能讓它變成從 10 減到 0 嗎？
+
+### While 迴圈(While Loop)
+
+不同於 `for` 迴圈語法，`while` 迴圈只要求一個條件式，當條件式回傳 `true` 時即終止迴圈。迴圈中的條件是通常需要依賴像計數器的變數，這些變數必須被合理的處理。計數器的起始化需要在迴圈外面，之後的條件陳述式與計數器的變化則需要在迴圈當中。
+
+```javascript
+// 從 0 加到 10
+let i = 0;
+while (i < 10) {
+ console.log(i);
+ i++;
+}
+```
+
+✅ 你會選擇 for 迴圈還是 while 迴圈呢？ 一萬七千個 StackOverflow 用戶問過相同的問題，有些回應[可能會勾起你的興趣](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript)。
+
+## 矩陣與迴圈
+
+矩陣通常會與迴圈一起出現，大多數的條件式需要矩陣的長度來決定迴圈次數，矩陣的索引值也與計數器的數值相同。
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+
+for (let i = 0; i < iceCreamFlavors.length; i++) {
+  console.log(iceCreamFlavors[i]);
+} // 當所有冰淇淋口味表示完時，結束迴圈。
+```
+
+✅ 做個實驗，在瀏覽器命令欄中製作一個使用矩陣的迴圈。
+
+---
+
+## 🚀 挑戰
+
+除了 for 迴圈與 while 迴圈外，仍有許多使用矩陣與迴圈的方法：[forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)、[for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)與[map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)。 用上列其中一種語法改寫你的迴圈。
+
+## Post-Lecture Quiz
+[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14)
+
+
+## 複習與自學
+
+在 JavaScript 中，矩陣有許多控制的方法，它們在處理資料上有很大的幫助。
+[學習這些方法](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)，如 push、pop、slice 和 splice，試著套用在你所創造的矩陣上。 
+
+## 課題
+
+[給矩陣的迴圈](assignment.zh-tw.md)

2-js-basics/4-arrays-loops/translations/assignment.zh-tw.md

@@ -0,0 +1,13 @@
+# 給矩陣的迴圈
+
+## 簡介
+
+建立一個程式，列出數字每第三個從 1 到 20 的值(3,6,9......)，並輸出在 console 上。
+
+> 提示：使用 for-loop 迴圈並改寫它的迭代陳述式。
+
+## 學習評量
+
+| 作業內容 | 優良                                   | 普通                   | 待改進         |
+| -------- | -------------------------------------- | ---------------------- | -------------- |
+|          | 程式完成簡介裡的課題並解釋程式碼意義。 | 程式完成簡介裡的課題。 | 程式出現問題。 |

2-js-basics/translations/README.zh-tw.md

@@ -0,0 +1,14 @@
+# JavaScript 入門
+
+JavaScript 編輯網頁的一種程式語言。在這四堂課中，你會學到它最基本的知識。
+
+### 主題
+
+1. [變數與資料型態](../1-data-types/translations/README.zh-tw.md)
+2. [函式與方法](../2-functions-methods/translations/README.zh-tw.md)
+3. [在 JavaScript 做出決定](../3-making-decisions/translations/README.zh-tw.md)
+4. [矩陣與迴圈](../4-arrays-loops/translations/README.zh-tw.md)
+
+### 參與人員
+
+這些文章是由 [Jasmine Greenaway](https://twitter.com/paladique)、[Christopher Harrison](https://twitter.com/geektrainer)和[Chris Noring](https://twitter.com/chris_noring) 用滿滿的 ♥️ 來編寫。

quiz-app/src/assets/translations/zh-tw.json

@@ -324,10 +324,10 @@
 			},
 			{
 				"id": 7,
-				"title": "課程四 - JavaScript 基礎 - 資料類態：課前測驗",
+				"title": "課程四 - JavaScript 入門 - 資料型態：課前測驗",
 				"quiz": [
 					{
-						"questionText": "布林值是檢查字串的長度的資料型態。",
+						"questionText": "布林是檢查字串的長度的資料型態。",
 						"answerOptions": [
 							{
 								"answerText": "是",
@@ -373,7 +373,7 @@
 			},
 			{
 				"id": 8,
-				"title": "課程四 - JavaScript 基礎 - 資料類態：課後測驗",
+				"title": "課程四 - JavaScript 入門 - 資料型態：課後測驗",
 				"quiz": [
 					{
 						"questionText": "常數與 let 和 var 宣告的變數相同，除了：",
@@ -426,7 +426,7 @@
 			},
 			{
 				"id": 9,
-				"title": "課程五 - JavaScript 基礎 - 函式與方法：課前測驗",
+				"title": "課程五 - JavaScript 入門 - 函式與方法：課前測驗",
 				"quiz": [
 					{
 						"questionText": "什麼是引數物件?",
@@ -479,7 +479,7 @@
 			},
 			{
 				"id": 10,
-				"title": "課程五 - JavaScript 基礎 - 函式與方法：課後測驗",
+				"title": "課程五 - JavaScript 入門 - 函式與方法：課後測驗",
 				"quiz": [
 					{
 						"questionText": "引數物件必須提供函式需要的所有參數。",
@@ -532,7 +532,7 @@
 			},
 			{
 				"id": 11,
-				"title": "課程六 - JavaScript 基礎 - 在代碼中做出決定：課前測驗",
+				"title": "課程六 - JavaScript 入門 - 做出決定：課前測驗",
 				"quiz": [
 					{
 						"questionText": "運算子 == 的運算為：",
@@ -555,7 +555,7 @@
 						"questionText": "在 JavaScript 中，比較式後回傳的資料型態為?",
 						"answerOptions": [
 							{
-								"answerText": "布林值",
+								"answerText": "布林",
 								"isCorrect": "true"
 							},
 							{
@@ -572,7 +572,7 @@
 						"questionText": "在 JavaScript 中，符號 ! 代表：",
 						"answerOptions": [
 							{
-								"answerText": "邏輯否定",
+								"answerText": "邏輯非",
 								"isCorrect": "true"
 							},
 							{
@@ -589,7 +589,7 @@
 			},
 			{
 				"id": 12,
-				"title": "課程六 - JavaScript 基礎 - 在代碼中做出決定：課後測驗",
+				"title": "課程六 - JavaScript 入門 - 做出決定：課後測驗",
 				"quiz": [
 					{
 						"questionText": "條件式 '1' == 1 會回傳下列何種結果?",
@@ -646,7 +646,7 @@
 			},
 			{
 				"id": 13,
-				"title": "課程七 - JavaScript 基礎 - 矩陣與迴圈：課前測驗",
+				"title": "課程七 - JavaScript 入門 - 矩陣與迴圈：課前測驗",
 				"quiz": [
 					{
 						"questionText": "如果要提出矩陣中特定的元素，必須使用：",
@@ -703,7 +703,7 @@
 			},
 			{
 				"id": 14,
-				"title": "課程七 - JavaScript 基礎 - 矩陣與迴圈：課後測驗",
+				"title": "課程七 - JavaScript 入門 - 矩陣與迴圈：課後測驗",
 				"quiz": [
 					{
 						"questionText": "在 for-loop 迴圈中，需要修改何處來增加迭代次數到5次?",