Updated April 20, 2023
Description to jQuery global variable
The jQuery global variable is a variable that is declared outside a function and which can be accessed from any function. The variable declared outside a function becomes a global variable and it gets the global scope, which means that the variable can be accessed in all the scripts and functions on a page.
Syntax:
var var_name = value;
// code here can use variable var_name
function Fun() {
// code here can also use variable var_name
}where –
- var_name – It specifies the name of the variable.
- value – It specifies some value used to initialize the global variable, which can be accessed anywhere in the program or page.
Note that we can declare a global variable in two ways, the first way is declaring a variable outside a function, and the second way is to assign a value to the variable without using a var keyword inside a function that means the variable automatically becomes a global variable.
How to working of the jQuery global variable?
The global variable has the global scope, it declares outside the function for example as “var a = 20”, the global variable “a” is now accessible anywhere in the program.
Example of jQuery global variable to show to access global variable –
Example #1
Code:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "utf-8" >
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery global variable </title>
<script>
// this is a global variable
var g_var = "This is a global variable.";
$(function(){
// since g_var is global, can use it here
alert(g_var);
// this is a local variable
var l_var = "This is a local variable.";
$("#btn").click(function(){
// here access to both the global scope and local scope variable.
alert(g_var+l_var);
return false;
});
});
</script>
</head>
<body>
<!-- Click on this button to see the change -->
<button id="btn"> Click to display global and local variable </button>
</body>
</html>An output of the above code is –
Once we click on the OK button, the output is –
Now, click on the second button and then click on the first button. This time the event will not generate and the alert message will not be displayed.
In the above code, the global variable declares outside the function. The declared and initialized global variable is accessing inside the first function in the alert message to display its value. In the second function, both global and local variables are displaying, as we can see in the output.
Example of jQuery global variable to show to access a global variable by using window object –
Example #2
Code:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "utf-8" >
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery global variable </title>
<script>
window.g_var = "This is a global variable.";
function fun1()
{
// here access to both the global scope variable.
document.write(window.g_var);
return false;
}
function fun2()
{
// here access to both the global scope variable.
document.write(window.g_var);
return false;
}
$(function() {
$("#btn").click(fun1);
$("#btn2").click(fun2);
});
</script>
</head>
<body>
<!-- Click on this button to see the change -->
<button id="btn"> Click to run fun1() function. </button>
<br><br>
<button id="btn2"> Click to run fun2() function. </button>
</body>
</html>An output of the above code is –
Once we click on the first button, the output is –
Now refresh the browser and then click on the second button, the output is –
In the above code, the global variable declares outside the function by using the window object which means the variable is declared as global and attach to the global object. The declared and initialized global variable by window object is accessing inside the fun1() function and fun2() function and displaying, as we can see in the output.
Example of jQuery global variable to show how to use or change global variable value based on the need –
Example #3
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery global variable </title>
<script>
var n1 = 20;
var n2 = 30;
function sum() {
// check first number and second number entered or not
if($("#fn").val() & $("#sn").val())
{
// Access and change n1 and n2
n1 = Number(document.getElementById("fn").value);
n2 = Number(document.getElementById("sn").value);
}
var res = n1 + n2;
var message = "Sum of 2 numbers is : " + res;
// result will display
document.getElementById("result").innerHTML = message;
}
</script>
</head>
<body >
<h1> Addition of two numbers
</h1>
<p> Enter first number and second number, if first number and second number are not entered then addition performs on default values(global variable values).
<br>
<b>Enter first number : </b>
<input type="number" id="fn">
<br><br>
<b>Enter second number : </b>
<input type="number" id="sn">
<br><br>
<button onclick="sum()"> Add </button>
<p id="result" style = "color:green; ">
</p>
</body>
</html>An output of the above code is –
Once we click on the Add button without entering the first and second number, the output is –
Now, refresh and enter the first and second numbers and click on the Add button.
In the above code, the form is created for the addition of two numbers. When we click the Add button, it calls to the sum() function. The sum() function first check whether the first and second number is entered or not, if any one of the number not entered then it performs the addition on global variables values are declared and initialized outside the function, which are accessing inside the fun1() function and fun2() function and display, as we can see in the output.
Conclusion
The global variable is declared outside a function and can be accessed from any function. The variable which is declared outside or inside the function with the window object also becomes a global variable.
Recommended Articles
This is a guide to jQuery global variable. Here we discuss the definition, syntax, parameters, and How to working of the jQuery global variable?. You may also have a look at the following articles to learn more –
