上一章JavaScript教程请查看:JS使用变量
在本教程中,你将学习如何用JavaScript生成输出。
用JavaScript生成输出在某些情况下,可能需要从JavaScript代码生成输出。例如,你可能想要查看变量的值,或者向浏览器控制台编写一条消息来帮助你调试正在运行的JavaScript代码中的问题,等等。
在JavaScript中有几种不同的生成输出的方法,包括将输出写入浏览器窗口或浏览器控制台、在对话框中显示输出、将输出写入HTML元素等。在下面的小节中,我们将更仔细地研究这些问题。
将输出写入浏览器控制台可以使用console.log()方法轻松地输出消息或将数据写入浏览器控制台,这是一种生成详细输出的简单但非常强大的方法,这里有一个例子:
// 打印文本消息
console.log("Hello World!");
// 打印: Hello World!// 打印变量值
var x = 10;
var y = 20;
var sum = x + y;
console.log(sum);
// 打印: 30
提示:要访问web浏览器的控制台,首先按键盘上的F12键打开开发人员工具,然后单击控制台选项卡,它看起来有点像这里的截图。
在alert对话框中显示输出你还可以使用alert对话框向用户显示消息或输出数据,使用alert()方法创建一个警告对话框。下面是一个例子:
// 显示简单文本消息
alert("Hello World!");
// 输出: 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);
// 打印: 30
如果在页面加载后使用document.write()方法,它将覆盖该文档中所有现有内容。看看下面的例子:
<
h1>这是一个标题g<
/h1>
<
p>这是一个文本段落<
/p><
button type="button" onclick="document.write('Hello World!')">点击<
/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>
【JS生成输出 – JavaScript教程】在JavaScript DOM操作一章中,我们将详细了解如何操作HTML元素。
推荐阅读
- JS数据类型 – JavaScript教程
- JS使用变量 – JavaScript教程
- JS基本语法 – JavaScript教程
- 开始使用JS编程 – JavaScript教程
- JS编程入门介绍 – JavaScript教程
- 在chromev8中的JavaScript事件循环分析
- 学习ReactJS之前必须了解的5大技能
- 在Java中使用FileStreams复制文件
- JavaScript中的if-else语句编程实例