JavaScript-Ausgabe

Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

JavaScript-Anzeigemöglichkeiten

JavaScript kann Daten auf unterschiedliche Weise „anzeigen“:

  • Schreiben in ein HTML-Element mit innerHTML.

  • Schreiben in die HTML-Ausgabe mit document.write().

  • Mit window.alert() in ein Warnfeld schreiben.

  • Schreiben in die Browserkonsole mit console.log().

Verwendung von 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>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My First Paragraph.</p>

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

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

</body>
</html>

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

Verwenden von document.write()

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

Beispiel

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
 <p>My first paragraph.</p>
 
<script>
document.write(5 + 6);
</script>

</body>
</html>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

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

<p>Never call document.write after the document has finished loading.
It will overwrite the whole document.</p>

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

</body>
</html>

Wenn Sie document.write() verwenden, nachdem ein HTML-Dokument geladen wurde, wird das gesamte vorhandene HTML 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>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

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

Verwenden von 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>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

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

In JavaScript ist das Fensterobjekt das globale Bereichsobjekt. Das bedeutet, 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>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Verwenden von console.log()

Zu Debugzwecken können Sie die Methode console.log() aufrufen im Browser, 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>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Activate Debugging</h2>

<p>F12 on your keyboard will activate debugging.</p>
<p>Then select "Console" in the debugger menu.</p>
<p>Then click Run again.</p>

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

</body>
</html>

JavaScript-Druck

JavaScript verfügt über kein Druckobjekt oder Druckmethoden.

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

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

Beispiel

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>The window.print() Method</h2>

<p>Click the button to print the current page.</p>

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

</body>
</html>