JavaScript キーボードのイベントを取得

プログラム上で、何かキーが入力されたか事を知りたかった！！！
keydownのイベントが広範囲で取得できるので、今回はこれが一番！
addEventListener



キーイベントは、
keydown,keypress,keyup
があります。



ポイント
-----------------------------------------------------------------------------
   document.addEventListener('keydown', (event) => {
         　var keyName = event.key;
            console.log(`keydown:${keyName}`);
   });
-----------------------------------------------------------------------------

コーディング
---------------------------------------------------------------

<!DOCTYPE html><html>  <head>

    <script>

     document.addEventListener('keydown', (event) => {

          var keyName = event.key;                 console.log(`keydown:${keyName}`); if( keyName=="Shift")     console.log("SHT") if( keyName=="Escape")   console.log("*ESC")       });    </script>

  </head>  <body>  </body></html>

---------------------------------------------------------------

結果
---------------------------------------------------------------

new.html?1569103019592:13 keydown:Tab
new.html?1569104105087:8 keydown:ArrowUp
new.html?1569104105087:8 keydown:ArrowDown
new.html?1569104105087:8 keydown:Shift
new.html?1569104105087:10 SHT
new.html?1569104105087:8 keydown:Escape
new.html?1569104105087:11 *ESC
---------------------------------------------------------------

リンク元
https://techacademy.jp/magazine/19613


ソース
<!DOCTYPE html>
<html>
  <head>
    <script>
      document.addEventListener('keydown', (event) => {
         var keyName = event.key;

         if (event.ctrlKey) {
           console.log(`keydown:Ctrl + ${keyName}`);
         } else if (event.shiftKey) {
           console.log(`keydown:Shift + ${keyName}`);
         } else {
           console.log(`keydown:${keyName}`);
         }
       });

       document.addEventListener('keypress', (event) => {
         var keyName = event.key;

         if (event.ctrlKey) {
           console.log(`keypress:Ctrl + ${keyName}`);
         } else if (event.shiftKey) {
           console.log(`keypress:Shift + ${keyName}`);
         } else {
           console.log(`keypress:${keyName}`);
         }
       });
    </script>
  </head>
  <body>
  </body>
</html>


結果

new.html?1569103019592:13 keydown:F12
new.html?1569103019592:13 keydown:j
new.html?1569103019592:25 keypress:j
new.html?1569103019592:13 keydown:k
new.html?1569103019592:25 keypress:k
new.html?1569103019592:13 keydown:p
new.html?1569103019592:25 keypress:p
new.html?1569103019592:13 keydown:p
new.html?1569103019592:25 keypress:p
new.html?1569103019592:13 keydown:p
new.html?1569103019592:25 keypress:p
new.html?1569103019592:13 keydown:ArrowUp
new.html?1569103019592:13 keydown:ArrowLeft
new.html?1569103019592:13 keydown:ArrowDown
new.html?1569103019592:13 keydown:ArrowUp
new.html?1569103019592:13 keydown:ArrowDown
new.html?1569103019592:13 keydown:ArrowRight
new.html?1569103019592:13 keydown:ArrowDown
new.html?1569103019592:13 keydown:ArrowLeft
new.html?1569103019592:13 keydown:ArrowUp
new.html?1569103019592:13 keydown:ArrowRight
new.html?1569103019592:13 keydown:ArrowDown
new.html?1569103019592:13 keydown:ArrowLeft
new.html?1569103019592:13 keydown:ArrowUp
4new.html?1569103019592:13 keydown:ArrowLeft
2new.html?1569103019592:11 keydown:Shift + Shift
3new.html?1569103019592:9 keydown:Ctrl + Control
new.html?1569103019592:13 keydown:f
new.html?1569103019592:25 keypress:f
18new.html?1569103019592:9 keydown:Ctrl + Control
new.html?1569103019592:13 keydown:ArrowUp
2new.html?1569103019592:9 keydown:Ctrl + Control
new.html?1569103019592:13 keydown: 
new.html?1569103019592:25 keypress: 
new.html?1569103019592:13 keydown:ArrowUp
2new.html?1569103019592:13 keydown:ArrowDown
2new.html?1569103019592:13 keydown:ArrowUp
new.html?1569103019592:13 keydown:ArrowRight
new.html?1569103019592:13 keydown:ArrowLeft
new.html?1569103019592:13 keydown:ArrowRight
new.html?1569103019592:13 keydown:ArrowLeft
new.html?1569103019592:13 keydown:p
new.html?1569103019592:25 keypress:p
new.html?1569103019592:13 keydown:ArrowRight
new.html?1569103019592:13 keydown:ArrowLeft
3new.html?1569103019592:13 keydown:ArrowRight
new.html?1569103019592:13 keydown:ArrowDown
new.html?1569103019592:13 keydown:ArrowUp
new.html?1569103019592:13 keydown:ArrowLeft
new.html?1569103019592:13 keydown:ArrowDown
new.html?1569103019592:13 keydown:ArrowRight
new.html?1569103019592:13 keydown:ArrowDown
new.html?1569103019592:9 keydown:Ctrl + Control
new.html?1569103019592:11 keydown:Shift + Shift
new.html?1569103019592:13 keydown:p
new.html?1569103019592:25 keypress:p
new.html?1569103019592:13 keydown:Tab
new.html?1569103019592:13 keydown:q
new.html?1569103019592:25 keypress:q
new.html?1569103019592:13 keydown:Escape
new.html?1569103019592:13 keydown:v
new.html?1569103019592:25 keypress:v
new.html?1569103019592:13 keydown:b
new.html?1569103019592:25 keypress:b
2new.html?1569103019592:13 keydown:Escape
new.html?1569103019592:13 keydown:Tab
new.html?1569103019592:13 keydown:Escape
2new.html?1569103019592:13 keydown:Tab
2new.html?1569103019592:13 keydown:Alt
new.html?1569103019592:13 keydown:Zenkaku
new.html?1569103019592:13 keydown:NonConvert
new.html?1569103019592:13 keydown:Hiragana
new.html?1569103019592:13 keydown:Convert
2new.html?1569103019592:11 keydown:Shift + Shift
new.html?1569103019592:13 keydown:ArrowUp
new.html?1569103019592:13 keydown:p
new.html?1569103019592:25 keypress:p
new.html?1569103019592:13 keydown:ArrowRight
new.html?1569103019592:13 keydown:Tab

python 文字列 (python vs JavaScript)

pyhtonの文字列操作

まとめ（python vs JavaScript）


・型変換　似ているね

パイソン
 　int(), str() 

JavaScript
　Number(), String()



※以下は順番に　パイソン、JavaScript

・変換は同じで、replaceでいきましょ！

・長さは、len()関数、length（プロパティか？）

・空白削除は、strip, trimではなくreplaceがよさげ（trimはブラウザ未対応あり）

・部分文字列は、スライスでいこう。書き方がちがうよ

・文字列検索は、find, indexOf　(　Ofの最初は大文字だよ,
　　　　　　　　　　　　　　　無い場合は、-1をどちらも返却しますよ　)


※型判定　type()関数, 　typeof　変数名
 長さ取得みたい〜



■長さは、len

>>> a="koba "
>>> a
'koba '
>>>
>>> len(a)
5

■部分文字列はスライスでやるよ

・開始インデックス:終了インデックスを指定します

>>> a

'koba '

>>> a[1:3]

'ob'

・先頭から２文字

>>> a

'koba ' ※わかりやすくスペースを全角にしました

>>> a[:2]

'ko'

・お尻から２文字

>>> a[-2:]

'a ' ※わかりやすくスペースを全角にしました

■検索(find)


>>> a="kobayashi yamada"
>>> a
'kobayashi yamada'

>>> a.find("koba")
0
>>> a.find("y")
4
>>> a.find("yo")
-1
>>> a.find("yamada")
10
>>> a.find("yama")
10

>>> a.find("yamada2")
-1

■置換(replace)

>>> a

'koba '

>>> a.replace("k","K")

'Koba '

■空白削除（タブ文字、改行（\r,\n））

   

>>> a

'koba '

>>> b= a.strip()

>>> b

'koba'

■データ型の判定

>>> intData = 12
>>> strData = "34"

>>> type( intData)
<type 'int'>
>>> type( strData )
<type 'str'>

>>> str( intData )
'12'
>>> int( strData )
34
>>>

最後に文字列結合は

プラス記号で結合できますよ

※パイソン、JavaScriptでは、ダブル、シングルクォートどちらも同じ扱いらしい

（エスケープ処理に違いがない）

JavaScriptもついでに解説

■長さ（プロパティなのか？）

var str = 'hello';

console.log( str.length );

> 5

■部分文字列（slice）

スライスでいくと、パイソンと同じ感じになりますね〜

var value = 'koba';

data = value.slice( 0,2 );

console.log( data );

data = value.slice( -2 );

console.log( data );

data = value.slice( 1,3 );

console.log( data );

> "ko"

> "ba"

> "ob"

■検索　(indexOf)

var value = 'koba yama';

data = value.indexOf("ba ");

console.log( data );

data = value.indexOf("y");

console.log( data );

data = value.indexOf("yama2");

console.log( data );

> 2

> 5

> -1

■置換(replace)

var value = 'koba '; 

data = value.replace("k", "K"); 

console.log( data ); 

> "Koba "

■スペースを取り除く

trimがあるが、ブラウザ未対応があるので、以下を参考に

var value = 'koba';

data = value.replace(/^\s+|\s+$/g,'');　　　（※正規表現でこのままで利用）

console.log( data );

> "koba"

■型変換

var value = 123

data = String(value);

console.log( typeof data );

console.log( data );

var value = '123';

data = Number(value);

console.log( typeof data );

console.log( data );

> "string"

> "123"

> "number"

> 123

※データ型の判定は、 typeof

おまけのパイソン

■文字列の繰り返し

>>> print "*" * 50

**************************************************

>>> a="koba "

>>> print a*3

koba koba koba 

※デバックで画面表示に使えるかもね