Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript. In JavaScript werden 4 Methoden zum Ausgeben von Daten verwendet Ich werde Ihnen ausführlich vorgestellt und hoffe, dass es Ihnen hilfreich sein wird.
[Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend]
Vorwort
In JavaScript gibt es im Gegensatz zu Sprachen wie Java keine Druck- oder Ausgabemethoden. Das Folgende Zur Datenausgabe werden üblicherweise 4 Methoden verwendet.
- Verwenden Sie
window.alert(), um das Warnfeld anzuzeigen
window.alert() 用于弹出警告框- 使用
document.write() 将内容写入到 HTML 文档中
- 使用
innerHTML 写入到 HTML 元素
- 使用
console.log() 写入到浏览器的控制台
以下分别使用它们来展示一个实例。
window.alert()
新建一个 HTML 文件，然后用 VSCode 写入如下代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>window.alert()</title>
</head>
<body>
<p>弹窗显示</p>
<script type="text/javascript">
window.alert("这是一条弹窗测试！");
</script>
</body>
</html>Nach dem Login kopieren
接着用浏览器打开上述文件，打开时就会显示如下弹窗，点击确定后弹窗关闭，然后在网页中显示内容。
document.write()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>document.write()</title>
</head>
<body>
<p>写入 HTML 文档</p>
<script type="text/javascript">
document.write(Date());
</script>
</body>
</html>Nach dem Login kopieren
新建 HTML 文件并写入上述内容后，浏览器打开，页面会显示如下内容，可以看到用 document.write() 写入当前时间是成功的。但是需要注意的是，如果 document.write() 是和其他内容同时在内容加载完之前加载，则可以和其他内容一起显示。但如果等页面内容已经完成加载后执行 document.write()，那么之前页面加载完的内容都将被写入的内容所覆盖。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>document.write()</title>
</head>
<body>
<p>写入 HTML 文档</p>
<button onclick="showDate()">展示时间</button>
<script type="text/javascript">
function showDate() {
document.write(Date());
}
</script>
</body>
</html>Nach dem Login kopieren
以下则是等页面加载完成之后，执行 document.write() 前后对比，说明等页面加载完成后调用 document.write() 将覆盖之前的页面内容。
前后
innerHTML
JavaScript 如果要访问某一个 HTML 元素，此时可以使用 document.getElementById(id) 方法，然后就可以利用 innerHTML 来获取或插入元素内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>innerHTML</title>
</head>
<body>
<p id="inner">操纵 HTML 元素</p>
<button onclick="changeContext()">点击修改上述内容</button>
<script type="text/javascript">
function changeContext() {
document.getElementById("inner").innerHTML = "修改后的内容";
}
</script>
</body>
</html>Nach dem Login kopieren
修改前修改后
console.log()
要使用 console.log() 方法，需要我们的浏览器支持调试，一般推荐使用 Chrome。然后使用 F12 快捷键打开调试模式，在调试窗口中切换到 Console 菜单。我这里因为使用的是 Edge，所以显示的是控制台，这个主要根据自己的喜好进行浏览器的选择，但是一般更加推荐 Chrome。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>console.log</title>
</head>
<body>
<p>浏览器调试模式查看</p>
<script type="text/javascript">
var num1 = 11;
var num2 = 10;
console.log(num1 + num2);
</script>
</body>
</html>Nach dem Login kopieren
总结
以上就是关于 JavaScript 中输出的有关内容了，虽然不像 Java 那样有类似 System.out.println()Verwenden Sie document.write(), um den Inhalt in das HTML-Dokument zu schreiben li> >
Verwenden Sie
innerHTML, um in das HTML-Element zu schreiben
Verwenden Sie console.log(), um in die Browserkonsole zu schreiben Sie werden im Folgenden als Beispiel verwendet. window.alert()
Erstellen Sie eine neue HTML-Datei und schreiben Sie dann mit VSCode den folgenden Code. 🎜rrreee🎜 Öffnen Sie dann die obige Datei mit einem Browser. Beim Öffnen wird das folgende Popup-Fenster angezeigt. Klicken Sie auf „OK“, um das Popup-Fenster zu schließen und dann den Inhalt auf der Webseite anzuzeigen. 🎜
🎜🎜document.write()🎜rrreee🎜Nachdem Sie eine neue HTML-Datei erstellt und den oben genannten Inhalt geschrieben haben, wird der Browser geöffnet und die Seite zeigt den folgenden Inhalt an. Sie können diesen document.write()sehen > wird verwendet, um die aktuelle Zeit erfolgreich zu schreiben. Es ist jedoch zu beachten, dass, wenn document.write() gleichzeitig mit anderen Inhalten geladen wird, bevor der Inhalt 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. 🎜
🎜rrreee🎜Das Folgende ist ein Vergleich vor und nach der Ausführung von document.write() nach dem Laden der Seite. Es zeigt, dass nach dem Laden der Seite document.write() aufgerufen wird. überschreibt den Inhalt der vorherigen Seite. 🎜🎜Vorher und Nachher🎜
🎜
🎜🎜innerHTML🎜🎜JavaScript Wenn Sie auf ein bestimmtes HTML-Element zugreifen möchten, können Sie die Methode document.getElementById(id) verwenden und anschließend innerHTML, um Elementinhalte abzurufen oder einzufügen. 🎜rrreee🎜Vor der Änderung Nach der Änderung🎜
🎜
🎜🎜console.log()🎜🎜Um die Methode console.log() verwenden zu können, muss unser Browser das Debuggen unterstützen. Es wird generell empfohlen, Chrome zu verwenden. Verwenden Sie dann die Tastenkombination F12, um den Debugging-Modus zu öffnen, und wechseln Sie im Debugging-Fenster zum Menü Konsole. Da ich hier Edge verwende, wird die Auswahl des Browsers hauptsächlich von Ihren eigenen Vorlieben abhängt, Chrome wird jedoch generell empfohlen. 🎜rrreee
🎜🎜Zusammenfassung🎜🎜Oben geht es um die Ausgabe in JavaScript. Es gibt zwar keine ähnliche System.out.println()-Methode wie Java zum Drucken und Ausgeben, aber Sie können die oben genannten 4 verwenden im Grunde den Bedürfnissen der täglichen Entwicklung gerecht werden. 🎜🎜【Verwandte Empfehlungen: 🎜Javascript-Video-Tutorial🎜, 🎜Web-Frontend🎜】🎜
Das obige ist der detaillierte Inhalt vonBeispielcode beschreibt die verschiedenen Möglichkeiten der Datenausgabe in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
