【乔二参】JavaScript 输出详解-CSDN博客

本文链接：https://blog.csdn.net/2302_79483741/article/details/140058776

https://gitee.com/qercan/software-sharing

非常感谢您的支持！您的点赞、关注和评论是我创作的动力。我会继续努力，提供高质量内容，如有任何建议，请随时与我联系。

定义

在JavaScript中，输出通常指的是将数据或信息显示在用户可见的地方，如浏览器的控制台、HTML页面中的某个元素或弹窗等。

用途

输出的主要用途包括：

调试：在开发过程中，使用console.log()等函数在浏览器控制台输出变量或对象的值，以便开发者查看和调试代码。
显示信息：通过修改HTML元素的内容或样式，将信息显示在网页上。
用户交互：通过弹窗（如alert()）或模态框（modals）等方式，向用户显示重要信息或获取用户输入。
覆盖页面：document.write() 是一个 JavaScript 方法，用于将 HTML 表达式或 JavaScript 代码直接写入到 HTML 文档中。这个方法会覆盖调用它的位置之前的所有 HTML 内容。

基本语法

JavaScript中有几种常见的输出方式：

使用console.log()在控制台输出

console.log("Hello, World!"); // 在浏览器控制台显示"Hello, World!"

修改HTML元素的内容

首先，你需要通过document.getElementById()、document.querySelector()等方法选择HTML元素，然后使用.textContent或.innerHTML属性修改其内容。

document.getElementById("myElement").textContent = "新的内容"; // 修改ID为myElement的元素的文本内容

使用alert()显示弹窗

alert("这是一个弹窗！"); // 显示一个包含"这是一个弹窗！"的弹窗

使用document.write覆盖页面

document.write("Hello, World!")

常见示例

控制台输出示例

<!DOCTYPE html>
<html>
<body>

<h2>控制台输出示例</h2>

<button onclick="outputToConsole()">点击我!</button>

<script>
function outputToConsole() {
  console.log("你点击了按钮！");
}
</script>

</body>
</html>

在这个示例中，当点击按钮时，会在浏览器的控制台输出一条消息。

修改HTML元素内容示例

<!DOCTYPE html>
<html>
<body>

<h2 id="greeting">欢迎</h2>

<button onclick="changeGreeting()">点击我改变问候语!</button>

<script>
function changeGreeting() {
  document.getElementById("greeting").textContent = "你好，世界!";
}
</script>

</body>
</html>

在这个示例中，当点击按钮时，会改变ID为greeting的<h2>元素的文本内容。

弹窗示例

<!DOCTYPE html>
<html>
<body>

<button onclick="showAlert()">点击我显示弹窗!</button>

<script>
function showAlert() {
  alert("你好，欢迎来到我的网站！");
}
</script>

</body>
</html>

在这个示例中，当点击按钮时，会显示一个包含问候语的弹窗。

document.write()示例

<!DOCTYPE html>  
<html>  
<body>  
  
<h2>document.write() 示例</h2>  
  
<script>  
document.write("Hello, World!");  
</script>  
  
</body>  
</html>