JavaScript 数据输出与调试方法详解

JavaScript 数据输出与调试方法详解

JavaScript 数据输出

JavaScript 语言本身并未提供专门的打印或输出函数。

JavaScript 数据显示

JavaScript 支持多种数据展示途径： 通过 window.alert() 弹出警告窗口。 利用 document.write() 方法将内容写入 HTML 文档。 借助 innerHTML 属性向 HTML 元素内写入内容。 使用 console.log() 将信息输出至浏览器控制台。

调用 window.alert() 你可以使用警告框来展示数据：

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

操作 HTML 元素 若需通过 JavaScript 访问特定的 HTML 元素，可调用 document.getElementById(id) 方法。 请通过 "id" 属性定位 HTML 元素，并使用 innerHTML 属性获取或设置元素内容：

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

</body>
</html>

上述 JavaScript 代码（置于 <script> 标签内）可在 Web 浏览器中运行： document.getElementById("demo") 是通过 id 属性查找 HTML 元素的 JavaScript 代码。 innerHTML = "段落已修改。" 用于修改元素的 HTML 内容 (innerHTML) 的 JavaScript 代码。 在本教程中 在大多数情况下，在本教程中，我们将使用上述方法来输出： 以下示例直接将 id="demo" 的 <p> 元素写入 HTML 文档输出： 写入 HTML 文档 出于测试目的，您可以将 JavaScript 直接编写在 HTML 文档中：

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<script>
document.write(Date());
</script>

</body>
</html>

请使用 document.write() 仅用于向文档输出写入内容。 若在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
  	document.write(Date());
}
</script>

</body>
</html>

写入控制台 console.log() 若您的浏览器支持调试功能，可使用 console.log() 方法在浏览器中显示 JavaScript 值。 在浏览器中使用 F12 键启用调试模式，并在调试窗口中点击 "Console" 菜单。

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

实例 console 截图：

程序调试是指测试、查找并减少 bug（错误）的过程。

注意此 console.log() 在 IE8 及以下版本会报错，测试后请注意注释掉。