-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
82e164c
commit 6d1ba4e
Showing
2,063 changed files
with
2,420 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"search.usePCRE2": true | ||
} |
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) | ||
|
||
|
||
|
||
|
||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
|
Oops, something went wrong.