JavaScript で変数に関数を割り当てる
この記事では、宣言された関数を変数に割り当て、関数にパラメーターが含まれているかどうかを確認する方法について説明します。変数に関連付けられた関数は、任意の値を返し、その値を変数に格納できます。割り当てられた変数を使用して、関数を何度でも呼び出すこともできます。
var variable_name = function functionName() {};
HTML で JavaScript を使用して変数に関数を割り当てる例
ユーザーが指定した値が偶数か奇数かを識別する関数 checkValue
を割り当てます。この関数は、ユーザーが入力に値を挿入して submit
ボタンを押すたびにトリガーされます。その関数を呼び出して、value is even
または value is odd
であることを示すアラートボックスを表示する必要があります。
<!DOCTYPE html>
<html>
<head>
<title>
HTML | Assign Function to Variable Example
</title>
<script type="text/javascript">
</script>
</head>
<body>
<h2>Hi Users Check your choosen value is a even or odd.</h2>
<form id="form" onsubmit="return false;">
<input type="text" id="userInput" maxlength="1" placeholder="Enter any number" />
<input type="submit" onclick="checkValue();" />
</form>
<script>
// function to check value is even or odd
var checkValue = function() {
var givenValue = document.getElementById("userInput").value;
if(givenValue % 2 == 0){
alert(givenValue+" is even")
}
else {
alert(givenValue+" is odd")
}
}
</script>
</body>
<html>
上記の HTML
ページソースでは、ユーザーから整数値を取得するための単純な入力フォームタイプの数値を確認できます。また、値を送信して機能を続行するための submit
ボタンがあります。
ここでは、DoctypeHTML で JavaScript
ステートメントを使用するために必要な <script>
タグを確認できます。これらのタグで宣言された変数 checkValue
に関数を割り当てました。
この関数には、変数 givenValue
にユーザー指定の値が含まれています。次のステップでは、剰余演算子(%
)を使用した条件ステートメントを使用して、指定された値の余りが 2
に等しいかどうかを確認しました。
次のステップでは、function()
は、条件に基づいて、given value is even
または given value is odd
を含むアラートボックスをユーザーに表示するだけです。
与えられた HTML
コードを調べます
コードを明確に理解するには、以下のすべての手順に従ってください。
var variable_name = function functionName() {};
-
メモ帳またはその他のテキスト編集ツールを使用してテキストドキュメントを作成します。
-
指定されたコードを作成されたテキストファイルに貼り付けます。
-
拡張子
.html
でそのテキストファイルを保存し、デフォルトのブラウザで開きます。 -
値を挿入するための入力フォームと
submit
ボタンが表示されます。そのボタンを使用して、値を確認できます。
JavaScript で変数に関数を割り当てる別の方法
以下に示すように、同じ結果が得られます。パラメータを使用して変数に関数を割り当て、値を渡し、値を確認し、条件付きでステートメントを返します。
var checkEvenOdd =
function(value) {
// will check passed value
if (value % 2 == 0) {
return value + ' is even'
} else {
return value + ' is odd'
}
}
console.log(checkEvenOdd(2))
出力:
2
上記の例では、パラメータ関数として整数値を渡さなければならない関数が割り当てられた checkEvenOdd
は、指定された if
条件でその値をチェックし、文字列を返します。次のステップでは、関数 checkEvenOdd()
が console.log()
で呼び出され、結果が表示されます。
関連記事 - JavaScript Function
- JavaScript Get 関数名
- JavaScript it() 関数
- JavaScript インライン関数と定義済み関数の違い
- JavaScript オプション関数パラメータ
- JavaScript で __dopostback() を使用する
- JavaScript における => の意味