JavaScript中的四种输出方式


JavaScript,调试时,希望看到数据的数据,那么有几种方式将数据输出出来呢?,下面列出四种方式…

1.弹窗

弹窗属于浏览器事件
格式为:

alert("hello world!");

结果:
在这里插入图片描述
留意:弹窗事件会暂时中断代码运行…等你操作后会继续运行…

2.输出在网页1

输出在网页1写的html语言,属于文档对象事件
格式为:

document.write("<h1>hello world!</h1>");

结果:
在这里插入图片描述

3.输出在控制台

控制台输出的内容不会在网页中显示,所以需要打开浏览器的开发者工具,快捷键F12,有的浏览器可以右键选审查元素…就长这个样子:

在这里插入图片描述
(浏览器其实也是一个IDE,可以使用它进行代码的调试…)
格式:

console.log("hello world!");

结果:
在这里插入图片描述

4.输出在网页2

这种方式需要一个标签来定位,并将数据输出在定位到的标签中…
格式:

document.getElementById("abc").innerHTML="<h1>hello world</h1>";
//选择所有标签中id为abc的元素,进行输入html语言<h1>hello world</h1>

先示范一个错误的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        document.getElementById("abc").innerHTML="<h1>hello world</h1>";
        //document.getElementById("abc").innerHTML="hello world";
        //这种方式只是单纯的文本,不会添加样式,若两个同时存在,后面的会覆盖掉前面的数据
    </script>
</head>
<body>
<p id="abc"></p>
</body>
</html>

html是不会在代码中报错的,但会在浏览器中的开发者模式中报错,上面的错误代码,在网页中会没有任何显示,但是打开开发者模式会出现如下错误:
在这里插入图片描述
结论:因为html网页加载是自上而下的,而script的标签所要操作的p元素还未被加载,就会报错…将script标签放在p标签下面…
结果:

Alt

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值