A JavaScript Site

外观

输出

约 378 字大约 1 分钟

2026-08-27

JavaScript 可以通过不同的方式来输出数据：

  1. 使用 window.alert() 弹出警告框。
  2. 使用 document.write() 方法将内容写到 HTML 文档中。
  3. 使用 innerHTML 写入到 HTML 元素。
  4. 使用 console.log() 写入到浏览器的控制台。

使用 window.alert()

<!DOCTYPE html>
<html>
  <body>
    <h1>我的第一个页面</h1>
    <p>我的第一个段落。</p>

    <script>
      window.alert(2 + 8);
    </script>
  </body>
</html>

通过 window.alert() 方法，可直接在 js 执行完成后，显示结果。

在线运行！

使用 document.write()

<!DOCTYPE html>
<html>
  <body>
    <h1>我的第一个 Web 页面</h1>
    <p>我的第一个段落。</p>
    <script>
      document.write(Date());
    </script>
  </body>
</html>
在线运行！

使用 innerHTML

<!DOCTYPE html>
<html>
  <body>
    <h1>我的第一个 Web 页面</h1>

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

    <script>
      document.querySelector("#demo").innerHTML = "段落已修改。";
    </script>
  </body>
</html>

document.querySelector 是在 html 中进行一次查询。查询什么呢？查询 id="demo"，然后将其中的 html 改为 段落已修改。。

其中，我写的是 document.querySelector("#demo")，注意其中有个 #。什么是 css 选择器？

在线运行！

使用 console.log()

<!DOCTYPE html>
<html>
  <body>
    <h1>我的第一个 Web 页面</h1>
    <script>
      a = 5;
      b = 6;
      c = a + b;
      console.log(c);
    </script>
  </body>
</html>

console.log() 输出在浏览器 F12 开发人员选项的“控制台”中。

图片

在线运行！