jQuery グローバル変数

Sheeraz Gul 2024年2月15日

jQuery jQuery Variable

このチュートリアルでは、jQuery でグローバル変数を作成する方法を示します。

jQuery グローバル変数

グローバル変数は関数の外で宣言され、jQuery の任意の関数で使用できます。関数の外で宣言された変数はスコープ global を取得し、どこからでもアクセスできます。

jQuery でグローバル変数を宣言するには、次の 2つの方法があります。

値を初期化せずに、var キーワードを使用して関数の外で変数を宣言します。
var キーワードなしで変数を宣言し、その値を初期化します。これにより、グローバル変数のスコープが与えられます。

グローバル変数を宣言する構文は次のとおりです。

var globalVariable = value;
// The globalVariable can be used here
function Fun() {
// The globalVariable can also be used here
}

ここで、globalVariable は変数名で、value は変数を初期化するときに割り当てられます。

最初の方法の例を試してみましょう。

<!DOCTYPE html>
<html lang= "en" >
<head>
    <meta charset= "utf-8" >
    <script type = "text/javascript" src="https://code.jquery.com/jquery-3.6.0.js" ></script>
    <title> jQuery global variable </title>
    <script>
    // global variable
    var globalVariable;
    $(function(){
	    globalVariable = "Global Variable";
        // use globalVariable
        alert(globalVariable);
        // local variable
        var localVariable = "Local Variable";
        $("#Demobutton").click(function(){
            // Use both local and globalVariable
            alert(globalVariable+" is added to "+localVariable);
            return false;
        });
    });

    </script>
</head>
<body>
    <button id="Demobutton"> Click Here</button>
</body>
</html>

最初に var キーワードで globalVariable を宣言し、関数で value を割り当てました。この場合、変数と値は両方ともグローバルです。

出力を参照してください。

jQuery グローバル変数

次に、方法 2 の例を試してみましょう。

<!DOCTYPE html>
<html lang= "en" >
<head>
    <meta charset= "utf-8" >
    <script type = "text/javascript" src="https://code.jquery.com/jquery-3.6.0.js" ></script>
    <title> jQuery global variable </title>
    <script>
    // global variable
    globalVariable = "Global Variable";
    $(function(){
        // use globalVariable
        alert(globalVariable);
        // local variable
        var localVariable = "Local Variable";
        $("#Demobutton").click(function(){
            // Use both local and globalVariable
            alert(globalVariable+" is added to "+localVariable);
            return false;
        });
    });

    </script>
</head>
<body>
    <button id="Demobutton"> Click Here</button>
</body>
</html>

同様に、var キーワードを使用せずにグローバル変数を関数外の値で初期化します。変数とその値はどちらもグローバルです。

出力が似ていることを確認します。

jQuery グローバル変数

グローバル変数の使用法を示す別の例を試してみましょう。

<!DOCTYPE html>
<html>
<head>
    <meta charset= "utf-8" >
    <script type = "text/javascript" src="https://code.jquery.com/jquery-3.6.0.js" ></script>
    <title> jQuery global variable </title>
	<style>
	#Main {
	border: 5px solid green;
	background-color : lightgreen;
	height: 10%;
	width:  20%;
    }
	</style>
    <script>
    // Global Variable means the default value
    var DefaultNumber1 = 10;
    var DefaultNumber2 = 40;
    function sum() {
    // check if number 1 and number 2 are entered or not
        if($("#Number1").val() & $("#Number2").val()) {
            // change the global variable value based on the input
            DefaultNumber1 = Number(document.getElementById("Number1").value);
            DefaultNumber2 = Number(document.getElementById("Number2").value);
        }
        var MultiplyResult = DefaultNumber1 * DefaultNumber2;
        var PrintMessage = "Multiplication of given numbers is : " + MultiplyResult;
        // display the result
        document.getElementById("PrintResult").innerHTML = PrintMessage;
    }
    </script>
</head>
<body >
<div id = "Main">
    <h1> Multiplication of two numbers </h1>
    <p> Enter two numbers to perform multiplication, if any number is not entered, the multiplication will be performed based on the default values(global variable values 10 and 40).
    <br>
    <b>Enter number 1: </b>
    <input type="number" id="Number1">
    <br><br>
    <b>Enter number 2: </b>
    <input type="number" id="Number2">
    <br><br>
    <button onclick="sum()"> Multiply </button>
    <p id="PrintResult" "></p>
</div>
</body>
</html>

ご覧のとおり、グローバル変数をデフォルト値として初期化したので、システムが入力から値を見つけられない場合、グローバル値が使用されます。出力を参照してください。

jQuery グローバル変数 Multiply

著者： Sheeraz Gul

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

LinkedIn Facebook