JavaScriptで無名関数を利用するコードを紹介します。
概要
JavaScriptで一度しか参照しない関数は関数名をつけずに定義することができます。これを無名関数と呼びます。無名関数の用途の多くはコントロールやクラスなどのイベントハンドラ/イベントリスナでの利用が多いです。この記事では、JavaScriptの無名関数の記述について紹介します。
書式
無名関数の書式は以下となります。
function (引数){
(関数の実装)
}
プログラム例
プログラム1
コード
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function init()
{
var button = document.getElementById("Button1");
button.onclick = function (event) {
var elem = document.getElementById("output");
elem.innerText = "ボタンがクリックされました。";
}
}
</script>
</head>
<body onload="init();">
<input id="Button1" type="button" value="button" />
<div id="output"></div>
</body>
</html>
解説
getElementById()メソッドでボタンオブジェクトを取得し、ボタンオブジェクトのonclickイベントにイベントハンドラ/イベントリスナを設定しています。clickイベントハンドラを無名関数で定義しています。
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
[button]をクリックすると、ボタンがクリックされた旨のメッセージが表示されます。
プログラム2
コード
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function init()
{
var button = document.getElementById("Button1");
button.addEventListener('click', function () {
var elem = document.getElementById("output");
elem.innerText = "ボタンがクリックされました。";
}
, false);
}
</script>
</head>
<body onload="init();">
<input id="Button1" type="button" value="button" />
<div id="output"></div>
</body>
</html>
解説
getElementById()メソッドでボタンオブジェクトを取得し、ボタンオブジェクトのaddEventListenerメソッドを呼び出して、clickイベントにイベントハンドラ/イベントリスナを設定しています。clickイベントハンドラを無名関数で定義しています。
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
[button]をクリックすると、先のプログラムと同様に、ボタンがクリックされた旨のメッセージが表示されます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2017-09-09
作成日: 2015-10-08
