JavaScript生成输出

作者：坚果

公众号："大前端之旅"

华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。

在本文中，您将学习如何在 JavaScript 中生成输出。

在 JavaScript 中生成输出

在某些情况下，您可能需要从 JavaScript 代码生成输出。例如，您可能希望查看变量的值，或向浏览器控制台写入消息以帮助您调试正在运行的 JavaScript 代码中的问题，等等。

在 JavaScript 中有几种不同的生成输出的方法，包括将输出写入浏览器窗口或浏览器控制台、在对话框中显示输出、将输出写入 HTML 元素等。我们将在下面仔细研究每一种部分。

将输出写入浏览器控制台

您可以使用该console.log()方法轻松输出消息或将数据写入浏览器控制台。这是一种生成详细输出的简单但非常强大的方法。下面是一个例子：

例子

// Printing a simple text message
console.log("Hello World!"); // Prints: Hello World!
​
// Printing a variable value 
var x = 2021;
var y = 20;
var sum = x + y;
console.log(sum); // Prints: 2041

提示：要访问 Web 浏览器的控制台，请先按F12键盘上的键打开开发人员工具，然后单击控制台选项卡。它看起来像

在警告对话框中显示输出

您还可以使用警告对话框向用户显示消息或输出数据。使用该alert()方法创建警报对话框。这是一个例子：

例子

// Displaying a simple text message
alert("Hello World!"); // Outputs: Hello World!
​
// Displaying a variable value 
var x = 10;
var y = 20;
var sum = x + y;
alert(sum); // Outputs: 30

将输出写入浏览器窗口

document.write()只有在解析当前文档时，您才能使用该方法将内容写入当前文档。下面是一个例子：

例子

// Printing a simple text message
document.write("Hello World!"); // Prints: Hello World!
​
// Printing a variable value 
var x = 10;
var y = 20;
var sum = x + y;
document.write(sum); // Prints: 30

如果document.write()在页面加载后使用method 方法，它将覆盖该文档中的所有现有内容。查看以下示例：

例子

<h1>This is a heading</h1>
<p>This is a paragraph of text.</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>
// Writing text string inside an element
document.getElementById("greet").innerHTML = "Hello World!";
​
// Writing a variable value inside an element
var x = 10;
var y = 20;
var sum = x + y;
document.getElementById("result").innerHTML = sum;
</script>