Funktionen
Funktionen
Eine Funktion in JavaScript ist ein immer wieder verwendbarer Code-Block, der nur ausgeführt wird, wenn ein bestimmtes Ereignis (Event) eintritt oder wenn die Funktion explizit aufgerufen wurde. Funktionen können sowohl im <head> als auch im <body> Bereich eines Dokumentes definiert werden. Allerdings es ist sehr sinnvoll und massiv empfehlenswert, Funktionen grundsätzlich im <head>-Bereich zu definieren, damit sicher gestellt ist, dass der Browser sie geladen hat, bevor sie aufgerufen werden. Nachfolgend finden Sie diverse Beispiele mit Erläuterung.
Um den Browser also davon abzuhalten, ein Script sofort beim Laden einer Seite aufzurufen, kann dieses in eine Funktion (function) geschrieben werden. Diese Funktion ist dann von überall innerhalb des <body> Bereich der HTML-Seite aufrufbar und wird erst dann ausgeführt.
Beispiel 1: Einfache Funktion
<head>
<meta charset="UTF-8">
<title>Beispiel 1</title>
<script type="text/javascript">
var zahl1 = 3;
var zahl2 = 4;
var ergebnis;
ergebnis = zahl1 + zahl2;
alert(ergebnis);
</script>
</head>
Beispiel 2: Funktion mit Userinput
<head>
<meta charset="UTF-8">
<title>Beispiel 2</title>
<script type="text/javascript">
var zahl1 = parseInt(prompt("Bitte geben Sie die erste Zahl ein!"));
var zahl2 = parseInt(prompt("Bitte geben Sie die zweite Zahl ein!"));
var ergebnis;
ergebnis = zahl1 + zahl2;
alert(ergebnis);
</script>
</head>
Beispiel 3: Funktion mit Eventhandler
<head>
<meta charset="UTF-8">
<title>Beispiel 3</title>
<script type="text/javascript">
function rechne() {
var zahl1 = parseInt(prompt("Bitte geben Sie die erste Zahl ein!"));
var zahl2 = parseInt(prompt("Bitte geben Sie die zweite Zahl ein!"));
var ergebnis;
ergebnis = zahl1 + zahl2;
alert(ergebnis);
}
</script>
</head>
<body>
<img alt="ein Bild" src="https://www.fibonicci.com/de/wp-content/uploads/2015/01/46085.png" onclick="rechne()">
</body>
Alternativ kann die Funktion ohne Event-Handler über das href-Attribut in einem Link <a> ausgelöst werden:
<a href="javascript:rechne()">Linktext</a>
Zum Nachlesen auf w3schools ("Home" bis "Data Types").
Hier geht's zu den Exercises auf W3schools: JS Variables und JS Operators
Parameter
Parameter sind Werte, die an eine Funktion übergeben werden, in der sie dann weiterverarbeitet werden:
var Ausgabe = "Der Sinn des Lebens: ";
function Sinn(Parameter) {
var SinnDesLebens = Parameter * 2;
alert(Ausgabe+SinnDesLebens);
}
Sinn(21);
alert(SinnDesLebens); // FEHLER
In Zeile 1 wird die Variable Ausgabe gesetzt. In Zeile 3 wird die Funktion Sinn mit dem Parameter Parameter deklariert. Zeilen 4 und 5 definieren die Aufgabe der Funktion. In Zeile 8 wird die Funktion Sinn aufgerufen mit der Parameterübergabe 21 aufgerufen und ausgeführt.
Achtung: Zeile 9 produziert einen Fehler! Die Variable Sinn des Lebens ist nicht global deklariert, sondern "lebt" nur in der Funktion Sinn(Parameter). In diesem Kontext (Scope) kann also nicht auf sie zugegriffen werden. Umgekehrt kann in der Funktion auf die global deklarierte Variable Ausgabe zugegriffen werden.
Douglas Adams
Die Anwort auf die Frage nach dem Sinn des Lebens dem Universum und dem ganzen Rest - Erfahren Sie hier mehr über Douglas Adams und "die Antwort".
Beispiel 4: Funktion mit Parametern
<head>
<meta charset="UTF-8">
<title>Beispiel 4</title>
<script type="text/javascript">
function rechne(zahl1,zahl2) {
var ergebnis;
ergebnis = zahl1 + zahl2;
alert(ergebnis);
}
</script>
</head>
<body>
<img alt="ein Bild" src="einBild.png" onclick="rechne(3,12)">
</body>
Beispiel 5: Funktion mit Parametern (2)
<head>
<meta charset="UTF-8">
<title>Beispiel 5</title>
<script type="text/javascript">
function Sinn(Parameter) {
var SinnDesLebens = Parameter * 2;
alert("Ausgabe: " + SinnDesLebens);
}
</script>
</head>
<body>
<img alt="ein Bild" src="img/Rechnen.jpg" onclick="Sinn(21)">
</body>
Beispiel 6: Funktion mit Input-Feldern
<head>
<meta charset="UTF-8">
<title>Beispiel 6</title>
<script type="text/javascript">
function rechne() {
var zahl1 = parseInt(document.getElementById("zahl1").value);
var zahl2 = parseInt(document.getElementById("zahl2").value);
var ergebnis;
ergebnis = zahl1 + zahl2;
//Hier gehört eine geeignete Ausgabeform rein
}
</script>
</head>
<body>
<label for="zahl1">Zahl 1: </label>
<input id="zahl1" type="text" value="">
<label for="zahl2">Zahl 2: </label>
<input id="zahl2" type="text" value="">
<button type="button" onclick="rechne()">Rechne!</button>
</body>
Beispiel 7: Funktion innerhalb einer Funktion aufrufen
<head>
<title>Beispiel 7</title>
<script type="text/javascript">
function quadrat( zahl ) {
if(zahl<1000){
var square=zahl*zahl;
alert("Das Quadrat der von Ihnen gewaehlten Zahl ("+zahl+") ist "+square+"!");
}
else{
alert("Die von Ihnen gewaehlte Zahl war zu gross!");
}
}
function eingabe() {
var meineZahl = prompt("Geben Sie eine Zahl ein!");
quadrat(meineZahl);
}
</script>
</head>
<body>
<input type="button" value="Click me!" onclick="eingabe()">
</body>
Weitere Grundlagen zu Funktionen in Javascript werden hier ausführlich beschrieben.
Funktionen mit Rückgabewert
Funktionen können Prozesse ausführen, aber auch einen bestimmten Wert zurückgeben, mit dem danach weitergearbeitet werden kann. Dies kann mit der Anweisung return ausgeführt werden. Danach folgt der Wert, was genau beim Funktionsaufruf zurückgegeben werden soll. Innerhalb der Funktion können alle bekannten Prozesse ausgeführt werden. Die Besonderheit ist, dass die Funktion beendet ist, sobald die return-Anweisung erreicht wird.
1. Beispiel
var input = anzeigen("Hallo");
function anzeigen(wort1) {
return wort1;
}
alert(input);
Die Funktion anzeigen() besitzt einen Parameter, der in der Funktion durch die return-Anweisung zurückgegeben wird. Wird nun die Funktion aufgerufen (Zeile 1), wird der Wert, den diese Funktion zurück gibt, in die Variable "input" geschrieben. Mit dieser Variable kann nun weitergearbeitet werden.
2. Beispiel
var input = anzeigen("Hallo", "Welt");
function anzeigen(wort1, wort2) {
return wort1 + wort2;
}
alert(input);
In diesem Beispiel werden zwei Parameter übergeben, die direkt bei der return-Anweisung zusammengesetzt werden können. Die Funktion gibt nun den Wert "HalloWelt" zurück, da die beiden Zeichenketten im Funktionsaufruf einfach hintereinander gesetzt werden.
3. Beispiel
var input = anzeigen("Hallo", "Welt");
function anzeigen(wort1, wort2) {
var result = wort1 + " " + wort2;
return result;
}
alert(input);
In diesem Beispiel werden die Parameter erst in einer Variable zusammengesetzt und beim Funktionsaufruf wird diese Variable zurückgegeben.
Anonyme Funktionen
Anonyme Funktionen haben keinen Funktionsnamen. Das heißt, man spart sich den Funktionsaufruf, sie werden sofort ausgeführt. Meistens werden anonyme Funktionen in Verbindung mit Eventhandlern genutzt.
Beispiel 1
document.getElementById("button").onclick = function() {
document.getElementById("output").innerHtml = "Hallo Welt!";
}
Hier wird durch den Klick auf einen Button die Funktion ausgeführt. Die Anweisung onclick ist dabei das Gleiche, wie der Eventhandler im Html-Dokument. Innerhalb der Funktion wird der Satz "Hallo Welt!" in rin Element des Html-Dokumentes geschrieben.
Beispiel 2
var input = function(wort1, wort2) {
return wort1 + wort2;
}
alert(input("Hallo", "Welt"));
Anonyme Funktionen können auch durch Variablen aufgerufen werden. Wichtig hierbei ist, dass die aufgerufene Variable die Funktionsklammern hat, mit der Parameter übergeben werden können, aber nicht müssen.