JavaScript

Juni 2023
Natürlich kann man JavaScript nicht mit einem einzigen Beitrag erfassen. Aber wer sich in HTML und CSS bestens auskennt, für den ist folgende Reise durch JavaScript vielleicht ein geeigneter Schnelleinstieg.
Für ein ausführliches Kennlernen der Sprache (unverzichtbar, wenn man ernsthaft damit programmieren will) sind die vielen Tutorials im Internet zu empfehlen, zum Beispiel JavaScript im MDN.

Was genau wir machen wollen

Mit JavaScript kann man eine bereits geladene Webseite verändern. Sinnvollerweise notiert man die gewünschten Aktionen als Funktionen.
Man kann eine JavaScript-Funktion definieren und ausführen lassen. Dazu gibt es zwei Möglichkeiten:
  • Ausführen sofort, also während des Ladens der Webseite
  • Ausführen dann, wenn es der Anwender will, z.B. beim Anklicken eines Elements
Als Beispiel soll der Textinhalt eines div-Elements verändert werden.

Benötigter HTML- und CSS-Code

Das Beispielelement

<div id="box" class="boxClass">
  Klick mich!
</div>
Dieses Element setzen wir in eine Test-Webseite.
Wie man eine Test-Webseite aufbauen kann, wird in HTML und CSS beschrieben.

Styling des Elements per CSS

Den folgenden CSS-Code notieren wir in einem style-Element, das wir im head-Element der Seite platzieren. 
<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>
Dieser Code ist für das Funktionieren des Beispiels nicht zwingend nötig, hilft aber die Vorgänge besser erkennen zu lassen.

Platz für den JavaScript-Code

Für Tests ist es ausreichend, wenn wir ein script-Element als letztes Element in body der Test-Webseite einfügen. 
...
<body>

  ... HTML-Code der Seite ...

  <script>

    ... und hier notieren wir unseren JavaScript-Code ...

  </script> 
</body>
...
In produktiven Lösungen bringt man JavaScript-Code ausschließlich im head-Bereich unter. Das zeigt die Seite Startercode für JavaScript.

Wie JavaScript das div-Element erkennen und darauf zugreifen kann.

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.
Ausführliche Doku zu DOM findet man im MDN unter Introduction to the DOM 
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 als Referenz der Konstante myClickObjekt zugewiesen.

Eine Funktion zum Manipulieren des div-Elements

Auch das geht nur indirekt, eben über die Referenz des DOM-Knotens, in userem 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, also 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.
Die Tagnamen werden im DOM mit Großbuchstaben geführt, so wie es in den Anfangszeiten von HTML vorgesehen war.

Machen - aber nur, wenn Anwender klickt

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 ...
Das ganze Beispiel hier zum Anschauen und Ausprobieren.