In JavaScript gibt es im Gegensatz zu Sprachen wie Java keine Druck- oder Ausgabemethoden. Die folgenden vier Methoden werden normalerweise zur Ausgabe von Daten verwendet.
window.alert()
um ein Warnfeld anzuzeigen.innerHTML
document.write()
console.log()
um in die Konsole des Browsers zu schreiben.Verwenden Sie sie unten.
erstellt eine neue HTML-Datei und verwendet dann VSCode, um den folgenden Code zu schreiben.
<!DOCTYPE html> <html> <Kopf> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>window.alert()</title> </head> <Körper> <p>Popup-Fensteranzeige</p> <script type="text/javascript"> window.alert("Dies ist ein Popup-Test!"); </script> </body> </html>
Öffnen Sie dann die obige Datei mit einem Browser. Beim Öffnen wird das folgende Popup-Fenster angezeigt. Nachdem Sie auf OK geklickt haben, wird das Popup-Fenster geschlossen und der Inhalt auf der Webseite angezeigt.
<!DOCTYPE html> <html> <Kopf> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>document.write()</title> </head> <Körper> <p>HTML-Dokument schreiben</p> <script type="text/javascript"> document.write(Date()); </script> </body> </html>
Nachdem Sie eine neue HTML-Datei erstellt und den obigen Inhalt geschrieben haben, wird der Browser geöffnet und die Seite zeigt den folgenden Inhalt an. Sie können sehen, dass das Schreiben der aktuellen Zeit mit document.write()
erfolgreich war. Es ist jedoch zu beachten, dass, wenn document.write()
gleichzeitig mit anderen Inhalten und vor dem Laden des Inhalts geladen wird, dieser zusammen mit anderen Inhalten angezeigt werden kann. Wenn jedoch document.write()
ausgeführt wird, nachdem der Seiteninhalt geladen wurde, werden alle zuvor geladenen Inhalte durch den geschriebenen Inhalt überschrieben.
<!DOCTYPE html> <html> <Kopf> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>document.write()</title> </head> <Körper> <p>HTML-Dokument schreiben</p> <button onclick="showDate()">Uhrzeit anzeigen</button> <script type="text/javascript"> Funktion showDate() { document.write(Date()); } </script> </body> </html>
Das Folgende ist ein Vergleich vor und nach der Ausführung von document.write()
nach dem Laden der Seite. Dies zeigt an, dass der Aufruf von document.write()
nach dem Laden der Seite den vorherigen Seiteninhalt überschreibt.
vorher und nachher
JavaScript Wenn Sie auf ein bestimmtes HTML-Element zugreifen möchten, können Sie die Methode document.getElementById(id)
verwenden und dann innerHTML
verwenden, um den Elementinhalt abzurufen oder einzufügen.
<!DOCTYPE html> <html> <Kopf> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>innerHTML</title> </head> <Körper> <p id="inner">HTML-Elemente bearbeiten</p> <button onclick="changeContext()">Klicken Sie, um den obigen Inhalt zu ändern</button> <script type="text/javascript"> Funktion changeContext() { document.getElementById("inner").innerHTML = "Geänderter Inhalt"; } </script> </body> </html>
Vor der Änderung Nach der Änderung
Um console.log()
verwenden zu können, muss unser Browser grundsätzlich das Debuggen unterstützen. Öffnen Sie anschließend mit der Tastenkombination F12
den Debugging-Modus und wechseln Sie im Debugging-Fenster zum Console
. Da ich hier Edge
verwende, wird die Konsole angezeigt. Diese Browserauswahl richtet sich hauptsächlich nach Ihren eigenen Vorlieben, Chrome wird jedoch generell empfohlen.
<!DOCTYPE html> <html> <Kopf> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>console.log</title> </head> <Körper> <p>Im Browser-Debug-Modus anzeigen</p> <script type="text/javascript"> var num1 = 11; var num2 = 10; console.log(num1 + num2); </script> </body> </html>
geht es hier um die Ausgabe in JavaScript. Obwohl es keine System.out.println()
Methode zum Drucken und Ausgeben wie in Java gibt, können die oben genannten vier Methoden grundsätzlich die Anforderungen der täglichen Entwicklung erfüllen.