JS中常用的三大类输出方式
一、console 控制在浏览器控制台输出的
1、console.log()
- console.log()在控制台输出，
- 特点：输出任意数据类型的数据,控制台展示的也是对应的数据类型
console.log('aaa');
console.log({name:"liling"});
在控制台输出为：
2、console.dir()
- console.dir()输出一个对象或者一个值的详细信息。
let arr = { name: '云朵', age: 20 }
console.dir(arr);
在控制台输出为：
- 与console.log()的区别：console.log()可以一次性输出多个值，但是console.dir()不行,一次只能输出一个值。
function func(){}
console.log(func,100,200);
console.dir(func);
在控台输出为：
可以看到console.dir()输出一个对象或者一个值的详细信息，并且一次只能输出一个值。
3、console.table()
- console.table() 是把多维的JSCON数据以表格形式输出。
let arr=[{id:1,name:'yunduo'},
{id:2,name:'云朵'}];
console.table(arr);
在控制台输出为：
4、console.time()/timeEnd()
- 计算出time和timeEnd中间所有程序执行所消耗的时间(预估时间：受到当前电脑性能的影响)。
console.time('AA');
for(let i = 0;i < 99999;i++){}
console.timeEnd('AA');
在控制台输出为：
5、console.warn()
- console.warn()以警告的方式输出。
console.warn('当前操作不规范!');
在控制台输出为：
二、window弹出提示框
window弹出提示框在浏览器窗口中弹出一个提示框,提示框中输出指定的信息，
1、alert() 提示框
- 需要等到alert弹出框，点击确定关闭后，后面的代码才会继续执行(alert/confirm/prompt会阻碍主线程的渲染)。
- alert弹出的内容都会默认转换为字符串。
alert('大家好!');
console.log(100);
alert([10,20,30]); //->数组转换为字符串的结果 "10,20,30"
alert({name:'云朵'}); //->普通对象转换为字符串的结果 "[object Object]"
点击确定后，在控制台输出100，
数组转换为字符串：
普通对象转换为字符串：
2、confirm() 确认取消提示框
- confirm相对于alert来说，给用户提供了确定和取消两种选择。
- 可以创建一个变量，用来接收用户选择的结果，点击确定返回true,点击取消返回flase。
let flag = confirm('今天上课了吗？');
console.log(flag);
点击确定，在控制台输出true,
点击取消，在控制台输出flase,
3、prompt() 在confirm基础上多加一个原因
- prompt在confirm的基础上给用户提供书写操作的原因等信息。
- 创建一个变量reason,点击的是取消,reason返回结果是null,点击确定，reason返回用户输入的原因等信息。
let reason = prompt('确定要删除此信息吗？');
console.log(reason);
输入123，点击确定，输出为123.
点击取消，输出为null.
三、向页面指定容器中插入内容
1、 document.write 向页面中输入内容
- 把内容写到页面当中，和alert一样，写入的内容最后都会转换为字符串，然后再写入。
document.write('AA');
document.write(10);
document.write({name:'云朵'});//若要写入的内容是一个对象则写入页面的内容为 AA10[object Object]
结果为：
2、 innerHTML 向页面指定容器中输入内容
- innerHTML ：向指定容器中插入内容，插入的信息也会变为字符串再插入。
- innerHTML：会把之前容器中的内容给覆盖掉，想要追加，则采用+=的方式。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
border: 1px solid lightcoral;
background-color: lightblue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
box.innerHTML = "彩色的";
box.innerText = "云朵";//=>覆盖原始的所有内容
box.innerHTML += "彩色的";
box.innerText += "云朵"; //=>在原始内容上继续增加
</script>
</body>
</html>
结果：
3、innerText 向页面指定容器中输入内容
innerText和inner HTML有相同的特点：
- 向指定容器中插入内容，插入的信息也会变为字符串再插入。
- 会把之前容器中的内容给覆盖掉，想要追加，则采用+=的方式。
innerText与innerHTML唯一的区别是：
innerText把所有内容都当作普通的文本，而innerHTML能够把标签文本进行识别和渲染。
box.innerText = "<strong>我是重点内容</strong>";
box.innerHTML = "<strong>我是重点内容</strong>";
4、 value 向页面表单元素中输入内容
- 向页面的文本框赋值。
<input type="text" id = "userName">
<script>
let userName = document.getElementById('userName');
userName.Value = "大家加油！";
</script>
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！