Skip to content

Commit 22db021

Browse files
authored
Merge pull request #18 from lenchen1112/quation
Fix formatting
2 parents 64d6c4a + c4200e2 commit 22db021

File tree

12 files changed

+105
-105
lines changed

12 files changed

+105
-105
lines changed

1-js/01-getting-started/1-intro/article.md

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@
2020

2121
現在,JavaScript 不僅可執行於瀏覽器中,還可運作於伺服器上,或任何具有 [JavaScript 引擎](https://en.wikipedia.org/wiki/JavaScript_engine) 的裝置內。
2222

23-
瀏覽器內嵌有 JavaScript 引擎,有時也被稱為 "JavaScript 虛擬機" (JavaScript virtual machine)
23+
瀏覽器內嵌有 JavaScript 引擎,有時也被稱為 "JavaScript 虛擬機"JavaScript virtual machine
2424

25-
不同的引擎有不同的 "代號 (codenames)"。例如:
25+
不同的引擎有不同的 "代號codenames"。例如:
2626

2727
- [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- Chrome 和 Opera 內的引擎。
2828
- [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- Firefox 內的引擎。
@@ -34,8 +34,8 @@
3434
3535
引擎很複雜,但概念很簡單。
3636
37-
1. 引擎 (瀏覽器內建) 讀取 ("解析") 腳本
38-
2. 接著轉換 ("編譯") 腳本為機器語言
37+
1. 引擎瀏覽器內建)讀取("解析"腳本
38+
2. 接著轉換"編譯"腳本為機器語言
3939
3. 然後機器語言極快地執行
4040
4141
引擎會對流程中每個階段進行優化。甚至會在執行時監看編譯好的腳本,分析其資料流並以此再優化為機器碼,由此腳本可以快速地執行。
@@ -45,17 +45,17 @@
4545

4646
現代化 JavaScript 是個 "安全" 的程式語言。它不提供對記憶體或 CPU 的低階存取,因為它原生是為了瀏覽器而建立,所以不需要。
4747

48-
JavaScript 的能力很大一部分取決於執行它的環境。例如 [Node.js](https://wikipedia.org/wiki/Node.js) 提供 JavaScript 可以讀寫任意檔案與發送網路請求 (network requests) 等功能。
48+
JavaScript 的能力很大一部分取決於執行它的環境。例如 [Node.js](https://wikipedia.org/wiki/Node.js) 提供 JavaScript 可以讀寫任意檔案與發送網路請求network requests等功能。
4949

5050
瀏覽器中的 JavaScript 可以做與網頁操作、使用者互動和網頁伺服器相關的任何事情。
5151

5252
例如,瀏覽器中的 JavaScript 能夠:
5353

5454
- 在頁面加入新的 HTML ,改變既有內容與樣式
5555
- 與使用者互動,執行滑鼠點擊、游標移動和按鍵按壓
56-
- 經由網路發送請求給遠端伺服器,下載並上傳檔案 (亦稱為 [AJAX](https://en.wikipedia.org/wiki/Ajax_(programming))[COMET](https://en.wikipedia.org/wiki/Comet_(programming)) 技術)
56+
- 經由網路發送請求給遠端伺服器,下載並上傳檔案亦稱為 [AJAX](https://en.wikipedia.org/wiki/Ajax_(programming))[COMET](https://en.wikipedia.org/wiki/Comet_(programming)) 技術
5757
- 取得與設定 cookies、詢問訪客和顯示訊息
58-
- 記得客戶端 (client-side) 的資料 ("local storage")
58+
- 記得客戶端client-side的資料"local storage"
5959

6060
## 瀏覽器中的 JavaScript **不能**做什麼?
6161

@@ -67,13 +67,13 @@ JavaScript 的能力很大一部分取決於執行它的環境。例如 [Node.js
6767

6868
現代化瀏覽器允許 JavaScript 有限制地操作檔案,且只有在使用者做特定動作時提供,像是:"拖曳" 一個檔案至瀏覽器視窗,或經由 `<input>` 標籤選取。
6969

70-
JavaScript 有些方法可與相機、麥克風或其他裝置互動,但都需要使用者明確地授權。所以啟用 JavaScript 的網頁不會偷偷開啟相機觀察周遭並傳資料給 [美國國家安全局 (NSA)](https://en.wikipedia.org/wiki/National_Security_Agency)
71-
- 不同的瀏覽器分頁/視窗基本上不知道彼此,但有時例外,例如:當一個視窗使用 JavaScript 開啟另一個視窗時。但就算如此,開啟不同網站 (不同域名、通訊協定或埠) 的頁面,其中的 JavaScript 亦無法溝通。
70+
JavaScript 有些方法可與相機、麥克風或其他裝置互動,但都需要使用者明確地授權。所以啟用 JavaScript 的網頁不會偷偷開啟相機觀察周遭並傳資料給 [美國國家安全局NSA](https://en.wikipedia.org/wiki/National_Security_Agency)
71+
- 不同的瀏覽器分頁/視窗基本上不知道彼此,但有時例外,例如:當一個視窗使用 JavaScript 開啟另一個視窗時。但就算如此,開啟不同網站不同域名、通訊協定或埠的頁面,其中的 JavaScript 亦無法溝通。
7272

73-
這被稱為 "同源政策" (Same Origin Policy)。為了解決它,*兩個頁面* 都必須同意資料交換和包含一隻特殊的 JavaScript 程式碼來處理這件事。我們的教程將會包含這部分。
73+
這被稱為 "同源政策"Same Origin Policy。為了解決它,*兩個頁面* 都必須同意資料交換和包含一隻特殊的 JavaScript 程式碼來處理這件事。我們的教程將會包含這部分。
7474

7575
再次強調,這個限制是為了使用者的資安考量。一個使用者從 `http://anysite.com` 打開的頁面不該能存取另一個瀏覽器分頁 `http://gmail.com` 內的資訊。
76-
- JavaScript 可以簡單地經由網路與目前頁面來源的伺服器溝通。但它從別的網站/域名接收資料的能力受到限制。儘管可以也需要遠端明確地授權 (在 HTTP headers 中)。再一次強調,這是為了資安而限制。
76+
- JavaScript 可以簡單地經由網路與目前頁面來源的伺服器溝通。但它從別的網站/域名接收資料的能力受到限制。儘管可以也需要遠端明確地授權在 HTTP headers 中。再一次強調,這是為了資安而限制。
7777

7878
![](limitations.svg)
7979

@@ -100,16 +100,16 @@ JavaScript 的語法並不符合每個人的要求,不同人想要不同功能
100100

101101
這是預期中的,因為每個人的計畫和需求都不一樣。
102102

103-
所以最近有大量新語言出現,它們在被瀏覽器執行前,都被 *轉譯* (transpiled) 成 JavaScript。
103+
所以最近有大量新語言出現,它們在被瀏覽器執行前,都被 *轉譯*transpiled成 JavaScript。
104104

105105
現代化的工具讓轉譯迅速且透明,且實際上使開發者用另一種語言寫程式,再被自行轉換成 JavaScript。
106106

107107
例如這些語言:
108108

109-
- [CoffeeScript](http://coffeescript.org/) 是組 JavaScript 的"語法糖"。它有更簡短的語法,可以讓我們寫出更清楚且精確的程式碼,通常 Ruby 開發者愛用。
110-
- [TypeScript](http://www.typescriptlang.org/) 致力於增加 "強型態確認 (strict data typing)" 來簡化開發與支援複雜的系統,為微軟所開發。
109+
- [CoffeeScript](http://coffeescript.org/) 是組 JavaScript 的 "語法糖"。它有更簡短的語法,可以讓我們寫出更清楚且精確的程式碼,通常 Ruby 開發者愛用。
110+
- [TypeScript](http://www.typescriptlang.org/) 致力於增加 "強型態確認strict data typing" 來簡化開發與支援複雜的系統,為微軟所開發。
111111
- [Flow](http://flow.org/) 同樣增加型態確認但使用不同方式,為臉書所開發。
112-
- [Dart](https://www.dartlang.org/) 是一種擁有自己引擎的獨立語言,它執行在非瀏覽器環境上 (像是手機應用程式),但也可以轉譯成 JavaScript,為谷歌所開發。
112+
- [Dart](https://www.dartlang.org/) 是一種擁有自己引擎的獨立語言,它執行在非瀏覽器環境上像是手機應用程式,但也可以轉譯成 JavaScript,為谷歌所開發。
113113

114114
還有更多其他語言。當然,就算我們使用某種轉譯式語言,我們應該也要了解 JavaScript 來真正知道我們在做什麼。
115115

1-js/01-getting-started/3-code-editors/article.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@
22

33
程式設計師花最多時間的地方就是在使用程式編輯器。
44

5-
程式編輯器主要分兩類:整合開發環境 (IDEs) 和輕量化編輯器,很多人每種都會選一個使用。
5+
程式編輯器主要分兩類:整合開發環境IDEs和輕量化編輯器,很多人每種都會選一個使用。
66

77
## IDE
88

9-
[IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) (Integrated Development Environment) 這個詞意會著一個強大且擁有許多功能的編輯器,通常使用在開發 "整個專案" 上。顧名思義,它不只是一個編輯器也是一個完整 "開發環境"。
9+
[IDE](https://en.wikipedia.org/wiki/Integrated_development_environment)Integrated Development Environment這個詞意會著一個強大且擁有許多功能的編輯器,通常使用在開發 "整個專案" 上。顧名思義,它不只是一個編輯器也是一個完整 "開發環境"。
1010

11-
一個 IDE 載入專案 (通常代表很多檔案) ,允許於不同檔案間切換,基於整個專案提供自動完成 (autocompletion) 功能 (而非只是開檔案),並且整合版本控制系統 (像是 [git](https://git-scm.com/))、測試環境和其他專案等級的東西。
11+
一個 IDE 載入專案通常代表很多檔案,允許於不同檔案間切換,基於整個專案提供自動完成autocompletion)功能(而非只是開檔案,並且整合版本控制系統像是 [git](https://git-scm.com/)、測試環境和其他專案等級的東西。
1212

1313
如果你還沒選擇使用一個 IDE,可以考慮以下選擇:
1414

15-
- [Visual Studio Code](https://code.visualstudio.com/) (跨平台,免費)
16-
- [WebStorm](http://www.jetbrains.com/webstorm/) (跨平台,付費)
15+
- [Visual Studio Code](https://code.visualstudio.com/)跨平台,免費
16+
- [WebStorm](http://www.jetbrains.com/webstorm/)跨平台,付費
1717

1818
若使用 Windows 系統,也可選用 "Visual Studio",但別跟 "Visual Studio Code" 搞混了。"Visual Studio" 是一個需付費且強大的 Windows 專屬編輯器,特別適合開發 .NET 平台,用來開發 JavaScript 也不錯。它有個免費的版本 [Visual Studio Community](https://www.visualstudio.com/vs/community/)
1919

@@ -31,9 +31,9 @@
3131

3232
以下是一些值得考慮的選擇:
3333

34-
- [Atom](https://atom.io/) (跨平台,免費)
35-
- [Sublime Text](http://www.sublimetext.com) (跨平台,共享軟體)
36-
- [Notepad++](https://notepad-plus-plus.org/) (Windows,免費)
34+
- [Atom](https://atom.io/)跨平台,免費
35+
- [Sublime Text](http://www.sublimetext.com)跨平台,共享軟體
36+
- [Notepad++](https://notepad-plus-plus.org/)Windows,免費
3737
- [Vim](http://www.vim.org/)[Emacs](https://www.gnu.org/software/emacs/) 也很不錯,前提是你要知道怎麼使用。
3838

3939
## 不要起爭議

1-js/01-getting-started/4-devtools/article.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# 開發者控制台
22

3-
程式碼容易產生錯誤。你也將可能寫出錯誤程式... 喔,我在說什麼?只要你是正常人類,你將 *一定會* 寫出錯誤程式,除非你是 [機器人 (robot)](https://en.wikipedia.org/wiki/Bender_(Futurama))
3+
程式碼容易產生錯誤。你也將可能寫出錯誤程式... 喔,我在說什麼?只要你是正常人類,你將 *一定會* 寫出錯誤程式,除非你是 [機器人robot](https://en.wikipedia.org/wiki/Bender_(Futurama))
44

55
但瀏覽器之中,使用者預設看不到錯誤。所以腳本若有錯,我們看不到是什麼壞了且無從修正。
66

@@ -18,7 +18,7 @@
1818

1919
按下 `key:F12`,若你使用 Mac 則用 `key:Cmd+Opt+J`
2020

21-
開發者工具將會預設開啟於主控台 (Console) 分頁。
21+
開發者工具將會預設開啟於主控台Console分頁。
2222

2323
看起來像這樣:
2424

@@ -29,25 +29,25 @@
2929
- 在這裡我們可以看到紅色標註的錯誤訊息,這個例子中,腳本內有一個未知的 "lalala" 指令。
3030
- 在右邊有一個可以點擊連至原始碼的連結 `bug.html:12`,伴隨著產生錯誤的程式行數。
3131

32-
錯誤訊息底下,有一個藍色 `>` 符號,它代表著我們可以輸入 JavaScript 的 "命令行"。按下 `key:Enter` 來執行它們 (`key:Shift+Enter` 來輸入多行指令)
32+
錯誤訊息底下,有一個藍色 `>` 符號,它代表著我們可以輸入 JavaScript 的 "命令行"。按下 `key:Enter` 來執行它們`key:Shift+Enter` 來輸入多行指令
3333

3434
現在我們可以看到錯誤就夠了,晚點會於章節 <info:debugging-chrome> 再回到開發者工具並深入探討除錯這件事。
3535

3636
## Firefox、Edge 與其他
3737

3838
多數其他瀏覽器使用 `key:F12` 打開開發者工具。
3939

40-
它們的觀感都差不多,一旦你知道怎麼使用其中一種 (可以從 Chrome 開始),就可以輕鬆於其它之間切換。
40+
它們的觀感都差不多,一旦你知道怎麼使用其中一種可以從 Chrome 開始,就可以輕鬆於其它之間切換。
4141

4242
## Safari
4343

44-
Safari (Mac 瀏覽器,Windows/Linux 不支援) 有點不太一樣,我們需要先開啟 "開發者選單 (Develop menu)"。
44+
SafariMac 瀏覽器,Windows/Linux 不支援有點不太一樣,我們需要先開啟 "開發者選單Develop menu"。
4545

46-
打開偏好設定 (Preferences) 並至 "進階 (Advanced)" 面板,底部有一個勾選欄位:
46+
打開偏好設定Preferences並至 "進階Advanced" 面板,底部有一個勾選欄位:
4747

4848
![safari](safari.png)
4949

50-
現在 `key:Cmd+Opt+C` 可以開啟控制台。同樣地,注意最上方出現一個新的選單名為 "開發 (Develop)",有著許多指令與選項。
50+
現在 `key:Cmd+Opt+C` 可以開啟控制台。同樣地,注意最上方出現一個新的選單名為 "開發Develop",有著許多指令與選項。
5151

5252
```smart header="輸入多行"
5353
通常當我們輸入一行程式碼到控制台並按下 `key:Enter`,它就執行了。
@@ -57,8 +57,8 @@ Safari (Mac 瀏覽器,Windows/Linux 不支援) 有點不太一樣,我們需
5757

5858
## 總結
5959

60-
- 開發者工具允許我們看到錯誤、執行指令、查看變數 (variables) 與更多其它事。
61-
- 大多數 Windows 的瀏覽器可以經由按下 `key:F12` 開啟。Mac 上的 Chrome 需要 `key:Cmd+Opt+J`;Safari 要用 `key:Cmd+Opt+C` (需先啟用)
60+
- 開發者工具允許我們看到錯誤、執行指令、查看變數variables與更多其它事。
61+
- 大多數 Windows 的瀏覽器可以經由按下 `key:F12` 開啟。Mac 上的 Chrome 需要 `key:Cmd+Opt+J`;Safari 要用 `key:Cmd+Opt+C`需先啟用
6262

6363
現在我們準備好環境了,下一章開始我們將來闡述 JavaScript。
6464

1-js/02-first-steps/02-structure/article.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
我們該知道的第一件事是建立程式碼區塊
44

5-
## 述句 (Statements)
5+
## 述句Statements
66

77
述句是執行操作的語法結構與命令。
88

@@ -23,7 +23,7 @@ alert('Hello');
2323
alert('World');
2424
```
2525

26-
## 分號 (Semicolons) [#semicolon]
26+
## 分號Semicolons[#semicolon]
2727

2828
大多情況下當斷行存在時分號可省略。
2929

@@ -34,7 +34,7 @@ alert('Hello')
3434
alert('World')
3535
```
3636

37-
在這裡 JavaScript 直譯 (interprets) 斷行為 "隱性" 分號。這也被稱為 [自動分號插入 (automatic semicolon insertion)](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion)
37+
在這裡 JavaScript 直譯interprets斷行為 "隱性" 分號。這也被稱為 [自動分號插入automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion)
3838

3939
**大多數情況,一個換行代表著一個分號,但 "大多數情況" 不代表 "總是如此"!**
4040

@@ -46,7 +46,7 @@ alert(3 +
4646
+ 2);
4747
```
4848

49-
此程式碼輸出 `6`,因為 JavaScript 沒有在內插入分號。直觀上,當某行程式以 `"+"` 結束時,它是個 "不完整的表達式 (incomplete expression)" 而不需要分號,如此一來這個例子才會以我們所想像的方式運作。
49+
此程式碼輸出 `6`,因為 JavaScript 沒有在內插入分號。直觀上,當某行程式以 `"+"` 結束時,它是個 "不完整的表達式incomplete expression" 而不需要分號,如此一來這個例子才會以我們所想像的方式運作。
5050

5151
**但有些情況下 JavaScript 對於分號是否真的被需要會假設 "失敗"**
5252

@@ -91,15 +91,15 @@ alert("There will be an error")[1, 2].forEach(alert)
9191
但程式應該要有兩個分開的述句而非單獨一個,本例中的合併是錯誤的所以導致錯誤,這在很多其他情況下也可能發生。
9292
````
9393

94-
我們建議即使是依據換行分開的述句也要標上分號,這個規則被社群廣為採納。再次強調 大多時間 *可能* 可以省略分號,但加上分號會更安全,尤其對新手而言。
94+
我們建議即使是依據換行分開的述句也要標上分號,這個規則被社群廣為採納。再次強調 -- 大多時間 *可能* 可以省略分號,但加上分號會更安全,尤其對新手而言。
9595

9696
## 註解
9797

9898
程式碼會隨著時間變得越來越複雜,有其必要加入 *註解* 來解釋程式在做什麼且為什麼這麼做。
9999

100100
註解可以加在腳本內任意位置,這不影響腳本運行因為引擎會直接忽略它們。
101101

102-
**單行註解由兩個正斜線字元 (forward slash characters) 開始 `//`**
102+
**單行註解由兩個正斜線字元forward slash characters開始 `//`**
103103

104104
此行剩餘部分就是註解,它可以佔據整行或是寫在某個述句之後。
105105

@@ -135,7 +135,7 @@ alert('World');
135135
```
136136

137137
```smart header="用熱鍵!"
138-
大多數編輯器中,可以按下 `key:Ctrl+/` 這個熱鍵來註解掉單行程式碼,而 `key:Ctrl+Shift+/` 可以註解多行 (選取一段程式碼後按下熱鍵)。Mac 則使用 `key:Cmd` 取代 `key:Ctrl`。
138+
大多數編輯器中,可以按下 `key:Ctrl+/` 這個熱鍵來註解掉單行程式碼,而 `key:Ctrl+Shift+/` 可以註解多行選取一段程式碼後按下熱鍵。Mac 則使用 `key:Cmd` 取代 `key:Ctrl`。
139139
```
140140

141141
````warn header="不支援巢狀註解!"

1-js/02-first-steps/03-strict-mode/article.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
這麼做的好處是不會弄壞現存的程式碼,但缺點是 JavaScript 創造者們產生的任何錯誤或不佳的決定會永遠留在這個語言內。
66

7-
這情形一直存在,直至 2009 年 ECMAScript 5 (ES5) 出現為止。ES5 增加且修改了一些這個語言中的功能,為了讓舊的程式碼也可以運作,修改大部分預設是關閉的。你需要明確地用一個指令來開啟這些功能:`"use strict"`
7+
這情形一直存在,直至 2009 年 ECMAScript 5ES5出現為止。ES5 增加且修改了一些這個語言中的功能,為了讓舊的程式碼也可以運作,修改大部分預設是關閉的。你需要明確地用一個指令來開啟這些功能:`"use strict"`
88

99
## "use strict"
1010

@@ -19,7 +19,7 @@
1919
...
2020
```
2121

22-
我們很快會學到函式 (functions) (一種組合命令的方式),所以先說一下,注意 `"use strict"` 可以被放在函式本體的最前面,而不用是整個腳本的最前方。這麼做可以使嚴格模式 (strict mode) 只作用在函式之中,但通常大家都會用於整個腳本上。
22+
我們很快會學到函式functions)(一種組合命令的方式,所以先說一下,注意 `"use strict"` 可以被放在函式本體的最前面,而不用是整個腳本的最前方。這麼做可以使嚴格模式strict mode只作用在函式之中,但通常大家都會用於整個腳本上。
2323

2424
````warn header="確保 \"use strict\" 至於最頂端"
2525
請確保 `"use strict"` 至於你腳本的最頂端,否則嚴格模式可能不會被啟用。
@@ -28,7 +28,7 @@
2828
2929
```js no-strict
3030
alert("some code");
31-
// "use strict" 底下的 "use strict" 會被忽略 必須得至於最頂端
31+
// "use strict" 底下的 "use strict" 會被忽略 -- 必須得至於最頂端
3232
3333
"use strict";
3434
@@ -79,6 +79,6 @@ alert("some code");
7979
總之現在了解這些就夠了:
8080

8181
1. `"use strict"` 指令讓引擎切換至 "現代化" 模式,並改變一些內建功能的行為。在之後的教程我們會看到更多細節。
82-
2. 嚴格模式要在腳本或函式的最頂端放置 `"use strict"` 才會被開啟。有些語言功能,像是 "類別 (classes)" 和 "模組 (modules)" 會自動開啟嚴格模式。
82+
2. 嚴格模式要在腳本或函式的最頂端放置 `"use strict"` 才會被開啟。有些語言功能,像是 "類別classes" 和 "模組modules" 會自動開啟嚴格模式。
8383
3. 所有現代化瀏覽器都支援嚴格模式。
8484
4. 我們建議腳本最好總是以 `"use strict"` 起始。除了非常少的指定情境以外,本教程中所有範例都預設使用嚴格模式。

0 commit comments

Comments
 (0)