前端开发

JavaScript 输出

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

JavaScript 输出

为了方便调试和展示程序的运行结果，JavaScript 提供了多种输出语句：

方法	描述	示例
console.log()	用于在浏览器控制台输出调试信息，常用于查找 BUG 和确认预期输出。
alert()	用于以模态对话框形式显示提示信息。
document.write()	用于直接向 HTML 文档写入内容。
innerHTML	动态修改 HTML 元素的内容或纯文本。
prompt()	弹出对话框，可接收用户输入并返回输入内容。

JavaScript 5种输出语句

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

调试是前端工程师和学习者开发过程中不可或缺的环节。如果您的浏览器支持调试功能，可以通过按 F12 键启用调试模式，并在调试窗口中点击 “Console” 标签页，即可使用控制台进行调试。

其中，console.log() 是console对象提供的一个常用方法，它可接受任意类型和数量的参数，并将它们以字符串形式输出到浏览器控制台中。该方法常用于查看变量值、跟踪程序执行流程或捕捉错误信息，方便开发者进行调试。需要注意的是，这些输出内容仅会在控制台中显示，对普通用户不可见。

✅ 以下示例展示了如何使用 console.log() 输出不同类型的数据：

实例代码运行代码

复制

<!DOCTYPE html>
<html>
<body>
    <h1>在控制台输出内容输出数据</h1>
    <p>使用 console.log() 方法，在 控制台查看 10 + 20 的计算结果</p>

    <script>
        console.log(10 + 20);
    </script>
</body>
</html>

✅ 在控制台查看输出的console.log()截图：

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

运行上述代码后，打开浏览器的开发者工具（通常按 F12 键），切换到 “Console” 标签页，可以看到输出的计算结果：30。

使用 alert() 函数弹出模态对话框

alert() 是浏览器提供的一个全局函数，用于接收一个字符串参数并将其显示在弹出式提示框中。该函数适用于向用户传递重要信息或警告，但由于其模态特性，会阻塞后续程序的执行，直至用户点击 “确定” 按钮后方可继续。

实例代码运行代码

复制

<!DOCTYPE html>
<html>
<body>
    <h1>弹出模态对话框</h1>
    <p>使用 alert() 函数弹出模态对话框，显示计算结果</p>

    <script>
        alert(10 + 20); // 弹出模态对话框，显示计算结果 30
    </script>
</body>
</html>

✅ 运行上述代码后，使用alert()方法弹出的模态对话框截图：

JavaScript Alert 弹出模态对话框

运行上述代码后，浏览器会弹出一个提示框，显示计算结果：30。

使用 document.write() 直接向 HTML 文档写入内容

document.write() 是document对象的一个方法，它接收一个字符串参数，并将其解析为 HTML 代码插入到当前文档流中。该方法适用于在页面加载过程中动态生成 HTML 内容；然而，若在页面加载完成后调用，会导致整个文档被覆盖。

实例代码运行代码

复制

<!DOCTYPE html>
<html>
<body>
    <script>
        document.write("<h1>直接向 HTML 文档写入内容</h1>"); // 写入 HTML 标题
        document.write("<p>使用 document.write() 直接向 HTML 文档写入内容</p>"); // 写入 HTML 段落
    </script>
</body>
</html>

✅ 运行上述代码后，执行的结果：

<h1>直接向 HTML 文档写入内容</h1>
<p>使用 document.write() 直接向 HTML 文档写入内容</p>

运行上述代码后，浏览器会在页面中显示一个标题和一段文本，内容分别为 “直接向 HTML 文档写入内容” 和 “使用 document.write() 直接向 HTML 文档写入内容”。

使用 innerHTML 属性将内容写入到 HTML 元素中

innerHTML 是 HTML 元素的一个属性，可用于读取或设置元素内部包含的 HTML 代码。该属性适用于动态修改指定元素的内部内容，而不会影响页面中其他现有元素的结构或样式。

实例代码运行代码

复制

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用 innerHTML 属性将内容写入到 HTML 元素中 - 开创者教程(kaicz.com)</title>
</head>
<body>
    <h1>使用 innerHTML 属性</h1>
    <p id="demo">使用 innerHTML 属性将内容写入到 HTML 元素中</p>
    <script>
        document.getElementById("demo").innerHTML = "使用 innerHTML 属性将内容写入到 HTML 元素中 - 段落已修改。"
    </script>
</body>
</html>

✅ 运行上述代码后，执行的结果：

<h1>使用 innerHTML 属性</h1>
<p id="demo">使用 innerHTML 属性将内容写入到 HTML 元素中 - 段落已修改。</p>

运行上述代码后，浏览器会在页面中显示一个标题和一段文本，内容分别为 “使用 innerHTML 属性” 和 “使用 innerHTML 属性将内容写入到 HTML 元素中 - 段落已修改。”。

使用 prompt() 弹出输入框，并返回用户输入的内容

prompt() 是浏览器提供的一个全局函数，可接收两个字符串参数：提示信息和默认输入值。

调用后会弹出一个对话框，用户可在其中输入内容。该函数适用于获取用户的简单输入，但会阻塞程序执行，直至用户点击 “确定”、“取消” 或关闭对话框。若用户点击 “确定”，则返回输入内容；若点击 “取消” 或关闭对话框，则返回 null。

实例代码运行代码

复制

<!DOCTYPE html>
<html>
<body>
    <script>
        var name = prompt("请输入您的名字", "开创者教程"); // 弹出输入框
        if (name) {
            alert("你好，" + name); // 如果用户输入了名字，弹出欢迎信息
        } else {
            alert("您还没有输入名字！"); // 如果用户没有输入名字，弹出提示信息
        }
    </script>
</body>
</html>

✅ 运行上述代码后，在控制台查看输出的 console.log() 截图：

JavaScript Prompt 对话框

运行上述代码后，浏览器会弹出一个输入框，提示用户输入名字。

用户输入名字后点击 “确定”，会弹出一个欢迎信息；若点击 “取消” 或关闭对话框，则会提示用户还没有输入名字。

JavaScript 用法 JavaScript 语法

评论区 0

发表评论

教程介绍

JavaScript 前端开发的核心技术之一，与 HTML 和 CSS 配合使用，能够为网页添加交互效果。

7 章节

21 阅读

0 评论

JavaScript 输出