JavaScript で変数に関数を割り当てる

Muhammad Muzammil Hussain 2023年10月12日
  1. HTML で JavaScript を使用して変数に関数を割り当てる例
  2. 与えられた HTML コードを調べます
  3. JavaScript で変数に関数を割り当てる別の方法
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 Variable