乐趣区

JavaScript中如何实现输出

jiezi

JavaScript 语言中没有类似于 print() 这样的打印或输出函数。那么 JavaScript 要如何显示数据呢？下面我们来讲一下 JavaScript 中几种用来显示数据的方式。

window.alert()

第一种是使用 window.alert() 来弹出警告框，这很简单，例如我们想要显示“欢迎来到侠课岛”，我们可以像下面这样写代码，直接在 alert() 的小括号中加上要输出的内容。

示例：

下面代码中输出的内容是字符串，所以我们加上了双引号，如果输出数字则不用加：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS_侠课岛 (9xkd.com)</title>
</head>
<body>
  <script>
    window.alert("欢迎来到侠课岛");
  </script>
</body>
</html>

浏览器中截图如下：

这样一句简单的代码就可以实现弹出一个弹出层。且 alert() 函数中除了可以直接输出内容，还可以运算，例如下面这句代码最终弹出层显示结果为 300：

window.alert(100 + 200);

浏览器中截图如下所示：

这里我们注意一下，JavaScript 代码是写在 HTML 页面中的 <script> 标签中的。或者也可以但是分离 js 代码，将 JavaScript 代码写到一个 .js 文件中，这个我们之后再讲。

document.write()

第二种方法是使用 document.write() 方法将内容写到 HTML 文档中，write() 方法内可以包含 HTML 代码。

示例：

例如我们在 HTML 页面中的 <script> 标签中，写入如下代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS_侠课岛 (9xkd.com)</title>
</head>
<body>
  <script>
    document.write('<h1> 你好，侠课岛！</h1>');
    document.write('<p> 恭喜你，登录成功。</p>');
    document.write('<div> 侠课岛是优秀的互联网工作技能在线学习网站，专注于制作大量精品短视频和图文实战教程。</div>');
  </script>
</body>
</html>

在浏览器打开这个 HTML 页面，截图如下所示：

但是有一点需要注意，document.write() 仅用于向文档输出写内容，如果文档已经加载完成，在这之后执行 document.write()，则内容会覆盖整个 HTML 页面。

示例：

例如下面这段代码，在 button 按钮上绑定了一个 coverCon() 函数，这个函数就是 <script> 标签中定义好的函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS_侠课岛 (9xkd.com)</title>
</head>
<body>
<p> 这是页面中的内容 </p>
<button onclick="coverCon()"> 点击 </button>

<script>
  function coverCon(){document.write('<p> 覆盖页面中的内容 </p>');
  }
</script>
</body>
</html>

在浏览器打开这个页面，截图如下所示：

我们点击页面中的按钮，触发按钮上绑定的 coverCon() 函数，document.write() 中的内容会覆盖整个 HTML 页面。

innerHTML

第三种方法是使用 innerHTML 操作 HTML 元素，如果想要从 JavaScript 中访问某个 HTML 元素，可以使用 document.getElementById(id) 方法。

示例：

例如我们向绑定了指定 id 选择器的元素添加内容，代码如下：

<body>
  <h2 id="insert"></h2>
  <p id= "update"> 水星仔 </p>
<script>
  document.getElementById("insert").innerHTML = "向 h2 标签中新增内容";
  document.getElementById("update").innerHTML = "修改 p 标签中的内容";
</script>
</body>

在浏览器中打开页面，截图如下所示：

从上图我们可以看到，我们成功将指定内容添加到了 HTML 元素中。

console.log()

第四种方法是使用 console.log() 将要显示的内容写入到浏览器中的控制台。

示例：

例如我们使用 console.log() 来实现在浏览器控制台显示内容：

<body>
  <h1> 今天是一个大晴天哟！</h1>
<script>
  var name = "summer";
  console.log("我的名字是", name)
</script>
</body>

浏览器中截图如下：

一般我们在项目开发过程中，会经常用到 console.log() 方法来显示数据，测试代码的准确性。

更多查看链接：https://www.9xkd.com/

退出移动版