【第1-3講】サンプルの修正(3)

2020年7月4日やってみよう

直ってないところ、分かったかな？

うーん、むずかしいや。

追加したプログラムの中に、まだ「on」のまま残っているところがあるよ。

ここかな？

(85行目～)
$(“#on“).click(function() {
led.green.blink();
led.yellow.blink();
led.red.blink();
});

そうだよ。
そこが「on」のままだから、うまく動かないんだよ。
まずは、プログラムを少し理解りかいしようか。
[LED ON]ボタンを押したらどうなるかな？

あれー、こっちで点滅するね。

[LED ON]ボタンの定義ていぎはこうだね。

(38行目)
<button class=”btn btn-primary” id=”on”>LED ON</button>

「id」（識別子しきべつし）は「on」で、この「on」という識別子の動作は、下のほうにあるよ。

(73行目～)
$(“#on“).click(function() {
led.green.on();
led.yellow.on();
led.red.on();
});

$(“#on”)というのは「on」という識別子のもので、それがclick（クリック）されたら、function（プログラムのかたまりで、その後の {　 } の中）を実行するということが、ここに書いてあるんだ。

{　}の中は、

led.green.on();
led.yellow.on();
led.red.on();

なのに、点滅（blink）したよ。

それは、その下の追加したところをよく見てごらん。

(85行目～)
$(“#on“).click(function() {
led.green.blink();
led.yellow.blink();
led.red.blink();
});

「on」が残ってるね。

ここも「on」だから、こっちが[LED ON]ボタン時に実行されるんだ。だから、おかしくなったんだよ。
この「on」を直さないとね。

どうすれば、いいんだろ・・・

ボタンの定義をもう一度よく見てごらん。

(40行目)
<button class=”btn btn-primary” id=”緊急事態“>LED 緊急事態</button>

ここのidを「on」に直せばいいのか。

やはり、小学生にはまだ難しいか・・
それじゃあ、[LED ON]ボタンを押しても点滅のままだよ。

プログラムのほうを直すんだよ。

（40行目:ボタン定義）
<button class=”btn btn-primary” id=”緊急事態“>LED 緊急事態</button>

（85行目～:プログラム部分）
$(“#on“).click(function() {
led.green.blink();
led.yellow.blink();
led.red.blink();
});

ボタン定義とプログラムで、idが同じじゃないから、うまく動かないんだよ。

分かった！こうすれば、いいんだね。

（ボタン定義）
<button class=”btn btn-primary” id=”緊急事態“>LED 緊急事態</button>

（プログラム部分）
$(“#緊急事態“).click(function() {
led.green.blink();
led.yellow.blink();
led.red.blink();
});

良くできました。
（まあ、本当は、idは漢字でなく英数字がいいけど・・・）

【クイズ1-2の答】

85行目の「on」を「緊急事態」にする。

LEDサンプルの修正(2)

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="/css/starter-sample.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script
      src="https://unpkg.com/obniz@3.6.1/obniz.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div id="obniz-debug"></div>

    <!--文字の表示-->
    <div class="wrap">
      <div class="print">
        <h3 class="text-center">Print words on obniz</h3>
        <div>
          <input type="text" id="text" value="Hello World" placeholder="Input in freely">
          <button class="btn btn-primary" id="showtime">Print on obniz</button>
        </div>
      </div>

    <!--ダイヤルスイッチの状態を表示-->
      <div class="switch">
        <h3 class="text-center"> Swtich </h3>
        <span id="print">undefined</span>
      </div>
    
    <!--LEDのON/OFFボタン-->
      <div class="led">
        <h3 class="text-center">Turning on a LED</h3>
        <button class="btn btn-primary" id="on">LED ON</button>
        <button class="btn btn-primary" id="off">LED OFF</button>
        <button class="btn btn-primary" id="緊急事態">LED 緊急事態</button>
        <dl>
          <dt>Demo Pin assign</dt>
          <dd>- io0:gnd</dd>
          <dd>- io1:green</dd>
          <dd>- io2:yellow</dd>
          <dd>- io3:red</dd>
          <dd>- Switch state will be printed on browser</dd>
        </dl>
      </div>
    
    </div>

    <script>
      var obniz = new Obniz("OBNIZ_ID_HERE");

      obniz.onconnect = async function() {

        var led = obniz.wired("Keyestudio_TrafficLight", {gnd:0, green:1, yellow:2, red:3});
        obniz.display.clear();
        obniz.display.print("Hello World");

        obniz.switch.onchange = function(state) {
          $("#print").text(state);
          obniz.display.clear();
          obniz.display.print(state);
        };

        $("#showtime").on("click", function() {
          obniz.display.clear();
          obniz.display.print($("#text").val());
        });

        $("#on").click(function() {
          led.green.on();
          led.yellow.on();
          led.red.on();
        });

        $("#off").click(function() {
          led.green.off();
          led.yellow.off();
          led.red.off();
         });

        $("#緊急事態").click(function() {
          led.green.blink();
          led.yellow.blink();
          led.red.blink();
         });

      };
    </script>
  </body>
</html>

信号機サンプルの実行

やったー。できたよ！
他の部品も使ってみたいよ。

あの～、そろそろ、夕ご飯の時間ですけど・・・

えー、もっとやりたいのに・・・

まあ、とりあえず、最初はこんなところにしておこう。
少しずつ、HTML と JavaScript を覚えていこうね。

【第1-3講】サンプルの修正(3)

【クイズ1-2の答】

LEDサンプルの修正(2)

コメントを残す コメントをキャンセル

【第1講：疑問】LEDって何？

【第1講：解説】信号機

【第1-2講】サンプルの修正(2)

【第1-1講】サンプルの修正(1)

コメントを残すコメントをキャンセル