Javascript Event-Handler, Funktionen und Parameter

14. September 2014 - Allgemein, Javascript

Javascript arbeitet mit sogenannten Ereignissen, bzw Event-Handler. Das bedeutet, dass bestimmte Funktionen ausgeführt werden, sobald ein bestimmtes Ereignis eintrifft. Dies kann beispielsweise sein, dass die Seite komplett geladen wurde, woraufhin ein alert() asugeführt wird. Oder es wird eine Funktion ausgeführt, sobald sich der Mauspfeil über einem Button befindet. Auch das Drücken auf einen Button kann eine Funktion ausführen, sogar das Verlassen des Buttons kann ein Ereignis sein, auf welches reagiert wird.

 

Beispiele für Event-Handler:

onkeydown ( Taste wird gedrückt)
onmousedown (Taste auf der Maus wird gedrückt)
onload (Beim Laden)
onclick (Beim Anklicken)

 

Weitere Event-Handler mit konkreten Beispielen gibt es auf selfthtml.

Nehmen wir einmal an wir haben eine h1 Überschrift und wir wollen sowohl eine Funktion aufrufen, wenn die Maus sich nur über diese bewegt und eine andere, wenn die h1 angeklickt wird. Wir müssen also der h1 sowohl den Event-Handler onclick als auch onmouseover zuweisen.

 

[code language=”javascript”]
<h1 onclick="starteFunktion()" onmouseover="starteAndereFunktion()">Ich bin eine Überschrift</h1>

<script>
function starteFunktion() {
alert("Hallo Welt");
}
</script>
[/code]

 

Sobald ihr nun auf die Überschrift klickt sollte sich ein Fenster öffnen mit Hallo Welt. Bewegt ihr eure Maus über die Überschrift wird irgend eine andere Funktion aufgerufen.

 

Funktionen

In einem vorherigen Beitrag bin ich ja bereits etwas auf das Thema Funktionen eingegangen, nun möchte ich das Thema noch etwas vertiefen. Gerade hat man ja bereits wieder gesehen, wozu Funktionen benutzt werden können. In der Regel sollte man Code, welcher häufiger benutzt wird, in Funktionen auslagern bzw schreiben. Nehmen wir beispielsweise an ihr wollt häufiger zwei Zahlen addieren oder ihr wollt den aktuellen Steuersatz von eurem Gehalt abziehen. Nehmen wir an, dass sich euer Steuersatz jeden Monat ändert oder ihr bekommt irgendwann mal ein höheres Gehalt. Das könnt ihr dann mit einer Funktion berechnen.

Damit ihr diese Werte nicht jedes Mal im Code ändern müsst, wo ihr vielleicht zwei Variablen (Gehalt, Steuersatz) angelegt habt, bietet Javascript die Möglichkeit Parameter an eine Funktion zu übergeben. Mit Hilfe von Parametern könnt ihr eine Funktion aufrufen und ihr die beiden aktuellen Werte einfach übergeben. Ihr könnt also sagen “Berechne mein Nettogehalt bei einem Gehalt von 5000€ und einem Steuersatz von 40%”. Ist im kommenden Monat der Steuersatz bei 45% ruft ihr die Funktion einfach erneut auf und übergebt die beiden Werte 5000 und 45.

Das nachfolgende Beispiel berechnet mithilfe des Dreisatzes (gehalt / 100 = 1%, danach 1% * steuersatz und das Ergebnis vom Gehalt abziehen) das Nettogehalt.

 

Ohne Parameter sieht das Ganze beispielsweise wie folgt aus:

 

[code language=”javascript”]
var gehalt = 5000;
var netto;
var steuersatz = 40;
var einProzent;
var steuerZahlung;

function steuernAbziehen() {
einProzent = (gehalt/100);
steuerZahlung = (einProzent*steuersatz);
netto = (gehalt-steuerZahlung);
alert("Sie bekommen" + netto + "€ netto");
}
steuernAbziehen();
[/code]

 

Mit Parameter sieht der Code dann so aus:

 

[code language=”javascript”]
var netto;
var einProzent;
var steuerZahlung;

function steuernAbziehen(gehalt, steuersatz) {
einProzent = (gehalt/100);
steuerZahlung = (einProzent*steuersatz);
netto = (gehalt-steuerZahlung);
alert("Sie bekommen" + netto + "€ netto");
}
steuernAbziehen(5000, 40);
[/code]

 

Wie man sehen kann werden die zu ändernden Variablen in die () der Funktion geschrieben. Diese müssen vorher nicht über ein var deklariert werden. Ruft man nun die Funktion auf, so müssen für die beiden Parameter die gewünschten Zahlen eingegeben werden. In unserem Beispiel bei einem Gehalt von 5000€ und bei einem Steuersatz von 40% wäre dies steuernAbziehen(5000, 40). Bekommt man nun ein Gehalt von 6000€ bei einem unveränderten Steuersatz könnte die Funktion einfach mit steuernAbziehen(6000, 40) aufgerufen werden.

 

Hinterlass doch ein Like :)Share on FacebookTweet about this on TwitterShare on Google+

Leave a Reply