LEDを10回点滅する機能を追加する。
<body>内に点滅を開始するボタンを設置
最初に、LEDの点滅を処理するためのボタンをHTMLに記述する。
「LED OFF」のボタンの記述をコピーし、その下に貼り付け。
id属性は、LEDを点滅する意味で、「led-blink」と命名。
LEDを点滅させるプログラムをJavaScriptで記述する
＜script＞ ～ ＜/script＞内に処理プログラムを記述する。
[LED OFF]を行うプログラムをコピーし、その下に貼り付けし、不要な処理は削除。
obniz.wait() のような同期処理を行う場合、必ず function() の前に、async を記述する。
※async、await等の同期処理は別の機会に説明します。
forステートメントを使用しない
「LEDをON → 500m秒処理停止 → LEDをOFF → 500m秒処理停止」の処理を10回記述する。
LEDをONにする処理の記述は led.on();
500m秒処理停止の記述は await obniz.wait(500);
LEDをOFFにする処理の記述は led.off();
// [LED点滅]ボタンをクリック → LEDを10回点滅
// ※forステートメントを使用しない場合
$("#led-blink").click(async function() {
// 1回目
led.on();
await obniz.wait(500); // 500m秒処理を停止
led.off();
await obniz.wait(500); // 500m秒処理を停止
※上記の処理を10回分コピペする
});
forステートメントを使用する場合
forステートメントは、繰り返し処理を記述するときに使用する。
以下のように記述する。｛ から } までの処理を繰り返す。
let i = 0;
繰り返いをカウントするための変数を定義し、その初期値を設定する。
この場合、変数 i を定義し、初期値に 0 を設定している。
i < 10;
繰り返しの条件を設定する。
この場合、変数 i が 10 未満まで繰り返す。（0 から 9 までの10回）
i++
1回処理を終了後に変数の増減を記述する。
++ はインクリメント演算子、「i = i + 1」 と同じ。
※変数や演算子、条件式等は別の機会に説明します。
// [LED点滅]ボタンをクリック → LEDを10回点滅
// ※forステートメントを使用した場合
$("#led-blink").click(async function() {
for (let i = 0; i < 10; i++) {
led.on();
await obniz.wait(500); // 500m秒処理を停止
led.off();
await obniz.wait(500); // 500m秒処理を停止
}
});