JavaScript中常用的数据输出方式解析

简介: JavaScript中常用的数据输出方式解析

在js中,一般使用如下几种方式进行数据的输出:

1. 在浏览器的控制台输出

  浏览器F12打开浏览器控制台(一般前端开发人员必备浏览器为谷歌浏览器,下面就以谷歌浏览器为例对控制台尽心解析);

  1.1 Elements : 页面中的元素都在这个里面,经常用来调式页面的样式

  1.2 Network : 包含了所有的资源文件(html、css、js、图片、向后台请求的数据接口等),并告诉我们每一个文件加载完成的事件;这样我们可以针对加载时间过长的资源进行相关优化

  1.3 Sources : 包含了我们项目中的html、js、css所有的源代码,很多程序员扒一些优秀网站代码的时候就用到了它

 1.4 Resources : 当前网站本地存储的数据(cookie、localStorage、sessionStorage)

 1.5 Console : 当前页面向控制台输出的数据就在这里显示了

 1.6 Toggle device toolbar : 控制台左上角有一个手机、PC转换图标按钮,单击可以进入手机端模拟器,这里有模拟各种主流手机型号的手机尺寸的选项,也可以自己自定义添加对应的手机尺寸;我们的移动端开发就是在这个模拟器中完成的

  1.7 我们还可以利用控制台对js代码加断点进行页面bug调试

2c67c9c58eaec73670fc6ff35b4d487a.png

好了,言归正传。上面我们对控制台有了一个深刻的了解,那么怎么在浏览器的控制台进行数据的输出呢?

 console.log();

 console.info();

 console.debug();

 console.warn();//输出警告信息

 console.error();//输出错误信息

 console.dir();//输出一个对象的详细信息

 console.table();//将json数据按照表格的形式输出,这样在查看结构时能够更加的清晰直观

2.  向页面中某个元素中写入内容

element.innerHTML、element.innerTex

示例:

var  oEle = document.getElementById(''oId");   
oEle.innerHTML = "<strong>加点料,更直观!!</strong>"

上面两个个用法相同,那么它们有什么区别呢?

 1>. firefox(火狐)浏览器中不支持innerText,而innerHTML则不存在浏览器兼容性问题。

 2>  innerText只能添加文本,即使有html标签,也不能有效识别,而是当作文本写入到元素中;而innerHTML不仅可以添加文字,还可以添加html标签

 3> 一般在js项目中,开发人员统一使用innerHTML,基本上不会使用innerText

3. 在页面中弹出需要显示的内容

window.alert();  //j警告框,确保用户收到消息

window.confirm(); //确认框,返回用户操作的布尔值

window.prompt(); //提示框,根据给出的提示让用户输入信息并返回

 提示:上面三个,前面的window可以省略,直接使用alert() 、 confirm() 、 prompt()

4. 向页面中直接输出内容

 document.write();

提示:相对于上面三种数据输出方式,一般情况下不建议使用第4种;第4种可以用来向页面种添加一个广告

以上就是今天要讲的,数据输出的几种方式,你学会了吗?

相关文章
|
6天前
|
JavaScript 前端开发
Angular.js 应用中数据模式的删除操作实现
Angular.js 应用中数据模式的删除操作实现
16 0
|
6天前
|
存储 JSON 数据处理
从JSON数据到Pandas DataFrame:如何解析出所需字段
从JSON数据到Pandas DataFrame:如何解析出所需字段
19 1
|
6天前
|
JSON 前端开发 JavaScript
【JavaScript技术专栏】JavaScript异步编程:Promise、async/await解析
【4月更文挑战第30天】JavaScript中的异步编程通过Promise和async/await来解决回调地狱问题。Promise代表可能完成或拒绝的异步操作,有pending、fulfilled和rejected三种状态。它支持链式调用和Promise.all()、Promise.race()等方法。async/await是ES8引入的语法糖,允许异步代码以同步风格编写,提高可读性和可维护性。两者结合使用能更高效地处理非阻塞操作。
|
5天前
|
前端开发 JavaScript 算法
JavaScript 中实现常见数据结构:栈、队列与树
JavaScript 中实现常见数据结构:栈、队列与树
|
6天前
|
存储 JSON JavaScript
Node.js 上开发一个 HTTP 服务器,监听某个端口,接收 HTTP POST 请求并处理传入的数据
Node.js 上开发一个 HTTP 服务器,监听某个端口,接收 HTTP POST 请求并处理传入的数据
14 0
|
6天前
|
存储 缓存 Linux
xenomai内核解析--xenomai与普通linux进程之间通讯XDDP(三)--实时与非实时数据交互
本文介绍了Xenomai中的XDDP(Xenomai Distributed Data Protocol)通信机制,XDDP用于实时和非实时进程之间的数据交换。XDDP在Xenomai内核中涉及的数据结构和管理方式,以及创建XDDP通道后的实时端和非实时端连接过程。
29 0
xenomai内核解析--xenomai与普通linux进程之间通讯XDDP(三)--实时与非实时数据交互
|
6天前
|
XML 存储 开发框架
c#教你网站数据轻松解析抓取,HtmlAgilityPack解析的奇妙之处
c#教你网站数据轻松解析抓取,HtmlAgilityPack解析的奇妙之处
14 0
|
6天前
|
SQL 缓存 JavaScript
深入解析JavaScript中的模板字符串
深入解析JavaScript中的模板字符串
15 1
|
6天前
|
JSON 安全 前端开发
解析FormData格式数据:Python实践指南
解析FormData格式数据:Python实践指南
18 1
|
6天前
|
JavaScript 网络协议 数据处理
Node.js中的Buffer与Stream:深入解析与使用
【4月更文挑战第30天】本文深入解析了Node.js中的Buffer和Stream。Buffer是处理原始数据的全局对象,适用于TCP流和文件I/O,其大小在V8堆外分配。创建Buffer可通过`alloc`和`from`方法,它提供了读写、切片和转换等操作。Stream是处理流式数据的抽象接口,分为可读、可写、双工和转换四种类型,常用于处理大量数据而无需一次性加载到内存。通过监听事件和调用方法,如读取文件的可读流示例,可以实现高效的数据处理。理解和掌握Buffer及Stream能提升Node.js应用的性能。

推荐镜像

更多