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

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介: 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种可以用来向页面种添加一个广告

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

相关文章
|
8天前
|
数据采集 前端开发 API
SurfGen爬虫:解析HTML与提取关键数据
SurfGen爬虫:解析HTML与提取关键数据
|
13天前
|
数据采集 监控 搜索推荐
深度解析淘宝商品详情API接口:解锁电商数据新维度,驱动业务增长
淘宝商品详情API接口,是淘宝开放平台为第三方开发者提供的一套用于获取淘宝、天猫等电商平台商品详细信息的应用程序接口。该接口涵盖了商品的基本信息(如标题、价格、图片)、属性参数、库存状况、销量评价、物流信息等,是电商企业实现商品管理、市场分析、营销策略制定等功能的得力助手。
|
23天前
|
搜索推荐 API 开发者
深度解析:利用商品详情 API 接口实现数据获取与应用
在电商蓬勃发展的今天,数据成为驱动业务增长的核心。商品详情API接口作为连接海量商品数据的桥梁,帮助运营者、商家和开发者获取精准的商品信息(如价格、描述、图片、评价等),优化策略、提升用户体验。通过理解API概念、工作原理及不同平台特点,掌握获取权限、构建请求、处理响应和错误的方法,可以将数据应用于商品展示、数据分析、竞品分析和个性化推荐等场景,助力电商创新与发展。未来,随着技术进步,API接口将与人工智能、大数据深度融合,带来更多变革。
62 3
|
27天前
|
存储 搜索推荐 大数据
数据大爆炸:解析大数据的起源及其对未来的启示
数据大爆炸:解析大数据的起源及其对未来的启示
92 15
数据大爆炸:解析大数据的起源及其对未来的启示
|
30天前
|
JSON 缓存 API
解析电商商品详情API接口系列,json数据示例参考
电商商品详情API接口是电商平台的重要组成部分,提供了商品的详细信息,支持用户进行商品浏览和购买决策。通过合理的API设计和优化,可以提升系统性能和用户体验。希望本文的解析和示例能够为开发者提供参考,帮助构建高效、可靠的电商系统。
39 12
|
1月前
|
存储 分布式计算 Hadoop
基于Java的Hadoop文件处理系统:高效分布式数据解析与存储
本文介绍了如何借鉴Hadoop的设计思想,使用Java实现其核心功能MapReduce,解决海量数据处理问题。通过类比图书馆管理系统,详细解释了Hadoop的两大组件:HDFS(分布式文件系统)和MapReduce(分布式计算模型)。具体实现了单词统计任务,并扩展支持CSV和JSON格式的数据解析。为了提升性能,引入了Combiner减少中间数据传输,以及自定义Partitioner解决数据倾斜问题。最后总结了Hadoop在大数据处理中的重要性,鼓励Java开发者学习Hadoop以拓展技术边界。
50 7
|
1月前
|
JSON 前端开发 搜索推荐
关于商品详情 API 接口 JSON 格式返回数据解析的示例
本文介绍商品详情API接口返回的JSON数据解析。最外层为`product`对象,包含商品基本信息(如id、name、price)、分类信息(category)、图片(images)、属性(attributes)、用户评价(reviews)、库存(stock)和卖家信息(seller)。每个字段详细描述了商品的不同方面,帮助开发者准确提取和展示数据。具体结构和字段含义需结合实际业务需求和API文档理解。
|
2月前
|
XML JSON JavaScript
HttpGet 请求的响应处理:获取和解析数据
HttpGet 请求的响应处理:获取和解析数据
|
3月前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
120 17
|
3月前
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    47
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    57
  • 推荐镜像

    更多