JavaScript输出
JavaScript显示能力
JavaScript可以使用不同的方法“显示”数据
- 写入警报框, 使用
window.alert()
. - 写入HTML输出 使用
document.write()
. - 写在HTML元素, 使用
innerHTML
. - 写入浏览器控制台, 使用
console.log()
.
使用 window.alert()
可以使用警报框来显示数据:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>编程字典</title> </head> <body> <h1>我的第一个Web页面</h1> <p>我的第一个段落.</p> <script> window.alert(5 + 6); </script> </body> </html>
使用 document.write()
出于测试目的,使用document.write()
更方便 :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>编程字典</title> </head> <body> <h1>我的第一个Web页面</h1> <p>我的第一个段落.</p> <script> document.write(5 + 6); </script> </body> </html>
使用document.write()后, HTML文档完全加载,将删除所有现有的HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>编程字典</title> </head> <body> <h1>我的第一个Web页面</h1> <p>我的第一个段落.</p> <button type="button" onclick="document.write(5 + 6)">试试</button> </body> </html>
document.write()
方法只用于测试.
使用 innerHTML
访问一个HTML元素, JavaScript可以使用 document.getElementById(id)
方法.
id属性定义HTML元素. innerHTML 属性定义HTML内容:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>编程字典</title> </head> <body> <h1>我的第一个Web页面</h1> <p>我的第一个段落.</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = 5 + 6; </script> </body> </html>
为了在HTML中"显示数据", (多数情况下) 你可以设置 innerHTML 属性.
使用 console.log()
在你的浏览器,你可以使用console.log()
方法显示数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>编程字典</title> </head> <body> <h1>我的第一个Web页面</h1> <p>我的第一个段落.</p> <p> 在你的浏览器中打开调试窗口,使用F12,然后选择"Console"菜单项 </p> <p>再点击运行(run).</p> <script> console.log(5 + 6); </script> </body> </html>
相关推荐
nmgxzm00 2020-11-10
ifconfig 2020-10-14
hhanbj 2020-11-17
zfszhangyuan 2020-11-16
古叶峰 2020-11-16
一个智障 2020-11-15
jipengx 2020-11-12
81427005 2020-11-11
xixixi 2020-11-11
游走的豚鼠君 2020-11-10
苗疆三刀的随手记 2020-11-10
Web卓不凡 2020-11-03
小飞侠V 2020-11-02
帕尼尼 2020-10-30
爱读书的旅行者 2020-10-26
帕尼尼 2020-10-23
杏仁技术站 2020-10-23
淼寒儿 2020-10-22