LANG SELRCT

コードを書く場所についてはこちら

2018年6月10日日曜日

ブラウザ上で押されたキーに応じた処理を実行する


ブラウザ上でキーボードの左矢印「←」と右矢印「→」が押された時にそれぞれアラートを出してみる




コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<body>
  <script>
    window.onkeyup = window_keyup;
    
    var key_obj = {
      37: "左",
      39: "右"
    }    
    
    function window_keyup(e) {
      var key_code = e.keyCode;
      alert(key_obj[key_code]);
    }
  </script>
</body>
</html>

意訳
 



キーを押して離したらwindow_keyupを実行する

オブジェクトを用意しておく
37なら左
39なら右


この機能がやること
押されたキーのコードを取得して
key_objから見つけてアラートに出す







ifでやる場合

index.html
<!DOCTYPE html>
<html>
<body>
  <script>
    window.onkeyup = window_keyup;  
    
    function window_keyup(e) {
      var key_code = e.keyCode;
      if(key_code === 37){
        alert("左");
      }else if(key_code === 39){
        alert("右");
      }
    }
  </script>
</body>
</html>

意訳
 



キーを押して離したらwindow_keyupを実行する

この機能がやること
押されたキーのコードを取得して
37なら

39なら









Switchでやる場合

index.html
<!DOCTYPE html>
<html>
<body>
  <script>
    window.onkeyup = window_keyup;
        
    function window_keyup(e) {
      var key_code = e.keyCode;
      switch(key_code){
        case 37:
          alert("左");
          break;
        case 39:
          alert("右");
          break;
      }
    }
  </script>
</body>
</html>

意訳
 



キーを押して離したらwindow_keyupを実行する

この機能がやること
押されたキーのコードを取得して
処理を分ける
37の場合


39の場合