JavaScript输出

JavaScript显示能力

JavaScript可以使用不同的方法“显示”数据

  • 写入警报框, 使用 window.alert().
  • 写入HTML输出 使用 document.write().
  • 写在HTML元素, 使用 innerHTML.
  • 写入浏览器控制台, 使用 console.log().

使用 window.alert()

可以使用警报框来显示数据:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编程字典</title>
</head>
<body>

  <h1>我的第一个Web页面</h1>
  <p>我的第一个段落.</p>

  <script>
    window.alert(5 + 6);
  </script>

</body>
</html>

让我试试

使用 document.write()

出于测试目的，使用document.write()更方便 :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编程字典</title>
</head>
<body>

  <h1>我的第一个Web页面</h1>
  <p>我的第一个段落.</p>

  <script>
    document.write(5 + 6);
  </script>

</body>
</html>

让我试试

使用document.write()后， HTML文档完全加载，将删除所有现有的HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编程字典</title>
</head>
<body>

  <h1>我的第一个Web页面</h1>
  <p>我的第一个段落.</p>

  <button type="button" onclick="document.write(5 + 6)">试试</button>

</body>
</html>

让我试试

document.write()方法只用于测试.

使用 innerHTML

访问一个HTML元素, JavaScript可以使用 document.getElementById(id) 方法.

id属性定义HTML元素. innerHTML 属性定义HTML内容:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编程字典</title>
</head>
<body>

  <h1>我的第一个Web页面</h1>
  <p>我的第一个段落.</p>

  <p id="demo"></p>

  <script>
  document.getElementById("demo").innerHTML = 5 + 6;
  </script>

</body>
</html>

让我试试

为了在HTML中"显示数据", (多数情况下) 你可以设置 innerHTML 属性.

使用 console.log()

在你的浏览器，你可以使用console.log()方法显示数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编程字典</title>
</head>
<body>

  <h1>我的第一个Web页面</h1>
  <p>我的第一个段落.</p>

  <p>
  在你的浏览器中打开调试窗口，使用F12，然后选择"Console"菜单项
  </p>
  <p>再点击运行(run).</p>

  <script>
    console.log(5 + 6);
  </script>

</body>
</html>

让我试试