Willemers Informatik Ecke: JavaScript

Sprachüberblick

Einbindung in die HTML-Seite
Der Browser als Entwicklungsumgebung
Ein- und Ausgabe
Variablen und Typen
Kontrollstrukturen
Funktionen
Asynchrone Funktionen
Zugriff auf die Website - DOM
Ereignisse

Weitere JavaScript-Themen

JavaScript ist eine objektbasierende Interpretersprache, die ihre Anwendung in Webseiten findet. JavaScript ermöglicht es, Funktionen in Variablen zu speichern und flexibel zu handhaben. Dadurch eignet sie sich ideal, um ereignisgesteuerte Callbacks zu programmieren.

Einbindung in die HTML-Seite

In einer HTML-Seite kann ein Bereich für JavaScript markiert werden, indem dieser mit dem Tag <script> </script> eingerahmt wird.

Sie können mit dem Attribut LANGUAGE festgelegen, welche Sprache verwendet wird. Das ist allerdings nicht erforderlich.

Befehle zwischen den SCRIPT-Tags werden an Ort und Stelle ausgeführt. In diesem Fall wird, sofern JavaScript vom Browser unterstützt wird, der Text Hallo! zwischen den Worten Oben und Unten erscheinen. Der Befehl besagt, dass der Text Hallo! in das HTML-Dokument geschrieben wird.

<html>
<head>
</head>
<body>
<br>Oben <br>
<script type="application/javascript">
document.write('Hallo!');
</script>
<br>Unten<br>
</body>
</html>

Eigene JavaScript-Datei

Anstatt den JavaScript-Code in den Bereich der HTML-Seite zu schreiben, verwendet man gern separate Dateien.

<script src="hallo.js"></script>

In der Datei hello.js steht der Code dann häufig in Funktionen. Das Beispiel oben könnten wir in einer Funktion hallo schreiben:

function hallo() {
    document.write('Hallo!');
}

Im Body-Bereich wird die Datei geladen und innerhalb des BODY-Tags kann die Funktion hallo() aufgerufen werden.

<html>
<head>
</head>
<body onload="hallo()">
<script src="hallo.js"></script>
</body>
</html>

Der Befehl onload kennzeichnet das Ereignis, dass das HTML-Dokument geladen wird. Bei Auftreten des Ereignisses wird die Funktion hallo() aufgerufen.

Der Aufruf der Funktion muss nicht zwingend mit dem Ereignis des Ladens verbunden werden, sondern kann auch einfach zwischen SCRIPT-Tags an der Stelle erfolgen, wo sie stehen.

<html>
<head>
</head>
<body>
<script src="hallo.js"></script>

<script type="application/javascript">
hallo();
</script>


</body>
</html>

Oder kürzer:

<script> hallo(); </script>

Der Browser als Entwicklungsumgebung

Beim Firefox kann über das Menü Extras|Web-Entwickler|Werkzeuge ein- und ausblenden der untere Bereich freigeklappt werden. In der untersten Zeile können JavaScript-Anweisungen gegeben werden. Darüber in der Konsole werden die Anweisungen und ihre Ergebnisse angezeigt.

Unter Chromium findet man in dem Magermenü mit den drei Strichen auf der rechten Seite den Punkt More Tools...|Developers tools eine vergleichbare Umgebung. Allerdings belegt sie die rechte Seite des Browsers statt die untere Hälfte.

Firefox' Werkzeuge

Symbol aus Fernseher und Pfeil: Nach dessen Anklicken kann man mit der Maus über die Webseite gehen, bis man eine interessante Stelle gefunden hat. Klickt man diese an, wird der Inspektor auf diese Stelle gerutscht.
Inspektor: Er zeigt die Struktur der Seite auf.
Konsole: In die Konsolenzeile können einzelne Anweisungen wie beispielsweise document.write("Moin!") eingegeben werden. Es gibt sogar eine Autovervollständigung. Mit diesem Tool kann man leicht die Grundbefehle von JavaScript kennenlernen.
Debugger: Damit kann man schrittweise durch den Code gehen. Man kann Breakpoints setzen, bei denen der Programmablauf stoppt. Auf der rechten Seite stehen die üblichen Symbole, mit denen man weiterarbeiten kann:
- Zwei senkrechte Striche: Das Pausesymbol
- Pfeil im Halbbogen über einen Punkt: Springe über den nächsten Funktionsaufruf.
- Pfeil, der in einen Spalt zeigt: Folge dem Verlauf beim Abstieg in eine Funktion.
- Pfeil, der aus einem Spalt heraus zeigt: Durchlaufe den Rest der Funktion und stoppe beim nächsten Befehl nach deren Aufruf.

Ein- und Ausgabe

Dialoge

JavaScript stellt ein paar Dialoge zur Verfügung:

alert("Achtung! Die Maustaste rostet!")
zeigt den Text in einer Messagebox auf dem Bildschirm und lässt diese solange stehen, bis der Anwender den OK-Button angeklickt hat.
wahr = window.confirm("Wirklich wahr?")
wird den Text in Klammern anzeigen und auf Bestätigung des Benutzers warten, der die Wahl zwischen dem Button OK und Abbruch hat. Wählt der Anwender OK, wird true zurückgegeben.
eingabe = prompt("Name:", "Eingabe")
fordert vom Benutzer eine Eingabe, die als Wert zurückgegeben wird. Der erste Parameter von prompt gibt den Text im Dialog vor, der zweite füllt das Eingabefeld vor.
```
<script>
var eingabe = prompt("Geben Sie eine Zahl ein", "0");
alert(eingabe);
</script>
```

Formulare

Am besten funktioniert Ein- und Ausgabe über Formulare. Das folgende Beispiel zeigt ein Formular mit Texteingabefeld und Button. Wird der Button gedrückt, wird der Inhalt des Textfelds in den Bereich mit der id panel übernommen und dann bei der Gelegenheit auch rot eingefärbt.

<html>
<head>
<script type="application/javascript">
function callme(str) {
    aus = document.getElementById("panel");
    if (aus!=null) {
        aus.innerHTML = str;
        aus.style.color = "red";
    }
}
</script>
</head>
<body>
<form>
   <input type=text value="Eingabe" id="textfeld">
   <input type=button value="Klick mich!" onclick="callme(document.getElementById('textfeld').value)">
</form>
<hr>
<div id='panel'>
</div>
<hr>
</body>
</html>

Hier kann das Listing ausprobiert werden.

Die Konsole

Für Debugging-Zwecke kann JavaScript auf die Konsole schreiben. Diese ist einerseits Bestandteil der Entwicklungs-Tools, aber bei Firefox auch über Extras | Web-Entwickler | Web-Console erreichbar.

Das Programm kann mit dem Aufruf console.log(Text) eine Textausgabe auf die Konsole schreiben.

Neben den Aufruf log gibt es noch debug, error, info und warn für die Ausgabe unterschiedlich relevanter Ausgaben.

console.log()   // stdout
console.error() // stderr
console.table() // Ausgabe eines Arrays als Tabelle

Der Aufruf von trace führt zu einer Ausgabe des Aufruf-Stacks.

Variablen und Typen

Im Gegensatz zu Java ist JavaScript nicht streng typisiert. Die Variablen müssen nicht definiert werden, sondern werden zur Laufzeit angelegt. Im Falle einer Deklaration kann das Schlüsselwort var vor die Variable gestellt werden.

Inzwischen ist es üblicher, bei der Deklaration let zu verwenden. Das schränkt den Gültigkeitsbereich auf den Block ein, in dem sie definiert wurde.

Der Typ der Variablen ergibt sich aus ihrer Verwendung.

Zahlen

JavaScript unterscheidet keine ganzzahligen von Fließkommawerten. Soll eine Variable also beispielsweise als Index für ein Array verwendet werden, muss gewährleistet sein, dass ihr Inhalt auch wirklich ganzzahlig ist. Dazu muss ggf. die Funktion Math.floor(schneidet Nachkommastellen ab) oder Math.round (rundet kaufmännisch) verwendet werden.

Zahlenliterale werden üblicherweise dezimal angegeben. Mit 0x eingeleitet können auch hexadezimale, mit 0b auch binäre Literale verwendet werden.

wert = 123.45;
hex  = 0x1a;
bin  = 0b11001;

Um eine Variable als Konstante zu deklarieren, wird const verwendet. Sie ist nach der Definition nicht mehr änderbar.

const MAX = 17;

Die maximale Zahl ist Number.MAX_VALUE.

Mathematische Operatoren

Operator	Wirkung	Beispiel
+	Addition	a = 2 + 3; (5)
-	Subtraktion	a = 3 - 2; (1)
*	Multiplikation	a = 3 * 2; (6)
/	Division	a = 4 / 2; (2)
**	Potenz	a = 2 ** 3; (8)

Arrays

Man kann Arrays anlegen. Dazu kann der new-Operator mit dem Konstruktor Array verwendet werden:

var lotto = new Array(6);

Stattdessen genügt es aber auch, nur eckige Klammern zu verwenden und die Zahl der Elemente dazwischen zu setzen.

var lotto = [6];

Die Anzahl der Elemente muss nicht angegeben werden. Arrays sind dynamisch und werden bei Bedarf erweitert.

Die aktuelle Länge eines Arrays kann durch das Attribut length ermittelt werden.

let len = lotto.length

In einzelne Elemente können Werte eingetragen werden. Zwischen den rechteckigen Klammern kann der Index des gewünschten Elements benannt werden.

var wert = [6];
wert[0] = 1;
wert[4] = 12.95;
wert[5] = 'kein Preis';

Das erste Array-Element wird mit 0 indiziert.

Ein Array-Literal wird in rechteckige Klammern durch Kommata separiert gebildet.

var meinArray = [ 'Klara', 'Anton', 15, 'Pferd' ];

Auch Arrays sind nicht typgebunden.

Mehrdimensionale Arrays werden durch Anlegen von Arrays in Array-Variablen realisiert:

var matrix = new Array(4); // oder [4]
matrix[0] = new Array(2);  // oder [2]
matrix[1] = new Array(2);  // oder [2]
// ...
matrix[0][1] = 4.97;

Array-Funktionen

Für das Array stellt JavaScript eine Reihe von Funktionen zur Verfügung. Diese Funktionen können auch auf Strings angewendet werden.

concat
Aneinanderhängen zweier Arrays.
forEach
Durchlaufen eines Arrays. Die Aktion wird als Funktion definiert und übergeben.
join
Array in Zeichenkette umformen
map
Parameter: Umwandlungsfunktion
pop
Das letzte Element des Arrays wird entfernt
push
Ein neues Element wird ans Ende des Arrays gehängt. Mit der Kombination von push und pop lässt sich ein Stack implementieren.
shift
Das erste Element entfernen.
unshift
Element an der ersten Position einfügen. Mit der Kombination aus unshift und pop bzw. shift und push lässt sich eine FIFO-Warteschlange implementieren.
indexOf
Sucht nach einem Element und liefert den Index.
sort
Sortiert das Array. Als Parameter kann eine Funktion übergeben werden, die zwei Elemente vergleicht und -1, 1 und 0 zurückgibt.

Objekte

Auch Objekte lassen sich anlegen. Eine Definition ist nicht zwingend erforderlich.

var dasda = new Object;

dasda.name = 'Anton';
dasda.alter = 32;
dasda.jenes = new Object;
dasda.jenes.hobby = 'alles ausser Sport';

Alternativ kann statt new Object auch einfach ein paar geschweifte Klammern verwendet werden.

var sowas = {};
sowas.alter = 35;
sowas.name = "James";

Das ist insofern praktischer, weil in die geschweiften Klammern gleich die Attribute geschrieben werden können. Dazu muss allerdings zwischen die Attribute ein Komma gestellt werden. Und die Vorbelegung erfolgt durch einen Doppelpunkt und nicht durch das Gleichheitszeichen.

var sowas = {
   alter : 35,
   name  : "James",
   tuwas: function() {
       console.log(this.name);
   }
}

Will die Methode auf die Objekt-Attribute alter oder name zugreifen, verwendet es this. Ansonsten greift die Funktion auf die Variable name außerhalb des Objekts sowas zu und die könnte gegebenenfalls nicht definiert sein.

Konstruktorfunktion

Ein Objekt kann auch durch eine Konstruktorfunktion erstellt werden. Der Funktionsname wird in diesem Fall per Kovention mit einem Großbuchstaben eingeleitet.

function Sowas(alter, name) {
   this.alter = alter;
   this.name = name;
   this.tuwas = function() {
       console.log(this.name);
   }
}

Es können nun mehrere Variablen als Instanz von Sowas angelegt werden:

let so = new Sowas(23, "Anton");
let was = new Sowas(35, "Emil");

Die Methode tuwas kann nun über jede Instanz aufgerufen werden und gibt dann den jeweiligen Namen aus:

so.tuwas();
was.tuwas();

class

Üblicher als eine Konstuktorfunktion ist die Definition einer Klasse über das Schlüsselwort class. Die Funktionen benötigen das Schlüsselwort function nicht mehr. Dazu kommt eine Funktion namens constructor, die die Aufgabe der Konstruktorfunktion übernimmt.

class Sowas {
    constructor(alter, name) {
        this.alter = alter;
        this.name = name;
    }
    tuwas() {
       console.log(this.name);
    }
}
let so = new Sowas(12, "Anton");
let was = new Sowas(35, "Emil");
so.tuwas();
was.tuwas();

Getter und Setter

Über die Schlüsselworte set und get können Funktionen definiert werden, die wie ein lesender (get) oder schreibender (set) Variablenzugriff wirken. Der Vorteil der Funktion ist, dass sie den Zugriff kontrollieren kann. Das folgende Beispiel sorgt dafür, dass das Attribut alter nicht negativ gesetzt werden kann. Eine Variable alter gibt es tatsächlich nicht mehr. Der Wert wird hier in einer Variablen thisalter gespeichert.

class Sowas {
    constructor(alter, name) {
        this.thisalter = alter;
        this.name = name;
    }
    set alter(wert) {
        if (wert>=0) {
            this.thisalter = wert;
        } else {
            console.log("Kein negatives Alter!");
        }
    }
    get alter() {
        return this.thisalter;
    }
    tuwas() {
       console.log(this.thisalter);
    }
}
let so = new Sowas(12, "Anton");
so.alter = -1;
console.log(so.alter);
so.alter = 1;
console.log(so.alter);

Ein Objekt, ein Objekt-Attribut oder ein Array-Element kann mit dem Befehl delete gelöscht werden.

Assoziative Speicher

Ein Objekt kann auf seine Elemente auch über die rechteckigen Klammern des Arrays zugegriffen werden. Als Index dient der Name des Attributs als String. Das folgende Beispiel greift das Attribut alter auf diese Weise zu. Anschließend wird ein neues Attribut strasse über die rechteckigen Klammern angelegt und kann wie gewohnt über die Punkt-Notation ausgelesen werden.

var sowas = {
   alter : 35,
   name  : "James",
}
console.log(sowas['alter']);
sowas['strasse'] = 'Norgaardholz';
console.log(sowas.strasse);

Auf eine ganz ähnliche Weise können auch assoziative Objekte definiert werden.

var asso = {
   "FL" : "Flensburg",
   "HG" : "Bad Homburg"
}
console.log(asso["FL"])

Als Ausgabe wird Flensburg auf der Console ausgegeben.

Das folgende Beispiel zeigt, wie man alle Attribute und deren Inhalte eines Objekts in einer for-Schleife auf der Console ausgibt:

var sowas = {
   alter : 35,
   name  : "James",
}
sowas['strasse'] = 'Norgaardholz';
for (let attrib in sowas) {
    console.log(attrib);
    console.log(sowas[attrib]);
}

InstanceOf

Variablen können mit dem Operator instanceOf auf ihren Typ abgefragt werden. Dabei können als Operand Object, Function oder Array verwendet werden.

if (variable instanceof Object)  {

Wurde das Objekt über eine Klasse oder einen Funktionskonstruktor definiert, kann dessen Name auch mit instanceof abgefragt werden.

Math

Das Objekt Math stellt verschiedene Funktionen zur Verfügung.

Math.min(a, b)
Gibt das Minimum von a und b zurück.
Math.max(a, b)
Gibt das Maximum von a und b zurück.
zahl = Math.floor(para);
Dem Parameter der Funktion werden die Nachkommastellen abgeschnitten.
zufallszahl = Math.random();
Die Variable zufallszahl enthält einen zufälligen Wert größergleich 0 und kleiner 1.
Math.PI
liefert den Wert pi, also 3,1415...
wurzel = Math.sqrt(para);
Die Variable wurzel erthält die Quadratwurzel des Parameters der Funktion.

Beispiel Würfel

Um einen Würfel zu simulieren, rufen Sie zunächst die Funktion Math.random auf. Sie liefert einen zufälligen Wert zwischen 0 und <1. Diesen Wert multiplizieren Sie mit 6. Damit entsteht ein Fließkommawert größergleich 0 und kleiner als 6. Damit nur ganze Zahlen entstehen, wenden Sie die Funktion Math.floor an. Daraufhin haben Sie die Werte von 0 bis 5. Um die typischen Würfelzahlen von 1 bis 6 zu erhalten, addieren Sie nun noch eine 1.

wurf = Math.floor( Math.random() * 6) + 1;

Date

Die Klasse Date kümmert sich um Datum und Uhrzeit. Das aktuelle Datum kann durch den Aufruf des Konstruktors ermittelt werden.

let jetzt = new Date();

Über die Variable können folgende Funktionen aufgerufen werden.

getMonth
getFullYear
getDate: liefert den Tag im Monat
getDay: liefert den Wochentag
getHours: liefert die Stunde
getMinutes: liefert die Minute
getTime: liefert die Anzahl der Millisekunden seit dem 1.1.1970

RegExp - Reguläre Ausdrücke

Mit regulären Ausdrücken können Zeichenketten durchsucht und verändert werden. Dabei liefern die regulären Ausdrücke mächtige Möglichkeiten der Mustererkennung. Das Muster wird dem Konstruktor als Parameter übergeben.

let reg = new RegExp("abc");
let istEnthalten = reg.test("xyzabcde");

Hier wird als Muster die Zeichenkette abc angegeben, die dann mit der Funktion test in deren Parameter-String gesucht wurd. Die Rückgabe von test ist boolean, je nachdem, ob das Muster gefunden wurde.

Statt des Konstruktors RegExp kann auch das Suchmuster zwischen zwei Schrägstrichen definiert werden.

let reg = /abc/;

Das Muster kann durch verschiedene Sonderzeichen ergänzt werden.

. Ein Punkt steht als Platzhalter für ein einzelnes Zeichen. H.nd passt also auf Hand und Hund, aber nicht auf Hnd oder Haund.
| Das Oderzeichen ermöglicht es, die Auswahl zweier Zeichen zu erlauben.
[abc] An dieser Stelle kann a, b oder c stehen, also eines der eingeschlossenen Zeichen.
[^abc] An dieser Stelle darf keines der eingeschlossenen Zeichen stehen.
[a-z] An dieser Stelle kann eines der Zeichen zwischen a und z stehen.
\d Ziffer
\w Whitespace, also Leerzeichen, Zeilenumbruch oder Tab.
\W kein Whitespace
^ Nachfolgende Zeichen müssen am Anfang der Zeile stehen.
$ Nachfolgende Zeichen müssen am Ende der Zeile stehen.
\b bezeichnet eine Wortgrenze durch Whitespace oder Satzzeichen.
\B hier darf eine Wortgrenze sein.

Es gibt Multiplikatoren.

? Das Zeichen vor dem Fragezeichen ist optional.
* Das Zeichen vor dem Stern kann beliebig oft, auch gar nicht erscheinen.
+ Das Zeichen vor dem Pluszeichen kann beliebig oft, aber mindestens ein Mal erscheinen.

Der Aufruf von exec über die RegExp-Instanz liefert ein Objekt zurück. Dieses Objekt hat folgende Attribute:

index: Die Position des gefundenen Musters
input: Die übergebene Zeichenkette
[0]: Das Vorkommen

Kontrollstrukturen

if-Abfrage

Der Ablauf eines Programms kann durch eine Abfrage verändert werden. Dafür verwendet man den Befehl if. Es folgt eine Bedingung, unter der die Anweisung ausgeführt wird.

Die nächste Anweisung wird dann nur unter dieser Bedingung ausgeführt. In den allermeisten Fällen will man aber mehrere Anweisungen unter der Bedingung ausführen. Um das zu erreichen, fasst man diese mit geschweiften Klammern zu einem Block zusammen.

Oft möchte man das Gegenteil der Bedingung hinter dem if besonders behandeln. Anstatt eine neue Abfrage mit negierter Bedingung hintenan zu stellen, kann man einfacher den Befehl else verwenden, der den anderen Fall einleitet. Auch hier folgt eine Anweisung, die man mit geschweiften Klammern zu einem Anweisungsblock erweitern kann.

if ( Bedingung ) Statement else Statement

Bedingungen

Die Bedingung eine Abfrage kann wahr oder falsch sein, passend zu if und else. Da es zwei Fälle gibt, redet man von booleschen Ausdrücken. Diese können in Variablen gespeichert werden. Als Literale gibt es true und false.

Typische Bedingung sind Vergleiche zwischen Zahlen, die durch das Größer- oder Kleinerzeichen, ggf. gefolgt von einem Gleichheitszeichen ausgedrückt werden.

if (pegel >= 5) {

} else {

}

Gleichheit wird mit == und Ungleichheit mit != abgefragt. Da bei JavaScript 4711="4711" gilt, gibt es die Möglichkeit mit === die Gleichheit von Wert und Typ zu überprüfen. Entsprechen gibt es !== für die Ungleichheit.

Wenn die Variable pegel einen Wert enthält, der 5 oder größer ist, wird der Anweisungsblock hinter dem if ausgeführt, ist er kleiner als 5 wird der else-Zweig ausgeführt.

Soll geprüft werden, ob der Pegel innerhalb eines vorgegebenen Intervalls liegt, müssen zwei Bedingungen geprüft werden: Ist der Pegel größergleich 5 und ist er kleiner als 7? Diese beiden Bedingungen müssen beide zutreffen, was einem booleschen UND entspricht, das durch && ausgedrückt wird.

if (pegel >= 5 && pegel < 7) {

} else {

}

Für die ODER-Verknüpfung, bei der mindestens eine der Bedingungen zutreffen muss, verwendet man zwei senkrechte Striche. Dies wird beispielweise verwendet, wenn man feststellen will, ob der Bereich außerhalb der festgesetzten Grenzen liegt. Da der Pegel nicht größergleich 7 UND kleiner als 5 sein kann, wird mit ODER geprüft, ob eine der beiden Bedingungen zutrifft.

if (pegel < 5 || pegel >= 7) {

} else {

}

Der Operator in prüft, ob ein Attribut in einem Objekt vorhanden ist.

Die Schleife

Wiederholungen werden durch eine Schleife realisiert. Dabei wird die Anweisung hinter eine while-Schleife solange ausgeführt, wie deren Bedingung zutrifft. Auch können mehrere Anweisungen zu einem Block zusammengefasst werden.

while ( Bedingung ) Statement

Innerhalb einer Schleife führt der Befehl break zum sofortigen Beenden der Schleife. Trifft der Ablauf auf den Befehl continue beginnt der Ablauf sofort wieder am Schleifenkopf. Beide Befehle führen zu einer Ablaufsteuerung jenseits der Schleifenbedingung und sollten möglichst vermieden werden.

for: Die Zählschleife

Häufig wird in Programmen gezählt. Insbesondere im Zusammenhang mit Arrays wird ein ständiges Erhöhen des Index' immer wieder benötigt. Dazu wird eine Variable auf einen Startwert (meist 0) gesetzt und bei jeder Wiederholung um 1 erhöht.

Die for-Schleife ist Spezialist für diese Belange und führt diese Aufgaben in ihrem Kopf zusammen. Nach dem Befehl for folgt eine Initialisierung, eine Bedingung und eine Endanweisung, die meist ein Erhöhen der Schleifenvariable durchführt.

for (i=0; i<10; i++) {
    tudochwas(i);
}

Allgemein ausgedrückt:

for  ( Initialisierung ; Bedingung ; Endanweisung ) Statement

Mit dem Schlüsselwort in kann die Schleife auch den Inhalt eines Arrays auslesen:

let lotto = [12, 15, 21, 22, 23, 47];
for (let wert in lotto) {
    console.log(lotto[wert]);
}

Funktionen

Funktionen haben in JavaScript eine besondere Bedeutung. Insbesondere werden sie für Callbacks eingesetzt. Bei Eintreffen eines Ereignisses kann eine Variable mit dem Namen der Funktion belegt werden, die ausgeführt werden soll, wenn dieses Ereignis eintrifft.

Die Definition einer Funktion beginnt mit dem Befehl function.
Es erfolgt der Name der Funktion. Über diesen kann sie von allen denkbaren Orten aufgerufen werden.
Die nachfolgenden Klammern sind das Erkennungszeichen einer Funktion. Sie müssen beim Aufruf der Funktion angegeben werden.
Diese Klammern erhalten die Parameter der Funktion. Der Aufrufer kann Argumente in den Klammern angeben, die innerhalb der Klammern unter den Parameternamen verarbeitet werden können, die in der Definition angegeben sind.

function tudochwas(param)
{
   ...
}

Die Argumente sind nicht typisiert. Bei primitiven Typen (Boolean, Numer, String) erfolgt eine Parameterübergabe als call by value. Dagegen wird bei Objekten call by reference verwendet.

Zum Aufruf der Funktion wird einfach der Funktionsname gefolgt von einem Klammernpaar angegeben. Falls die Funktion Parameter erwartet, werden diese kommasepariert zwischen den Klammern angegeben.

tudochwas(6);

In diesem Fall wird die Variable param innerhalb der Funktion den Inhalt 6 haben.

Parametertyp feststellen

Mit dem Befehl typeof kann man ermitteln, welchen Typ ein übergebener Parameter hat.

if (typeof param == number) {

boolean	boolescher Wert
number	Zahlenwert
string	Zeichenkette
object	Objekt
function	Funktionsvariable
undefined	nicht belegter Parameter

Anzahl Parameter und Argumente

Die Parameter können aus dem Funktionsrumpf auch aus einer Variablen arguments ausgelesen werden. Auf diese Weise ist es sogar möglich, dass ein Aufrufer mehr Parameter angibt als von der Funktion deklariert wurden. Die Länge der Parameterliste kann durch length bestimmt und wie aus einem Array ausgelesen werden.

Auch der umgekehrte Fall ist möglich. Man kann eine Funktion mit weniger Argumenten aufrufen, als deren Parameter vorgeben. In diesem Fall sind die unbesetzten Parameter undefined.

if (param == undefined) {

Den Parametern können durch Zuweisung auch Defaultwerte vorgegeben werden.

function tuwas(name, alter=18, ort="Buxtehude") {

Funktions-Variablen

Funktionen können in Variablen gespeichert werden und diese später aufgerufen werden.

var funk = function rufmich() { }
// ...
funk();

Fehlerbehandlung

Fehler zur Laufzeit können mit der Befehlskombination try und catch behandelt werden. Dabei umschließt der Block des Befehls try den zu sichernden Code. Tritt in diesem Bereich ein Fehler auf, wird der Bereich sofort verlassen und in den Bereich catch gesprungen. Der Paramter enthält die Ursache der Ausnahme.

try {
    // Hier kommt der normale Code
} catch(error) {
    console.log(error.name);    // Typ der Ausnahme
    console.log(error.message); // Was ist passiert?
}

Typ der Ausnahme:

EvalError
RangeError
ReferenceError
SyntaxError
TypeError
URIError

Eine Ausnahme kann mit dem Befehl throw mutwillig ausgelöst werden.

throw new TypeError("Hier brauchen wir eine Zahl");

Wird kein spezifischer Fehler wie hier der TypeError verwendet, kann die allgemeine Elternklasse Error verwendet werden.

Asynchrone Funktionen

Normalerweise werden nacheinander stehende Anweisungen auch zeitlich streng nacheinander ausgeführt. Es gibt aber Funktionen, die zeitversetzt ausgeführt werden, während das Programm einfach weiterläuft. Solche Abläufe nennt man asynchron.

Callback

Der klassische Fall der asynchronen Programmierung ist der Callback. Er wird bei der ereignisgesteuerten Programmierung benötigt. Anstatt auf ein Ereignis aktiv zu warten, wird eine Funktion angegeben, die bitte aufgerufen werden soll, wenn das Ereignis irgendwann einmal auftreten sollte. Das ist bei fast allen Reaktionen auf Bedienelemente innerhalb eines Browsers der Fall.

Als Beispiel dient die setTimeout-Funktion. Als ersten Parameter hat sie eine Callback-Funktion und als zweiten Parameter die Anzahl von Millisekunden, die vergehen soll, bevor die Funktion aufgerufen werden soll.

setTimeout(spaeter, 10000);

function spaeter() {
    console.log("spaeter");
}

Zugriff auf die Website - DOM

Das Objekt window

JavaScript stellt das Objekt window zur Verfügung, das einem Browserfenster entspricht.

window.open('/home.t-online.de/home/willemer', '_self'): Das Dokument mit der URL des ersten Parameters wird in das Target des zweiten Parameters geladen. _self steht für den aktuellen Frame.
window.frames["meinMenu"]: Man kann auf ein Frame zugreifen. In diesem Fall wird das Target mit dem Namen meinMenu angesprochen. Man kann auch frames[0] ansprechen. Durch direkte Zuweisung kann es eine neue Seite erhalten.
windows.frames.length: liefert die Anzahl der Unterframes.
parent: parent bezeichnet den Eltern-Frame.

Das Objekt document

Wenn ein Browser eine HTML-Seite einliest, baut er aus den Tags eine interne Baumstruktur auf, die als Document Object Model (DOM) bezeichnet wird. Auf diese Datenstruktur kann auch JavaScript zugreifen und diese sogar verändern. Das Zugriffsobjekt heißt document, über dessen Attribute JavaScript die Darstellung der Website verändern kann.

Formularfelder über das HTML-Attribut NAME ansprechen

Beispielsweise können Felder in Formularen über die vergebenen Namen im HTML-Attribut name angesprochen werden. Für den inhaltlichen Zugriff von JavaScript aus wird das Objekt-Attribut value verwendet.

<form name="Adresse">
<input type=text name="Vorname">
<input type=button value=Klick onclick=domzugriff()>
<input type=text name="DomAusgabe">
</form>
<script>
function domzugriff() {
    inhalt = document.Adresse.Vorname.value;
    document.Adresse.DomAusgabe.value = inhalt;
}
</script>

Sie können mit der document-Methode getElementsByName alle Elemente einer Website suchen, die ein bestimmtes NAME-Attribut Tag haben. Der Rückgabewert ist ein Array:

let elements = document.getElementsByName("Vorname");

Zugriff über die eindeutige ID

Ein Element der Website kann aber auch über das Tag ID eindeutig markiert werden. Diese eindeutige Kennung kann mit der document-Methode getElementById ermittelt werden.

let element = document.getElementById("ort");

Das zugehörige TAG muss das Attribut ID entsprechend gesetzt haben.

<div ID="ort">
...
</div>

Zugriff über die CSS-Klasse

Mit der Methode getElementsByClassName können alle Elemente in einem Array gesammelt werden, die der gleichen CSS-Klasse angehören.

let elemets = document.getElementsByClassName("titel");
for (let i=0; i<elements.length; i++) {
   let element = elements[i];
   // ...
}

Zugriff über das Tag

Alle Elemente, die ein bestimmtes Tag haben, können über document-Methode getElementsByTagName gesucht werden. Die Methode liefert ein Array zurück. Das folgende Beispiel liefert alle TD-Tags einer Website:

let elements = document.getElementsByTagName("td");

Zugriff über die document-Arrays

Das DOM stellt Arrays für bestimmte Tags zur Verfügung. So können alle Bilder einer Website über das Array images angesprochen werden. Wie bei einem Array zu erwarten, kann man über einen numerischen Index durch das Array laufen. Sie können allerdings auch IDs vergeben und über diese auf die einzelnen Bilder zugreifen.

let erstesBild = document.images[0];
let meinBild = document.images["MeinBild"];
let breite = image.width;

images
links
forms
Jedes Element des forms-Arrays besitzt wiederum ein elements-Array für die enthaltenen Kontrollelemente.
Die Arrays layer und all sind nicht mehr gängig und sollten vermieden werden.

Element-Attribute

Das auf die eine oder andere Weise ermittelte Element hat folgende Attribute:

textContent: Der Textinhalt
nodeValue: Knoteninhalt
innerHTML: HTML-Inhalt
value
className:

Element-Methoden

createTextNode()
createElement() mit einem Tag-String als Parameter
createAttribute()
createChild()
removeChild()
insertBefore()
appendChild() mit einem Element als Parameter
replaceChild()

Ereignisse

Der Start einer JavaScript-Funktion kann durch Setzen eines SCRIPT-Tags irgendwo im HTML-Code erfolgen.

<script>
tudochwas();
</script>

Start nach Seitenaufbau: onload

In vielen Fällen möchte man auf Aktionen des Benutzers reagieren. Solche Aktionen sind aus Sicht des Programms Ereignisse. Ereignisse müssen nicht zwingend durch den Benutzer ausgelöst werden. So ist auch das Öffnen der Website ein Ereignis, das im BODY-Tag durch onload gefangen wird. Dem Ereignis onload wird die JavaScript-Funktion zugewiesen, die auf das Ereignis reagieren soll. Hier wird nach dem Aufbau der Website die Funktion hallo() aufgerufen.

<body onload="hallo()">

Mausereignisse

Der Benutzer wird häufig die Maus für seine Interaktionen verwenden. Wenn die Maus über einem Bereich ist, wird das Ereignis onMouseOver ausgelöst, verlässt sie ihn wieder, wird onMouseOut aktiv. Natürlich interessiert besonders ein Mausklick. Er löst das Ereignis onClick aus.

Wenn die Maus aktiv wird, ist auch interessant, wo sie aktiv wird. Wird eine onClick-Zuweisung dem BODY-Tag zugewiesen, wird jeder Klick in die Website gefangen. Sinnvoller ist es, den Bereich einzugrenzen. Dazu ist das Tag DIV nützlich. Der folgende DIV-Bereich reagiert auf die Aktionen der Maus.

<div onMouseOver="mouseover()" onMouseOut="mouseout()" onClick="mouseclick()">
Hier ist ein aktiver Mausbereich. Fahren Sie mit der Maus darüber!
</div>

Den Ereignissen sind Funktionen zugewiesen, die ähnlich wie die Ereignisse heißen. Das muss allerdings nicht zwingend so sein. Es kann jeder Name sein. Die entsprechenden Funktionen sehen folgendermaßen aus:

<script>
function mouseover() {
    document.getElementById("mausziel").innerHTML = "O Graus! Eine Maus!";
}
function mouseout() {
    document.getElementById("mausziel").innerHTML = "Frieden";
}
function mouseclick() {
    alert("Sie haben geklickt!");
}
</script>

Die Funktion mouseclick() erzeugt einen Dialog. Die beiden anderen Funktionen schreiben in einen bestimmten Bereich der Website. Dazu ermitteln Sie über die Funktion getElementById den Bereich, der mit der ID mausziel gekennzeichnet wurde. Für diesen Bereich wird wiederum ein DIV-Bereich verwendet, der die entsprechende ID erhält.

<div id="mausziel">
Frieden
</div>

Das Objekt, das getElementById liefert, besitzt mehrere Attribute. Über das Attribut innerHTML kann der HTML-Code im Bereich geändert werden.

Zum Ausprobieren, können Sie diesen Kasten verwenden:

Hier ist ein aktiver Mausbereich. Fahren Sie mit der Maus darüber!

Frieden

Eingabeelemente in Formularen

Im Zusammenhang mit einem Eingabe-Textfeld können diverse Ereignisse gefangen werden.

onChange trifft immer ein, wenn der Inhalt eines Eingabefeldes verändert wurde und das Eingabefeld verlassen wurde.
onFocus trifft ein, wenn der Cursor im Eingabefeld erscheint, das Eingabefeld also aktiv wird.
onBlur trifft ein, wenn ein Eingabefeld den Focus verliert, weil beispielsweise der Cursor in ein anderes Eingabefeld wechselt oder mit der Maus in den freien Bereich geklickt wurde.

Hier ist der HTML-Code für das Formular mit der Anmeldung der Funktionen für die Ereignisse onFocus, onBlur und onChange.

<form name=meinEventForm>
<input type="text" onfocus=bekommeFocus() onblur=verliereFocus()
    onChange=textwechsel() id=meinInput>
</form>
<hr>
<div id=focusausgabe>
Noch kein Focuswechsel
</div>
<hr>
<div id=inhaltwechsel>
</div>
<hr>
<div id=inhaltKey>

</div>
<hr>

Der JavaScript-Anteil zeigt eine weitere Form der Eventanmeldung in der Funktion bekommeFocus(). Dort wird über die Funktion addEventListener die Funktion keywechsel für den input-Event angemeldet. Auf diese Weise erhält die Funktion sofort eine Benachrichtigung, wenn auch nur ein Zeichen geändert wurde. Auf diese Weise ist es möglich, die Eingabe des Textfeldes noch vor dem Fokuswechsel zu untersuchen und ggf. darauf zu reagieren.

<script>
function bekommeFocus() {
    document.getElementById("focusausgabe").innerHTML="Hab' den Focus";
    // Schalte den keyListener frei
    document.getElementById("meinInput").addEventListener('input', keywechsel);
}
function verliereFocus() {
    document.getElementById("focusausgabe").innerHTML="Focus ist weg";
}
function textwechsel() {
    var inhalt = document.meinEventForm.meinInput.value;
    document.getElementById("inhaltwechsel").innerHTML=inhalt;
}
function keywechsel(e) {
    document.getElementById("inhaltKey").innerHTML=e.srcElement.value;
}
</script>

Hier kann damit experimentiert werden:

Noch kein Focuswechsel

Übersicht über die Ereignisse

Name	Wirkungsbereich	Wirkung
onLoad	BODY FRAMESET	Seite wurde geladen
onUnload	BODY FRAMESET	Seite wird verdrängt
onClick	DIV BUTTON CHECKBOX RADIO A RESET SUBMIT	Maustaste gedrückt, Taste ausgelöst
onMouseOver	DIV A TEXTAREA	Die Maus "betritt" das Feld
onMouseOut	DIV A TEXTAREA	Die Maus verläßt das Feld
onSubmit	FORM	Sumbit-Button des Formulars gedrückt
onChange	TEXT TEXTAREA SELECT PASSWORD	Eingabefeld hat den Inhalt geändert
onFocus	TEXT TEXTAREA SELECT PASSWORD	Feld ist aktiviert
onBlur	TEXT TEXTAREA SELECT PASSWORD	Feld hat den Focus verloren.