JavaScript数据显示方式
声明
该文部分代码和内容节选自菜鸟教程，仅用作个人学习，特此声明
JavaScript显示数据的方式
JavaScript 没有任何打印或者输出的函数，但可以通过以下方式来输出数据
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
1、使用window.alert()
可以通过弹出警告框来显示数据
.html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用window.alert()显示数据</title>
</head>
<body>
<script>
window.alert("12*3="+(12*3));
</script>
</body>
</html>
生成页面效果
2、写入到HTML元素
使用 document.getElementById(xxx) 方法来从JavaScript访问某个id为xxx的元素，并通过 innerHTML 来获取或插入元素内容
.html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作HTML元素练习</title>
</head>
<body>
<h1>操作HTML元素练习</h1>
<p id="demo">原内容</p>
<script>
document.getElementById("demo").innerHTML="修改内容";
</script>
</body>
</html>
生成页面效果
3、写入到HTML文档
测试直接将JavaScript写入到HTML文档中
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
.html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>写到HTML文档练习</title>
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction()
{
document.write(Date());
}
</script>
</body>
</html>
生成页面效果
1.点击按钮前
2.点击按钮后
4、写入到控制台
在浏览器支持调试的前提下可以使用 console.log() 方法在浏览器中显示 JavaScript 值
可以通过在浏览器中使用 F12 来启用调试模式，也可以右击选择检查选项
在调试窗口中点击 "Console" 菜单进入控制台
实例
a = 5，b = 6 , c = a + b.
将c的值写入到浏览器的控制台
.html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>写到控制台练习</title>
</head>
<body>
<h1>写到控制台练习</h1>
<p style="color:red;font-weight:bold">
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
生成页面效果
5、一些扩展知识点
5.1 console.log()的用处
主要是方便你调式JavaScript用的, 可以在控制台看到你在页面中输出的内容。
相比alert他的优点是：
他能看到结构化的东西，如果是alert，弹出一个对象就是[object object],但是console能看到对象的内容。
console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。
console里面的内容非常丰富，你可以在控制台输入 console，然后就可看到：
console.log() 用法也可以像 C 语言一样使用变量：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>123</title>
</head>
<body>
<script>
var hello = 'hello';
var one = 1;
console.log('%s world', hello)
console.log('%d + 1 = 2', one)
</script>
</body>
</html>
5.2 关于写入方式
document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。
innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。
innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。
5.3 关于解决文档覆盖问题
解决文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖的问题
.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>解决文档覆盖问题</title>
</head>
<body>
<button onclick="winTest()">点击按钮</button>
<script>
function winTest()
{
var txt1 = "This is a new window.";
var txt2 = "This is a test.";
document.open("text/html","replace");//加上
document.writeln(txt1);
document.write(txt2);
document.close();//加上
}
</script>
</body>
</html>
生成页面效果
观察上图，按我们之前所学知识来讲，第二次使用write方法写入的
This is a test.应该会把第一次用write方法写入的This is a new window.覆盖掉才对啊，事实却并非如此，这是为什么呢？原来是因为：
close方法将关闭 open() 方法打开的文档流，并强制地显示出所有缓存的输出内容。如果使用 write() 方法动态地输出一个文档，必须记住当你这么做的时候要调用 close() 方法，以确保后边用document.write方法写入HTML的所有文档内容都能显示。document.write() 不会隐式调用 document.close() 方法的，否则例 2 中将不会有 This is a new window. 内容了
一旦调用了close()，就不应该再次调用 write()，因为这会隐式地调用 open() 来擦除当前文档并开始一个新的文档。
在载入页面后，浏览器输出流自动关闭。在此之后，比如延迟脚本 [setTimeout()] 或是 onload 执行的方法，任何一个对当前页面进行操作的 document.write()方法将打开—个新的输出流，它将清除当前页面内容(包括源文档的任何变量或值)。
