編程自學指南一・你的第一行代碼

電腦程序其實沒什麼神奇的，就是說明書或者菜譜一類的東西，只是用電腦聽得懂的語言寫的而已。

下面我來帶大家一起寫幾行代碼，之前完全沒經驗也沒關係，跟着一起做就好了[1]。

第一步、開啓瀏覽器控制臺

如果瀏覽器是個舞臺的話，「控制臺」就是後臺了。

進控制臺的方法，每家瀏覽器不同，下面我用Google Chrome瀏覽器作示例：

macOS下按Option + Command + I（字母aye），

Windows下按Control + Shift + J，

Linux下……呃Linux用戶大概不用我教了。

這個東西在菜單欄也有入口，在Display - Developer Tools - JavaScript Console。

總而言之，瀏覽器窗口的右邊或者下面，會出來這樣一個面板：

「控制臺」是指那個叫「Console」 的東西，等下就在裏面藍色箭頭後面輸入代碼。

面板右上角有個「×」，按一下就可以關掉。

第二步、在控制臺中輸入（粘貼進去也可以），然後按下回車（Enter）：

document.body.style.background = 'green'

如果成功，應該會看到Matters的背景變成了綠色，像這樣：

刷新（重整・Refresh・F5）一下就會變回正常的。

這樣，你就寫下了你人生中的第一行代碼了。

剛纔這行代碼，爲什麼能控制Matters的背景色呢？

再來看看這行代碼： document.body.style.background = 'green'

首先，這是JavaScript語言。然後，一行代碼就像一句話，我們一個一個詞來看。

document，可以理解成指代你正在看的標籤頁（tab）。

.（句點），這是「面向對象編程」的語法，對應的是英語的屬格標記（'s）、漢語的「的」字（後面會解釋）。

body，指代這個標籤頁中能看到的部分（這是「身體」，還有個看不見的「頭」，叫document.head。〔不要問我爲什麼身體看得到，頭看不到〕）。

style，指代這個標籤頁能看到的部分的「樣式」（看起來是怎麼樣字的，顏色、字體、邊框等等）。

background，指代這個標籤也中能看到的部分的樣式中，具體的「背景」。

=（等於號），表示「賦值」，就是給瀏覽器下指令，要求等號左邊的東西，變成等號右邊的東西。注意這個和數學中的「等於」語義完全不同。

'green'，表示「綠色」。注意，引號非常重要，'green'代表的是具體的「綠色」（嚴格來說是個「字符串」）。相反，green是一個抽象符號，可以指代任何東西，比如'blue'，或者數字42。

合起來，這行代碼可以諸字翻譯爲：

document . body . style . background = 'green'

標籤頁－的－可見部分－的－樣式－的－背景－設定爲－綠色

你的名字

古今中外，很多傳統都相信「名字」有神奇的力量。比如猶太教不說上帝的名字，天朝傳統避諱長輩名字，歐洲也有「真名」體系，都是因爲，名字說出來，就有控制權了。

軟件世界也是一樣的。只要知道一個東西的名字，呼喚它，就能控制它。

你現在見到的網站界面的一切，在控制臺，集合在「document」這個名字裏。

於是你用「document」這個名字，就能用來控制網站的界面。document本身也是有結構的，就是說它還容納了很多別的符號，你知道這些符號的名字，又可以控制瀏覽器界面的其他方面。

編程入門，一方面就是記名字（相當於背單詞），一方面是學語法（組合名字、產生新名字）。兩者結合，程序就寫出來了。

練習題

1. 把Matters的背景色改爲紅色

2. 把Matters的背景色改爲透明

3. 試試改你常去的網站的背景色（不是所有的網站都可以如此簡單地修改，比如Reddit可以，Medium則不行）

4. 【挑戰題】把Matters的字號改爲20像素

提示1，字號的名字叫做fontSize

提示2，像素是個單位，叫做px，數字要跟單位搭配使用

[1] 請留意：控制臺是給程序員使用的工具，不要在裏面運行你不理解的代碼，否則可能會導致賬戶被盜取。