タイミングとなるイベント

JavaScriptの起動タイミングとなるイベント

  • 多くの場合、JavaScriptのプログラムを動かしたいのは、ページが読み込まれたときではなく、画面上に配置されたボタンがクリックされたときなどのタイミングです
  • そうしたタイミングでプログラムを実行するには、イベントという仕組みを使います

ボタンがクリックされたとき

  • ボタンがクリックされたときに、JavaScriptのプログラムを動かす
イベント(event)
  • プログラムを実行したいときには、「イベント」という仕組みを使います
  • 状態の変化を伝える事象のこと

f:id:web-0220:20171217225641p:plain

ボタンを配置する
  • button要素を記述
  • onclickイベントを設定する
  • HTMLの記述を「" ダブルクォート」、JavaScriptの記述を「' シングルクォート」で囲む
<body>
<h1>ボタンのクリックでメッセージを表示する例</h1>
<button onclick="alert('ボタンが押されました。');">押してください</button>
</body>

f:id:web-0220:20171217230341p:plain

関数を定義する
  • 長い命令文または同じ命令文の繰り返しを、関数にまとめる
<script>
function btnclick(){
  alert('ボタンが押されました');
}
</script>
</head>
<body>
<h1>ボタンのクリックでメッセージを表示する例</h1>
<button onclick="btnclick()">押してください</button>
</body>

関数を定義する

  • 関数を定義する(defineする)
  • 「funnction」という表記を使って、関数内にまとめて命令する記述のこと
  • 関数名は、自由に命名できます(わかりやすい名前にすること)

関数を実行する

  • ボタンがクリックされたときに、関数「btnclick()」が実行されます

求職者支援訓練 フェリカテクニカルアカデミー