【独学JavaScript入門㉓】onclick

onclickを使用するとHTMLで作成したボタンを押した時に「イベント処理」を実行することができます。以下のHTMIファイルを実行してみます。ダウンロードではなく「test」をクリック(スマホならタッチ)すると以下のソースコードを実行することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>TECH FARM</title>
</head>
<body>
<input type="button" value="click here" id="btn" onclick="alert('OK')";>

</body>
</html>

<!--右が切れたら左にスワイプしてください-->

ファイルを実行すると「click here」と表示されたボタンが作成されるのでクリックしてみてください。

アラートダイアログボックスに「OK」表示されます。

このソースコードは処理も含めて全てをHTMLで記述していますが、一部記述をJavaScriptで行ってみます。解説は後ほどさせて頂きます。
<script>内に関数を追加して、onclickのところにclickHandlerを記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>TECH FARM</title>
</head>
<body>
<input type="button" value="click here" id="btn" onclick="clickHandler()";>
	<script>
	
		function clickHandler() {
			alert('OK');
		}	
		
	</script>
</body>
</html>

<!--右が切れたら左にスワイプしてください-->

実行結果は先ほどの「test」と同じです。

「clickHandler」は「イベントハンドラ」の一種です。イベントハンドラはイベントを取り扱う人という意味です。

イベントハンドラは長いコマンドを書くのではなく「押された」という検出だけを行う機能で今回の場合はonclickでボタンをクリックされたことを検出すると<script>内の「clickHandler関数」が実行されます。最初のソースコードのようにonclickにコマンドを記載しても良いのですが、処理が長い場合は1行に記載するのは大変ですので、押されたことだけをclickHandlerで検出してscript内で関数化して処理を行った方がスマートです。

JavaScript入門一覧に戻る