---
# System prepended metadata

title: 網頁功能總覽
tags: [js-iot]

---

###### 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的訊息及異常錯誤時的訊息                                                                                                |

### 範例程式

```javascript=
/*全域變數，只在迴圈執行第一次時定義*/
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: 由於設計上的限制，使用時需注意以下幾點，或參考影片示範會更容易使用。

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

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