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

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

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

相关文章
|
1月前
|
消息中间件 存储 缓存
十万订单每秒热点数据架构优化实践深度解析
【11月更文挑战第20天】随着互联网技术的飞速发展,电子商务平台在高峰时段需要处理海量订单,这对系统的性能、稳定性和扩展性提出了极高的要求。尤其是在“双十一”、“618”等大型促销活动中,每秒需要处理数万甚至数十万笔订单,这对系统的热点数据处理能力构成了严峻挑战。本文将深入探讨如何优化架构以应对每秒十万订单级别的热点数据处理,从历史背景、功能点、业务场景、底层原理以及使用Java模拟示例等多个维度进行剖析。
53 8
|
29天前
|
数据采集 自然语言处理 搜索推荐
基于qwen2.5的长文本解析、数据预测与趋势分析、代码生成能力赋能esg报告分析
Qwen2.5是一款强大的生成式预训练语言模型,擅长自然语言理解和生成,支持长文本解析、数据预测、代码生成等复杂任务。Qwen-Long作为其变体,专为长上下文场景优化,适用于大型文档处理、知识图谱构建等。Qwen2.5在ESG报告解析、多Agent协作、数学模型生成等方面表现出色,提供灵活且高效的解决方案。
136 49
|
18天前
|
XML JSON JavaScript
HttpGet 请求的响应处理:获取和解析数据
HttpGet 请求的响应处理:获取和解析数据
|
28天前
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。
|
1月前
|
存储 分布式计算 Java
存算分离与计算向数据移动:深度解析与Java实现
【11月更文挑战第10天】随着大数据时代的到来,数据量的激增给传统的数据处理架构带来了巨大的挑战。传统的“存算一体”架构,即计算资源与存储资源紧密耦合,在处理海量数据时逐渐显露出其局限性。为了应对这些挑战,存算分离(Disaggregated Storage and Compute Architecture)和计算向数据移动(Compute Moves to Data)两种架构应运而生,成为大数据处理领域的热门技术。
57 2
|
1月前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
1月前
|
JavaScript API 开发工具
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
113 1
|
25天前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
54 0
|
29天前
|
数据采集 存储 自然语言处理
基于Qwen2.5的大规模ESG数据解析与趋势分析多Agent系统设计
2022年中国上市企业ESG报告数据集,涵盖制造、能源、金融、科技等行业,通过Qwen2.5大模型实现报告自动收集、解析、清洗及可视化生成,支持单/多Agent场景,大幅提升ESG数据分析效率与自动化水平。
102 0
|
1月前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
45 0

推荐镜像

更多