JavaScript -Ausgabe
JavaScript-Anzeigemöglichkeiten
JavaScript kann Daten auf verschiedene Arten „darstellen“:
- Schreiben in ein HTML-Element mit
innerHTML. - Schreiben in die HTML-Ausgabe mit
document.write(). - Schreiben in ein Alert-Feld mit
window.alert(). - Schreiben in die Browserkonsole mit
console.log().
Verwenden von innerHTML
Um auf ein HTML-Element zuzugreifen, kann JavaScript die document.getElementById(id)Methode verwenden.
Das idAttribut definiert das HTML-Element. Die innerHTML Eigenschaft 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>
Das Ändern der innerHTML-Eigenschaft eines HTML-Elements ist eine gängige Methode, um Daten in HTML anzuzeigen.
Verwendung von 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>
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>
Die Methode document.write() sollte nur zum Testen verwendet werden.
Verwendung von window.alert()
Sie können ein Alert-Feld 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>
windowSie können das Schlüsselwort überspringen .
In JavaScript ist das Fensterobjekt das Objekt mit globalem Gültigkeitsbereich, das heißt, dass Variablen, Eigenschaften und Methoden standardmäßig zum Fensterobjekt gehören. Das bedeutet auch, dass die Angabe des windowSchlüsselworts 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>
Verwenden von console.log()
Zu Debugging-Zwecken können Sie die console.log()Methode im Browser aufrufen, um Daten anzuzeigen.
In einem späteren Kapitel erfahren Sie mehr über das Debuggen.
Beispiel
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
JavaScript-Druck
JavaScript hat kein Druckobjekt oder keine Druckmethoden.
Sie können nicht über JavaScript auf Ausgabegeräte zugreifen.
Die einzige Ausnahme ist, dass Sie die Methode im Browser aufrufen window.print()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>