JavaScript 显示数据

JavaScript 显示数据

JavaScript 可以通过不同的方式来输出数据：

1. 使用 window.alert() 弹出警告框。
2. 使用 document.write() 方法将内容写到 HTML 文档中。
3. 使用 innerHTML 写入到 HTML 元素。
4. 使用 console.log() 写入到浏览器的控制台。

window.alert()

弹出警告框来显示数据。

代码示例：

window表示电脑，alert表示弹窗。合起来的意思就是（电脑弹窗）

运行结果：

document.write()

1. document.write是直接写入到页面的内容流。
2. 如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

代码示例：

点击按钮执行函数

document表示读取，write表示写入。合起来的意思就是将括号内的内容读取并将代码翻译出来

运行结果：

innerHTML

1. innerHTML 是DOM页面元素的一个属性，代表该元素的html内容。
2. innerHTML 可以精确到某一个具体的元素来进行更改。
3. innerHTML 很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。
4. 如需从 JavaScript 访问某个 HTML 元素，使用 document.getElementById(id) 方法。
5. 使用 (id）属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容。
6. document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
7. innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

代码示例：

inner表示更改，HTML表示页面内容。合起来的意思就是更改页面内容

这是一个即将被更改的段落

点击按钮执行函数

运行结果：

console.log()

如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。

console表示控制台，log表示页面内容。合起来的意思就是在控制台中显示日志

浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。

运行结果：

console.log()的用处

主要是方便调式javascript用的, 你可以看到你在页面中输出的内容。

相比alert他的优点是：

他能看到结构化的东西，如果是alert，弹出一个对象就是[object object],但是console能看到对象的内容。

console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。

console里面的内容非常丰富，你可以在控制台输入 console，然后就可看到：