JavaScript Ausgabe

❮ Prev Next ❯

"Wer einen neuen Weg gehen will, muss ihn selbst ebnen"
Steve Jobs

JavaScript Anzeigemöglichkeiten

JavaScript kann Daten auf unterschiedliche Weise „anzeigen“:

In ein HTML-Element schreiben, mit innerHTML.
Schreiben in die HTML-Ausgabe mit document.write().
In ein Benachrichtigungsfeld schreiben, mit window.alert().
Schreiben in die Browserkonsole mit console.log().

Benutzen innerHTML

Um auf ein HTML-Element zuzugreifen, kann JavaScript die Methode document.getElementById(id) verwenden.

Das Attribut id definiert das HTML-Element. Die Eigenschaft innerHTML definiert den HTML-Inhalt:

Beispiel

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My First Paragraph</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

Try it Yourself »

Das Ändern der innerHTML-Eigenschaft eines HTML-Elements ist eine gängige Methode zum Anzeigen von Daten in HTML.

Benutzen document.write()

Zu Testzwecken ist es bequem zu verwenden document.write():

Beispiel

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

Try it Yourself »

Wenn Sie document.write() verwenden, nachdem ein HTML-Dokument geladen wurde, wird der gesamte vorhandene HTML-Code gelöscht:

Beispiel

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<button type="button" onclick="document.write(5 + 6)">Try it</button>

</body>
</html>

Try it Yourself »

Die Methode document.write() sollte nur zum Testen verwendet werden.

Benutzen window.alert()

Sie können eine Benachrichtigungsbox verwenden, um Daten anzuzeigen:

Beispiel

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

Try it Yourself »

Sie können das Schlüsselwort window überspringen.

In JavaScript ist das Fensterobjekt das globale Gültigkeitsbereichsobjekt, das heißt, dass Variablen, Eigenschaften und Methoden standardmäßig zum Fensterobjekt gehören. Dies bedeutet auch, dass die Angabe des Schlüsselworts window optional ist:

Beispiel

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
alert(5 + 6);
</script>

</body>
</html>

Try it Yourself »

Benutzen console.log()

Zu Debugzwecken können Sie die Methode console.log() im Browser aufrufen, um Daten anzuzeigen.

Weitere Informationen zum Debuggen finden Sie in einem späteren Kapitel.

Beispiel

<!DOCTYPE html>
<html>
<body>

<script>
console.log(5 + 6);
</script>

</body>
</html>

Try it Yourself »

JavaScript Drucken

JavaScript verfügt über keine Druckobjekte oder Druckmethoden.

Sie können über JavaScript nicht auf Ausgabegeräte zugreifen.

Die einzige Ausnahme besteht darin, dass Sie die Methode window.print() im Browser aufrufen können, um den Inhalt des aktuellen Fensters zu drucken.

Beispiel

<!DOCTYPE html>
<html>
<body>

<button onclick="window.print()">Print this page</button>

</body>
</html>

Try it Yourself »