HOWTO · jQuery
jQuery 전역 변수
이 자습서는 jQuery에서 전역 변수를 만드는 방법을 보여줍니다.
이 페이지의 내용
이 자습서는 jQuery에서 전역 변수를 만드는 방법을 보여줍니다.
jQuery 전역 변수
전역 변수는 함수 외부에서 선언되며 jQuery의 모든 함수에서 사용할 수 있습니다. 함수 외부에서 선언된 변수는 전역 범위를 가지며 어디에서나 액세스할 수 있습니다.
jQuery에서 전역 변수를 선언하는 두 가지 방법이 있습니다.
- 값을 초기화하지 않고
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를 할당했습니다. 이 경우 변수와 값은 모두 전역적입니다.
출력을 참조하십시오.
이제 두 번째 방법에 대한 예를 살펴보겠습니다.
<!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>
보시다시피 전역 변수를 기본값으로 초기화했으므로 시스템이 입력에서 값을 찾을 수 없으면 전역 값을 사용합니다. 출력을 참조하십시오.
