JavaScript
Willemers Informatik-Ecke
Sprachüberblick 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

Ein- und Ausgabe

Dialoge

JavaScript stellt ein paar Dialoge zur Verfügung:

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

OperatorWirkungBeispiel
+ 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.

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.

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.

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. Es gibt Multiplikatoren. Der Aufruf von exec über die RegExp-Instanz liefert ein Objekt zurück. Dieses Objekt hat folgende Attribute:

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.

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: 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.

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;

Element-Attribute

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

Element-Methoden

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. 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.

Links