J03 控制台的常用的输出方式

zhangliying
212 阅读3分钟

JS中常用的输出方式

  • console 控制在浏览器控制台输出的
    • 1.console.log() 控制台输出日志
    • 2.console.dir() 控制台详细输出
    • 3.console.table() 把数据以表格的形式输出在控制台
    • 4.console.time()/timeEnd() 计算某一个程序消耗的时间
    • 5.console.warn() 输出警告信息
    • ...
  • window提示框
    • 6.alert() 提示框
    • 7.confirm() 确认取消提示框
    • 8.prompt() 在confirm的基础上多加一个原因
  • 向页面指定容器中插入内容
    • 9.document.write 向页面中输入内容
    • 10.innerHTML / innerText 向页面指定容器中输入内容
    • 11.value 向页面表单元素中输入内容
    • ...

1.console.log(1);在控制台输出，特点是：输出任意数据类型的数据，控制台展示的也是对应的数据类型

 console.log(1);//=>1
 console.log({ name: "js" });//=>{name: "js"} 通过proto  object展开

2.console.dir输出一个对象或者一个值的详细信息;console.log可以一次性输出多个值，但是dir不可以

  function fun() { }
  console.log(fun, 100, 300);//=>ƒ fun() { } 100 300
  console.dir(fun);//=>ƒ fun()  可以展开

3.console.table把多维的Json数据以表格形式输出

let arr = [{
id: 1,
name: "JS"
}, {
id: 2,
name: "JQ"
}]
console.table(arr);//=>在控制台以表格形式展示（具体控制看表格）

4.计算出time/timeEnd中间所有程序执行所消耗的时间（预计时间：受到当前电脑性能的影响）

 console.time("AA");
 for(let i = 0; i < 999999; i++){}
 console.timeEnd("AA");//=> 3.782958984375ms（每台计算机结果不一样）

5.congosle.warn已警告的方式输出

  console.warn("当前操作不规范");

6.alert是浏览器窗口中弹出一个提示框，提示框中输出指定的信息

  • 需要等到alert弹出框，点击确定关闭后，后面的代码才会继续执行，（alert会阻碍主线程的渲染）
  • alert弹出的内容都会默认转换为字符串（tostring）
alert("今天大家都很帅！~~~");
console.log(100);
alert([10,20,30]);//=>数组转换为字符串的结果 "10,20,30"
alert({name:"js"});//=>普通对象转换为字符串的结果"[object object]"

7.confirm相对于alert来说，给用户提供了确定和取消两种选择

  • 创建一个变量，用来接收用户选择的结果，true点击的是确定，false点击的是取消
  let flag=confirm("今天你好好学习了么？");
  console.log(flag);//=>在点击确定时，控制台输出ture;点击取消，控制条输出false

8.prompt在confirm的基础上给用户提供书写操作的原因等信息

  • 点击的是取消，返回结果是null，点击是确定，会把用户输入原因信息返回，
 let reason=prompt("确定要删除此信息么");
 console.log(reason);

9.document.write 向页面中输入内容 和alert一样，写入的内容最后都会转换为字符串，然后再写入

<script>
   document.write("AA");
   document.write(10);
   document.write({
   name:"张三"
   });//=>"[object object]"
</script>

10.innerHTMl/innerText:向指定容器中插入内容（插入的信息也会变为字符串在插入）

  • document想要操作那个元素，就先获取到哪个元素，我们可以根据元素的ID获取到这个元素对象
  • document.getElementById;document限定在整个文档中（上下文）get获取Element元素，By通过（在整个文档中，基于元素的ID获取到这个元素）
  • 基于这两种方式会把之前容器中的内容覆盖掉，想要追加，则采用+=的方式
  • innerHTMl能够把标签文本进行识别和渲染，而innerText会把所有内容都当做的普通文本
    <html>
<style>
 #box{
    width:200px;
   height:200px;
   border:1px solid lawngreen;
 background:lightcyan;
}
</style>

 <body>
  <div id="box">
  <h1></h1>
  </div>
  <input type="text" id="userName">
  </body> 
  <script>
   let box=document.getElementById("box");
      box.innerHTML="张三";//=>覆盖原始的所有内容
      box.innerText="李四";
      box.innerHTML+="张三";//=>原始内容上继续增加
      box.innerText+="李四";
      box.innerHTML="<strong>我是重点内容</strong>";
      box.innerText="<strong>我是重点内容</strong>";
  </script>
     
</html>

    11.value 向页面表单元素中输入内容

    <input type="text" id="userName">

  //给页面中的文本框赋值    
  let userName=document.getElementById("userName");
  userName.value="我是js中插入的内容";
avatar
文章
阅读
粉丝