WEBアプリをJavaScriptでつくる準備

投稿日: , 投稿者: かの（メンター）

JavaScript の復習

まずは JavaScript を動かす基本を確認しましょう。
ラズパイでもWindowsでも構わないので、どこかのフォルダに２つのファイル（test.html と test.js）を作ります。

test.html

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="utf-8">
    <title>キーボード入力をトリガーにするサンプルコード</title>
    <script src="test.js"></script>
</head>
<body>
  <h1>キーボード入力をトリガーにするサンプルコード -JavaScript-</h1>
  <p>コード言語はJavaScript。[w][s]もしくは何かキーを入力してください。</p>
  <!-- ここにメッセージ返答を表示する -->
  <div id="ReturnMessageHere"></div>
  <!-- ブラウザを起動したら自動実行するコード -->
  <script type="text/javascript">KanoAutoStart();</script>

</body>
</html>

test.js

"use strict"; // 厳格な宣言モード

function KanoAutoStart() {
  var messageReturn = "<h2>この行のメッセージはJavaScriptで表示しています</h2>";

  document.addEventListener( 'keydown', function(event) {
    if ( event.key === 'w' ) {
        messageReturn = "[w]キーが押されました😊";
    } else if ( event.key === 's' ) {
        messageReturn = "[s]キーが押されました🍎";
    } else {
        messageReturn = event.key;
    }
    document.getElementById("ReturnMessageHere").innerHTML = messageReturn;
  });

  console.log("test.js; KanoAutoStart()", messageReturn);
  document.getElementById("ReturnMessageHere").innerHTML = messageReturn;
}

実行してみよう

[test.html]をWEBブラウザで表示します。下図のような画面が表示されたら何かキーを押すと画面左下に押したキーが表示されます。

次のアクション

WEBアプリで[W][S]キーの入力を検知しました。
[W]キーを入力したらラズタンクを前進させたい。どうやってNode-REDのURL命令「http://localhost:1880/forward」を実行するのでしょうか？

コメントを残す