乐趣区

JavaScript中如何实现输出

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/

退出移动版