Variablen - Global und Lokal
JavaScript ist eine Skriptsprache, die sich in ihrer Grundstruktur nicht entschiedent von anderen Scriptsprachen unterscheidet. Als Kern stehen zur Entwicklung von Anwendungen unter anderem Variablen zur Verfügung, die als dynamischen Platzhalter dienen. Im Unterschied zu anderen Scriptsprachen sind JavaScript-Variablen relativ einfach zu handhaben, da sie automatisch spezifiziert werden und keine weiteren Attribute benötigen. Lediglich der Gültigkeitsbereich (Scope) einer Variable muss beachtet werden, dieser kann sich lokal und global definieren lassen.
Das Schlüsselwort var wird dazu genutzt, um Variablen zu definieren:
var variable = "Test";
Alternativ kann die Variable auch deklariert werden, die gängige Schreibweise ist aber die erst genannte:
variable = "Test";
Eine Variable dient grundsätzlich als Platzhalter und kann Werte wie Zeichen oder Zahlen aufnehmen und übergeben. Damit die Übergabe klappt, kommt es darauf an, wo die Variable im Code definiert wird:
- Globale Variablen können überall im Code verwendet werden
- Lokale Variablen können nur innerhalb eines Bereichs (z.B. eine Funktion) genutzt werden
Um den Bereich einer Variable zu definieren, kann in Funktionen var benutzt werden. Außerhalb von Funktionen sind Variablen immer global, unabhängig ob sie mit var deklariert werden oder nicht.
Ein Beispiel für globale Variablen:
variable1 = "Test1"; // Global
var variable2 = "Test2"; // Global
function funktion1() {
alert(variable1+", "+variable2);
}
funktion1();
// Ausgabe: Test1, Test2
In diesem Beispiel hat die Verwendung von var also keine Bedeutung.
Ohne das Schlüsselwort würde auch mit diesem Code eine globale Variable definiert werden:
function funktion1()
{ variable1 = "Test"; //Global
}
funktion1();
alert(variable1);
// Ausgabe: "Test"
Soll die Variable "variable1" nun lediglich innerhalb der Funktion "funktion1" gültig sein, kommt var zum Einsatz:
function funktion1()
{ var variable1 = "Test"; // Lokal
}
funktion1();
alert(variable1);
// Keine Ausgabe: "variable1" ist nicht definiert
Das bedeutet auch, dass eine Variable mit dem gleichen Namen sowohl lokal als auch global definiert werden könnte. Dies birgt die Gefahr, dass man den Überblick über die Variablen verliert. Daher sollte man bei der Deklaration von Variablen stets auf die Benennung und vorhandene Variablen achten. Hier die Situation, in der die lokale und globale Variable den gleichen Namen hat:
variable1 = "Test"; // Global
function funktion1()
{ var variable1 = "Test2"; // Lokal
alert(variable1); }
funktion1();
// Ausgabe: "Test2"
alert(variable1);
// Ausgabe: "Test"
Schließlich gilt das Verwenden von var auch für Verkettungen von Deklarationen. Durch Kommata können mehrere Variablen an einer Stelle definiert werden:
function funktion1()
{ var variable1 = "Test", variable2 = "Test2"; // Lokal
}
Bei komplexeren Anwendungen sind Gültigkeitsbereiche von Variablen sehr wichtig, weshalb die Verwendung von var gezielt geschehen sollte.
Anwendungsbeispiel Variablen Cursor-Position
Eine Grafik soll - abhängig von der Position der Maus ihre Eigenschaften Deckkraft, Größe und Position verändern. Dazu werden zwei Variablen benötigt, die die aktuelle Position des Cursors übergeben. Die Werte der beiden Variablen sollen zusätzlich im HTML-Inhalt ausgegeben werden.
1. Es beginnt mit dem Aufbau der erforderlichen Funktion, die mit dem Event mousemove verbunden wird. Dieses Event führt zu einer kontinuierlichen Abfrage der Position und ist deshalb für das geplante Vorhaben geeignet. Die neue Funktion wird direkt in dem document.ready-Block platziert.
$(document).ready(function(){
$(this).mousemove(function(event){
})
});
2. Im nächsten Schritt werden innerhalb der Funktion zwei lokale Variablen deklariert -posX und posY - in die die Werte der aktuellen Cursor-Position basierend auf dem Event mousemove übergeben werden.
$(document).ready(function(){
$(this).mousemove(function(event){
var posX=event.pageX;
var posY=event.pageY;
})
});
3. Nun müssen die Wertpaare der Variablen nur noch auf ein HTML-Element angewendet werden: Im Beispiel wird der Inhalt der Variablen in einem Absatz-Element ausgegeben und anschließend wird die Position als Stylesheet-Anweisung an das Div-Element im HTML-Teil des Dokuments übergeben.
$(document).ready(function(){
$(this).mousemove(function(event){
var posX=event.pageX;
var posY=event.pageY;
$("p").text("Die Maus ist "+posX+" Pixel vom linken und "+posY+" vom oberen Rand entfernt");
$("div").css({"margin-left":posX,"margin-top":posY,"cursor":"none"});
})
});
4. Die Anwendung der Variablen-Werte kann selbstverständlich noch auf weitere Eigenschaften ausgeweitet werden. Z.B. die Deckkraft:
$(document).ready(function(){
$(this).mousemove(function(event){
var posX=event.pageX;
var posY=event.pageY;
var deckkraft=posX/1000;
$("p").text("Die Maus ist "+posX+" Pixel vom linken und "+posY+" vom oberen Rand entfernt");
$("div").css({"margin-left":posX,"margin-top":posY,"cursor":"none"}).animate({"opacity":deckkraft},10);
})
});
Codebeispiel