Parameter und lokale Variablen in der Funktion
<script language="JavaScript" type="text/javascript">
function farbe(farbwert) {
document.body.style.backgroundColor = farbwert;
}
}
</script>
Auch hier haben wir einen Funktionsnamen, allerdings bekommt der in den Klammern
einen Parameter zugewiesen. Ein Parameter hat einen Bezeichner, der in die normalen Klammern der Funktion eingefügt wird. Es ist eine Variable, welche innerhalb der Funktion Gültigkeit hat.
function meineFunktion(para1){
alert(para1);
}
Der Wert des Parameters wird, beim Aufruf der Funktion zugewiesen. Diesen Wert nennt man Argument.
meineFunktion(30);
Man kann auch mehrere Parameter angeben, die mit Komma getrennt aufgeführt werden. Beim Aufruf der Funktion werden die Werte/ Argumente in gleicher Reihenfolge mit Komma zugewiesen. Die Bezeichner sollten nur einmal vergeben werden.
function meineFunktion(a, b, c){
alert(a + b * c);
}
meineFunktion(20, 46, 44);
Die Funktion in unserem obigen Beispiel hat die Aufgabe, die Hintergrundfarbe der Seite
zu ändern. Das wird mit der Eigenschaft des Objekts document.bgColor gemacht.
Der Farbwert soll der Parameter mit Namen farbwert sein. Die Werte dieses Parameters
werden dann in den Buttons definiert.
onClick="farbe('00FF00')"
Bei Farbzuweisungen in Javascript, sind 2 verschiedene Schreibweisen möglich:
erlaubter Farbname und Hexcode ohne Gatterzeichen #, beides in Anführungszeichen.
Jedoch in diesem Falle muß man die Regel
beachten, dass man keine Anführungsstriche ineinander verschachteln darf.
<form>
<input type="button" value="rot" onClick="farbe('#00FF00')" />
<input type="button" value="grün" onClick="farbe('#D0D0A0')" />
<input type="button" value="grau" onClick="farbe('silver')" />
</form>
Wenn man es sieht, sieht es einfach aus, aber wenn man es ohne Vorlage programmieren
will, ist die Sache schon etwas verzwickter, deshalb sollte man sich die Logik
und Schreibweise lieber zweimal anschauen und einprägen.
Als kleine Übung empfehle ich mit window.location
ein paar verschiedene Seiten zu öffnen.
Flexible Anzahl von Argumenten
Es ist nicht zwingend erforderlich, beim Aufruf der Funktion jedem Parameter einen Werten zuzuweisen. Hierbei muss man jedoch beachten, dass die Anweisungen innerhalb der Funktion Sinn machen sollten. Die hier vorgestellten Möglichkeiten sollte man nur in Ausnahmefällen benutzen.
function hallo(pers1, pers2, pers3){
alert(pers1 + pers2 + pers3);
}
hallo("Willi");
In diesem Beispiel zeigt das alert- Fenster Williundefinedundefined an. Es macht also wenig Sinn, führt jedoch zu keinem Fehler.
Es ist sogar möglich mehr Werte anzugeben, als es Parameter gibt. Auch das führt zu keinem Fehler.
hallo("Willi", "Sabine", "Peter", "Walter", "Jan");
Die letzten beiden Werte erscheinen nicht im alert-Fenster.
Es gibt eine Möglichkeit auf Werte / Argumente zuzugreifen und zwar über das Schlüsselwort arguments. Das ist ein Array mit allen Argumenten.
function hallo(pers1){
for(i=0; i < arguments.length; i++){
document.write(arguments[i]);
}
}
Aufruf der Funktion
hallo("Willi", "Sabine", "Peter", "Walter", "Jan");
Hier wird dem Parameter pers1 der Wert "Willi" zugewiesen und alle weiteren Argumente werden über das array-ähnliche Objekt arguments ausgegeben. Es ist insofern nur array ähnlich, weil hier nicht die üblichen Methoden eines Arrays zur Verfügung stehen.
Parameter als Array
Eine andere Möglichkeit eine nicht genau definiert Anzahl von Werten zuzuweisen, ist über einen Parameter möglich, der ein Array ist. Man hat also nur einen Parameter, dem man eine flexible Anzahl von Werten zuweisen kann. Beispielsweise eine Funktion die alle Werte addiert.
function addiere(zahlen){
var ergebnis = 0;
for(var i=0; i < zahlen.length; i++){
ergebnis += zahlen[i];
}
console.log(ergebnis);
}
addiere([4,5,15,21]);
Lokale Variablen
Innerhalb einer Funktion kann man lokale Variablen definieren, die nur innerhalb der Funktion Gültigkeit haben. Dazu sollte unbedingt das Schlüsselwort var vorangestellt werden. Macht man das nicht, überprüft das Programm, ob diese Variable schon irgendwo global definiert wurde, was zu erheblichen Performance Verlusten führt. Diese sogenannte Tiefensuche ist sehr zeitaufwändig.
function meineFunktion(){
var z="Hallo";
alert(z);
}
Variablen außerhalb und innerhalb
Sollte es außerhalb der Funktion eine globale Variable geben, die den gleichen Namen wie eine Variable hat die man innerhalb der Funktion deklariert, so wird der Wert der äußeren Variablen innerhalb der Funktion "verdeckt". Das heißt der Wert der lokalen Variablen hat nur innerhalb der Funktion Gültigkeit außerhalb behält die globale Variable ihren Wert.
Funktion nur einmal aufrufbar
Eine Variable, die man außerhalb einer Funktion deklariert und initalisiert, kann innerhalb einer Funktion einen anderen Wert bekommen. Einer Variablen kann man auch eine Funktion zuweisen. Man nennt es den Funktionsausdruck.
In folgenden Beispiel wird der Funktionsinhalt gelöscht, so dass diese zwar öfter aufgerufen werden kann, aber keinerlei Anweisungen mehr ausgeführt werden.
var myFunc = function () {
myFunc = function () {};
console.log("Hallo und tschüss");
}
myFunc();
myFunc();
Das lässt sich auch mit einer Funktionsdeklaration machen
function myFunc(){
myFunc = function(){};
console.log('Guten Tag auf wiedersehen!');
}
myFunc();
myFunc();
Es gibt noch mehr Lösungen für dieses Problem. Siehe dazu diese Seite im Netz
Siehe dazu auch IIFE
