JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
window.alert()
弹出警告框来显示数据。
代码示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h1>window表示电脑，alert表示弹窗。合起来的意思就是（电脑弹窗）</h1> </body> </html> <script> window.alert(5 + 6); </script>
运行结果：
document.write()
- document.write是直接写入到页面的内容流。
- 如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
代码示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <button οnclick="myFunction()">点击按钮执行函数</button> <!-- 点击按钮执行函数"myFunction() --> <!-- onclick单击按钮事件 --> <h2> document表示读取，write表示写入。合起来的意思就是将括号内的内容读取并将代码翻译出来 </h2> </body> </html> <script> function myFunction() { document.write(Date()); } // Date()日期时间，将当前时间转换为国际标准时间 </script>
运行结果：
innerHTML
- innerHTML 是DOM页面元素的一个属性，代表该元素的html内容。
- innerHTML 可以精确到某一个具体的元素来进行更改。
- innerHTML 很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。
- 如需从 JavaScript 访问某个 HTML 元素，使用 document.getElementById(id) 方法。
- 使用 (id）属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容。
- document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
- innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
代码示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h3>inner表示更改，HTML表示页面内容。合起来的意思就是更改页面内容</h3> <p id="demo">这是一个即将被更改的段落</p> <button οnclick="myFunction()">点击按钮执行函数</button> <!-- 点击按钮执行函数"myFunction() --> <!-- onclick单击按钮事件 --> </body> </html> <script> function myFunction() { document.getElementById("demo").innerHTML = "段落已修改。"; // 获取ID为("demo")的节点。 } </script>
运行结果：
console.log()
如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h3> console表示控制台，log表示页面内容。合起来的意思就是在控制台中显示日志 </h3> <p> 浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。 </p> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html>
运行结果：
console.log()的用处
主要是方便调式javascript用的, 你可以看到你在页面中输出的内容。
相比alert他的优点是：
他能看到结构化的东西，如果是alert，弹出一个对象就是[object object],但是console能看到对象的内容。
console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。
console里面的内容非常丰富，你可以在控制台输入 console，然后就可看到：
2200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
