###### tags: `js-iot` 返回[電子電路實驗與JavaScript物聯網應用](/s/8Q89ww-EQlOg8zy7XSTlCw)
# 網頁功能總覽

**詳細介紹網頁上各種與開發板互動的功能，每一主題皆有影片操作示範。**
:::warning
:zap: 方塊程式目前還未支援部分瀏覽器，建議使用Chrome能有良好體驗。
:::
## 系統資訊
<center> <img src="https://i.imgur.com/LHQUxCM.png" width="50%" /> </center>

<br>

:::info
顯示開發板各項系統參數。
:::

| 名稱 | 功能 |
|:--------:|:-------------------------------------------------------------------------------------------------:|
| 裝置名稱 | 顯示自訂裝置名稱，點擊可設定。 |
| WiFi | 顯示已連上的WiFi，獨立模式表示未連上任何WiFi，點擊按鈕開啟[WiFi功能頁](#WiFi功能頁)。 |
| 訊號強度 | 顯示所連上的WiFi訊號強度，獨立模式下顯示 SAP mode[^sap]。 |
| SSID修改 | 更換開發板WiFi名稱與密碼，成功修改會跳出通知視窗，按reset重置按鈕後生效。 |
| 啟動時間 | 顯示開發板開機後所經過時間(秒)，重置或斷電重啟則從1開始。 |
| UART bps | 開發板上UART介面的[鮑率](https://zh.wikipedia.org/wiki/%E6%B3%A2%E7%89%B9%E7%8E%87)，點擊可設定。 |

:::warning
:zap: WiFi名稱若有重複則會連不上正確的裝置，設定時需先檢查周圍WiFi名稱，避免重複。
:::

[^sap]: SAP mode 右方數字意思
每次增加1表示有一個網頁連結到開發板，增加2表示同時有兩個網頁連結，最多允許同時3個網頁連結

### 影片示範
{%youtube gggA1Qpwzq0 %}

## WiFi功能頁
<center> <img src="https://i.imgur.com/jG5g1v8.png" width="100%" /> </center>

<br>

:::info
提供各項WiFi設定功能頁面。
:::

| 編號 | 名稱 | 功能 |
|:----:|:------------:|:--------------------------------------------------------------------------------------------------------------:|
| 1 | 已連上WiFi | 顯示目前已連上WiFi名稱，獨立模式表示未連上任何WiFi。 |
| 2 | 搜尋WiFi | 搜尋並顯示附近可用WiFi清單。 |
| 3 | 重新連接 | 重新連上最後一次連過的WiFi，若無則不會有回應。 |
| 4 | 遠端IP | 點擊設定目標裝置IP，格式為 ==IP==:==PORT==，預設PORT為80。 |
| 5 | 更新IP | 點擊顯示設定中的遠端IP，若無則顯示 ==遠端IP 未設定==。 |
| 6 | 區網IP | 僅在開發板連至另一個開發板的WiFi時有效，點擊後顯示此開發板在區網下的IP位址，若逾時則跳出通知視窗。 |
| 7 | 可用WiFi清單 | 顯示目前可用WiFi，點擊後輸入密碼進行連線(若無密碼則直接確認)，成功後已連上WiFi名稱會更新，連線失敗時則無回應。 |

### 影片示範(待更新)

## 程式編輯區(JavaScript)
<center> <img src="https://i.imgur.com/mL6FADZ.png" width="100%" /> </center>

<br>

:::info
使用JavaScript運算、判斷、控制輸出及顯示輸入資料。
:::

| 編號 | 名稱 | 功能 |
|:----:|:----------------:|:-----------------------------------------------------------------------------------------------------------------:|
| 1 | 匯入 | 將保存的程式檔案匯入，格式為.json。 |
| 2 | 匯出 | 將目前的程式檔案匯出，可輸入檔案名稱。 |
| 3 | 終端 | 開啟/關閉[終端視窗](#終端機)。 |
| 4 | 切換編輯模式 | 切換JavaScript編輯與[方塊編輯](#程式編輯區(方塊程式))模式，預設為JavaScript編輯模式。 |
| 5 | 縮放編輯區 | 放大編輯區，隱藏訊息輸出區，增加編輯區空間，點即返回復原。 |
| 6 | 程式檔案選擇清單 | 可新增、選擇、刪除程式記錄，在==編輯區中修改程式皆會記錄至當下選擇的檔案中==。 |
| 7 | 範本Js新增清單 | 新增範本程式碼於編輯區中，目前有delay、console.log、if 判斷、for 迴圈。 |
| 8 | 執行 | 執行編輯區中的程式碼，若==以window.開頭定義的全域變數只執行一次==，==無任何delay下的其他程式碼以300毫秒為間隔不斷執行==。 |
| 9 | 停止 | 停止執行中的程式碼。 |
| 10 | 清除訊息 | 清除訊息輸出區中的文字。 |
| 11 | 清除全部 | 清除編輯區中的程式碼(覆蓋至當前選擇檔案)及訊息輸出區中的文字並停止程式碼執行，清除前會再次確認。 |
| 12 | JavaScript編輯區 | 程式碼編輯區，僅接受JavaScript程式語法，若有語法或其他錯誤，執行時會在訊息輸出區顯示錯誤訊息 |
| 13 | 訊息輸出區 | 顯示console.log的訊息及異常錯誤時的訊息 |

### 範例程式

/*全域變數，只在迴圈執行第一次時定義*/
window.a = 0;

/*區域變數，每次迴圈執行時都會再定義一次*/
let b = 0;

/*變數賦值，將右方的值或運算結果放進左方的變數中*/
/*a 等同於 window.a*/
a = a + 1;
b = b + 1;

/*當 a變數的值 等於 10時，顯示 hello,world!*/
if(a == 10)
{
  console.log("hello, world!");
}

/*當 a變數的值 小於 10時，顯示 a 小於 10*/
if(a < 10)
{
   console.log("a 小於 10");
}

/*當 a變數的值 大於 10時，顯示 a 大於 10*/
if(a > 10)
{
  console.log("a 大於 10");
}

/*顯示 a 變數 與 b變數 的內容*/
console.log(a);
console.log(b);

/*等待1秒(1000毫秒)後往下執行*/
delay(1000);

:::warning
:zap: JavaScript的基礎運用參考 - [JavaScript基礎語法與變數運用](/s/4CgYHd9BREiq0TwqEWpRKw)
:::

### 影片示範
{%youtube iWUhdaxtqOQ %}
{%youtube SN5ZbHsNozI %}

## 程式編輯區(方塊程式)
<center> <img src="https://i.imgur.com/FgHbstc.png" width="100%" /> </center>

<br>

:::info
使用方塊程式運算、判斷、控制輸出及顯示輸入資料。
:::

| 編號 | 名稱 | 功能 |
|:----:|:----:|:----:|
| 1 | 顯示/隱藏方塊 | 顯示/隱藏方塊元件區，每次從JS編輯模式切換時皆會顯示。 |
| 2 | 方塊JS預覽 | 切換方塊/方塊轉換JS程式碼顯示，若有缺少參數或其他錯誤時會跳出通知視窗。 |
| 3 | 方塊編輯區 | 放置方塊的編輯區，在編輯區中的方塊可以拖曳互換位置，而方塊無法被覆蓋。 |
| 4 | 方塊元件區 | 提供10種方塊使用，點擊並拖曳至方塊編輯區使用，部分方塊無法直接使用(資料、值、變數、邏輯、判斷)，需搭配其他方塊才能使用，參考下方[方塊功能簡介](#方塊功能簡介) |

### 方塊功能簡介

>以下介紹中，有標記的文字如==變數==代表變數方塊的意思。

:::warning
#### :zap: 由於設計上的限制，使用時需注意以下幾點，或參考影片示範會更容易使用。

- 需要從元件區拖曳才能將方塊包在==如果==中
- 已在編輯區中的方塊無法拖曳至==如果==中
- ==如果==不能包另一個==如果==
- 將==如果==包著的方塊拖曳離開時，便無法再放回==如果==中
- ==值==中的參數若要表示字串，需以雙引號""表示
:::

| 方塊 | 功能 |
|:-------------------------------------------:|:---------------------------------------------------------------------------------------------------------:|
|  | 取得開發板提供的資料，作為判斷的依據，需在==判斷==、==設定==、==顯示== 中使用。 |
|  | 拖曳至程式編輯區後，點擊可輸入任何數值及運算，需在==判斷==、==設定==、==控制==、==顯示== 中使用。 |
|  | 拖曳至程式編輯區後，點擊可輸入自定義變數，僅接受英文及部份特殊符號命名，需在==判斷==、==設定==、==控制==、==顯示== 中使用。 |
|  | 可選擇使用大於、小於、等於...等運算子，需在==如果==方塊中使用。 |
|  | 可放入兩個==變數==或==值==進行比較，需在==如果==中使用。 |
|  | 可放入==判斷==及==邏輯==，當判斷結果為真時，才會執行這個方塊底下被黃色所包覆的方塊。 |
|  | 拖曳至程式編輯區後，點擊可切換區域/全域變數(預設為全域)，左邊只能放==變數==，右邊可以放==變數==或==值==。 |
|  | 控制輸出與遠程控制與請求，可放入==變數==或==值==設定參數。 |
|  | 輸出資訊於程式編輯區下方的訊息區，可放入==變數==或==值==。 |
|  | 等設定時間結束後才往下執行其他方塊，預設為300毫秒。 |

### 影片示範(待更新)

## 終端機

<center> <img src="https://i.imgur.com/ka7DBuB.png" width="100%" /> </center>

<br>

:::info
文字命令介面，提供文字輸入方式設定開發板各項參數。
:::

| 名稱 | 功能 |
|:----:|:----------------------:|
| 傳送 | 發送文字命令給開發板。 |
| 清除 | 清除訊息文字。 |

### 指令一覽

參考[內建Js參數及功能總覽](/51F8nDF3Ss6M2DmGoRJQbA)

### 影片示範(待更新)

## 其他區塊

### ADC輸入
<center> <img src="https://i.imgur.com/ggX0dbX.png" width="50%" /> </center>

<br>

:::info
ADC輸入資訊，將類比訊號轉換為數位訊號顯示，可量測電壓與判斷按鈕開關。
數值範圍為 0 ~ 1024，量測電壓為 0 ~ 3.3V，例： 512 等於 1.65V。
:::

### 影片示範
{%youtube lmDPQTkICJM %}

### 伺服馬達與PWM輸出
<center> <img src="https://i.imgur.com/k50yvLC.png" width="50%" /> </center>

<br>

:::info
伺服馬達與PWM輸出資訊，點擊可以直接設定數值進行控制。
伺服馬達設定範圍為0 ~ 180度，PWM輸出為0 ~100。
伺服馬達使用PCA9685的1 ~ 8號腳位，PWM輸出使用9 ~ 16號腳位。
:::

### 影片示範
{%youtube xlkUUbFKHtI %}

{%youtube D4z_SIeslJE %}

<a class="btn btn-warning" style="width:100%;color:#333333;" href="/s/qKRu3CJqTb6RpQ6I1Z_jwA" role="button"> LAB01 - ADC電壓量測實驗 **&#8680;** </a>

<a class="btn btn-primary" style="width:100%;" href="/s/hVJ5szXZSVGfEGB7gbaFOA" role="button"> **&#8678;** 初探JavaScript物聯網開發板
</a>