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/
网友评论