输出

JavaScript中如何实现输出免费看

window.alert()、document.write()、innerHTML、console.log()

2020-05-20侠课岛    基础入门       

前端/前端必修/JavaScript 基础知识梳理 16     0     822

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

window.alert()

第一种是使用 window.alert() 来弹出警告框,这很简单,例如我们想要显示“欢迎来到侠课岛”,我们可以像下面这样写代码,直接在 alert() 的小括号中加上要输出的内容。 我们可以将window.alert() 简写为 alert(),因为默认就是 window 调用 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() 方法来显示数据,测试代码的准确性。

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

16

本课评分:
  •     非常好
难易程度:
  •     适中的

内容目录


本文索引


|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?