JavaScript - Dynamik und Interaktion in die Webseite bringen

Javascript setzt da ein, wo Dynamik und Interaktion innerhalb einer Webseite verlangt wird. Denn nur Javascript ist in allen gängigen Browsern implementiert und besitzt Methoden die das oder die Browserfenster und auch die Elemente des HTML-Dokuments direkt manipulieren können ohne das oder die Dokument(e) neu laden zu müssen.
Ich werde hier aus Platzgründen nicht auf Programmiersprachen-Grundlagen eingehen (wie Syntax, Datentypen, Operatoren,..), die in allen Programmiersprachen ähnlich definiert sind, sondern die Grundidee dieser Skriptsprache erläutern und auf die wichtigsten Einsatzgebiete eingehen. Wer die Sprache grundlegend neu lernen möchte, dem sei z.B. das kompakte und anschauliche Einsteiger-Tutorial von Coding Project empfohlen: "JavaScript – Tutorial, Tipps und Tricks"

HTML-Integration:

JavaScript-Code wird im normalen HTML-Code eingebunden und auf dem Client (Browser) ausgeführt. Funktionen und Anweisungen werden entweder innerhalb des "script"-Tags definiert:

Oder in einer externen "*.js"-Datei, auf die im <head>-Bereich einer HTML-Seite verwiesen werden kann:

Funktionsdefinitionen, die nicht sofort ausgeführt werden sollen, und Anweisungen, die gleich nach dem Laden des Dokuments ausgeführt werden sollen, platziert man am Besten im <head>-Bereich oder in einer externen Datei. Einzelne Anweisungen können aber auch an x-beliebiger Stelle innerhalb des <body> definiert werden.

Objektmodell:

Der Browser übernimmt die Rolle des Interpreters für JavaSkripte. Neben dieser Aufgabe bietet der Browser Objekte mit Eigenschaften und Methoden an, auf die per JavaScript zugegriffen werden kann um Informationen herauszufiltern oder Elemente zu verändern. Die Summe der Objekte, die ein Browser anbietet, wird als Objektmodell bezeichnet. Die folgende Grafik stellt eine stark vereinfachte Struktur eines hierarchischen Objektmodells, so wie es bei allen aktuellen Browsern wiederzufinden ist, dar:

window: Das Objekt "window" steht für das Browserfenster. Es ist für alle Elemente im Fenster das hierarchisch übergeordnete Objekt, also auch für das Dokument.
document: Dieses Objekt bezieht sich auf das im aktuellen Browserfenster platzierte Dokument. Das von der W3C definierte "Document Object Model" (DOM) setzt hier ein um alle Webseiten-Elemente eindeutig adressierbar zu machen. Damit lassen sich alle HTML-Elemente als Unterobjekte von "document" ansprechen.
location: Das Objekt "location" repräsentiert die aktuelle URL des Browserfensters. Mit der Eigenschaft href kann man ausserdem auf andere Adressen weiterverweisen.
history: Das "history"-Objekt repräsentiert die History des Browsers, also die zuvor besuchten Seiten.
navigator: Das vom Hierarchiebaum separate "navigator"-Objekt dient dazu, den Namen und weitere Informationen des verwendeten Browsers heraus zu finden.

Die Adressierung eines Objekts erfolgt über eine Punktsyntax im Stile von "Objekt.Unterobjekt.Unterunterobjekt...".

Zugriff auf Webseiten-Elemente - DOM-Methoden:

Damit kann man HTML-Elemente auslesen, verändern und erstellen. Die wichtigsten document.Methode():

getElementById("ID-Name"): Eindeutiges Adressieren eines HTML-Elementes über dessen ID.
querySelector("CSS-Selektor(en)"): Damit wird das erste Element zurückgegeben auf das der Selektor passt.
querySelectorAll("CSS-Selektor(en)"): Damit wird eine Liste aller Elemente zurückgegeben auf die der Selektor passt. Und diese können alle z.B. über die eigene Methode forEach() angesprochen werden.
createElement("Element-Name"): Damit wird ein neues HTML-Element des entsprechenden Typs erstellt.

Eine CSS-Eigenschaftsänderung wird mit "style" eingeleitet: z.B. "document.getElementById('ID-Name').style.fontWeight='Neuer Wert'" (allfällige Bindestriche werden gestrichen und der Buchstabe nach dem Bindestrich wird gross geschrieben - font-weight wird zu fontWeight).
Andere Attribute können direkt adressiert werden, z.B. der Pfad zu einem Bild: "document.getElementsByTagName('img')[2].src='Pfad zu neuem Bild'" (Das dritte Bild im Dokument wird ausgetauscht)

Element-Überwachung und Reaktion auf Ereignisse (Event-Handling):

JavaScript ermöglicht insbesondere die Interaktion mit dem Benutzer, also die Programmierung von sog. Event-Handler, welche Aenderungen an Webseiten-Elementen aufgrund von Ereignissen, wie Benutzeraktionen, ankommende Daten aus dem Netzwerk oder Änderungen am DOM, vollziehen können. Dazu werden EventListener folgendermassen definiert:

document.addEventListener("DOMContentLoaded", function () {
  Zu_überwachendes_Element.addEventListener ("Ereignistyp", Funktion_bei_Ereignis);

  function Funktion_bei_Ereignis () {
    ...auszuführende Befehle nach Eintreten des Ereignisses...;
  }
  ...allenfalls weitere Eventlistener definieren...
});

Zunächst wird über "DOMContentLoaded" gewartet bis alle DOM-Elemente geladen wurden (ausser externe Ressourcen, wie Bilder, die müssen noch nicht geladen sein), worauf der/die gewünschte(n) Ereignisüberwacher (EventListener) greift/greifen.

Wichtigste Ereignistypen (Events):

click: Tritt ein, wenn der Anwender das Element anklickt.
mousedown und touchstart: Tritt ein, wenn der Anwender das Element mit der Maus erfasst (also draufklickt und gedrückt bleibt) resp. mit dem Finger berührt (bei Touchscreens).
mouseup und touchend: Tritt ein, wenn der Anwender das Element mit der Maus resp. Finger nach mousedown resp. touchstart wieder loslässt.
submit: Tritt ein, wenn der Anwender ein Formular absendet (auf das <form>-Element definierbar, z.B. um zusätzliche Infos oder Rückfragen einzublenden).
load: Tritt automatisch ein, wenn das Element geladen wurde. Auf das Objekt "window" angewendet (also window.addEventListener("load",...)), müssen zur Ereignisauslösung alle Webseiten-Elemente geladen sein, also auch die externen Ressourcen (Bilder,...).

Eine komplette Liste mit Beschreibungen aller möglichen Events: SELFHTML/JavaScript/DOM/Event.