JavaScript 生成输出
在本教程中，您将学习如何在 JavaScript 中生成输出。
在 JavaScript 中生成输出
在某些情况下，您可能需要从 JavaScript 代码生成输出。 例如，您可能希望查看变量的值，或向浏览器控制台写入消息以帮助您调试正在运行的 JavaScript 代码中的问题，等等。
在 JavaScript 中有几种不同的方式来生成输出，包括将输出写入浏览器窗口或浏览器控制台、在对话框中显示输出、将输出写入 HTML 元素等。我们将更深入地了解 在以下部分中逐一查看。
将输出写入浏览器控制台
您可以使用 console.log() 方法轻松地输出消息或将数据写入浏览器控制台。 这是一种用于生成详细输出的简单但非常强大的方法。 这是一个例子：
// 打印简单的短信
console.log("Hello World!"); // Prints: Hello World!
// 打印变量值
var x = 10;
var y = 20;
var sum = x + y;
console.log(sum); // Prints: 30提示：要访问网络浏览器的控制台，首先按键盘上的 F12 键打开开发者工具，然后单击控制台选项卡。 它看起来类似于 此处的屏幕截图。
在警报对话框中显示输出
您还可以使用警报对话框向用户显示消息或输出数据。 使用 alert() 方法创建一个警告对话框。 这是一个例子：
// 显示简单的文本消息
alert("Hello World!"); // Prints: Hello World!
// 显示变量值
var x = 10;
var y = 20;
var sum = x + y;
alert(sum); // 输出: 30将输出写入浏览器窗口
您可以使用 document.write() 方法仅在当前文档被解析时将内容写入当前文档。 这是一个例子：
// 打印简单的短信
document.write("Hello World!"); // 打印 : Hello World!
// 打印变量值
var x = 10;
var y = 20;
var sum = x + y;
document.write(sum); // Prints: 30如果在页面加载后使用 document.write() 方法方法，它将覆盖该文档中的所有现有内容。 查看以下示例：
<h1>这是一个标题</h1>
<p>这是一段文字。</p>
<button type="button" onclick="document.write('Hello World!')">Click Me</button>在 HTML 元素中插入输出
您还可以使用元素的 innerHTML 属性在 HTML 元素中写入或插入输出。 但是，在首先写入输出之前，我们需要使用诸如 getElementById() 之类的方法来 选择元素，如下例所示：
<p id="greet"></p>
<p id="result"></p>
<script>
// 在元素内写入文本字符串
document.getElementById("greet").innerHTML = "Hello World!";
// 在元素内写入变量值
var x = 10;
var y = 20;
var sum = x + y;
document.getElementById("result").innerHTML = sum;
</script>您将在 JavaScript DOM 操作 一章中详细了解如何操作 HTML 元素。
Advertisements