| 快速學會microbit | ep03 microbit JavaScript Block Editor程式基本語法

Hello,吉米哥繼續來帶大家學microbit Javascript 程式的基本用法, 首先打開 microbit javascript 積木編輯器(打開micro:bit app , 或進https://makecode.microbit.org/# )

我們今天這篇先來了解一下microbit Javascript Editor一些常用的積木(功能),學會這些積木的用法, 就可以開始練習簡單的程式, 以下為常用且基礎的積木:(必學!!)


**** 快速跳轉 ****

1.當啟動時(on start)
2.重複無限次(forever)
3.暫停(pause)
4.顯示文字(show string)/顯示數字(show number)
5.變數 (variable)
6.如果…那麼….否則 (if….then…else)
7.計數index 從0到x執行 (count)



1.當啟動時 

這個積木在開啟javascript編輯器時, 預設就會放在編輯畫面, 它代表意思是甚麼呢?  就是在micro:bit通電後, 也就是程式開始執行時,你想要執行的第一個動作, 因為它只會執行一次, 所以通常吉米哥會放參數設定的東西, 當然也可以放一些你只想執行一次的程式, 讓我們來看個簡單的例子.

我們在[當啟動時], 拉入[顯示文字]Hello!, 注意看模擬器的畫面, 是否會秀出Hello!的跑馬燈呢?  如果你真的眼睛不好沒看到(因為它只會跑一次), 記得再按一次模擬器下方的重啟模擬器 按鈕, 就一定看的到啦!


2.重複無限次(forever)

這個積木是甚麼意思呢? 這個積木就是你希望程式會不停的來回執行的東西(執行到天荒地老沒電為止), 記得喔! 這個積木是會在[當啟動時]後執行的,所以 當執行完[當啟動時]的方塊後, 就會開始執行[重複無限次]內的動作,一樣來看個例子.

我們在[重複無限次]內在加入[顯示圖示](從基本內拉出),那我們會看到甚麼結果呢? 答案就是 一開始啟動後, LED會先秀出Hello!跑馬燈,再來就會一直執行顯示愛心的圖案!


3.暫停(pause) 

暫停這個方塊的意思就是….程式執行到這個方塊時, 先等個時間後再繼續執行,簡單的說, 就是讓micro:bit 發呆~~, 方塊內的時間的單位是ms, 就是1/1000秒, 所以填1000就是1秒,2000就是2秒,看你希望等多少時間,就填多少, 我們繼續我們的範例~

現在 再加兩個圖示在[重複無限次]方塊內.

覺得左側模擬器圖示動太快嗎? 試著加入暫停方塊在其中!

如何? 變慢了吧! 以上就是暫停方塊的簡單用法.


4.顯示文字(show string) /數字(show number)

顯示文字這個積木方塊,主要就是顯示我們想要的文字在LED上, 一件事須注意,內建的方塊 不能打中文字!! 畢竟是一個5X5 LED, 顯示中文字效果也不好, 再來另一件事 文字會以跑馬燈的形式執行, 所以就會往左移動方式顯示,類似廣告看板一樣.


5.變數 用法

有學過程式的朋友應該可以很容易理解變數這個意思, 不過沒學過的朋友的話, 可以想像一下變數就像是一個箱子, 裡面要裝甚麼呢? 以micro:bit 來說, 常見的就一個數字! (其實以程式來說,還可以裝文字) 看你喜歡裝甚麼就裝甚麼, 記得幫箱子取個名字, 如果程式需要時,micro:bit 才知道要拿哪個箱子是吧!

讓我們繼續來編寫我們的原本程式!

[Step1]先新增一個變數(箱子), 名字叫 number1

(點擊 [變數] 欄位–> [建立一個變數]–>輸入 number1)

[Step2] 新增 [變數number1 設為100]方塊

(從變數欄位 拉出 , 選number1, 右邊數字改為100)

[Step3]  [當啟動時]方塊內加入[變數number1 設為100]+[顯示數字number1]+[暫停500ms]方塊

另一點提醒 顯示數字如要用 變數的方式, 記得從變數欄位拉出貼上喔!


6.如果…哪麼… 否則

這個方塊是做什麼的呢? 還記得我們講中文的時候, 這句話是用在哪裡嗎?

舉個吉米哥最常在家對小子說的話:  如果你好好吃飯, 那麼你就會長很高, 否則你就會比同學矮,  這句話的意思就是

當你滿足[條件1: 好好吃飯]就會得到[長很高]的結果,

否則就會得到[比同學矮]的結果,

這就是個簡單邏輯概念, 寫程式其實就是訓練邏輯觀念, 思慮清楚的邏輯概念可以幫助我們解決很多問題, 這就是為什麼從小要開始訓練寫程式的原因.

那我們來看個簡單的例子吧!

這個範例 用了上面教過的內容, 當啟動時, 如果number 等於1的話, LED就會秀出勾的圖案, 否則就會秀出小的X方塊, 各位朋友可以在修改number這個變數的值, 看看如何變化,  小提醒一下, [如果方塊]後面接的number=1 是從 [邏輯]方塊庫拉出來的喔! 不是在[數學]方塊庫內.

***不會搞錯的小技巧, 當你要做數學運算時 就從 [數學]方塊庫拉, 要做邏輯判斷時,就從[邏輯]方塊拉!這樣就沒錯啦!

當然啦, 有些朋友一定會問說如果我遇到的問題比較複雜怎麼用, 簡單!依樣畫葫蘆, 看到[如果..那麼]方塊下片有一個+的圖案嗎? 點開後, 會發現

看你需要幾個 else if (否則如果), 就拉幾個到白色的框框就可以啦!


7.計數index 從0到x執行 (count)

這個方塊是指什麼呢?就是把重複的動作看你想要做幾次, 後面的數字就是一個次數的概念, 你如果填4不是方塊內的動作做4次, 是做5次, 為什麼呢? 因為程式計數是從0開始的,每次加1,數到4接著執行完動作後就停止囉!實際上程式是這麼運作的:

第1次 index=0  –>  執行動作–>    index+1

第2次 index=1  –>  執行動作 –>   index+1

第3次 index=2   –>  執行動作 –>  index+1

第4次 index=3   –>  執行動作–>   index+1

第5次 index=4   –>  執行動作  –> 結束動作

index 一樣是一個變數,  但在這裡可以把他看程式一種標記, 程式就會在這個方塊內開始進行動作, 直到index=4 時執行完動作就離開. 下面是個例子, 這個計數方塊釋放在迴圈積木庫內:

如何? 看到什麼呢? 當你按下開始按鈕後, 應該會依序看到0 1 2 3 4 紅心吧!

這就是迴圈基本的用法.

以上就是micro:bit 一些基本方塊的用法喔! 如果有甚麼問題 歡迎下面留言給我囉!

發佈留言

Close Menu