Skip to content

Commit

Permalink
暂时补充 Web:Bit 文档框架,等待内容更新为简体版
Browse files Browse the repository at this point in the history
  • Loading branch information
junhuanchen committed Jun 5, 2019
1 parent 82e164c commit 6d1ba4e
Show file tree
Hide file tree
Showing 2,063 changed files with 2,420 additions and 26 deletions.
3 changes: 3 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"search.usePCRE2": true
}
Binary file removed source/bpi-web/images/github-browser-webduino.png
Binary file not shown.
Binary file removed source/bpi-web/images/github-desktop-webduino.png
Binary file not shown.
128 changes: 128 additions & 0 deletions source/bpi-web/tutorials/basic/array.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
# 陣列

陣列可以將數字、文字、列表或变量,按照順序組合起來,這些按序排列資料集合就稱作陣列,一個陣列可以再細分為多個元素,或是一個陣列內還包含其他陣列,在進行比較複雜的運算時,也會透過陣列的操作來實現。

## 陣列積木清單

陣列積木包含建立陣列、建立空陣列、使用文字建立陣列、陣列取值、陣列編輯...等常用功能。

![陣列](../images/zh-tw/docs/webbit/basic/array-01.jpg)

## 空陣列

「空陣列」積木會建立一個陣列容器,也就是裡面沒有包含任何元素的陣列

![陣列](../images/zh-tw/docs/webbit/basic/array-02.jpg)

如果要用变量進行陣列的操作,首先必須把這個变量定義為陣列或空陣列,才能針對這個变量進行陣列數值的添加、刪除、編輯...等動作。

![陣列](../images/zh-tw/docs/webbit/basic/array-03.jpg)

## 建立陣列

「建立陣列」積木可以透過指定位置放入對應的內容,建立一個帶有數值的陣列。

![陣列](../images/zh-tw/docs/webbit/basic/array-04.jpg)

點擊藍色小齒輪,可以增加放入內容的缺口。

![陣列](../images/zh-tw/docs/webbit/basic/array-05.gif)

建立陣列完成後,可以透過小怪獸講出陣列 ( 陣列內容會用逗號分隔 )。

![陣列](../images/zh-tw/docs/webbit/basic/array-06.jpg)

或是也可以透過重複迴圈,依序講出陣列內容。

![陣列](../images/zh-tw/docs/webbit/basic/array-07.gif)


## 建立重複內容陣列

「建立重複內容陣列」積木可以建立具有重複數值重複的列表,數值可以变量、文字、數字或陣列陣列,將熟放入缺口內,就會根據重複設定的次數建立陣列。

![陣列](../images/zh-tw/docs/webbit/basic/array-08.jpg)

舉例來說讓「芭樂」文字重複五次並建立陣列,綠色小怪獸就會唸出五個芭樂的文字。

![陣列](../images/zh-tw/docs/webbit/basic/array-09.jpg)

## 設定陣列內容

「設定陣列內容」積木可以針對陣列的內容 ( 第幾個、倒數第幾個、第一個、最後一個和隨機 ) 進行三種編輯行為 ( 設定、插入或移除 )。

![陣列](../images/zh-tw/docs/webbit/basic/array-10.jpg)

舉例來說,原本的陣列有四種水果蘋果、柳丁、香蕉和芭樂,透過「設定陣列內容」積木將陣列中第一個水果元素換成蓮霧,綠色小怪獸講出的陣列第一個元素就變成了蓮霧,接著隨機移除陣列的一個內容,紅色小怪獸講出的陣列就會變成只有三種水果。

![陣列](../images/zh-tw/docs/webbit/basic/array-11.jpg)

如果接著使用「插入」桃子元素在「最後一個項目」,就可以看到陣列又變成四種水果,最後一種是桃子。

![陣列](../images/zh-tw/docs/webbit/basic/array-12.jpg)

## 取得陣列內容

「取得陣列內容」積木可以取得一個陣列中某個元素的值 ( 第幾個、倒數第幾個、第一個、最後一個和隨機 ),或是取得某個元素的值之後,同時移除該元素 。

![陣列](../images/zh-tw/docs/webbit/basic/array-13.jpg)

如果單純取得某個元素的值,並不會影響原本陣列的內容和長度,但如果是「取得後移除」,這個陣列就不再包含這個元素,例如一開始有四種水果,如果只是取得內容,取得內容後的陣列依然是四種水果,不過如果取得後移除內容,取得內容之後陣列就變成了只有三種水果。

![陣列](../images/zh-tw/docs/webbit/basic/array-14.jpg)

## 尋找陣列內容

「取得陣列內容」積木能從一個陣列中,找到特定元素所在的位置,並回傳該位置的號碼。

![陣列](../images/zh-tw/docs/webbit/basic/array-15.jpg)

透過取得陣列積木來取得水果陣列,就能知道蘋果位在第一個位置、柳丁位在第二個位置、香蕉位在第三個位置、芭樂位在第四個位置。

> 注意,如果是「寫程序碼」而非使用「積木」,第一個位置通常都是 0,第二個位置是 1,因為和生活習慣一至,在程序積木裡頭第一個位置的顯示為 1,第二個位置為 2,依此類推。
![陣列](../images/zh-tw/docs/webbit/basic/array-16.jpg)

## 陣列排序

「陣列排序」積木會將指定的陣列做字母、數字的排序,排序後會形成一個新的陣列,*不會影響原本陣列的排序*

![陣列](../images/zh-tw/docs/webbit/basic/array-17.jpg)

從下圖的例子可以看出,綠色小怪獸會講出按照字母排序過後的水果陣列 ( a,b,c,.... ),而紅色小怪獸講出原本的水果陣列並沒有受到排序積木的影響。

![陣列](../images/zh-tw/docs/webbit/basic/array-18.jpg)

如果選擇字母排序,就會「*先按照字母大小寫排序,大寫在前,小寫在後,排序後再按照第二個字母排序*」,如果選擇不區分大小寫,就會直接進行排序,「*如果第一個字母相同,就用第二個字母排序*」,以下圖的例子,大寫 A 在前小寫 a 在後,排序後再按照 123、456 進行排序。

![陣列](../images/zh-tw/docs/webbit/basic/array-19.jpg)

## 文字與陣列轉換

「文字與陣列轉換」積木可以將帶有「分隔符」( 類似空白、逗號、分號...等分隔符號 ) 的文字轉換為陣列,或是將陣列合併為一串文字。

![陣列](../images/zh-tw/docs/webbit/basic/array-20.jpg)

如果一串文字沒有變成陣列,其中第二個元素就會是第二個字 ( 綠色小怪獸就會講出「果」 ),如果將文字拆分為陣列,第二個元素就會是陣列中的第二個內容 ( 紅色小怪獸就會講出「柳丁」 )。

![陣列](../images/zh-tw/docs/webbit/basic/array-21.jpg)

反之如果是將陣列合併為文字,可以將分隔符留空,就會看見陣列的內容變成一整串的文字,中間不會有逗號分隔,如果帶有分隔符 ( 例如 a ),就會看見結合成的文字中間都有 a。

![陣列](../images/zh-tw/docs/webbit/basic/array-22.jpg)

## 陣列長度

「陣列長度」積木可以取得個陣列的元素總數,如果是空陣列則陣列長度為 0。

![陣列](../images/zh-tw/docs/webbit/basic/array-23.jpg)

因為陣列長度表示的是「陣列的空格數」( 陣列可以放入多少個元素 ),所以如果「有空格」但沒有放入元素,仍然會影響陣列長度,例如有個四格空格的陣列,但只放入了三種水果,最後呈現出來的陣列長度就是 3。

![陣列](../images/zh-tw/docs/webbit/basic/array-24.jpg)






63 changes: 63 additions & 0 deletions source/bpi-web/tutorials/basic/color.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
# 顏色

透過改變網頁中元素的顏色,或指定實際 開發板全彩 LED 矩陣的燈光顏色,藉由五顏六色的趣味變化,就能做出許多絢麗奪目的效果。

## 顏色積木清單

陣列積木包含指定顏色、隨機顏色、RGB 三原色、混合顏色...等四種常用顏色積木。

![顏色](../images/zh-tw/docs/webbit/basic/color-01.jpg)

## 指定顏色

「指定顏色」積木可以讓我們透過色彩選取面板,選擇對應的顏色。

![顏色](../images/zh-tw/docs/webbit/basic/color-02.jpg)

如果我們指定小怪獸互動舞台的背景為紅色,網頁執行後舞台背景就會變成紅色。

![顏色](../images/zh-tw/docs/webbit/basic/color-03.jpg)

## 隨機顏色

「隨機顏色」會在每次網頁執行時,隨機從各種顏色中取出一種顏色顯示。

![顏色](../images/zh-tw/docs/webbit/basic/color-04.jpg)

如果搭配重複迴圈,網頁執行後,就能看到小怪獸舞台背景的顏色不斷隨機變化。

![顏色](../images/zh-tw/docs/webbit/basic/color-05.gif)

## RGB 三原色

「RGB 三原色」積木能夠指定網頁中三原色的數值,直接透過數值來呈現不同的顏色。

> 三原色表示 *R 紅色、G 綠色、B 藍色*,三種顏色分別有 256 種從暗到亮的變化,透過三種顏色的混合,就能產生一千六百多萬種的顏色。( 但人的眼睛無法分辨這麼多種顏色 )
![顏色](../images/zh-tw/docs/webbit/basic/color-06.jpg)

因為顏色有 256 種,對應的數值就是 0 ~ 255,0 是最暗,255 是最亮,輸入對應的數值就能產生對應的顏色,舉例來說紅色 255 搭配綠色 255 就會是黃色。

> 網頁的三原色為「*色光*」,*紅色 + 綠色 = 黃色**綠色 + 藍色 = 青色**紅色 + 藍色 = 紫色*
![顏色](../images/zh-tw/docs/webbit/basic/color-07.jpg)

搭配重複迴圈,就能夠做出紅色到黃色的顏色轉換效果。

![顏色](../images/zh-tw/docs/webbit/basic/color-08.gif)


## 混合顏色

「混合顏色」積木是指兩種顏色積木按照比例混合產生新的顏色,比例為 0~1 之間的數值,數字越小顏色越接近顏色 1,數字越大顏色越接近顏色 2。

![顏色](../images/zh-tw/docs/webbit/basic/color-09.jpg)

如果把顏色 1 設定為紅色,顏色 2 設定為藍色,比例 0.2 的混合顏色就是偏紅色的紫色。

![顏色](../images/zh-tw/docs/webbit/basic/color-10.jpg)

搭配重複迴圈,就能夠做出從紅色到藍色的顏色轉換效果

![顏色](../images/zh-tw/docs/webbit/basic/color-11.gif)

64 changes: 64 additions & 0 deletions source/bpi-web/tutorials/basic/function.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
# 函式

函式積木可以幫助我們簡化或管理較為複雜的程序邏輯,因為在寫程序的時候,常會遇到需要重複撰寫並執行的程序碼,如果每重複一次都得重寫一次,勢必會造成整份程序邏輯的複雜度,透過函式,將這些重複的程序集中管理,需要使用的時候再去呼叫函式,就可以執行對應的內容。

## 函式積木清單

函式積木預設有三塊,分別是建立函式、建立帶有回傳值的函式、函式內判斷並回傳值。

![函式](../images/zh-tw/docs/webbit/basic/function-01.jpg)

## 建立函式

「建立函式」積木可以將許多重複會用到的程序積木包裝成函示。

![函式](../images/zh-tw/docs/webbit/basic/function-03.jpg)

使用建立函式積木*並不會執行函式*,因為函式是*定義「需要執行的內容」*,建立完成函式積木內容後,在函式積木的目錄裡,就會出現對應的*執行函式積木*,使用這塊積木才表示執行這個函式。

![函式](../images/zh-tw/docs/webbit/basic/function-02.jpg)

下圖建立了 a 和 b 兩個函式之後,使用*呼叫函式 a 和 b*,網頁執行後,綠色小怪獸就會說出蘋果,紅色小怪獸就會說出香蕉。( *如果單純只有建立函式而不呼叫,執行後什麼事情都不會發生* )

![函式](../images/zh-tw/docs/webbit/basic/function-05.jpg)

除了單純的使用函式,我們也可以建立「*函式內的变量*」,點選函式積木前方的小齒輪,就可以新增变量。

![函式](../images/zh-tw/docs/webbit/basic/function-06.gif)

新增函式內的变量後,執行函式時也會看到放入变量數值的缺口。( 有幾個函式內的变量就會有幾個缺口 )

![函式](../images/zh-tw/docs/webbit/basic/function-07.jpg)

函式內的变量讓程序增加了許多彈性,並也可以減少許多重的程序碼,舉例來說,透過函式和函式內变量,就能做出提供变量數值,就算出數值加總的函式。

![函式](../images/zh-tw/docs/webbit/basic/function-08.jpg)

## 建立帶有回傳值的函式

「建立帶有回傳值的函式」積木可以讓執行的函式,變成單純的數值,這對於一些複雜的程序應用相當有幫助。

![函式](../images/zh-tw/docs/webbit/basic/function-09.jpg)

如果使用的是「建立帶有回傳值的函式」,就會發現執行函式時積木前方多了一個作為組合用的形狀。( 下圖是延伸前一段建立帶有函式內变量的函式 )

![函式](../images/zh-tw/docs/webbit/basic/function-10.jpg)

透過函式內的变量,搭配函式回傳的數值,就能做到依據提供的变量數值不同 ( x、y 不同值 ),而產生不同的結果。

![函式](../images/zh-tw/docs/webbit/basic/function-11.jpg)

## 函式內判斷並回傳值

「函式內判斷並回傳值」積木必須和「建立帶有回傳值的函式」的積木搭配,主要作為判斷要回傳什麼數值使用。( 這個積木也必須放在函式內才能正常運作 )

![函式](../images/zh-tw/docs/webbit/basic/function-12.jpg)

透過這個積木,搭配函式內的变量,就可以透過傳入的变量數值,最後回傳 x 和 y 哪個比較大的結果。

![函式](../images/zh-tw/docs/webbit/basic/function-13.jpg)

因為「函式內判斷並回傳值」積木具備邏輯判斷的功能,所以也可以使用邏輯積木加上一個变量來做判斷,就能做出一模一樣的效果。

![函式](../images/zh-tw/docs/webbit/basic/function-14.jpg)

15 changes: 15 additions & 0 deletions source/bpi-web/tutorials/basic/index.rst
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
编程概念
========================================

.. toctree::
:maxdepth: 2

variables
logic
loop
math
text
array
color
function

0 comments on commit 6d1ba4e

Please sign in to comment.