プログラムを変えてみよう

サンプルプログラムでは、赤色のLEDを操作することができないので、赤色のLEDを操作するプログラムを書き加えてみましょう。

操作ボタンの追加（HTML）

まずはHTMLで赤色のボタンを追加します。

黄色のボタンのHTML

<div class="yellow_btn d-flex flex-column">
  <button class="btn btn-warning m-1" id="yellow_on">ON</button>
  <button class="btn btn-warning m-1" id="yellow_off">OFF</button>
</div>

の下に、以下のコードをコピーして追加します。

<div class="red_btn d-flex flex-column">
  <button class="btn btn-danger m-1" id="red_on">ON</button>
  <button class="btn btn-danger m-1" id="red_off">OFF</button>
</div>

CSSはBootstrapと呼ばれるものを読み込んで使用しています。
たとえば、btn-dangerというクラス名はボタンを赤色にするためのクラス名です。興味がある人はリファレンスを参照して好きなデザインに変更してみてください。

動きの追加（JavaScript）

次に、このボタンが押されたときに赤色LEDのON/OFFを操作できるようにします。

jQueryではonというidが押されたときに何かしたいときにこんな風に書くことができます。

$("#on").on("click",function(){
  // on pressed
})

先ほど追加した赤色のボタンには、それぞれred_onとred_offというidがつけられているので、ボタンのONが押されたらLEDをONに、OFFが押されたらLEDをOFFにするのはこのように書けます。

$('#red_on').click(function () {
    light.red.on();
});

$('#red_off').click(function () {
    light.red.off();
});

上記のプログラムを緑色と黄色のプログラムの下(サンプルプログラムの以下の部分の下)に追加し、実行してみてください。

$('#yellow_off').click(function () {
    light.yellow.off();
});

以下のような画面になり、赤色のボタンで赤色LEDを操作できれば成功です。

操作ボタンの追加（HTML）

動きの追加（JavaScript）

タイトル