7.5.2 Weitere einfache Beispiele

Es gibt sehr viele Möglichkeiten mit JavaScript. Hier zwei weitere Beispiele, die nur einen ganz kleinen Einblick geben, was noch so möglich ist.

Aktuelles Datum und Uhrzeit anzeigen

Hier zeigen wir das aktuelle Datum und die Uhrzeit automatisch auf der Seite an und verwendet dafür das Date()-Objekt.

1
2
3
4
5
<p>Aktuelles Datum und Uhrzeit: <span id="currentDateTime"></span></p>
<script>
  document.getElementById("currentDateTime").textContent = 
    new Date().toLocaleString();
</script>

Mehr zum Date()-Objekt bei MDN.


Benutzerinteraktion mit Eingabefeld

Lassen Sie den Benutzer einen Text eingeben, und zeigen Sie die Eingabe sofort auf der Seite an. Dies machen wir mit dem addEventListener(), einem Bereich des EventTarget-Interface, der ein zentraler Bestandteil des Event-Systems in JavaScript ist.

1
2
3
4
5
6
7
<input type="text" id="userInput" placeholder="Gib etwas ein">
<p>Deine Eingabe: <span id="displayInput"></span></p>
<script>
  document.getElementById("userInput").addEventListener("input", function() {
    document.getElementById("displayInput").textContent = this.value;
  });
</script>

Beispiel: Benutzerinteraktion mit Eingabefeld

Mehr zum EventTarget-Interface bei MDN.

Diese Beispiele zeigen, wie wir JavaScript nutzen können, um dynamische Inhalte und interaktive Features direkt auf einer Webseite darzustellen.