JavaScript编程基础 – 输出
JavaScript Programming Essentials – Output
JavaScript广泛应用于Web开发，但是它不提供任何内建的打印输出或者显示的函数。
在实际开发、学习及应用过程中，仍然需要这样的输出功能，怎么解决呢？
本文简要介绍如何显示数据到网页，也就是通过HTML输出，或者通过控制台输出的方法，供读者参考。
0. JavaScript 可选的几种显示方案
JavaScript 实际能够以以下不同方式来“显示”数据：
- 使用 window.alert() 写入警告框
- 使用 document.write() 写入 HTML 输出
- 使用 innerHTML 写入 HTML 元素
- 使用 console.log() 写入浏览器控制台
以下分别简要介绍各种显示方案及用法。
1. 使用 innerHTML
如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。
id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容，例如下面的代码：
DOCTYPE html>
<html>
<body>
<h1>The First Web Pageh1>
<p>The first paragraphp>
<p id="demo">p>
<script>
document.getElementById("demo").innerHTML = "Inner HTML Result";
script>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
Chrome浏览器显示效果如下图（检查模式）：
2. 使用 document.write()
出于测试目的，使用 document.write() 比较方便，如下方示例：
DOCTYPE html>
<html>
<body>
<h1>My First Web Pageh1>
<p>My First Paragraphp>
<script>
document.write(10 + 28);
script>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
Chrome浏览器显示结果如下图（document.write( ) 计算结果：38）：
*注意：在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML；因此，document.write() 仅用于测试，开发时需要谨慎选择。
3. 使用 window.alert()
您能够使用警告消息框来显示数据：
DOCTYPE html>
<html>
<body>
<h1>My First Web Page with Alert Dialogh1>
<p>My First Paragraphp>
<script>
window.alert(13 + 24);
script>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
Chrome浏览器运行结果如下图（加法计算结果为：37）：
4. 使用 console.log( )
在浏览器中，您可使用 console.log() 方法来显示数据。
请通过 F12 来激活浏览器控制台，并在菜单中选择“控制台”。
DOCTYPE html>
<html>
<body>
<h1>The First Web Page with Console.logh1>
<p>The First Paragraphp>
<script>
console.log(1024 + 256);
script>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
运行结果如下图（Chrome检查模式, 控制台结果：1280）：
JavaScript编程基础，将不断推出博文。敬请关注。
您的支持，我的动力！喜欢就点赞哈。?
评论记录：
回复评论：