Globale jQuery-Variable
Dieses Tutorial zeigt, wie Sie eine globale Variable in jQuery erstellen.
Globale jQuery-Variable
Eine globale Variable wird außerhalb einer Funktion deklariert und kann in jeder Funktion in jQuery verwendet werden. Die außerhalb der Funktion deklarierte Variable erhält den Geltungsbereich global und kann überall angesprochen werden.
Es gibt zwei Methoden, um eine globale Variable in jQuery zu deklarieren:
- Deklarieren Sie eine Variable außerhalb einer Funktion mit dem Schlüsselwort
var, ohne den Wert zu initialisieren. - Deklarieren Sie eine Variable ohne das Schlüsselwort
varund initialisieren Sie einen Wert dafür. Es gibt den Gültigkeitsbereich der globalen Variablen.
Die Syntax zum Deklarieren einer globalen Variablen lautet:
var globalVariable = value;
// The globalVariable can be used here
function Fun() {
// The globalVariable can also be used here
}
Hier ist die globalVariable der Variablenname, und der Wert wird zugewiesen, wenn wir die Variable initialisieren wollen.
Versuchen wir ein Beispiel für die erste Methode:
<!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>
Wir haben zuerst die globalVariable mit dem Schlüsselwort var deklariert und ihr dann in der Funktion einen value zugewiesen. Die Variable und der Wert sind in diesem Fall beide global.
Siehe die Ausgabe:
Versuchen wir nun ein Beispiel für Methode zwei:
<!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>
Ebenso initialisieren wir eine globale Variable ohne das Schlüsselwort var mit einem Wert ausserhalb einer Funktion. Beide Variablen und ihr Wert sind global.
Sehen Sie, dass die Ausgabe ähnlich ist:
Versuchen wir ein weiteres Beispiel, um die Verwendung einer globalen Variablen zu zeigen:
<!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>
Wie wir sehen können, haben wir globale Variablen als Standardwerte initialisiert. Wenn das System also keine Werte aus der Eingabe finden kann, verwendet es die globalen Werte. Siehe die Ausgabe:
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