JavaScript 输出 概述
JavaScript基础 2022-04-21 11:34:33小码哥的IT人生shichen
JavaScript 不提供任何内建的打印或显示函数。
JavaScript 显示方案
JavaScript 能够以不同方式“显示”数据：
- 使用
window.alert()写入警告框 - 使用
document.write()写入 HTML 输出 - 使用
innerHTML写入 HTML 元素 - 使用
console.log()写入浏览器控制台
使用 innerHTML
如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。
id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容：
核心代码：
document.getElementById("demo").innerHTML = 5 + 6;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
运行结果：
11
提示：更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。
使用 document.write()
出于测试目的，使用 document.write() 比较方便：
核心代码：
document.write(5 + 6);
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
运行结果：
我的第一张网页 我的第一个段落。 11
注意：在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML ：
核心代码：
<h1>我的第一张网页</h1> <p>我的第一个段落</p> <button onclick="document.write(5 + 6)">试一试</button>
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<button onclick="document.write(5 + 6)">试一试</button>
</body>
</html>
运行结果（点击【试一试】按钮，输出）：
11
提示：document.write() 方法仅用于测试。
使用 window.alert()
您能够使用警告框来显示数据：
核心代码：
window.alert(5 + 6);
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
运行结果（弹出alert提示框，显示）：
11
使用 console.log()
在浏览器中，您可使用 console.log() 方法来显示数据。
请通过 F12 来激活浏览器控制台，并在菜单中选择“控制台”。
核心代码：
console.log(5 + 6);
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>
运行结果（控制台显示运行结果）：
11
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
相关阅读
- node.js实例：使用 crypto 模块获取apk文件 md5 值
- node.js实例：使用 adbkit-apkreader 模块获取apk文件包
- node.js实例：使用 xpath-html 模块基于XPath模式获取ht
- node.js实例：使用pinyin-pro模块实现中文转拼音首字母
- node.js实例：axios模块根据URL获取网页源码
- node.js实例：使用crypto进行加密【MD5、SHA1、HMAC、AE
- JSTL fn:trim() 函数
- JSTL fn:toUpperCase() 函数
- JSTL fn:toLowerCase() 函数
- JSTL fn:substringBefore() 函数
