Output (Daten-Ausgabe)

JavaScript besitzt keine eingebaute Anzeigefunktionen wie z.B. echo oder print in PHP. JavaScript kann Daten auf unterschiedlichen Wegen ausgeben.

Alert-Box

Mit der Alert-Box (MessageBox) können Daten in einem Pop-up Fenster ausgegeben werden. Alert ist eine Methode des Window-Objects kann jedoch mit, oder ohne Objektbezeichner (window) geschrieben werden. Testen sie diesen Befehl in der Konsole des aktuellen Browser.

function foo() {
  alert("Hallo Welt!"); // window.alert("Hallo Welt!")
}

foo();

Ausgabe in HTML

Der Befehl für eine Ausgabe in HTML ist document.write() . Dieser Befehl schreibt Ausgaben an der Position, wo sie notiert wurden. Wenn dieser Befehl nach dem Laden von HTML ausgeführt wird, überschreibt document.write den gesamten Inhalt. Testen sie diesen Befehl in der Browser-Konsole.

document.write("Hallo Welt!");

Ausgabe in einem HTML-Element

Der Befehl für eine Ausgabe in einem HTML-Element mit einer id ist document.getElementById(id) . Das ID-Attribut bestimmt das HTML-Element, die innerHTML-Eigenschaft bestimmt den Inhalt.

document.getElementById("myID").innerHTML = "Hallo Welt!";

Auch andere Elemente wie Namen, Tags oder Klassen bieten Methoden für den Zugriff an.

  • document.getElementById('id')
  • document.getElementsByName('name')
  • document.getElementsByClassName('class')
  • document.getElementsByTagName('tagName')

Ausgabe in der Browse-Konsole

Die Browser-Konsole eignet sich vorwiegend für Übungszwecke und wurde hier schon reichlich verwendet.

console.log("Hallo Welt!");

HTML-Events

Javascript Events oder Ereignisse steuern den Ablauf von Scripten und sind ein wichtiges Moment für die Benutzerfreundlichkeit einer Webseite. Der Besucher kann mit Events wie z.B. Mausklick das HTML-Dokument dynamisch verändern.

Wenn sie die folgenden Anweisunden testen möchten, kopieren sie den Inhalt in eine HTML-Datei innerhalb des body-Tags.

Was sind Events

JavaScript reagiert auf Ereignisse die im HTML-Dokument eintreten können. Diese Ereignisse oder Events findet man als HTML-Attribute und beginnen mit den Buchstaben on (z.B. onclick). JavaSript bietet eine Menge von Events, die wichtigsten sind hier aufgelistet:

  • onchange - ein HTML-Element wurde geändert
  • onclick - bei Mausklick
  • onmouseover - bei Mausover
  • onmouseout - bei Mausout
  • onkeydown - bei Tastatur
  • onload - nach dem Laden des Dokuments

Ein Event auslösen

Im nächsten Beispiel wird mit dem Event onklick eines Buttons das aktuelle Datum im Element mit der id "dat" zurückgegeben.

<button onclick='getElementById("dat").innerHTML=Date()'>Klick mich</button>
<p id="dat">Ich besitze die ID "dat"!</p>

Ich besitze die ID "dat"!

Einem HTML-Element können sogar mehrere Events zugeordnet werden, wie das folgende Beispiel zeigt.

<button onmouseover="this.innerHTML=Date()" 
onmouseout="this.innerHTML='Wie spät ist es?'">Wie spät ist es?</button>

Funktionsaufruf als Event

Ein Event in HTML kann auch eine benutzerdefinierte Funktion aufrufen.

<script>
function getText() {
  document.getElementById("text").innerHTML = "Hallo Welt!";
}
</script>

<button onclick='getText()'>Klick mich</button>
<p id="text">Ich besitze die ID "text"!</p>

Ich besitze die ID "text"!

HTML Event-Eigenschaften

Um den Umfang der JavaSript-Programmierung und der Event-Handlings zu erahnen, muss man sich mit dem Document Object Model beschäftigen. Das DOM (Document Object Model) ist die Schnittstelle zwischen HTML und JavaScript.
Siehe Kapitel DOM.

Eigenschaften Referenzen

Eine Referenz der HTML-Attribute für Events finden sie auf:

w3schools.com