《JS原理、方法与实践》- HTML5简介

简介: 《JS原理、方法与实践》- HTML5简介

HTML5是近几年非常热门的话题,它提供了很多使用功能,例如:

* 本地存储

* canvas作图

* WebSocket

* 多线程

* 获取地理位置

* 富文本编辑器

* 公式编辑器

#### 本地存储

本地存储主要包含Cookie、Storage和IndexedDB数据库三种方式。

不同数据库存储上限:

Cookie: 4k

Storage: 5M(chrome),不同浏览器上限大小不同

IndexedDB: 无上限

![](https://upload-images.jianshu.io/upload_images/2789632-d048330472d30cdc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

#### canvas作图

canvas作图是通过canvas标签来完成的,但是该标签及其所对应的HTMLCanvasElement对象本身并没有太多的操作,它主要是通过getContext方法获取的环境对象进行操作的。context分为2D和3D两种,要使用哪种就将参数传入getContext来获取相应的context,但是,对于一个canvas来说,只可以作为2D或3D中的一种来使用,当第一次调用getContext方法时,其类型就确定下来了,之后不可以再使用不同的参数来获取另一种。

#### WebSocket

WebSocket是一种新的与服务端通信的方式,它是一种长连接的通信方式,也就是说连接成功后若不主动断开,则会一直保持连接状态,而不像HTTP(s)协议那样会自动断开连接,使用WebSocket可以很容易实现服务端推送相关的业务。

#### 多线程

JS中的多线程是使用Worker对象来实现的,是基于事件的模式进行处理的。这里需要注意线程之间传递的数据不是引用而是数据的副本,这样不同线程之间进行数据处理时就不会造成相互干扰,但是这并不表示就不存在线程同步的问题,线程同步问题还需要手动解决。

#### HTML5获取位置信息

HTML5中获取位置信息是通过navigator的geolocation属性对象来操作的,可以获取一次也可以连续获取,在获取位置信息前需要征得用户的同意。获取成功后会返回Position对象,其中包含经度、维度、运动速度等信息;如果获取失败,则会返回PositionError对象,其中包含获取失败的原因。如果要将获取的信息显示到地图上,则可以使用已有的地图API来实现。

#### 富文本编辑器

富文本编辑器可以直接通过contenteditable属性制作。虽然理论上可以使用任何标签来做编辑器,但是为了安全建议大家最好使用iframe,这样可以避免对页面内的其他内容造成影响。对样式的修改可以使用getSelection获取到选区,然后手工修改,也可以通过document的execCommand方法使用命令来修改。插入图片时三个不同的地址要区分清除,一个用于上传图片,一个用于在编辑器中显示图片,一个用于在文章中显示图片,后两个地址是同一个地址,如果在编辑器中可以正常显示图片而在文章中无法正常显示就要考虑这两个地址所处的环境。

#### 公式编辑器

公式编辑器主要使用的是MathML标准。这是一个独立的、基于XML的标准,其核心是各种标签和属性。编辑公式就是编辑其所包含的各种标签。

目录
相关文章
|
5月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
5月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
5月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
5月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法详解
本指南详细介绍在Linux系统中安装和管理Node.js的步骤。首先检查现有环境,包括查看当前版本和清除旧版本;接着通过NodeSource仓库安装最新版Node.js并验证安装结果。推荐使用nvm(Node Version Manager)进行多版本管理,便于切换和设置默认版本。同时,提供常见问题解决方法,如权限错误处理和全局模块迁移方案,以及版本回滚操作,确保用户能够灵活应对不同需求。
488 0
|
5月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
5月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
5月前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习
|
5月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
5月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应

热门文章

最新文章

下一篇
oss云网关配置