Grundlagen der Programmierung mit JavaScript

1. A2 - Das erste JavaScript Programm einbinden

HTML - Code

Ausgabe im Browser

Beschreibung des HTML

In Zeile 10 des HTML steht, wie man eine JavaScript Datei angeben kann (Lädt der Browser die HTML Seite, wird die JavaScript Datei automatisch mit eingebunden).

Beachte auch die Zeile 26 - dort steht zwischen <output ...> und </output> zunächst nichts. Erst nach dem Betätigen des Buttons erscheint dort ein Text. Und dazu jetzt die Beschreibung des JavaScript Codes:

Beschreibung des JavaScript

document ist ein Objekt, getElementById() und addEventListener() sind beides Methoden bzw. Funktionen, die JavaScript schon kennt. Damit ist die Zeile auch schon fast selbst erklärt: "Hole mir aus dem Dokument das Element 'knopf' und wenn ich den drücke (click) rufe ich eine Funktion auf".

Der EventListener ist ein wichtiger Bestandteil der Sprache, der zu einem Objekt zugefügt, ab diesem Zeitpunkt auf folgende Ereignisse/Events achtet: 'click', 'mouseover' oder 'mouseout'. (Teste einmal diese Möglichkeiten)

Die Funktion 'NameMeinerFunktion', die als zweites Argument der Methode addEventListener() übergeben wird, bestimmst du selbst - es ist der Name deiner ersten Funktion.

Nach dem Aufruf, dem Klick, springt das Programm zu unserer eigenen Funktion und führt die einzige Zeile aus, die dort steht:
Dem Element mit der ID ausgabe, was unser <output ...>-Tag ist, wird der Text "Ausgabe von ..." übergeben. Dieser Text wird dann auf der HTML Seite ausgegeben.
Das hört sich kompliziert an, ist es aber nicht. Probiere es einfach mal aus.

Eine selber geschriebene Funktion hat immer einen eindeutigen, möglichst sinnvollen Namen, danach Klammern () - in denen steht später evtl. auch mal was. Danach kommen die geschweiften Klammern { ... }. Innerhalb der Klammern werden alle Aufgaben, die die Funktion machen soll, geschrieben.

Aufgabe: Erweitere das JavaScript Programm um eine weitere Methode, die bei dem Event 'mouseout', den Text wieder löscht.