第2章
JavaScript Blocks
圖形程式設計
本章我們将介紹 microt:bit專用開發工具——MakeCode圖形化程式設計工具（如圖
2.1所示），它使用的是一種叫做 JavaScript Blocks的圖形程式設計語言。我們将對程式設計工具的界面進行講解，同時希望大家能夠明白什麼是程式設計語言，以及學習它們的重要性。
圖 2.1.MakeCode圖形化程式設計的入口頁
2.1.初始 MakeCode和圖形化程式設計語言
2.1.1.程式設計語言
程式設計語言（Programming Language）是用來編寫計算機程式的形式語言。程式設計語言定義了一套标準化的交流技巧，用于向計算機發出指令。熟練掌握程式設計語言的軟體開發工程師，可以通過程式設計語言對計算機進行操控，精确定義在不同情況下所應采取的行動。簡單來說，程式設計語言是人類與機器交流的工具。JavaScript Blocks就是上百種程式設計語言中的一種，它是專門用來操控 microt:bit的語言。比如，我們想讓 microt:bit顯示屏顯示一組單詞：Hello World!，不論你說中文還是英文，microt:bit都不會有任何反應，但是如果你使用 JavaScript Blocks程式設計語言正确書寫指令，你會發現與 micro: bit的交流其實很簡單！
2.1.2.JavaScript Blocks圖形化程式設計語言
JavaScript Blocks程式設計語言又稱做圖形化程式設計語言，是專門針對 6~12歲的兒童而設計的程式設計語言。在這裡沒有複雜冗長的代碼，取而代之的是形狀各異的積木
塊，編寫程式就像是堆疊積木一樣簡單。從本書第 3章開始，我們将切身體會到使用JavaScript Blocks為 microt:bit編寫程式的樂趣。如圖 2.2所示為一組非常簡單的代碼，你能猜出這組代碼塊錄入 microt:bit後會有哪些效果嗎？
知識點
JavaScript Blocks，即 JavaScript積木塊，是一款轉為 micro:bit設計的圖形化程式設計語言。熟練掌握 JavaScript Blocks程式設計的軟體工程師，能夠輕松使用 microt:bit硬體上的豐富元件，進而完成各種項目的開發（例如計時器秒表、花草的自動灌溉等）。
圖 2.2.JavaScript Blocks編寫的簡單程式
要進行 JavaScript Blocks程式設計，請确認你的計算機已經連入了網際網路。打開浏覽器，輸入網址
https://makecode.microbit.org/，會看到類似于圖 2.3所示的頁面（圖2.3為英文版入口頁面）。單擊帶有加号圖案的建立項目按鈕，在其中我們可以書寫JavaScript Blocks程式設計語言（圖2.4），這個頁面也是我們通常所說的 MakeCode程式設計界面。從今天起，你将學習通過 MakeCode程式設計界面來編寫 JavaScript Blocks代碼，對 microt:bit進行操控，進而開發出諸如閃爍愛心動畫、投票器、土壤水分分析器、自動澆水器、電子吉他、剪刀石頭布遊戲機和情緒電台等功能強大的裝置，而且在整個開發過程中将會樂趣橫生，多姿多彩！
圖 2.3.英文版的 MakeCode入口頁面
圖 2.4.MakeCode程式設計界面
2.2.浏覽 MakeCode程式設計界面
在開始編寫代碼之前，請先跟随我的引導，從左上角開始熟悉一下 MakeCode編輯器的主界面。首先映入眼簾的是一個長條形狀的功能區，它的最大特點是擁有藍色背景（底紋），這讓它與其他構件區分開。如圖 2.5所示，從左到右分别是：
●microt:bit Logo：帶有 microt:bit字樣的編輯器 Logo，單擊它可以回到入口頁。
●回到入口頁按鈕：帶有首頁和房子圖示模樣的按鈕，單擊它你可以回到入口頁（功能同單擊microt:bit Logo）。
●分享按鈕：單擊該按鈕，将允許你與他人分享自己的編碼成果（程式）。
●編輯器切換按鈕：切換按鈕有兩個選項，即 Blocks和 JavaScript。沒錯，它們其實是兩種程式設計語言，這兩種語言都可以用來控制 microt:bit。但是本書大部分章節中都會使用 Block選項，即 JavaScript Blocks語言編寫我們的代碼。
●幫助按鈕：圖示形狀是一個問号，單擊它，可以檢視入門教程和示例程式。
●設定按鈕：一個齒輪狀的按鈕，包括語言在内的項目的各種設定都可以在這裡更改。注意，為了體驗原汁原味的程式設計，強烈建議使用英文作為編輯器的語言。
●Microsoft Logo: 最後一個帶有 Microsoft字樣的 Logo, 會帶你進入一個新的網頁，其中展示了所有由 Microsoft MakeCode項目組開發的軟體，第一個便是microt:bit。
圖 2.5.MakeCode的功能區
接下來要介紹的是程式設計區，如圖 2.6所示，這個區域會非常頻繁地被使用，請務必牢記。
●模拟器：在 microt:bit Logo下方的是模拟器，與實物不同，它不能檢測重力、加速度和亮度，但是可以模拟 LED螢幕的顯示效果、按鈕按下的效果，以及引腳的部分效果。
●指令工具欄：位于模拟器右邊的是指令工具欄，工具欄中包含了所有可以使用的代碼塊，每個代碼塊都根據功能被分類到了一個子產品組中。例如，基本子產品組包含了較為常用的代碼塊，并統一以天藍色底色作為标記。本書将用大量的篇幅帶你掌握如何正确地組合代碼塊，讓 microt:bit聽從你的指令而運作。
●工作區：程式設計區中最大的一片區域就是工作區，我們将在這裡編寫可以被microt:bit識别的程式設計語言。我們所使用的語言叫做 JavaScript Blocks, 編寫它其實也很容易，隻需要将指令工具欄中的指令塊合理地拼接在一起就可以了，就像拼圖一樣。拼接代碼塊的過程也被稱做編碼coding。
圖 2.6.MakeCode程式設計區—中文版界面
注 意
細心的你可能會發現，還有一小部分圖示我們沒有進行講解。不要着急，在用到它們的時候我會再次進行詳解。
2.3.小結
通過本章的學習，我們認識了 MakeCode圖形編輯器。其中，模拟器、指令工具欄和工作區是經常使用的部分。除此以外，我們知道了 MakeCode編輯器可以輔助編寫基于 JavaScript Blocks圖形化程式設計語言的代碼，來操控microt:bit。
2.4.練習題
1．想要進入 MakeCode程式設計界面，你需要使用浏覽器，在位址欄輸入 。
2．本章着重介紹了MakeCode程式設計界面的三個區域： ， 和 ， 這 3個區域所占面積最大，也是在編寫代碼的過程中會反複使用的區域。
3．學會并掌握JavaScript Blocks語言，我們就可以自由操控microt:bit。這個說法正确嗎？
4．JavaScript Blocks和 JavaScript是一種語言，它們的寫法沒有任何差別。這個說法正确嗎？
5．老師使用的是英文版的 MakeCode界面（如圖 2.7所示），為了友善教學，建議大家也使用對應的英文設定。仔細閱讀本章第一節，并将你的 MakeCode編譯器設定成英文界面。
圖 2.7.MakeCode程式設計區—英文版界面