Funktion




<script language="JavaScript" type="text/javascript">

function hallo() {
alert("Hallo Welt!");
}
</script>

siehe auch molily
weitere Möglichkeiten eine Function zu definieren

Funktionen werden benötigt, um Anweisungen zusammenzufassen. Man definiert eine Funktion. In dieser werden mehrere Anweisungen definiert. Die Anweisungen werden nicht sofort sondern beim Funktionsaufruf ausgeführt. Ein Vorteil ist, man kann eine Funktion an mehreren Stellen und öfter aufrufen. Desweiteren kann man Funktionen über Events aufrufen. Events können Userinteraktionen sein, Ladenvorgänge einer Seite und vieles mehr.

Es gib 3 Arten eine Funktion zu erstellen.

Funktionsdeklaration:

function myFunction(){ Anweisung;};

Funktionsausdruck:

let myFunction = function(){Anweisung;}

Arrow Funktion

let myFunction = () => {Anweisung;}

Arrow Funktion können nicht als Konstruktorfunktionen genutzt werden und haben kein eigenes this.
siehe auch developer mozilla /// siehe auch W3schools

(Parameter) => {Funktionskörper}


Hat man nur eine Anweisung kann man die geschweiften Klammern weglassen. Da man hier einen Funktionsausdruck hat, kann man auch return weglassen.

let sum = (x, y) => x*y;

function sum(x,y){
return x*y;
}

Folgenden Beispielen muss Funktionsname vorangestellt werden, z.B.:
let myFunction = () => {alert("Hello");}

Funktionsausdruck Arrow Function Bedeutung
function() {alert("Hello");} () => {alert("Hello");} Funktion ohne Parameter
function(){alert( "Hallo");} () => alert( "Hallo"); Funktion mit nur einer Anweisung, hier kann man die geschwungenen Klammern weglassen.
function(x){ alert("Hallo" + x);} x => {alert("Hallo" + x);} Funktion mit nur einem Parameter, hier kann man die runden Klammern weglassen.

function(x,y){
alert(x + y);
}

 (x,y) =>{alert(x + y;} Funktion mit mehreren Parametern
function(){return "Hallo"} () => "Hallo"; Da die Funktion als Funktionsausdruck definiert ist, kann man auch das return weglassen.
     
     

 

Aufruf einer Funktion

Der Aufruf der Funktion geschieht über den Funktionsnamen, oder im Falle des Funktionsausdruck über den Variablennamen, dem ein namenlose Funktion angehängt wurde, also in beiden oben aufgeführten Fällen auf folgende Weise.

myFunction();

Hoisting

Funktionen die per Funktionsdeklaration erstellt werden, werden vom Interpreter an den Anfang gesetzt. Das bedeutet, man kann sie aufrufen bevor sie deklariert sind. Das ist bei Funktionsausdrücken nicht der Fall. Da verhält es sich genauso wie bei allen anderen Variablen. Man kann nicht darauf zugreifen, bevor man sie erzeugt hat.

doSomething();

function doSomething(){Anweisgung;}


Den Klammern () kommt eine besondere Bedeutung zu mehr dazu auf nächsten Seite.
Bei der Namensvergabe gelten die üblichen Regeln.

Die Anweisungen der Funkton werden in geschweiften Klammern gehalten. Die geschweiften Klammern sind ein Anweisungsblock, das heißt, hier können mehrere Anweisungen mit Strichpunkt getrennt, jeweils in einer eigenen Zeile eingefügt werden. Alle Anweisungen innerhalb der Funktion werden beim Funktionsaufruf von oben nach unten ausgeführt.

Hier die beiden Arten eine Funktion zu erstellen.

function hallo1(){
console.log("hallo");
console.log("Welt");
}

hallo2 = function() {
console.log("hallo");
console.log("Leute");
}


Event-Handler

Funktionen kann man als Event-Handler oder Even-Listener registrieren, in folgendem Beispiel ein HTML Event Handler (nicht zu empfehlen, keine Trennung von HTML und Javascript).
<form> <input type="button" value="Hallo" onClick="hallo()"></form>
anderes Beispiel beim Laden einer Seite:
<body onLoad="hallo()" >
noch ein Beispiel in einem Link:
<a href="#" onMouseover="hallo()">Text</a>

 

Javascript Tipps