Merge branch 'main' into nl

2-js-basics/1-data-types/README.md

@@ -176,7 +176,7 @@ Booleans can be only two values: `true` or `false`. Booleans can help make decis
 - `let myTrueBool = true`
 - `let myFalseBool = false`
 
-✅ A variable can be considered 'truthy' if it evaluates to a boolean `true`. Interestingly, in JavaScript, [all values are truthy unless defined as falsy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).
+✅ A variable can be considered 'truthy' if it evaluates to a boolean `true`. Interestingly, in JavaScript, [all values are truthy unless defined as falsy](https://developer.mozilla.org/docs/Glossary/Truthy).
 
 ---
 

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

@@ -178,7 +178,7 @@ Boolesche Werte können nur zwei Werte sein: `true` oder `false`. Boolesche Wert
 - `let myTrueBool = true`
 - `let myFalseBool = false`
 
-✅ Eine Variable kann als "wahr" betrachtet werden, wenn sie als boolescher Wert "wahr" ausgewertet wird. Interessanterweise sind in JavaScript [alle Werte wahr, sofern sie nicht als falsch definiert sind](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).
+✅ Eine Variable kann als "wahr" betrachtet werden, wenn sie als boolescher Wert "wahr" ausgewertet wird. Interessanterweise sind in JavaScript [alle Werte wahr, sofern sie nicht als falsch definiert sind](https://developer.mozilla.org/docs/Glossary/Truthy).
 
 --- ---.
 

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

@@ -174,7 +174,7 @@ Los booleanos pueden tener solo dos valores: `true` o `false`. Los valores boole
 - `let myTrueBool = true`
 - `let myFalseBool = false`
 
-✅ Una variable se puede considerar 'verdadera' si se evalúa como un valor booleano 'verdadero'. Curiosamente, en JavaScript, [todos los valores son verdaderos a menos que se definan como falsos](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).
+✅ Una variable se puede considerar 'verdadera' si se evalúa como un valor booleano 'verdadero'. Curiosamente, en JavaScript, [todos los valores son verdaderos a menos que se definan como falsos](https://developer.mozilla.org/docs/Glossary/Truthy).
 
 🚀 Desafío: JavaScript es conocido por sus sorprendentes formas de manejar tipos de datos en ocasiones. Investiga un poco sobre estos "errores". Por ejemplo: ¡la sensibilidad a mayúsculas y minúsculas puede morder! Pruebe esto en su consola: `let age = 1; let Age = 2; age == Age` (resuelve `false` - ¿por qué?). ¿Qué otras trampas puedes encontrar?
 

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

@@ -178,7 +178,7 @@ Boolean hanya dapat berupa dua nilai: `true` atau `false`. Boolean dapat membant
 - `let myTrueBool = true`
 - `let myFalseBool = false`
 
-✅ Variabel dapat dianggap 'benar (truthy)' jika dievaluasi ke boolean `true`. Menariknya, di JavaScript, [semua nilai adalah benar (truthy) kecuali jika didefinisikan sebagai salah](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).
+✅ Variabel dapat dianggap 'benar (truthy)' jika dievaluasi ke boolean `true`. Menariknya, di JavaScript, [semua nilai adalah benar (truthy) kecuali jika didefinisikan sebagai salah](https://developer.mozilla.org/docs/Glossary/Truthy).
 
 ---
 

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

@@ -175,7 +175,7 @@ I  booleani possono avere solo due valori: vero (`true`) o falso (`false`). I bo
 - `let myTrueBool = true`
 - `let myFalseBool = false`
 
-✅ Una variabile può essere considerata "veritiera" se restituisce un valore booleano `true`. È interessante notare che in JavaScript [tutti i valori sono veritieri a meno che non siano definiti falsi](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).
+✅ Una variabile può essere considerata "veritiera" se restituisce un valore booleano `true`. È interessante notare che in JavaScript [tutti i valori sono veritieri a meno che non siano definiti falsi](https://developer.mozilla.org/docs/Glossary/Truthy).
 
 ---
 

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

@@ -176,7 +176,7 @@ let myString2 = "World";
 - `let myTrueBool = true`
 - `let myFalseBool = false`
 
-✅ 변수가 논리 자료형이 `true`로 설정되면 '참'으로 간주될 수 있습니다. 흥미롭게도, JavaScript에서는 [거짓으로 정의되지 않는다면 모든 값은 참입니다](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).
+✅ 변수가 논리 자료형이 `true`로 설정되면 '참'으로 간주될 수 있습니다. 흥미롭게도, JavaScript에서는 [거짓으로 정의되지 않는다면 모든 값은 참입니다](https://developer.mozilla.org/docs/Glossary/Truthy).
 
 ---
 

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

@@ -176,7 +176,7 @@ Booleans boleh hanya dua nilai: `benar` atau `salah`. Booleans dapat membantu me
 - `let myTrueBool = betul`
 - `let myFalseBool = salah`
 
-✅ Pemboleh ubah boleh dianggap 'benar' jika dinilai menjadi `benar` boolean. Menariknya, dalam JavaScript, [semua nilai adalah benar kecuali ditakrifkan sebagai palsu](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).
+✅ Pemboleh ubah boleh dianggap 'benar' jika dinilai menjadi `benar` boolean. Menariknya, dalam JavaScript, [semua nilai adalah benar kecuali ditakrifkan sebagai palsu](https://developer.mozilla.org/docs/Glossary/Truthy).
 
 --- 
 

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?loc=zh_tw)
+
+這堂課會講述 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?loc=zh_tw)
+
+## 複習與自學
+
+試試看[這些 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/README.md

@@ -104,7 +104,7 @@ displayGreeting('Christopher', 'Hi');
 
 ## Return values
 
-Up until now the function we built will always output to the [console](https://developer.mozilla.org/en-US/docs/Web/API/console). Sometimes this can be exactly what we're looking for, especially when we create functions which will be calling other services. But what if I want to create a helper function to perform a calculation and provide the value back so I can use it elsewhere?
+Up until now the function we built will always output to the [console](https://developer.mozilla.org/docs/Web/API/console). Sometimes this can be exactly what we're looking for, especially when we create functions which will be calling other services. But what if I want to create a helper function to perform a calculation and provide the value back so I can use it elsewhere?
 
 We can do this by using a **return value**. A return value is returned by the function, and can be stored in a variable just the same as we could store a literal value such as a string or number.
 
@@ -133,7 +133,7 @@ const greetingMessage = createGreetingMessage('Christopher');
 
 As you progress in your programming career, you will come across functions which accept functions as parameters. This neat trick is commonly used when we don't know when something is going to occur or complete, but we know we need to perform an operation in response.
 
-As an example, consider [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), which begins a timer and will execute code when it completes. We need to tell it what code we want to execute. Sounds like a perfect job for a function!
+As an example, consider [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), which begins a timer and will execute code when it completes. We need to tell it what code we want to execute. Sounds like a perfect job for a function!
 
 If you run the code below, after 3 seconds you'll see the message **3 seconds has elapsed**.
 
@@ -188,7 +188,7 @@ Can you articulate in one sentence the difference between functions and methods?
 
 ## Review & Self Study
 
-It's worth [reading up a little more on arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), as they are increasingly used in code bases. Practice writing a function, and then rewriting it with this syntax.
+It's worth [reading up a little more on arrow functions](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), as they are increasingly used in code bases. Practice writing a function, and then rewriting it with this syntax.
 
 ## Assignment
 

2-js-basics/2-functions-methods/translations/README.de.md

@@ -101,7 +101,7 @@ displayGreeting('Christopher', 'Hi');
 
 ## Rückgabewerte
 
-Bisher wurde die von uns erstellte Funktion immer an die [Konsole](https://developer.mozilla.org/en-US/docs/Web/API/console) ausgegeben. Manchmal kann dies genau das sein, wonach wir suchen, insbesondere wenn wir Funktionen erstellen, die andere Dienste aufrufen. Was aber, wenn ich eine Hilfsfunktion erstellen möchte, um eine Berechnung durchzuführen und den Wert zurückzugeben, damit ich ihn an anderer Stelle verwenden kann?
+Bisher wurde die von uns erstellte Funktion immer an die [Konsole](https://developer.mozilla.org/docs/Web/API/console) ausgegeben. Manchmal kann dies genau das sein, wonach wir suchen, insbesondere wenn wir Funktionen erstellen, die andere Dienste aufrufen. Was aber, wenn ich eine Hilfsfunktion erstellen möchte, um eine Berechnung durchzuführen und den Wert zurückzugeben, damit ich ihn an anderer Stelle verwenden kann?
 
 Wir können dies tun, indem wir einen **Rückgabewert** verwenden. Ein Rückgabewert wird von der Funktion zurückgegeben und kann in einer Variablen genauso gespeichert werden, wie wir einen Literalwert wie eine Zeichenfolge oder eine Zahl speichern könnten.
 
@@ -131,7 +131,7 @@ const greetingMessage = createGreetingMessage('Christopher');
 
 Im Laufe Ihrer Programmierkarriere werden Sie auf Funktionen stoßen, die Funktionen als Parameter akzeptieren. Dieser nette Trick wird häufig verwendet, wenn wir nicht wissen, wann etwas eintreten oder abgeschlossen sein wird, aber wir wissen, dass wir als Reaktion darauf eine Operation ausführen müssen.
 
-Betrachten Sie als Beispiel [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), das einen Timer startet und nach dessen Ausführung Code ausführt. Wir müssen ihm sagen, welchen Code wir ausführen wollen. Klingt nach einem perfekten Job für eine Veranstaltung!
+Betrachten Sie als Beispiel [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), das einen Timer startet und nach dessen Ausführung Code ausführt. Wir müssen ihm sagen, welchen Code wir ausführen wollen. Klingt nach einem perfekten Job für eine Veranstaltung!
 
 Wenn Sie den folgenden Code ausführen, wird nach 3 Sekunden die Meldung **3 Sekunden sind verstrichen** angezeigt.
 
@@ -188,7 +188,7 @@ Können Sie den Unterschied zwischen Funktionen und Methoden in einem Satz artik
 
 ## Review & Selbststudium
 
-Es lohnt sich, [etwas mehr über Pfeilfunktionen zu lesen](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), da diese zunehmend in Codebasen verwendet werden. Üben Sie, eine Funktion zu schreiben und sie dann mit dieser Syntax neu zu schreiben.
+Es lohnt sich, [etwas mehr über Pfeilfunktionen zu lesen](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), da diese zunehmend in Codebasen verwendet werden. Üben Sie, eine Funktion zu schreiben und sie dann mit dieser Syntax neu zu schreiben.
 
 ## Zuordnung
 

2-js-basics/2-functions-methods/translations/README.id.md

@@ -102,7 +102,7 @@ tampilkanSapaan("Christopher", "Hi");
 
 ## Nilai Kembali (Return values)
 
-Hingga saat ini fungsi yang kita buat akan selalu menghasilkan [konsol](https://developer.mozilla.org/en-US/docs/Web/API/console). Terkadang ini persis seperti yang kita cari, terutama saat kita membuat fungsi yang akan memanggil layanan lain. Tetapi bagaimana jika saya ingin membuat fungsi pembantu untuk melakukan kalkulasi dan memberikan nilai kembali sehingga saya dapat menggunakannya di tempat lain?
+Hingga saat ini fungsi yang kita buat akan selalu menghasilkan [konsol](https://developer.mozilla.org/docs/Web/API/console). Terkadang ini persis seperti yang kita cari, terutama saat kita membuat fungsi yang akan memanggil layanan lain. Tetapi bagaimana jika saya ingin membuat fungsi pembantu untuk melakukan kalkulasi dan memberikan nilai kembali sehingga saya dapat menggunakannya di tempat lain?
 
 Kita bisa melakukan ini dengan menggunakan **nilai kembali (return value)**. Nilai kembali dikembalikan oleh fungsi, dan dapat disimpan dalam variabel sama seperti kita dapat menyimpan nilai literal seperti string atau angka.
 
@@ -131,7 +131,7 @@ const pesanSapaan = buatPesanSapaan("Christopher");
 
 Saat Anda maju dalam karir pemrograman Anda, Anda akan menemukan fungsi yang menerima fungsi sebagai parameter. Trik rapi ini biasanya digunakan ketika kita tidak tahu kapan sesuatu akan terjadi atau selesai, tetapi kita tahu kita perlu melakukan operasi sebagai tanggapan.
 
-Sebagai contoh, pertimbangkan [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), yang memulai timer dan akan mengeksekusi kode setelah selesai. Kita perlu memberi tahu kode apa yang ingin kita jalankan. Kedengarannya seperti pekerjaan yang sempurna untuk suatu fungsi!
+Sebagai contoh, pertimbangkan [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), yang memulai timer dan akan mengeksekusi kode setelah selesai. Kita perlu memberi tahu kode apa yang ingin kita jalankan. Kedengarannya seperti pekerjaan yang sempurna untuk suatu fungsi!
 
 Jika Anda menjalankan kode di bawah ini, setelah 3 detik Anda akan melihat pesan **3 detik telah berlalu**.
 
@@ -187,7 +187,7 @@ Bisakah Anda mengartikulasikan dalam satu kalimat perbedaan antara fungsi dan me
 
 ## Review & Belajar Mandiri
 
-Layak [membaca lebih banyak tentang fungsi panah](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), karena semakin sering digunakan dalam basis kode. Berlatihlah menulis fungsi, lalu menulis ulang dengan sintaks ini.
+Layak [membaca lebih banyak tentang fungsi panah](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), karena semakin sering digunakan dalam basis kode. Berlatihlah menulis fungsi, lalu menulis ulang dengan sintaks ini.
 
 ## Tugas
 

2-js-basics/2-functions-methods/translations/README.it.md

@@ -131,7 +131,7 @@ const greetingMessage = createGreetingMessage('Christopher');
 
 Man mano che si progredisce nella propria carriera di programmatore, ci si imbatterà in funzioni che accettano funzioni come parametri. Questo trucco è comunemente usato quando non si sa quando qualcosa accadrà o sarà completata, ma si sa che si deve eseguire un'operazione in risposta.
 
-Come esempio si consideri [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), che fa partire un timer ed eseguirà del codice il tempo viene esaurito. Occorre dirgli quale codice si vuole eseguire. Sembra un lavoro perfetto per una funzione!
+Come esempio si consideri [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), che fa partire un timer ed eseguirà del codice il tempo viene esaurito. Occorre dirgli quale codice si vuole eseguire. Sembra un lavoro perfetto per una funzione!
 
 Se si esegue il codice qui sopra, dopo 3 secondi si vedrà il messaggio **3 seconds has elapsed** (sono trascorsi 3 secondi).
 
@@ -188,7 +188,7 @@ Si riesce ad articolare in una frase la differenza tra funzioni e metodi? Fare u
 
 ## Revisione e auto apprendimento
 
-Vale la pena [leggere un poco di più sulle funzioni arrow](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), poiché sono sempre più utilizzate nelle basi di codice. Esercitarsi a scrivere una funzione, quindi riscriverla con questa sintassi.
+Vale la pena [leggere un poco di più sulle funzioni arrow](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), poiché sono sempre più utilizzate nelle basi di codice. Esercitarsi a scrivere una funzione, quindi riscriverla con questa sintassi.
 
 ## Compito
 

2-js-basics/2-functions-methods/translations/README.ko.md

@@ -101,7 +101,7 @@ displayGreeting('Christopher', 'Hi');
 
 ## 반환 값
 
-지금까지 만든 함수는 항상 [console](https://developer.mozilla.org/en-US/docs/Web/API/console)에 출력됩니다. 특히 다른 서비스를 호출할 함수를 만들 때도 이것이 찾고 있을 수 있습니다. 하지만 계산을 하고 값을 다른 곳에 다시 제공하고자 헬퍼 함수를 만들고 싶으면 어떻게 해야합니까?
+지금까지 만든 함수는 항상 [console](https://developer.mozilla.org/docs/Web/API/console)에 출력됩니다. 특히 다른 서비스를 호출할 함수를 만들 때도 이것이 찾고 있을 수 있습니다. 하지만 계산을 하고 값을 다른 곳에 다시 제공하고자 헬퍼 함수를 만들고 싶으면 어떻게 해야합니까?
 
 **반환 값**을 사용하면 할 수 있습니다. 반환 값은 함수에 의해 반환되며, 문자열이나 숫자와 같은 리터럴 값을 저장할 수 있고 똑같은 변수에 저장할 수 있습니다.
 
@@ -130,7 +130,7 @@ const greetingMessage = createGreetingMessage('Christopher');
 
 프로그래밍 경력을 쌓으면서, 함수를 매개 변수로 받는 함수를 보게 될 것 입니다. 이 깔끔한 트릭은 일반적으로 어떤 일이 발생되거나 완료되는 때를 알지 못하지만, 이에 반응하여 작업해야 한다는 것을 알고있을 때 사용됩니다.
 
-예시로, 타이머를 시작하고 완료되면 코드를 실행하는 [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)을 고려해보세요. 실행하려는 코드를 먼저 알려줘야 합니다. 함수에 대한 완벽한 직업인 것 같습니다!
+예시로, 타이머를 시작하고 완료되면 코드를 실행하는 [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)을 고려해보세요. 실행하려는 코드를 먼저 알려줘야 합니다. 함수에 대한 완벽한 직업인 것 같습니다!
 
 아래 코드를 실행하면, 3초 후에 **3 seconds has elapsed**는 메시지가 표시됩니다.
 
@@ -185,7 +185,7 @@ setTimeout(3000, () => {
 
 ## 리뷰 & 자기주도 학습
 
-화살표 함수는 코드 베이스에서 점점 많이 사용되고 있으므로, [읽어 볼 가치](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)가 있습니다. 함수 작성을 연습한 다음에 syntax로 다시 작성하십시오.
+화살표 함수는 코드 베이스에서 점점 많이 사용되고 있으므로, [읽어 볼 가치](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions)가 있습니다. 함수 작성을 연습한 다음에 syntax로 다시 작성하십시오.
 
 ## 과제
 

2-js-basics/2-functions-methods/translations/README.ms.md

@@ -104,7 +104,7 @@ displayGreeting('Christopher', 'Hi');
 
 ## Nilai Pulangan
 
-Sehingga kini fungsi yang kami bina akan selalu dikeluarkan ke [console](https://developer.mozilla.org/en-US/docs/Web/API/console). Kadang kala inilah yang sebenarnya kita cari, terutamanya ketika kita membuat fungsi yang akan memanggil perkhidmatan lain. Tetapi bagaimana jika saya ingin membuat fungsi pembantu untuk melakukan pengiraan dan memberikan nilai kembali supaya saya dapat menggunakannya di tempat lain?
+Sehingga kini fungsi yang kami bina akan selalu dikeluarkan ke [console](https://developer.mozilla.org/docs/Web/API/console). Kadang kala inilah yang sebenarnya kita cari, terutamanya ketika kita membuat fungsi yang akan memanggil perkhidmatan lain. Tetapi bagaimana jika saya ingin membuat fungsi pembantu untuk melakukan pengiraan dan memberikan nilai kembali supaya saya dapat menggunakannya di tempat lain?
 
 Kita boleh melakukan ini dengan menggunakan **nilai kembali**. Nilai kembali akan dikembalikan oleh fungsi, dan dapat disimpan dalam pemboleh ubah sama seperti kita dapat menyimpan nilai literal seperti rentetan atau angka.
 
@@ -133,7 +133,7 @@ const greetingMessage = createGreetingMessage('Christopher');
 
 Semasa anda maju dalam kerjaya pengaturcaraan anda, anda akan menemui fungsi yang menerima fungsi sebagai parameter. Trik rapi ini biasanya digunakan ketika kita tidak tahu kapan sesuatu akan terjadi atau selesai, tetapi kita tahu kita perlu melakukan operasi sebagai tindak balas.
 
-Sebagai contoh, pertimbangkan [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), yang memulakan pemasa dan akan melaksanakan kod apabila selesai. Kita perlu memberitahu apa kod yang ingin kita laksanakan. Kedengarannya pekerjaan yang sempurna untuk fungsi!
+Sebagai contoh, pertimbangkan [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), yang memulakan pemasa dan akan melaksanakan kod apabila selesai. Kita perlu memberitahu apa kod yang ingin kita laksanakan. Kedengarannya pekerjaan yang sempurna untuk fungsi!
 
 Sekiranya anda menjalankan kod di bawah ini, setelah 3 saat anda akan melihat mesej **3 saat telah berlalu**.
 
@@ -188,7 +188,7 @@ Bolehkah anda menyatakan dalam satu ayat perbezaan antara fungsi dan kaedah? Men
 
 ## Mengkaji & Belajar Sendiri 
 
-Perlu [membaca sedikit lebih banyak mengenai fungsi anak panah](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), kerana ia semakin banyak digunakan dalam pangkalan kod. Berlatih menulis fungsi, dan kemudian menulis semula dengan sintaks ini.
+Perlu [membaca sedikit lebih banyak mengenai fungsi anak panah](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), kerana ia semakin banyak digunakan dalam pangkalan kod. Berlatih menulis fungsi, dan kemudian menulis semula dengan sintaks ini.
 
 ## Tugasan
 

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?loc=zh_tw)
+
+撰寫程式碼時，我們必須確保程式碼的閱讀性。聽來不太直覺，理解程式碼的時間遠比撰寫時間來的久。裡面最需要被管理的程式項目就是**函式**。
+
+[![函式與方法](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?loc=zh_tw)
+
+## 複習與自學
+
+這很值得去閱讀[關於箭頭函式的資料](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/README.md

@@ -166,7 +166,7 @@ Create a program that is written first with logical operators, and then rewrite
 
 ## Review & Self Study
 
-Read more about the many operators available to the user [on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators).
+Read more about the many operators available to the user [on MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
 
 Go through Josh Comeau's wonderful [operator lookup](https://joshwcomeau.com/operator-lookup/)!
 

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

@@ -162,7 +162,7 @@ Erstellen Sie ein Programm, das zuerst mit logischen Operatoren geschrieben wird
 
 ## Review & Selbststudium
 
-Lesen Sie mehr über die vielen Operatoren, die dem Benutzer [auf MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) zur Verfügung stehen.
+Lesen Sie mehr über die vielen Operatoren, die dem Benutzer [auf MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators) zur Verfügung stehen.
 
 ## Zuordnung
 

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

@@ -156,7 +156,7 @@ if (firstNumber > secondNumber) {
 
 ## Revisión y autoestudio
 
-Más información sobre los muchos operadores disponibles para el usuario [en MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators).
+Más información sobre los muchos operadores disponibles para el usuario [en MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
 
 **Asignación**: [Operadores](assignment.es.md)
 

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

@@ -166,7 +166,7 @@ Buat program yang ditulis pertama kali dengan operator logika, lalu tulis ulang
 
 ## Review & Belajar Mandiri
 
-Baca lebih lanjut tentang banyak operator yang tersedia untuk pengguna [di MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators).
+Baca lebih lanjut tentang banyak operator yang tersedia untuk pengguna [di MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
 
 Lihat [pencarian operator](https://joshwcomeau.com/operator-lookup/) oleh Josh Comeau yang luar biasa!
 

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

@@ -164,7 +164,7 @@ if (firstNumber > secondNumber) {
 
 ## 리뷰 & 자기주도 학습
 
-[MDN에서](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) 사용할 수 있는 많은 연산자에 대해 자세히 알아보십시오.
+[MDN에서](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators) 사용할 수 있는 많은 연산자에 대해 자세히 알아보십시오.
 
 Josh Comeau'의 wonderful [operator lookup](https://joshwcomeau.com/operator-lookup/)을 통할 수 있습니다!
 

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

@@ -166,7 +166,7 @@ Buat program yang ditulis terlebih dahulu dengan operator logik, dan kemudian tu
 
 ## Mengkaji & Belajar Sendiri
 
-Baca lebih lanjut mengenai banyak pengendali yang ada pada pengguna[pada laman MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators).
+Baca lebih lanjut mengenai banyak pengendali yang ada pada pengguna[pada laman MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
 
 Lalui laman Josh Comeau tentang [pengendali](https://joshwcomeau.com/operator-lookup/)!
 

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?loc=zh_tw)
+
+為程式碼做決定與控制順序以提高其重複利用性與豐富性。這堂課程提供 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?loc=zh_tw)
+
+## 複習與自學
+
+閱讀更多可被使用的運算子：[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/README.md

@@ -110,7 +110,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {
 
 ## 🚀 Challenge
 
-There are other ways of looping over arrays other than for and while loops. There are [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), and [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Rewrite your array loop using one of these techniques.
+There are other ways of looping over arrays other than for and while loops. There are [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), and [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Rewrite your array loop using one of these techniques.
 
 ## Post-Lecture Quiz
 [Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14)
@@ -118,7 +118,7 @@ There are other ways of looping over arrays other than for and while loops. Ther
 
 ## Review & Self Study
 
-Arrays in JavaScript have many methods attached to them, extremely useful for data manipulation. [Read up on these methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) and try some of them out (like push, pop, slice and splice) on an array of your creation.
+Arrays in JavaScript have many methods attached to them, extremely useful for data manipulation. [Read up on these methods](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) and try some of them out (like push, pop, slice and splice) on an array of your creation.
 
 ## Assignment
 

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

@@ -109,13 +109,13 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {
 
 ## 🚀 Herausforderung
 
-Es gibt andere Möglichkeiten, Arrays als for- und while-Schleifen zu durchlaufen. Es gibt [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) und [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Schreiben Sie Ihre Array-Schleife mit einer dieser Techniken neu.
+Es gibt andere Möglichkeiten, Arrays als for- und while-Schleifen zu durchlaufen. Es gibt [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of) und [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Schreiben Sie Ihre Array-Schleife mit einer dieser Techniken neu.
 
 ## [Quiz nach der Vorlesung](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14)
 
 ## Review & Selbststudium
 
-An Arrays in JavaScript sind viele Methoden angehängt, die für die Datenmanipulation äußerst nützlich sind. [Informieren Sie sich über diese Methoden](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) und probieren Sie einige davon aus (wie Push, Pop, Slice und Splice). auf einem Array Ihrer Kreation.
+An Arrays in JavaScript sind viele Methoden angehängt, die für die Datenmanipulation äußerst nützlich sind. [Informieren Sie sich über diese Methoden](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) und probieren Sie einige davon aus (wie Push, Pop, Slice und Splice). auf einem Array Ihrer Kreation.
 
 ## Zuordnung
 

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

@@ -103,12 +103,12 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {
 
 ✅ Experimente recorriendo una serie de su propia creación en la consola de su navegador.
 
-🚀 Desafío: Hay otras formas de realizar un bucle sobre arreglos además de los bucles for y while. Existen [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), y [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Vuelva a escribir su bucle de matriz utilizando una de estas técnicas.
+🚀 Desafío: Hay otras formas de realizar un bucle sobre arreglos además de los bucles for y while. Existen [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), y [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Vuelva a escribir su bucle de matriz utilizando una de estas técnicas.
 
 ## [Post-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14)
 
 ## Revisión y autoestudio
 
-Las matrices en JavaScript tienen muchos métodos adjuntos, extremadamente útiles para la manipulación de datos. [Lea sobre estos métodos](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) y pruebe algunos de ellos (como push, pop, slice y splice) en una matriz de su creación.
+Las matrices en JavaScript tienen muchos métodos adjuntos, extremadamente útiles para la manipulación de datos. [Lea sobre estos métodos](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) y pruebe algunos de ellos (como push, pop, slice y splice) en una matriz de su creación.
 
 **Asignación**: [Bucle de una matriz](assignment.es.md)

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

@@ -126,7 +126,7 @@ for (let i = 0; i < rasaRasaEsKrim.length; i++) {
 
 ## 🚀 Tantangan
 
-Ada cara lain untuk melakukan perulangan pada array selain perulangan for dan while. Ada [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), dan [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Tulis ulang loop array Anda menggunakan salah satu dari teknik ini.
+Ada cara lain untuk melakukan perulangan pada array selain perulangan for dan while. Ada [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), dan [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Tulis ulang loop array Anda menggunakan salah satu dari teknik ini.
 
 ## Kuis Pasca-Kuliah
 
@@ -134,7 +134,7 @@ Ada cara lain untuk melakukan perulangan pada array selain perulangan for dan wh
 
 ## Review & Belajar Mandiri
 
-Array dalam JavaScript memiliki banyak metode yang menyertainya, sangat berguna untuk manipulasi data. [Bacalah tentang metode ini](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) dan coba beberapa di antaranya (seperti push, pop, slice dan splice) pada array kreasi Anda.
+Array dalam JavaScript memiliki banyak metode yang menyertainya, sangat berguna untuk manipulasi data. [Bacalah tentang metode ini](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) dan coba beberapa di antaranya (seperti push, pop, slice dan splice) pada array kreasi Anda.
 
 ## Tugas
 

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

@@ -109,7 +109,7 @@ for (let i = 0; i < iceCreamFlavors.length; 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)도 있습니다. 해당 기술 중 하나를 사용하여 배열 반복을 다시 작성하십시오.
+for문과 while문 외에 배열을 반복하는 다른 방법이 있습니다. [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of) 그리고 [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map)도 있습니다. 해당 기술 중 하나를 사용하여 배열 반복을 다시 작성하십시오.
 
 ## 강의 후 퀴즈
 [Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14?loc=ko)
@@ -117,7 +117,7 @@ for문과 while문 외에 배열을 반복하는 다른 방법이 있습니다.
 
 ## 리뷰 & 자기주도 학습
 
-JavaScript의 배열에는 많은 메서드를 가져서 데이터 조작에 매우 유용합니다. [이 방법에 대해 읽어보고](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) 만든 배열에서 몇 가지(push, pop, slice 그리고 splice와 같은) 방식을 시도해보십시오.
+JavaScript의 배열에는 많은 메서드를 가져서 데이터 조작에 매우 유용합니다. [이 방법에 대해 읽어보고](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) 만든 배열에서 몇 가지(push, pop, slice 그리고 splice와 같은) 방식을 시도해보십시오.
 
 ## 과제
 

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

@@ -110,14 +110,14 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {
 
 ## 🚀 Cabaran
 
-Terdapat cara lain untuk mengulangi tatasusunan selain untuk dan semasa gelung. Terdapat [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), dan [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Tulis semula array loop anda menggunakan salah satu teknik ini.
+Terdapat cara lain untuk mengulangi tatasusunan selain untuk dan semasa gelung. Terdapat [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), dan [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Tulis semula array loop anda menggunakan salah satu teknik ini.
 
 ## Kuiz Pasca Kuliah
 [Kuiz Pasca Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14)
 
 ## Mengkaji and Belajar Sendiri 
 
-Array dalam JavaScript mempunyai banyak kaedah yang melekat padanya, sangat berguna untuk manipulasi data. [Baca kaedah ini](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) dan cuba beberapa di antaranya (seperti push, pop, slice dan splice) pada pelbagai ciptaan anda.
+Array dalam JavaScript mempunyai banyak kaedah yang melekat padanya, sangat berguna untuk manipulasi data. [Baca kaedah ini](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) dan cuba beberapa di antaranya (seperti push, pop, slice dan splice) pada pelbagai ciptaan anda.
 
 ## Tugasan
 

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

@@ -0,0 +1,126 @@
+# JavaScript 入門 - 矩陣與迴圈
+
+![JavaScript 入門 - 矩陣](../images/webdev101-js-arrays.png)
+> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製
+
+## 課前測驗
+[課前測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/13?loc=zh_tw)
+
+這堂課會包含程式語言 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)。 用上列其中一種語法改寫你的迴圈。
+
+## 課後測驗
+[課後測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14?loc=zh_tw)
+
+## 複習與自學
+
+在 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) 用滿滿的 ♥️ 來編寫。