Javascript-Grundlagen: Funktionen nutzen

Programmierung in Funktionen abwickeln

Bisher haben wir individuelle Befehle und Schleifen besprochen, die in Javascript genützt werden können, doch es gibt eine Möglichkeit, diese Einzelteile zu kombinieren und mit HTML zu vernetzen. Im simplen Fall haben wir dies auch schon erlebt, als wir mit onmouseover bei einem Link agiert haben. Dabei ist onmouseover ein Event-Handler, der die Schnittstelle zwischen HTML und Javascript darstellt.

Sobald der Link überfahren wird, reagiert der Befehl, der bei onmouseover festgelegt wurde. Wenn es alert ist, gibt es eine Meldungsbox und man muss nicht weiter agieren, denn alert ist bestens bekannt und integriert. Was aber, wenn spezielle Befehlsreihen gefragt sind? Hier helfen die Funktionen.

Funktionen in Javascript aufbauen

<script type="text/javascript" language="text/javascript">// function meldung() {
alert("Du bist gerade über meinen Link gefahren!");
}
// ]]> <textarea cols=65 rows=10>
<script language = "text/javascript">
function meldung() {
alert("Du bist gerade über meinen Link gefahren!");
}
</script>
<a onmouseover="javascript:meldung()" href="https://www.wissenswertes.at">Link</a>

Zur Veranschaulichung der Funktionsaufrufe habe ich wieder onmouseover genutzt, um eine Aktion auszulösen. Neu ist in diesem Zusammenhang, dass der Text der Dialogbox in einer Funktion definiert ist. Diese simple Lösung hätte ich über einen Alert-Aufruf auch machen können, doch darum ging es hier nicht.

Zuerst wird mit Javascript die Funktion meldung erstellt. Diese besteht hier nur aus einem alert-Aufruf, es könnten aber auch 30 Schleifen und 50 Variablen in der Funktion abgearbeitet werden, wie man es bei späteren, professionelleren Skripten erleben wird. Sobald Daten abgefragt und verarbeitet werden, werden die Funktionen umfangreicher und wichtiger.

In diesem einfachen Beispiel ist es eben nur ein alert-Befehl, doch der Aufruf ist interessant, denn er funktioniert über "javascript:meldung()", woraufhin der Browser, wenn man mit der Maus über den Link fährt, nachsieht, ob es die Funktion meldung gibt. Wenn ja, arbeitet er diese durch, was im konkreten Fall bedeutet, dass die Meldung ausgegeben wird und die Dialogbox erscheint.

Tragischerweise ist Javascript nicht sehr fehlerfreudig. Bei PHP und anderen Programmiersprachen erhält man eine Fehlermeldung mit Zeilenangabe, wenn etwas nicht stimmt, bei Javascript ist das große Rätselraten angesagt, wenn die Funktion doch nicht abgearbeitet wird.

Der Aufruf javascript:meldung ist ein Beispiel für unzählige ähnliche Aufrufe, die zum Teil beim body-Tag als onload-Parameter zu finden sind, wenn das Javascript-Tool gleich beim Start der Seite aktiv sein soll. Funktionen sind nicht nur da, um aufgerufen zu werden, sie helfen auch, Struktur in die Programmierung zu bekommen, weil man bestimmte Aktivitäten unterteilen kann.

Lesen Sie auch

Javascript ist eine optimale Ergänzung zu HTML, allerdings gibt es für gewisse Bereiche schon bessere Lösungen wie etwa Formularabfragen per PHP und so manche grafische Lösung per CSS. Der Einstieg in Javascript gelingt recht rasch, kleine Lösungen sind auch bald realisiert, man muss Javascript aber richtig einbinden, um dann mit den Variablen arbeiten zu können.

Hat man die Variablen erst einmal verstanden und auch mit alert die ersten Meldungen zustande gebracht, gilt es, komplexer zu denken. Mit den Schleifen, Abfragen und Funktionen stehen viele Möglichkeiten zur Verfügung.

Diesen Artikel teilen

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel