JS输出—document.write()和console.log()
上篇我们介绍了
l 使用 window.alert() 弹出警告框。
l 使用 innerHTML 写入到 HTML 元素。
本篇我们介绍
l 使用 document.write() 方法将内容写到 HTML 文档中。
l 使用 console.log() 写入到浏览器的控制台。
写到HTML文档document.write()
当进行测试或原型开发时，可以将 JavaScript 直接嵌入到 HTML 文档中。这样可以更方便地进行一些简单的操作和交互。
<!DOCTYPE html>
<html>
<head>
<title>使用 document.write() dotcpp方法的示例</title>
</head>
<body>
<script>
// 输出标题
document.write("<h1>这是一个dotcpp标题</h1>");
// 输出段落
var para = document.createElement("p");
para.innerHTML = "这是一个dotcpp段落。";
document.write(para.outerHTML);
// 输出链接
var link = document.createElement("a");
link.href = " https://www.dotcpp.com/ ";
link.innerHTML = "这是一个链接";
document.write(link.outerHTML);
</script>
</body>
</html>
(运行结果)
使用 document.write() 可以向文档写入内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
（点击前)
（点击后）
在上述代码中，我们直接在 <script>标签中编写了 JavaScript 代码，并且可以直接操作 HTML 元素。这种方式适用于一些简单的操作和测试，但对于复杂的应用程序，通常会将 JavaScript 和 HTML 分离，使用外部的 JavaScript 文件来管理和组织代码。
需要注意的是，将代码写在 HTML 文档中会使代码的可读性和维护性降低，且无法重复使用。因此，在实际开发中，推荐将 JavaScript 代码与 HTML 分离，使用外部的 JavaScript 文件进行管理。
写到控制台 console.log()
如果您的浏览器支持调试功能，可以使用 console.log()方法在浏览器的控制台中显示 JavaScript 的值和调试信息。
以下是如何在浏览器中启用调试模式，并使用控制台打印信息的步骤：
1. 打开您的网页或应用程序。
2. 按下 F12 键以启用浏览器的开发者工具（也可以通过右键点击页面并选择 "检查" 或 "审查元素" 进入开发者工具）。
3. 在开发者工具窗口中，点击顶部菜单栏中的 "Console"（控制台）选项卡。
现在，您可以在控制台中输入 JavaScript 代码并运行它。使用 console.log() 方法来输出信息，例如：
console.log("Hello, world!"); // 输出字符串
console.log(123); // 输出数字
console.log(true); // 输出布尔值实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.dotcpp.com</title> </head> <body> <h1>我的第一个 Web 页面</h1> <p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html>
（调出控制台）
这样会将信息打印到控制台中，您可以在其中查看输出结果。
（控制台结果）
使用 console.log() 方法非常有助于在开发过程中进行调试和输出调试信息，以便查看变量的值、验证代码逻辑等。
请注意，调试信息不应该在生产环境中暴露给用户，因此在部署和发布应用程序时，请确保删除或注释掉所有的 console.log()语句。
以上就是有关JS输出的全部内容，更多请继续阅读以下章节。
本文固定URL：https://www.dotcpp.com/course/1247