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>