JavaScript数据显示方式

声明

该文部分代码和内容节选自菜鸟教程，仅用作个人学习，特此声明

链接：https://www.runoob.com/

JavaScript显示数据的方式

JavaScript 没有任何打印或者输出的函数，但可以通过以下方式来输出数据

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

1、使用window.alert()

可以通过弹出警告框来显示数据

.html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用window.alert()显示数据</title>
</head>
<body>


<script>
window.alert("12*3="+(12*3));
</script>

</body>
</html>

生成页面效果

2、写入到HTML元素

使用 document.getElementById(xxx) 方法来从JavaScript访问某个id为xxx的元素，并通过 innerHTML 来获取或插入元素内容

.html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>操作HTML元素练习</title>
</head>
<body>

<h1>操作HTML元素练习</h1>
<p id="demo">原内容</p>
<script>
document.getElementById("demo").innerHTML="修改内容";
</script>

</body>
</html>

生成页面效果

3、写入到HTML文档

测试直接将JavaScript写入到HTML文档中

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

.html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>写到HTML文档练习</title>
</head>
<body>

<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction()
{
    document.write(Date());
}
</script>

</body>
</html>

生成页面效果

1.点击按钮前

2.点击按钮后

4、写入到控制台

在浏览器支持调试的前提下可以使用 console.log() 方法在浏览器中显示 JavaScript 值

可以通过在浏览器中使用 F12 来启用调试模式，也可以右击选择检查选项

在调试窗口中点击 "Console" 菜单进入控制台

实例

a = 5，b = 6 , c = a + b.

将c的值写入到浏览器的控制台

.html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>写到控制台练习</title>
</head>
<body>

<h1>写到控制台练习</h1>
<p style="color:red;font-weight:bold">
    浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

生成页面效果

5、一些扩展知识点

5.1 console.log()的用处


主要是方便你调式JavaScript用的, 可以在控制台看到你在页面中输出的内容。

相比alert他的优点是：

他能看到结构化的东西，如果是alert，弹出一个对象就是[object object],但是console能看到对象的内容。

console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。

console里面的内容非常丰富，你可以在控制台输入 console，然后就可看到：
img
console.log() 用法也可以像 C 语言一样使用变量：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>123</title>
</head>
<body>

<script>
    var hello = 'hello';
    var one = 1;

    console.log('%s world', hello)
    console.log('%d + 1 = 2', one)
</script>


</body>
</html>

5.2 关于写入方式

document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。

innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。

innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。

5.3 关于解决文档覆盖问题

解决文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖的问题

.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解决文档覆盖问题</title>
</head>
<body>

<button onclick="winTest()">点击按钮</button>

<script>
    function winTest()
    {
      var txt1 = "This is a new window.";
      var txt2 = "This is a test.";
      document.open("text/html","replace");//加上
      document.writeln(txt1);
      document.write(txt2);
      document.close();//加上
    }
</script>


</body>
</html>

生成页面效果

观察上图，按我们之前所学知识来讲，第二次使用write方法写入的This is a test.应该会把第一次用write方法写入的This is a new window.覆盖掉才对啊，事实却并非如此，这是为什么呢？

原来是因为：

close方法将关闭 open() 方法打开的文档流，并强制地显示出所有缓存的输出内容。如果使用 write() 方法动态地输出一个文档，必须记住当你这么做的时候要调用 close() 方法，以确保后边用document.write方法写入HTML的所有文档内容都能显示。document.write() 不会隐式调用 document.close() 方法的，否则例 2 中将不会有 This is a new window. 内容了

一旦调用了close()，就不应该再次调用 write()，因为这会隐式地调用 open() 来擦除当前文档并开始一个新的文档。

在载入页面后，浏览器输出流自动关闭。在此之后，比如延迟脚本 [setTimeout()] 或是 onload 执行的方法，任何一个对当前页面进行操作的 document.write()方法将打开—个新的输出流，它将清除当前页面内容(包括源文档的任何变量或值)。

posted @   无关风月7707  阅读(1010)  评论(0)  编辑  收藏  举报
相关博文：
· JavaScript数据类型
· JavaScript数据类型转换
· JavaScript 显示数据
· JavaScript输出
· 10.13每日总结
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示