HOWTO · jQuery
jQuery グローバル変数
このチュートリアルでは、jQuery でグローバル変数を作成する方法を示します。
このチュートリアルでは、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 を割り当てました。 この場合、変数と値は両方ともグローバルです。
出力を参照してください。
次に、方法 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 キーワードを使用せずにグローバル変数を関数外の値で初期化します。 変数とその値はどちらもグローバルです。
出力が似ていることを確認します。
グローバル変数の使用法を示す別の例を試してみましょう。
<!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>
ご覧のとおり、グローバル変数をデフォルト値として初期化したので、システムが入力から値を見つけられない場合、グローバル値が使用されます。 出力を参照してください。
