JavaScript

Es folgt ein Beispiel, das der Selbstüberprüfung dient. Wer dieses Beispiel im Detail versteht und nachvollziehen kann, wird bestimmt mit den anderen Beiträgen klarkommen.

Es soll der Textinhalt eines div-Elements verändert werden.

Wir erstellen ein neues HTML-Dokument anhand des Grunddokuments für Beispiele und Demos.

<button onclick="location.reload()">Seite neu laden</button>

<h2>Ein JavaScript-Beispiel</h2>

<div id="box" class="boxClass">
  Klick mich!
</div>

Das ist der ganze HTML-Code, den wir brauchen. Wir setzen ihn in den HTML-Bereich unseres Grunddokuments ein.

Den folgenden CSS-Code notieren wir im style-Element, innerhalb von head. Für das Funktionieren unseres Beispiels nicht zwingend nötig, hilft aber die Vorgänge besser erkennen zu lassen.

<style>
.boxClass {
  width: min-content;    /* Breite passt sich dem Inhalt an */
  white-space: nowrap;   /* kein automatischer Zeilenumbruch */

  text-align: center;
  padding: 2pt;
  border: 1pt solid red; 
  cursor: pointer;       /* Fingertipp-Symbol */
}
</style>

Für Tests wie unser Beispiel ist es ausreichend, wenn wir den Code direkt in den Scriptbereich 2 unseres HTML-Dokuments einfügen.

Der Browser lädt eine Seite und stellt sie auf dem Bildschirm dar.

Der Inhalt der dargestellten Seite wird vom Browser als Knotenbaum nach dem Document Object Model (DOM) verwaltet. JavaScript kann auf diesen DOM-Baum zugreifen und darüber die Darstellung auf dem Bildschirm verändern.

const myClickObjekt = document.getElementById('box');

In diesem Einzeiler steckt eine ganze Menge. Die Methode getElementById erkennt den DOM-Knoten unseres div-Elements. Allerdings nur deswegen, weil wir dem div-Element ein id-Attribut gegeben haben. Und den id-Wert (im Beispiel "box") übergeben wir der Methode als Argument. So wird der zum div-Element gehörende DOM-Knoten gefunden und der Konstante myClickObjekt zugewiesen.

Auch das geht nur indirekt, eben über die Referenz des DOM-Knotens, in unserem Beispiel myClickObjekt

Die folgende Funktion bewirkt, das der Inhalt des div-Elements verändert wird.

function schreibeText() {
  myClickObjekt.innerHTML = 'Ich bin ein ' + myClickObjekt.nodeName + '-Element';
}

Der Eigenschaft innerHTML von myClickObjekt entspricht dem Inhalt des div-Elements. Die Funktion weist dieser Eigenschaft eine Zeichenkette zu, in dem Fall einen neuen Text.

Die Eigenschaft myClickObjekt.nodeName enthält den Tagnamen unseres Elements, also div. Wenn wir die Funktion ausführen, müsste also so etwas wie Ich bin ein div-Element herauskommen. Notieren wir also als Nächstes den Aufruf unserer Funktion.

schreibeText();

Wird die Seite im Browser geladen, wird unser JavaScript-Code augenblicklich ausgeführt. Das div-Element erhält den neuen Text sofort, und der heißt: Ich bin ein DIV-Element.

Der ganze JavaScript-Code:

// Zugriff auf das div-Element anhand des id-Wertes
const myClickObjekt = document.getElementById('box');


// Text in das div-Element schreiben
function schreibeText() {
  myClickObjekt.innerHTML = 'Ich bin ein ' + myClickObjekt.nodeName + '-Element';
}

// Funktion direkt aufrufen
schreibeText();

Es fällt auf, dass DIV mit Großbuchstaben angezeigt wird. Tagnamen werden im DOM intern mit Großbuchstaben geführt, so wie es in den Anfangszeiten von HTML vorgesehen war. Beim Codieren jedoch ist Kleinschreibweise inzwischen gängige Praxis.

Zuerst kommentieren wir den direkten Funktionsaufruf schreibeText(); aus oder entfernen ihn.

Dafür müssen wir einen sogenannten Event auslösen lassen, wenn der Anwender auf unser Element klickt. Es steht ja schon der Text "Klick mich!" im div-Element.

Ziel ist also: wenn der Anwender auf das Element klickt, soll ein Event ausgelöst werden. Dieser wiederum ist in der Lage, unsere Funktion zum Ändern des Textes aufzurufen.

Wir heften das Auslösen eines Events mithilfe der Methode addEventListener an das Knotenobjekt unseres Elements.

myClickObjekt.addEventListener('click', schreibeText);

Das erste Argument ist der Event-Typ, hier 'click', womit ein sogenannter Klick-Event definiert ist. Im zweiten Argument steht der Name eines Event-Handlers - das ist nichts anderes als der Name einer Funktion, die der Event ausführen soll. Und die Funktion schreibeText haben wir ja schon programmiert.

Tja, und nun sollte eigentlich alles funktionieren ...

Letzter Stand unseres JavaScripts:

// Zugriff auf das div-Element anhand des id-Wertes
const myClickObjekt = document.getElementById('box');


// Text in das div-Element schreiben
function schreibeText() {
  myClickObjekt.innerHTML = 'Ich bin ein ' + myClickObjekt.nodeName + '-Element';
}

// Funktion direkt aufrufen
// schreibeText(); // nur zum Testen der Funktion, sonst auskommentieren

// Klick-Event-Listener an das Element heften
myClickObjekt.addEventListener('click', schreibeText, false);