前のパートに戻る 完了して次のパートへ  

  3-1 キー入力のイベントバインド

javascriptの実装


いよいよメインの動きの実装になります。

jQueryを使って実装していきましょう。

▼ステップ

 3-1.キー入力のイベントバインド
 3-2.入力文字の判定
 3-3.次の問題の表示
 3-4.最後の問題の処理 

準備


codepenでjQueryを使えるようにしましょう。

  1. JS枠の歯車アイコンをクリック
  2. 検索欄に"jquery"を入力して、一番上にくるjQueryを選択(クリック)
  3. 「Save&Close」をクリック

3-1.キー入力のイベントバインド


$(document)=画面全体において、キーボードが入力された(キーが押された)というアクションに対してイベントを付与します。

「キーが押された時」を意味する keypress に対してイベントをバインド(定義)をしましょう。

【参考】 keyPressとkeyDownとkeyUpイベントって結局何が違うんだ

その1: 何のキーが押されたかをalertを出す

以下のコードをJS欄に書いてみましょう。キーが押されたときにそのイベント(引数 e)を取得し、そのイベントのキー名をアラートで表示しています。

書いたら一度表示結果(abcなど)をクリックして、適当にアルファベットをタイピングしてみましょう。

「key: a」などのアラートが出ていればOKです。

議論
0 質問
このコースの評価は?