JavaScript 入门：使用 document.write 输出内容

运行环境与前置条件

在编写任何 JavaScript 代码之前，需要确保有一个支持脚本执行的 HTML 环境。虽然可以直接在浏览器控制台测试，但标准做法是将代码嵌入 HTML 文件中。如果你尚未熟悉 HTML 基础，建议先了解 <html>、<body> 等基本结构。

完整代码示例

以下是一个包含 JavaScript 脚本的最简 HTML 页面结构。你可以将其保存为 .html 文件并在浏览器中打开。

<!DOCTYPE html>
<html>
<head>
    <title>第一个 JavaScript 示例</title>
</head>
<body>
    <!-- 开始引入 JavaScript -->
    <script type="text/javascript">
        document.write("This is my first javascript");
    </script>
    <!-- 结束引入 JavaScript -->
</body>
</html>

第1步：定义脚本类型

在 HTML 中使用 <script> 标签包裹 JavaScript 代码是传统且通用的方式。属性 type="text/javascript" 用于声明该脚本的语言类型。在现代 HTML5 标准中，该属性可以省略，因为默认即为 JavaScript，但保留它以明确意图仍具有教学意义。

第2步：执行输出操作

核心语句 document.write("...") 是本章的重点：

• 对象：document 代表当前加载的 HTML 文档对象。
• 方法：write() 用于向文档流中写入字符串。
• 结果：当浏览器解析到这一行时，会将括号内的文本直接渲染到页面上对应的位置。

第3步：结束标签闭合

使用 </script> 结束脚本块。这告诉浏览器 JavaScript 代码已完毕，接下来的内容将恢复为普通的 HTML 或文本处理。忘记闭合标签会导致后续的 HTML 被误认为脚本的一部分，从而引发错误。

关键概念解析

document.write 是最基础的 DOM 操作方式之一，它直接在文档加载过程中写入内容。这意味着如果该方法在页面完全加载后调用（例如通过按钮点击事件），它会覆盖整个文档内容。因此，在实际开发中，我们更倾向于使用 innerHTML 或现代 DOM API 来修改特定元素的内容，以避免意外覆盖。

总结

通过上述步骤，你已经成功编写并运行了第一个 JavaScript 程序。这段代码展示了脚本嵌入的基本格式以及向页面输出内容的最简途径。虽然 document.write 在现代开发中较少用于最终生产环境，但理解其工作原理对于掌握文档流和早期 JS 逻辑至关重要。

以上就是 JavaScript document.write 基础用法的详细内容，更多关于 JavaScript 入门的资料请关注本站其它相关文章！